import "@testing-library/jest-dom/vitest";
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { Stepper, type StepperStep } from "@/components/ui/stepper";

const steps: StepperStep[] = [
  { id: "submitted", label: "Submitted", state: "complete" },
  { id: "review", label: "Under Review", state: "active", description: "In progress" },
  { id: "approved", label: "Approved", state: "pending" },
];

describe("Stepper", () => {
  it("renders all step labels", () => {
    render(<Stepper steps={steps} ariaLabel="Approval path" />);
    expect(screen.getByText("Submitted")).toBeInTheDocument();
    expect(screen.getByText("Under Review")).toBeInTheDocument();
    expect(screen.getByText("Approved")).toBeInTheDocument();
  });

  it("marks the active step with aria-current", () => {
    render(<Stepper steps={steps} ariaLabel="Approval path" />);
    const nav = screen.getByRole("navigation", { name: "Approval path" });
    expect(nav).toBeInTheDocument();
    expect(nav.querySelector("[aria-current='step']")).toBeTruthy();
  });

  it("shows check icon for complete steps", () => {
    const { container } = render(<Stepper steps={steps} />);
    const icons = container.querySelectorAll("svg");
    expect(icons.length).toBeGreaterThanOrEqual(1);
  });

  it("renders pending step with step number", () => {
    render(<Stepper steps={steps} ariaLabel="Approval path" />);
    const nav = screen.getByRole("navigation", { name: "Approval path" });
    expect(nav).toHaveTextContent("3");
  });

  it("renders description for active step", () => {
    render(<Stepper steps={steps} ariaLabel="Approval path" />);
    const nav = screen.getByRole("navigation", { name: "Approval path" });
    expect(nav).toHaveTextContent("In progress");
  });
});