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

describe("TabloTutorial", () => {
  const mockOnClose = vi.fn();
  const mockOnCreateTablo = vi.fn();

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

  it("renders when open", () => {
    render(<TabloTutorial isOpen={true} onClose={mockOnClose} onCreateTablo={mockOnCreateTablo} />);
    expect(screen.getByText("Guide de démarrage")).toBeInTheDocument();
  });

  it("does not render when closed", () => {
    const { container } = render(
      <TabloTutorial isOpen={false} onClose={mockOnClose} onCreateTablo={mockOnCreateTablo} />
    );
    expect(container.firstChild).toBeNull();
  });

  it("displays first step by default", () => {
    render(<TabloTutorial isOpen={true} onClose={mockOnClose} onCreateTablo={mockOnCreateTablo} />);
    expect(screen.getByText(/Bienvenue sur XTablo/)).toBeInTheDocument();
    expect(screen.getByText("Étape 1 sur 7")).toBeInTheDocument();
  });

  it("shows next button", () => {
    render(<TabloTutorial isOpen={true} onClose={mockOnClose} onCreateTablo={mockOnCreateTablo} />);
    expect(screen.getByText("Suivant")).toBeInTheDocument();
  });

  it("navigates to next step when next button is clicked", () => {
    render(<TabloTutorial isOpen={true} onClose={mockOnClose} onCreateTablo={mockOnCreateTablo} />);
    fireEvent.click(screen.getByText("Suivant"));
    expect(screen.getByText("Étape 2 sur 7")).toBeInTheDocument();
  });

  it("shows previous button after first step", () => {
    render(<TabloTutorial isOpen={true} onClose={mockOnClose} onCreateTablo={mockOnCreateTablo} />);
    fireEvent.click(screen.getByText("Suivant"));
    expect(screen.getByText("Précédent")).toBeInTheDocument();
  });

  it("navigates to previous step when previous button is clicked", () => {
    render(<TabloTutorial isOpen={true} onClose={mockOnClose} onCreateTablo={mockOnCreateTablo} />);
    fireEvent.click(screen.getByText("Suivant"));
    fireEvent.click(screen.getByText("Précédent"));
    expect(screen.getByText("Étape 1 sur 7")).toBeInTheDocument();
  });

  it("shows skip button", () => {
    render(<TabloTutorial isOpen={true} onClose={mockOnClose} onCreateTablo={mockOnCreateTablo} />);
    expect(screen.getByText("Passer")).toBeInTheDocument();
  });

  it("closes tutorial when close button is clicked", () => {
    render(<TabloTutorial isOpen={true} onClose={mockOnClose} onCreateTablo={mockOnCreateTablo} />);
    const closeButton = screen.getByRole("button", { name: "" });
    fireEvent.click(closeButton);
    expect(mockOnClose).toHaveBeenCalled();
  });

  it("sets localStorage when tutorial is completed", () => {
    render(<TabloTutorial isOpen={true} onClose={mockOnClose} onCreateTablo={mockOnCreateTablo} />);
    const closeButton = screen.getByRole("button", { name: "" });
    fireEvent.click(closeButton);
    expect(localStorage.getItem("xtablo-tutorial-completed")).toBe("true");
  });

  it("displays progress bar", () => {
    const { container } = render(
      <TabloTutorial isOpen={true} onClose={mockOnClose} onCreateTablo={mockOnCreateTablo} />
    );
    expect(container.querySelector(".bg-blue-600")).toBeInTheDocument();
  });

  it("shows create tablo button on last step", () => {
    render(<TabloTutorial isOpen={true} onClose={mockOnClose} onCreateTablo={mockOnCreateTablo} />);
    // Skip to last step
    fireEvent.click(screen.getByText("Passer"));
    expect(screen.getByText("Créer mon premier Tablo")).toBeInTheDocument();
  });

  it("shows completion message on last step", () => {
    render(<TabloTutorial isOpen={true} onClose={mockOnClose} onCreateTablo={mockOnCreateTablo} />);
    fireEvent.click(screen.getByText("Passer"));
    expect(screen.getByText(/Félicitations/)).toBeInTheDocument();
  });
});
