import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { beforeEach, describe, expect, it, vi } from "vitest";
import { Accordion } from "@/components/ui/accordion";
import { KeywordSetsSettingsSection } from "./KeywordSetsSettingsSection";

vi.mock("@client/api", () => ({
  listKeywordSets: vi.fn(),
  updateKeywordSet: vi.fn(),
  activateKeywordSet: vi.fn(),
  createKeywordSet: vi.fn(),
  deleteKeywordSet: vi.fn(),
}));

vi.mock("@client/pages/orchestrator/KeywordSetPicker", () => ({
  KeywordSetPicker: ({
    onActiveSetChange,
  }: {
    onActiveSetChange: (set: {
      id: string;
      name: string;
      terms: string[];
      isActive: boolean;
    }) => void;
  }) => (
    <button
      type="button"
      onClick={() =>
        onActiveSetChange({
          id: "set-sdet",
          name: "SDET",
          terms: ["SDET", "playwright"],
          isActive: true,
        })
      }
    >
      Pick SDET
    </button>
  ),
}));

import * as api from "@client/api";

describe("KeywordSetsSettingsSection", () => {
  beforeEach(() => {
    vi.clearAllMocks();
    vi.mocked(api.listKeywordSets).mockResolvedValue([
      {
        id: "set-sdet",
        name: "SDET",
        terms: ["SDET", "playwright"],
        isActive: true,
        createdAt: "",
        updatedAt: "",
      },
    ]);
  });

  it("renders the section and shows terms after a set is selected", async () => {
    render(
      <Accordion type="multiple" defaultValue={["keyword-sets"]}>
        <KeywordSetsSettingsSection isLoading={false} isSaving={false} />
      </Accordion>,
    );

    expect(screen.getByText("Search keyword sets")).toBeInTheDocument();
    fireEvent.click(screen.getByRole("button", { name: "Pick SDET" }));

    await waitFor(() => {
      expect(screen.getByText("SDET")).toBeInTheDocument();
    });
    expect(screen.getByText("playwright")).toBeInTheDocument();
  });
});
