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

describe("ImageColorPicker", () => {
  it("renders without crashing", () => {
    const props = {
      creationMode: "color" as const,
      setCreationMode: vi.fn(),
      selectedColor: "bg-blue-500",
      setSelectedColor: vi.fn(),
    };
    render(<ImageColorPicker {...props} />);
    expect(screen.getByText("Style")).toBeInTheDocument();
  });

  it("renders mode toggle buttons", () => {
    const props = {
      creationMode: "color" as const,
      setCreationMode: vi.fn(),
      selectedColor: "bg-blue-500",
      setSelectedColor: vi.fn(),
    };
    render(<ImageColorPicker {...props} />);
    expect(screen.getByText("Image (Bientôt disponible)")).toBeInTheDocument();
    expect(screen.getAllByText("Couleur").length).toBeGreaterThan(0);
  });

  it("calls setCreationMode when image button is clicked", () => {
    const setCreationMode = vi.fn();
    const props = {
      creationMode: "color" as const,
      setCreationMode,
      selectedColor: "bg-blue-500",
      setSelectedColor: vi.fn(),
    };
    render(<ImageColorPicker {...props} />);
    fireEvent.click(screen.getByText("Image (Bientôt disponible)"));
    expect(setCreationMode).toHaveBeenCalledWith("image");
  });

  it("calls setCreationMode when color button is clicked", () => {
    const setCreationMode = vi.fn();
    const props = {
      creationMode: "image" as const,
      setCreationMode,
      selectedColor: "bg-blue-500",
      setSelectedColor: vi.fn(),
    };
    render(<ImageColorPicker {...props} />);
    fireEvent.click(screen.getByText("Couleur"));
    expect(setCreationMode).toHaveBeenCalledWith("color");
  });

  it("shows color picker when in color mode", () => {
    const props = {
      creationMode: "color" as const,
      setCreationMode: vi.fn(),
      selectedColor: "bg-blue-500",
      setSelectedColor: vi.fn(),
    };
    render(<ImageColorPicker {...props} />);
    expect(screen.getAllByText("Couleur").length).toBeGreaterThan(0);
    // Check for color buttons - there should be 10 available colors
    const colorButtons = screen
      .getAllByRole("button")
      .filter((btn) => btn.className.includes("bg-"));
    expect(colorButtons.length).toBeGreaterThan(0);
  });

  it("shows image upload placeholder when in image mode", () => {
    const props = {
      creationMode: "image" as const,
      setCreationMode: vi.fn(),
      selectedColor: "bg-blue-500",
      setSelectedColor: vi.fn(),
    };
    render(<ImageColorPicker {...props} />);
    expect(screen.getByText("Import d'images")).toBeInTheDocument();
    expect(screen.getByText("Bientôt disponible")).toBeInTheDocument();
  });

  it("calls setSelectedColor when a color is clicked", () => {
    const setSelectedColor = vi.fn();
    const props = {
      creationMode: "color" as const,
      setCreationMode: vi.fn(),
      selectedColor: "bg-blue-500",
      setSelectedColor,
    };
    const { container } = render(<ImageColorPicker {...props} />);

    // Find a color button that's not the selected one
    const greenButton = container.querySelector(".bg-green-500");
    if (greenButton) {
      fireEvent.click(greenButton);
      expect(setSelectedColor).toHaveBeenCalledWith("bg-green-500");
    }
  });

  it("highlights the selected color", () => {
    const props = {
      creationMode: "color" as const,
      setCreationMode: vi.fn(),
      selectedColor: "bg-blue-500",
      setSelectedColor: vi.fn(),
    };
    const { container } = render(<ImageColorPicker {...props} />);
    const selectedButton = container.querySelector(".bg-blue-500");
    expect(selectedButton).toHaveTextContent("✓");
  });
});
