import { describe, it, expect, vi } from "vitest";
import { render, screen, waitFor } from "@testing-library/react";
import CalendarPage from "./page";

// Mock the Calendar component
vi.mock("@/components/calendar/Calendar", () => ({
  Calendar: ({
    events,
    isLoading,
  }: {
    events: unknown[];
    isLoading: boolean;
  }): React.JSX.Element => (
    <div data-testid="calendar">{isLoading ? "Loading" : `${String(events.length)} events`}</div>
  ),
}));

describe("CalendarPage", (): void => {
  it("should render the page title", (): void => {
    render(<CalendarPage />);
    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Calendar");
  });

  it("should show loading state initially", (): void => {
    render(<CalendarPage />);
    expect(screen.getByTestId("calendar")).toHaveTextContent("Loading");
  });

  it("should render the Calendar with events after loading", async (): Promise<void> => {
    render(<CalendarPage />);
    await waitFor((): void => {
      expect(screen.getByTestId("calendar")).toHaveTextContent("3 events");
    });
  });

  it("should have proper layout structure", (): void => {
    const { container } = render(<CalendarPage />);
    const main = container.querySelector("main");
    expect(main).toBeInTheDocument();
  });

  it("should render the subtitle text", (): void => {
    render(<CalendarPage />);
    expect(screen.getByText("View your schedule at a glance")).toBeInTheDocument();
  });
});