import { fireEvent, render, screen, within } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { FlagCell } from "@/app/(protected)/workorders/_components/list/table/cells/flag-cell";
import { WoTableHead } from "@/app/(protected)/workorders/_components/list/table/wo-table-head";

function flagPickerDialog() {
  return screen.getByRole("dialog", { name: "Choose flag color" });
}

describe("FlagCell", () => {
  it("sets, changes, and clears a flag by named controls", () => {
    const onChange = vi.fn();
    const { rerender } = render(<FlagCell color={null} onChange={onChange} />);

    fireEvent.click(screen.getByRole("button", { name: "Add flag" }));
    fireEvent.click(within(flagPickerDialog()).getByRole("button", { name: "Red" }));
    expect(onChange).toHaveBeenCalledWith("#EF4444");
    expect(screen.queryByRole("dialog", { name: "Choose flag color" })).toBeNull();

    rerender(<FlagCell color="#EF4444" onChange={onChange} />);
    expect(screen.getByRole("button", { name: "Red flag" })).toBeInTheDocument();

    fireEvent.click(screen.getByRole("button", { name: "Red flag" }));
    fireEvent.click(within(flagPickerDialog()).getByRole("button", { name: "Blue" }));
    expect(onChange).toHaveBeenCalledWith("#3B82F6");

    rerender(<FlagCell color="#3B82F6" onChange={onChange} />);
    fireEvent.click(screen.getByRole("button", { name: "Blue flag" }));
    fireEvent.click(within(flagPickerDialog()).getByRole("button", { name: "Clear flag" }));
    expect(onChange).toHaveBeenCalledWith(null);
    expect(screen.queryByRole("dialog", { name: "Choose flag color" })).toBeNull();
  });

  it("exposes a non-color name when the hex is not in the palette", () => {
    render(<FlagCell color="#000000" onChange={vi.fn()} />);
    expect(screen.getByRole("button", { name: "Flagged" })).toBeInTheDocument();
  });

  it("names a disabled flag without exposing a button", () => {
    const onChange = vi.fn();
    render(<FlagCell color="#EF4444" disabled onChange={onChange} />);

    expect(screen.getByRole("img", { name: "Red flag" })).toBeInTheDocument();
    expect(screen.queryByRole("button", { name: "Red flag" })).toBeNull();
    expect(onChange).not.toHaveBeenCalled();
  });
});

describe("WoTableHead flag column", () => {
  it("exposes a screen-reader label for the flag column", () => {
    render(
      <table>
        <WoTableHead />
      </table>,
    );

    expect(screen.getByRole("columnheader", { name: "Flag" })).toBeInTheDocument();
  });
});