// @vitest-environment jsdom

import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { Button, ButtonLink, RefreshButton, buttonClassName } from "./Button";

describe("Button", () => {
  it("renders primary and default size styles for native actions", () => {
    render(<Button>Confirm</Button>);

    const button = screen.getByRole("button", { name: "Confirm" });
    expect(button).toHaveClass("h-9", "bg-accent", "text-white");
  });

  it("supports variants, sizes, native props, and busy state", () => {
    render(
      <Button
        type="submit"
        size="sm"
        variant="subtle"
        disabled
        aria-busy="true"
      >
        Refresh
      </Button>
    );

    const button = screen.getByRole("button", { name: "Refresh" });
    expect(button).toHaveAttribute("type", "submit");
    expect(button).toBeDisabled();
    expect(button).toHaveAttribute("aria-busy", "true");
    expect(button).toHaveClass("h-8", "border-accent/30", "text-accent");
  });
});

describe("ButtonLink", () => {
  it("renders links with shared button styling", () => {
    render(
      <ButtonLink href="/regions" size="xs" variant="secondary">
        Go to Regions
      </ButtonLink>
    );

    const link = screen.getByRole("link", { name: "Go to Regions" });
    expect(link).toHaveAttribute("href", "/regions");
    expect(link).toHaveClass("h-7", "border-surface-2", "bg-surface-0");
  });
});

describe("RefreshButton", () => {
  it("renders an icon-only refresh action with an accessible name", () => {
    render(<RefreshButton aria-label="Refresh Summary" />);

    const button = screen.getByRole("button", { name: "Refresh Summary" });
    expect(button).toHaveClass("h-8", "w-8", "px-0");
    expect(button).not.toHaveTextContent("Refresh Summary");
    expect(button.querySelector("svg")).toHaveClass("h-14", "w-14");
  });

  it("keeps the accessible name stable while busy", () => {
    render(<RefreshButton aria-label="Refresh Logs" busy />);

    const button = screen.getByRole("button", { name: "Refresh Logs" });
    expect(button).toHaveAttribute("aria-busy", "true");
    expect(button.querySelector("svg")).toHaveClass("animate-spin");
  });
});

describe("buttonClassName", () => {
  it("merges shared styles with caller className", () => {
    expect(buttonClassName({ variant: "plain", className: "mt-4" })).toContain(
      "mt-4"
    );
    expect(buttonClassName({ variant: "plain" })).toContain("text-accent");
  });
});