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

describe("DayTabs", () => {
  const FIXED_TODAY = new Date(2026, 3, 16); // Apr 16 2026

  beforeEach(() => {
    vi.useFakeTimers();
    vi.setSystemTime(FIXED_TODAY);
  });

  afterEach(() => {
    vi.useRealTimers();
  });

  function allDatesBetween(from: Date, to: Date): string[] {
    const out: string[] = [];
    const cur = new Date(from);
    while (cur <= to) {
      const y = cur.getFullYear().toString();
      const m = (cur.getMonth() + 1).toString().padStart(2, "0");
      const d = cur.getDate().toString().padStart(2, "0");
      out.push(`${y}${m}${d}`);
      cur.setDate(cur.getDate() + 1);
    }
    return out;
  }

  it("renders container with data-testid", () => {
    render(
      <DayTabs
        selectedDate="20260416"
        availableDates={["20260416"]}
        daysBefore={2}
        daysAfter={14}
        locale="en"
        onNavigate={() => {}}
      />,
    );
    expect(screen.getByTestId("day-tabs")).toBeTruthy();
  });

  it("renders 7 tabs on first page", () => {
    render(
      <DayTabs
        selectedDate="20260414"
        availableDates={allDatesBetween(new Date(2026, 3, 14), new Date(2026, 3, 30))}
        daysBefore={2}
        daysAfter={14}
        locale="en"
        onNavigate={() => {}}
      />,
    );
    const tabs = screen.getAllByTestId(/^day-tab-\d{8}$/);
    expect(tabs).toHaveLength(7);
  });

  it("disables tabs not in availableDates", () => {
    render(
      <DayTabs
        selectedDate="20260414"
        availableDates={["20260415"]}
        daysBefore={2}
        daysAfter={4}
        locale="en"
        onNavigate={() => {}}
      />,
    );
    const unavailable = screen.getByTestId("day-tab-20260414") as HTMLButtonElement;
    const available = screen.getByTestId("day-tab-20260415") as HTMLButtonElement;
    expect(unavailable.disabled).toBe(true);
    expect(available.disabled).toBe(false);
  });

  it("prev arrow disabled on first page", () => {
    render(
      <DayTabs
        selectedDate="20260414"
        availableDates={["20260414"]}
        daysBefore={2}
        daysAfter={14}
        locale="en"
        onNavigate={() => {}}
      />,
    );
    const prev = screen.getByTestId("day-tabs-prev") as HTMLButtonElement;
    expect(prev.disabled).toBe(true);
  });

  it("next arrow changes page", () => {
    render(
      <DayTabs
        selectedDate="20260414"
        availableDates={allDatesBetween(new Date(2026, 3, 14), new Date(2026, 3, 30))}
        daysBefore={2}
        daysAfter={14}
        locale="en"
        onNavigate={() => {}}
      />,
    );
    expect(screen.queryByTestId("day-tab-20260421")).toBeNull();

    fireEvent.click(screen.getByTestId("day-tabs-next"));

    expect(screen.getByTestId("day-tab-20260421")).toBeTruthy();
    expect(screen.queryByTestId("day-tab-20260414")).toBeNull();
  });

  it("clicking an available tab calls onNavigate", () => {
    const onNavigate = vi.fn();
    render(
      <DayTabs
        selectedDate="20260416"
        availableDates={["20260415", "20260416", "20260417"]}
        daysBefore={2}
        daysAfter={4}
        locale="en"
        onNavigate={onNavigate}
      />,
    );
    fireEvent.click(screen.getByTestId("day-tab-20260417"));
    expect(onNavigate).toHaveBeenCalledWith("20260417");
  });

  it("initializes currentPage to the page containing selectedDate", () => {
    const available = allDatesBetween(new Date(2026, 3, 14), new Date(2026, 3, 30));
    render(
      <DayTabs
        selectedDate="20260425"
        availableDates={available}
        daysBefore={2}
        daysAfter={14}
        locale="en"
        onNavigate={() => {}}
      />,
    );
    // 20260425 is on page 1 (0-indexed) of pages [14..20][21..27][28..30]
    expect(screen.getByTestId("day-tab-20260425")).toBeTruthy();
    expect(screen.queryByTestId("day-tab-20260414")).toBeNull();
  });

  it("renders DaySelect for mobile", () => {
    render(
      <DayTabs
        selectedDate="20260416"
        availableDates={["20260416"]}
        daysBefore={2}
        daysAfter={14}
        locale="en"
        onNavigate={() => {}}
      />,
    );
    expect(screen.getByTestId("day-select")).toBeTruthy();
  });
});
