import { fireEvent, screen, within } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import type { OrderRef, VisualOrder } from "../../api/types";
import { DEPARTMENTS, makeMe, renderApp } from "../../test/auth";
import { callsTo, mockFetch } from "../../test/fetchMock";
import { makeProject, makeUnit } from "../../test/packets";

const ORDERS: VisualOrder[] = [
  {
    cust_order_id: "CO-100",
    status: "F",
    customer_name: "Test Co",
    customer_po_ref: "PO-1",
    order_date: "2026-09-01",
    desired_ship_date: "2026-12-01",
    promise_date: null,
  },
  {
    cust_order_id: "CO-101",
    status: "F",
    customer_name: "Test Co",
    customer_po_ref: "PO-2",
    order_date: "2026-09-15",
    desired_ship_date: null,
    promise_date: "2026-12-20",
  },
];

const REF: OrderRef = { ...ORDERS[0]!, via: "project_open", chosen_at: "2026-10-16T08:00:00Z" };

describe("ProjectPage orders", () => {
  it("lists the VISUAL orders, marks the one in use, and pins another with a reason", async () => {
    const project = makeProject({ units: [makeUnit()], orders: ORDERS, order_ref: REF, order_pin: null });
    const fetch = mockFetch({
      "/api/auth/me": { body: makeMe() },
      "/api/departments": { body: DEPARTMENTS },
      "/api/projects/7": { body: project },
      "PATCH /api/projects/7": { body: { ...project, order_pin: "CO-101", version: 2 } },
    });
    renderApp("/clerical/projects/7");
    const table = await screen.findByRole("table", { name: "Orders in VISUAL" });
    expect(screen.getByText("first open order", { exact: false })).toBeInTheDocument();
    expect(within(table).getByText("used by the feed")).toBeInTheDocument();
    fireEvent.click(within(table).getByRole("button", { name: "Pin order CO-101" }));
    const ask = await screen.findByRole("dialog", { name: "Pin order CO-101" });
    fireEvent.change(within(ask).getByLabelText("Reason"), { target: { value: "Second order covers this unit" } });
    fireEvent.click(within(ask).getByRole("button", { name: "Pin" }));
    expect(await screen.findByText("Order CO-101 pinned")).toBeInTheDocument();
    expect(callsTo(fetch, "PATCH", "/api/projects/7")).toEqual([
      { set: { order_pin: "CO-101", order_pin_reason: "Second order covers this unit" }, base: { order_pin: null } },
    ]);
  });

  it("shows no orders section for a project without VISUAL orders", async () => {
    mockFetch({
      "/api/auth/me": { body: makeMe() },
      "/api/departments": { body: DEPARTMENTS },
      "/api/projects/7": { body: makeProject({ units: [makeUnit()] }) },
    });
    renderApp("/clerical/projects/7");
    await screen.findByRole("heading", { name: "Units" });
    expect(screen.queryByRole("heading", { name: "Orders in VISUAL" })).not.toBeInTheDocument();
  });
});