import { fireEvent, screen, waitFor, within } from "@testing-library/react";
import { beforeEach, describe, expect, it, vi } from "vitest";
import { adminBase } from "../../test/admin";
import { renderApp } from "../../test/auth";
import { callsTo, mockFetch } from "../../test/fetchMock";
import { memoryStorage } from "../supervisor/memoryStorage";

const ITEMS = [{ group: "Before welding", key: "dwg", text: "Drawing {drawing} Rev {rev} matches the packet" }];

beforeEach(() => {
  vi.stubGlobal("localStorage", memoryStorage());
});

describe("Admin Checklists tab", () => {
  it("shows the department editor on the new endpoints and links the Checklists screen", async () => {
    const fetch = mockFetch({
      ...adminBase(),
      "GET /api/checklists": {
        body: [
          { dept_code: "03", dept_name: "Weld Parts", weld: true, custom: false, version: 0, editable: true },
          { dept_code: "14", dept_name: "Electrical", weld: false, custom: true, version: 2, editable: true },
        ],
      },
      "GET /api/checklists/03": {
        body: { dept_code: "03", dept_name: "Weld Parts", weld: true, custom: false, version: 0, editable: true, items: ITEMS, defaults: ITEMS },
      },
    });
    renderApp("/admin");
    fireEvent.click(await screen.findByRole("tab", { name: "Checklists" }));
    expect(await screen.findByLabelText("Item 1 text")).toHaveValue(ITEMS[0]?.text);
    expect(within(screen.getByRole("main")).getByRole("link", { name: "Checklists" })).toHaveAttribute("href", "/checklists");
    expect(screen.getByRole("combobox", { name: "Department" })).toHaveValue("03");
    await waitFor(() => expect(callsTo(fetch, "GET", "/api/admin/checklists")).toHaveLength(0));
  });
});