import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { WeeklyAvailability } from "../hooks/availabilities";
import { AvailabilityVisualization } from "./AvailabilityVisualization";

describe("AvailabilityVisualization", () => {
  const mockAvailabilities: WeeklyAvailability = {
    0: { enabled: true, timeRanges: [{ start: "09:00", end: "17:00" }] },
    1: { enabled: true, timeRanges: [{ start: "09:00", end: "17:00" }] },
    2: { enabled: false, timeRanges: [] },
    3: { enabled: true, timeRanges: [{ start: "10:00", end: "16:00" }] },
    4: { enabled: true, timeRanges: [{ start: "09:00", end: "17:00" }] },
    5: { enabled: false, timeRanges: [] },
    6: { enabled: false, timeRanges: [] },
  };

  it("renders without crashing", () => {
    render(<AvailabilityVisualization draftAvailabilities={mockAvailabilities} />);
    expect(screen.getByText("Heure")).toBeInTheDocument();
  });

  it("displays all days of the week", () => {
    render(<AvailabilityVisualization draftAvailabilities={mockAvailabilities} />);
    expect(screen.getByText("Lundi")).toBeInTheDocument();
    expect(screen.getByText("Mardi")).toBeInTheDocument();
    expect(screen.getByText("Mercredi")).toBeInTheDocument();
    expect(screen.getByText("Jeudi")).toBeInTheDocument();
    expect(screen.getByText("Vendredi")).toBeInTheDocument();
    expect(screen.getByText("Samedi")).toBeInTheDocument();
    expect(screen.getByText("Dimanche")).toBeInTheDocument();
  });

  it("displays time slots", () => {
    render(<AvailabilityVisualization draftAvailabilities={mockAvailabilities} />);
    // Should show time slots from 6 AM to 11 PM
    expect(screen.getByText("09:00")).toBeInTheDocument();
    expect(screen.getByText("12:00")).toBeInTheDocument();
    expect(screen.getByText("17:00")).toBeInTheDocument();
  });

  it("shows availability grid", () => {
    const { container } = render(
      <AvailabilityVisualization draftAvailabilities={mockAvailabilities} />
    );
    // Check for grid structure
    expect(container.querySelector(".grid")).toBeInTheDocument();
  });

  it("accepts custom slot duration", () => {
    render(
      <AvailabilityVisualization
        draftAvailabilities={mockAvailabilities}
        slotDurationMinutes={60}
      />
    );
    expect(screen.getByText("Heure")).toBeInTheDocument();
  });

  it("renders calendar structure", () => {
    const { container } = render(
      <AvailabilityVisualization draftAvailabilities={mockAvailabilities} />
    );
    // Check that the calendar has proper structure
    const headers = container.querySelectorAll(".grid-cols-8");
    expect(headers.length).toBeGreaterThan(0);
  });
});
