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

// Mock ClickOutside
vi.mock("./ClickOutside", () => ({
  ClickOutside: ({
    children,
    onClickOutside,
  }: {
    children: React.ReactNode;
    onClickOutside: () => void;
  }) => (
    <div data-testid="click-outside" onClick={onClickOutside}>
      {children}
    </div>
  ),
}));

describe("CreateTabloModal", () => {
  const mockOnClose = vi.fn();
  const mockOnCreate = vi.fn();

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

  it("renders without crashing", () => {
    render(<CreateTabloModal onClose={mockOnClose} onCreate={mockOnCreate} />);
    expect(screen.getByText("Create a new project")).toBeInTheDocument();
  });

  it("displays name input field", () => {
    render(<CreateTabloModal onClose={mockOnClose} onCreate={mockOnCreate} />);
    expect(screen.getByPlaceholderText("Enter project name")).toBeInTheDocument();
  });

  it("allows typing in name input", () => {
    render(<CreateTabloModal onClose={mockOnClose} onCreate={mockOnCreate} />);
    const input = screen.getByPlaceholderText("Enter project name") as HTMLInputElement;
    fireEvent.change(input, { target: { value: "New Tablo" } });
    expect(input.value).toBe("New Tablo");
  });

  it("calls onCreate when create button is clicked with valid name", () => {
    render(<CreateTabloModal onClose={mockOnClose} onCreate={mockOnCreate} />);
    const input = screen.getByPlaceholderText("Enter project name");
    fireEvent.change(input, { target: { value: "New Tablo" } });

    const createButton = screen.getByText("Create");
    fireEvent.click(createButton);

    expect(mockOnCreate).toHaveBeenCalledWith({
      name: "New Tablo",
      image: null,
      color: "bg-blue-500",
    });
  });

  it("does not call onCreate when name is empty", () => {
    render(<CreateTabloModal onClose={mockOnClose} onCreate={mockOnCreate} />);
    const createButton = screen.getByText("Create");
    fireEvent.click(createButton);

    expect(mockOnCreate).not.toHaveBeenCalled();
  });

  it("disables create button when name is empty", () => {
    render(<CreateTabloModal onClose={mockOnClose} onCreate={mockOnCreate} />);
    const createButton = screen.getByText("Create");
    expect(createButton).toBeDisabled();
  });

  it("calls onClose when cancel button is clicked", () => {
    render(<CreateTabloModal onClose={mockOnClose} onCreate={mockOnCreate} />);
    const cancelButton = screen.getByText("Cancel");
    fireEvent.click(cancelButton);
    expect(mockOnClose).toHaveBeenCalled();
  });

  it("renders ImageColorPicker component", () => {
    render(<CreateTabloModal onClose={mockOnClose} onCreate={mockOnCreate} />);
    expect(screen.getByText("Style")).toBeInTheDocument();
  });

  it("resets form after successful creation", () => {
    render(<CreateTabloModal onClose={mockOnClose} onCreate={mockOnCreate} />);
    const input = screen.getByPlaceholderText("Enter project name") as HTMLInputElement;
    fireEvent.change(input, { target: { value: "New Tablo" } });

    const createButton = screen.getByText("Create");
    fireEvent.click(createButton);

    expect(input.value).toBe("");
  });

  it("disables create button when in image mode", () => {
    render(<CreateTabloModal onClose={mockOnClose} onCreate={mockOnCreate} />);
    const input = screen.getByPlaceholderText("Enter project name");
    fireEvent.change(input, { target: { value: "New Tablo" } });

    // Switch to image mode
    fireEvent.click(screen.getByText("Image (Bientôt disponible)"));

    const createButton = screen.getByText("Create");
    expect(createButton).toBeDisabled();
  });
});
