import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it, vi } from "vitest";
import { SeverityBadge } from "@/app/(protected)/workorders/_components/list/table/cells/severity-badge";

describe("SeverityBadge", () => {
  it("shows description, Accept/Respond deadline, and after-hours on hover", async () => {
    const user = userEvent.setup();
    render(<SeverityBadge severity={1} />);

    await user.hover(screen.getByText("SEV 1"));

    const tooltip = await screen.findByRole("tooltip");
    expect(tooltip).toHaveTextContent(
      "Business Critical Function Down · Accept: 15 min · Respond: 2 hrs · After hours: Yes",
    );
    expect(tooltip).not.toHaveTextContent(/Quote|Tech Notes|Invoice|Turnaround/i);

    await user.unhover(screen.getByText("SEV 1"));
    await waitFor(() => expect(screen.queryByRole("tooltip")).not.toBeInTheDocument());
  });

  it("transcribes the SEV table row for the given severity", async () => {
    const user = userEvent.setup();
    render(<SeverityBadge severity={3} />);

    await user.hover(screen.getByText("SEV 3"));

    expect(await screen.findByRole("tooltip")).toHaveTextContent(
      "Group Productivity Impaired · Accept: 2 hrs · Respond: 8 hrs (next day if after hours) · After hours: Approval required",
    );
  });

  it("is a button only when it can reopen the severity control", async () => {
    const onClick = vi.fn();
    const user = userEvent.setup();
    const { rerender } = render(<SeverityBadge severity={2} />);
    expect(screen.queryByRole("button")).not.toBeInTheDocument();

    rerender(<SeverityBadge severity={2} onClick={onClick} />);
    const badge = screen.getByRole("button");
    expect(badge).toHaveTextContent("SEV 2");
    await user.click(badge);

    expect(onClick).toHaveBeenCalledTimes(1);
  });
});