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

const CARDS = [
  makeCard({ id: 1, flag: "Made by hand - check it and send it on" }),
  makeCard({ id: 2, unit: { id: 12, number: "L999002" }, op: "FIT-UP" }),
  makeCard({ id: 3, status: "warehouse", holder: "Warehouse" }),
  makeCard({ id: 4, status: "in_progress" }),
  makeCard({ id: 5, status: "complete", routed_to: "databook", unit: { id: 13, number: "L999003" } }),
  makeCard({ id: 6, status: "complete", routed_to: "databook", vclosed: { at: "2026-10-15T10:00:00Z", by: null }, unit: { id: 14, number: "L999004" } }),
  makeCard({ id: 7, status: "filed", unit: { id: 15, number: "L999005" } }),
  makeCard({ id: 8, status: "in_progress", co_pending: true, source_kind: "visual", unit: { id: 16, number: "L999006" } }),
];

const OVERVIEW = {
  status: { paused: false, next_run_at: "2026-10-16T08:03:00Z", worker: { at: "2026-10-16T07:59:50Z", build: "1.0", running: [], stale: false } },
  last_run: {
    id: 42,
    job: "visual-feed",
    trigger: "schedule",
    started_at: "2026-10-16T07:58:00Z",
    finished_at: "2026-10-16T07:58:20Z",
    status: "ok",
    counts: { new_drafts: 4, drafts_updated: 2, cos_opened: 1 },
    errors: [],
  },
  runs: [
    {
      id: 42,
      job: "visual-feed",
      trigger: "schedule",
      started_at: "2026-10-16T07:58:00Z",
      finished_at: "2026-10-16T07:58:20Z",
      status: "ok",
      counts: { new_drafts: 4, drafts_updated: 2, cos_opened: 1 },
      errors: [],
    },
    {
      id: 41,
      job: "visual-feed",
      trigger: "request",
      started_at: "2026-10-16T07:50:00Z",
      finished_at: "2026-10-16T07:50:30Z",
      status: "degraded",
      counts: {},
      errors: ["orders read failed"],
    },
  ],
  drawing_runs: [
    { id: 90, job: "drawing-lookup", trigger: "chain", started_at: "2026-10-16T07:58:21Z", finished_at: null, status: "ok", counts: { attached: 3 }, errors: [] },
  ],
  ignored: [
    { id: 5, wo_base: "L900099", lot: "1", split: "0", sub: "0", rel: "2026-09-01", project: "L900", unit_number: "L900001", res: "WELD-PART", dwg: "D-1", pulled_in_at: null },
  ],
  unmapped: [{ resource: "NEWRES", rows: 3 }],
  projects_without_names: [{ id: 70, number: "L900", units: 2, packets: 4 }],
  golive_date: "2026-10-01",
  departments: [],
};

function base() {
  return {
    "/api/auth/me": { body: makeMe() },
    "/api/departments": { body: DEPARTMENTS },
    "/api/packets": { body: { packets: CARDS } },
    "/api/projects": { body: [makeProject()] },
    "/api/feed/overview": { body: OVERVIEW },
  };
}

function column(title: string): HTMLElement {
  return screen.getByRole("heading", { name: new RegExp(`^${title}`) }).closest("section") as HTMLElement;
}

describe("ClericalHome", () => {
  it("renders the boards and the numbers from the list answer", async () => {
    mockFetch(base());
    renderApp("/clerical");
    expect(await screen.findByRole("heading", { name: "Clerical" })).toBeInTheDocument();
    await screen.findByRole("heading", { name: /^Flagged/ });

    expect(screen.getByLabelText("Flagged: 1")).toHaveClass("kpi", "hot");
    expect(screen.getByLabelText("With warehouse: 1")).toBeInTheDocument();
    expect(screen.getByLabelText("In the shop: 2")).toBeInTheDocument();
    expect(screen.getByLabelText("Ready to close: 1")).toHaveClass("hot");
    expect(screen.getByLabelText("Changes to approve: 1")).toHaveClass("hot");

    const cos = column("Changes to approve");
    expect(within(cos).getByText("L999006 · WELD-PART")).toBeInTheDocument();
    expect(within(cos).getByText("Change from VISUAL to approve")).toBeInTheDocument();
    const flagged = column("Flagged");
    expect(within(flagged).getByText("L999001 · WELD-PART")).toBeInTheDocument();
    expect(within(flagged).getByText(/Made by hand/)).toBeInTheDocument();
    expect(within(column("Going to the warehouse")).getByText("L999002 · FIT-UP")).toBeInTheDocument();
    expect(within(column("Ready to close")).getByText("L999003 · WELD-PART")).toBeInTheDocument();
    expect(within(column("Ready for data book")).getByText("L999004 · WELD-PART")).toBeInTheDocument();
    const filed = column("Filed");
    expect(within(filed).getByText("L999005 · WELD-PART")).toBeInTheDocument();
    expect(within(filed).getByText("Filed in data book")).toHaveClass("pill", "st-filed");

    // The list view holds the same packets.
    fireEvent.click(screen.getByRole("button", { name: "List" }));
    const table = await screen.findByRole("table", { name: "Jobs" });
    expect(within(table).getAllByRole("row")).toHaveLength(1 + 6);
  });

  it("the picker loads the units after a project is chosen", async () => {
    const fetch = mockFetch({
      ...base(),
      "/api/units": { body: [makeUnit(), makeUnit({ id: 12, number: "L999002", lot: "002" })] },
    });
    renderApp("/clerical");
    const bar = await screen.findByRole("region", { name: "Find jobs" });
    expect(callsTo(fetch, "GET", "/api/units")).toHaveLength(0);
    fireEvent.click(await within(bar).findByRole("button", { name: /L999/ }));

    const unit = await within(bar).findByLabelText("Unit");
    await within(unit).findByRole("option", { name: "L999002" });
    const urls = fetch.mock.calls.map(([u]) => String(u));
    expect(urls).toContain("/api/units?project_id=7");
    // Choosing the project narrows the boards.
    await waitFor(() => expect(urls.concat(fetch.mock.calls.map(([u]) => String(u)))).toContain("/api/packets?limit=500&project_id=7"));

    fireEvent.change(unit, { target: { value: "12" } });
    await waitFor(() => expect(fetch.mock.calls.map(([u]) => String(u))).toContain("/api/packets?limit=500&unit_id=12"));
  });

  it("the new project sheet posts and then opens Add units", async () => {
    const fetch = mockFetch({
      ...base(),
      "POST /api/projects": { status: 201, body: makeProject({ id: 9, number: "L998", name: "New one", units: 0 }) },
      "POST /api/projects/9/units": { status: 201, body: [makeUnit({ id: 21, project_id: 9, number: "L998001" })] },
      "/api/projects/9": { body: makeProject({ id: 9, number: "L998", name: "New one", units: [makeUnit({ id: 21, project_id: 9, number: "L998001" })] }) },
    });
    renderApp("/clerical");
    fireEvent.click(await screen.findByRole("button", { name: "New project" }));
    const sheet = await screen.findByRole("dialog", { name: "New project" });
    fireEvent.change(within(sheet).getByLabelText("Project number"), { target: { value: "l998" } });
    fireEvent.change(within(sheet).getByLabelText("Project name"), { target: { value: "New one" } });
    fireEvent.click(within(sheet).getByRole("button", { name: "Create project" }));

    const add = await screen.findByRole("dialog", { name: "Add units" });
    expect(callsTo(fetch, "POST", "/api/projects")).toEqual([{ number: "L998", name: "New one", customer: "", po: "", due: null, notes: "" }]);
    expect(within(add).getByLabelText("Lot")).toHaveValue("001");

    // Several units: a preview of the numbers.
    fireEvent.click(within(add).getByRole("button", { name: "Several units" }));
    fireEvent.change(within(add).getByLabelText("How many"), { target: { value: "3" } });
    expect(within(add).getByText("Numbers: L998001, L998002, L998003")).toBeInTheDocument();
    fireEvent.click(within(add).getByRole("button", { name: "Add" }));

    expect(await screen.findByRole("heading", { name: "L998 · New one" })).toBeInTheDocument();
    expect(callsTo(fetch, "POST", "/api/projects/9/units")).toEqual([{ lots: ["001", "002", "003"], name: "", due: null, notes: "" }]);
  });

  it("the From VISUAL panel shows the status and the runs, and Run now posts a request", async () => {
    const fetch = mockFetch({ ...base(), "POST /api/feed/run": { body: { requested: true, pending: 1 } } });
    renderApp("/clerical");
    const status = await screen.findByTestId("feed-status");
    expect(status).toHaveTextContent(/^On · next run .* · last run .*: 4 new, 2 updated, 1 change order$/);
    const runs = screen.getByRole("table", { name: "Last feed runs" });
    const rows = within(runs).getAllByRole("row");
    expect(rows).toHaveLength(3);
    expect(within(rows[1] as HTMLElement).getByText("OK")).toHaveClass("pill", "st-ok");
    // The chained drawing run after run 42 attached 3 drawings.
    expect(within(rows[1] as HTMLElement).getAllByRole("cell")[6]).toHaveTextContent("3");
    expect(within(rows[2] as HTMLElement).getByText("orders read failed")).toBeInTheDocument();
    expect(screen.getByText("NEWRES")).toBeInTheDocument();
    expect(screen.getByText(/IT assigns them on the Admin page/)).toBeInTheDocument();
    expect(screen.getByRole("link", { name: "L900" })).toHaveAttribute("href", "/clerical/projects/70");

    fireEvent.click(screen.getByRole("button", { name: "Run now" }));
    expect(await screen.findByText("Run requested. The boards update when it finishes.")).toBeInTheDocument();
    expect(callsTo(fetch, "POST", "/api/feed/run")).toEqual([{ job: "visual-feed" }]);
  });

  it("shows Worker not running and Paused from the overview", async () => {
    mockFetch({ ...base(), "/api/feed/overview": { body: { ...OVERVIEW, status: { ...OVERVIEW.status, worker: { ...OVERVIEW.status.worker, stale: true } } } } });
    renderApp("/clerical");
    expect(await screen.findByTestId("feed-status")).toHaveTextContent(/^Worker not running/);
  });

  it("Pull in asks a reason and posts it", async () => {
    const fetch = mockFetch({ ...base(), "POST /api/feed/ignored/5/pull-in": { body: { ...OVERVIEW.ignored[0], pulled_in_at: "2026-10-16T08:00:00Z" } } });
    renderApp("/clerical");
    fireEvent.click(await screen.findByRole("button", { name: "Pull in L900099/1/0/0" }));
    const sheet = await screen.findByRole("dialog", { name: "Pull in work order" });
    fireEvent.change(within(sheet).getByLabelText("Reason"), { target: { value: "Customer wants it here" } });
    fireEvent.click(within(sheet).getByRole("button", { name: "Pull in" }));
    expect(await screen.findByText("L900099/1/0/0 pulled in. It comes through on the next run.")).toBeInTheDocument();
    expect(callsTo(fetch, "POST", "/api/feed/ignored/5/pull-in")).toEqual([{ reason: "Customer wants it here" }]);
  });

  it("the flag kind select filters the list and the Flagged column shows the flag text", async () => {
    const flagged = makeCard({ id: 9, source_kind: "visual", flag: "Rev mismatch: VISUAL calls rev 2, M-Files has rev 3", flag_kinds: ["rev_mismatch"] });
    const fetch = mockFetch({
      ...base(),
      "/api/packets?limit=500&flag=rev_mismatch": { body: { packets: [flagged] } },
    });
    renderApp("/clerical");
    const bar = await screen.findByRole("region", { name: "Find jobs" });
    const select = within(bar).getByLabelText("Flags");
    expect(within(select).getAllByRole("option").map((o) => o.textContent)).toEqual([
      "All packets",
      "All flags",
      "Drawing needed",
      "Rev mismatch",
      "Not released",
      "Not found",
      "Lookup failed",
      "Work order gone",
      "Cancelled",
      "Hand upload",
    ]);
    fireEvent.change(select, { target: { value: "rev_mismatch" } });
    await waitFor(() => expect(fetch.mock.calls.map(([u]) => String(u))).toContain("/api/packets?limit=500&flag=rev_mismatch"));
    const col = await waitFor(() => {
      const c = column("Flagged");
      expect(within(c).getByText(/Rev mismatch: VISUAL calls rev 2/)).toHaveClass("due", "over");
      return c;
    });
    expect(within(col).queryByText("L999001 · WELD-PART", { exact: false })).toBeInTheDocument();
    expect(screen.getByLabelText("Flagged: 1")).toBeInTheDocument();
  });
});