// @vitest-environment jsdom
import { describe, it, expect, vi } from "vitest";
import { render, screen, fireEvent } from "@testing-library/react";
import { DayTabButton } from "./DayTabButton.js";

describe("DayTabButton", () => {
  it("has data-testid based on date", () => {
    render(<DayTabButton date="20260416" isActive={false} isDisabled={false} locale="en" onClick={() => {}} />);
    expect(screen.getByTestId("day-tab-20260416")).toBeTruthy();
  });

  it("renders day number and month in a single label", () => {
    render(<DayTabButton date="20260416" isActive={false} isDisabled={false} locale="en" onClick={() => {}} />);
    const label = screen.getByTestId("day-tab-20260416").textContent ?? "";
    expect(label).toMatch(/16/);
    expect(label).toMatch(/Apr/i);
  });

  it("calls onClick with date when enabled", () => {
    const onClick = vi.fn();
    render(<DayTabButton date="20260416" isActive={false} isDisabled={false} locale="en" onClick={onClick} />);
    fireEvent.click(screen.getByTestId("day-tab-20260416"));
    expect(onClick).toHaveBeenCalledWith("20260416");
  });

  it("does not call onClick when disabled", () => {
    const onClick = vi.fn();
    render(<DayTabButton date="20260416" isActive={false} isDisabled={true} locale="en" onClick={onClick} />);
    fireEvent.click(screen.getByTestId("day-tab-20260416"));
    expect(onClick).not.toHaveBeenCalled();
  });

  it("applies --active modifier when active", () => {
    render(<DayTabButton date="20260416" isActive={true} isDisabled={false} locale="en" onClick={() => {}} />);
    const el = screen.getByTestId("day-tab-20260416");
    expect(el.className).toMatch(/--active/);
  });

  it("applies --disabled modifier when disabled", () => {
    render(<DayTabButton date="20260416" isActive={false} isDisabled={true} locale="en" onClick={() => {}} />);
    const el = screen.getByTestId("day-tab-20260416");
    expect(el.className).toMatch(/--disabled/);
  });

  it("is disabled attribute set when disabled", () => {
    render(<DayTabButton date="20260416" isActive={false} isDisabled={true} locale="en" onClick={() => {}} />);
    const btn = screen.getByTestId("day-tab-20260416") as HTMLButtonElement;
    expect(btn.disabled).toBe(true);
  });

  // TZ §4.1.13.1: active tab must carry aria-current="date" for screen readers
  // and to mark the highlighted day without relying solely on visual styling.
  it("4.1.13.1: active tab has aria-current=date", () => {
    render(<DayTabButton date="20260416" isActive={true} isDisabled={false} locale="en" onClick={() => {}} />);
    expect(screen.getByTestId("day-tab-20260416").getAttribute("aria-current")).toBe("date");
  });

  it("4.1.13.1: inactive tab has no aria-current attribute", () => {
    render(<DayTabButton date="20260416" isActive={false} isDisabled={false} locale="en" onClick={() => {}} />);
    expect(screen.getByTestId("day-tab-20260416").getAttribute("aria-current")).toBeNull();
  });
});
