// @vitest-environment jsdom

import { act } from "react";
import { createRoot } from "react-dom/client";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { WorkshopCard } from "./WorkshopCard";
import { WORKSHOPS } from "./workshops";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;

describe("WorkshopCard", () => {
  let container: HTMLDivElement;
  let root: ReturnType<typeof createRoot> | null = null;

  beforeEach(() => {
    container = document.createElement("div");
    document.body.appendChild(container);
    root = null;
  });

  afterEach(() => {
    if (root) {
      act(() => {
        root!.unmount();
      });
      root = null;
    }
    if (container.parentNode) container.remove();
  });

  function renderCard(workshopIndex: number, onSelect: (slug: string) => void) {
    root = createRoot(container);
    const workshop = WORKSHOPS[workshopIndex]!;
    act(() => {
      root!.render(<WorkshopCard workshop={workshop} onSelect={onSelect} />);
    });
    return workshop;
  }

  it("renders the workshop title and subtitle", () => {
    renderCard(0, () => {});
    expect(container.textContent).toContain("DIAGRAMS");
    expect(container.textContent).toContain("Mermaid → rendered SVG");
  });

  it("renders as a button with an aria-label", () => {
    renderCard(0, () => {});
    const btn = container.querySelector("button");
    expect(btn).not.toBeNull();
    expect(btn?.getAttribute("aria-label")).toBe("DIAGRAMS workshop");
    expect(btn?.getAttribute("type")).toBe("button");
  });

  it("has the testid with the workshop slug", () => {
    renderCard(0, () => {});
    expect(container.querySelector("[data-testid='workshop-card-diagrams']")).not.toBeNull();
  });

  it("fires onSelect with the workshop slug on click", () => {
    const onSelect = vi.fn();
    renderCard(3, onSelect); // wallpapers
    const btn = container.querySelector("button") as HTMLButtonElement;
    act(() => {
      btn.click();
    });
    expect(onSelect).toHaveBeenCalledTimes(1);
    expect(onSelect).toHaveBeenCalledWith("wallpapers");
  });

  it("applies the semantic border, radius, and hover bg classes from §6.2", () => {
    renderCard(0, () => {});
    const btn = container.querySelector("button") as HTMLButtonElement;
    expect(btn.className).toContain("border");
    expect(btn.className).toContain("border-border");
    expect(btn.className).toContain("rounded-lg");
    expect(btn.className).toContain("hover:bg-card");
    expect(btn.className).toContain("focus-visible:ring-primary");
  });

  it("renders an icon element in volt with aria-hidden", () => {
    renderCard(0, () => {});
    const svg = container.querySelector("svg[aria-hidden='true']") as SVGElement;
    expect(svg).not.toBeNull();
    // class list should include text-primary (volt accent)
    expect(svg.getAttribute("class") ?? "").toContain("text-primary");
  });

  it("renders the Convert workshop card (fold-in from /convert)", () => {
    renderCard(7, () => {});
    expect(container.textContent).toContain("CONVERT");
    expect(container.textContent).toContain("File format conversion");
  });
});
