import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import { afterEach, describe, expect, it, vi } from "vitest";
import { StatsDisclosureCard } from "./StatsDisclosureCard";

afterEach(cleanup);

describe("StatsDisclosureCard", () => {
  it("uses a keyboard-focusable disclosure button with a valid detail relationship", () => {
    const onToggle = vi.fn();
    const { rerender } = render(
      <StatsDisclosureCard
        title="Total Swatches"
        value="12"
        description="Swatches currently in use"
        accentClass="bwvs:hover:border-blue-300"
        icon={<span aria-hidden="true">icon</span>}
        expanded={false}
        onToggle={onToggle}
      >
        <a href="/details">Manage swatches</a>
      </StatsDisclosureCard>,
    );

    const button = screen.getByRole("button", { name: /total swatches/i });
    const panelId = button.getAttribute("aria-controls");
    const panel = panelId ? document.getElementById(panelId) : null;

    expect(button).toBeInstanceOf(HTMLButtonElement);
    expect(button.getAttribute("type")).toBe("button");
    expect(button.getAttribute("aria-expanded")).toBe("false");
    expect(panel).not.toBeNull();
    expect(panel?.hidden).toBe(true);

    button.focus();
    expect(document.activeElement).toBe(button);
    fireEvent.click(button);
    expect(onToggle).toHaveBeenCalledOnce();

    rerender(
      <StatsDisclosureCard
        title="Total Swatches"
        value="12"
        description="Swatches currently in use"
        accentClass="bwvs:hover:border-blue-300"
        icon={<span aria-hidden="true">icon</span>}
        expanded
        onToggle={onToggle}
      >
        <a href="/details">Manage swatches</a>
      </StatsDisclosureCard>,
    );

    expect(button.getAttribute("aria-expanded")).toBe("true");
    expect(panel?.hidden).toBe(false);
    expect(screen.getByRole("link", { name: "Manage swatches" })).toBeTruthy();
    expect(button.querySelector("a")).toBeNull();
  });
});