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

// Mock hooks
vi.mock("../hooks/tablos", () => ({
  useTablosList: () => ({
    data: [
      { id: "tablo-1", name: "Tablo 1" },
      { id: "tablo-2", name: "Tablo 2" },
    ],
    isLoading: false,
  }),
}));

vi.mock("../hooks/webcal", () => ({
  useGenerateWebcalToken: () => ({
    generateWebcalUrl: vi.fn(),
    isPending: false,
    data: null,
  }),
}));

describe("WebcalModal", () => {
  const mockOnOpenChange = vi.fn();

  beforeEach(() => {
    vi.clearAllMocks();
  });

  it("renders when open", () => {
    render(<WebcalModal open={true} onOpenChange={mockOnOpenChange} />);
    expect(screen.getByText("Synchronisation de calendrier")).toBeInTheDocument();
  });

  it("does not render when closed", () => {
    render(<WebcalModal open={false} onOpenChange={mockOnOpenChange} />);
    expect(screen.queryByText("Synchronisation de calendrier")).not.toBeInTheDocument();
  });

  it("displays title", () => {
    render(<WebcalModal open={true} onOpenChange={mockOnOpenChange} />);
    expect(screen.getByText("Synchronisation de calendrier")).toBeInTheDocument();
  });

  it("displays description", () => {
    render(<WebcalModal open={true} onOpenChange={mockOnOpenChange} />);
    expect(
      screen.getByText(/Synchronisez vos événements avec votre application de calendrier préférée/)
    ).toBeInTheDocument();
  });

  it("displays calendar selection label", () => {
    render(<WebcalModal open={true} onOpenChange={mockOnOpenChange} />);
    expect(screen.getByText("Calendrier à synchroniser")).toBeInTheDocument();
  });

  it("displays generate button", () => {
    render(<WebcalModal open={true} onOpenChange={mockOnOpenChange} />);
    expect(screen.getByText("Générer l'URL de synchronisation")).toBeInTheDocument();
  });

  it("disables generate button when no tablo selected", () => {
    render(<WebcalModal open={true} onOpenChange={mockOnOpenChange} />);
    const button = screen.getByText("Générer l'URL de synchronisation");
    expect(button).toBeDisabled();
  });

  it("displays select placeholder", () => {
    render(<WebcalModal open={true} onOpenChange={mockOnOpenChange} />);
    expect(screen.getByText("Sélectionner un calendrier")).toBeInTheDocument();
  });
});
