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

// Mock react-easy-crop
vi.mock("react-easy-crop", () => ({
  default: ({
    onCropChange,
    onZoomChange,
  }: {
    onCropChange: (crop: { x: number; y: number }) => void;
    onZoomChange: (zoom: number) => void;
  }) => (
    <div data-testid="cropper">
      <button onClick={() => onCropChange({ x: 10, y: 10 })}>Change Crop</button>
      <button onClick={() => onZoomChange(2)}>Change Zoom</button>
    </div>
  ),
}));

describe("ImageCropDialog", () => {
  const mockOnOpenChange = vi.fn();
  const mockOnCropComplete = vi.fn();
  const mockImageSrc = "data:image/png;base64,test";

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

  it("renders without crashing when open", () => {
    render(
      <ImageCropDialog
        open={true}
        onOpenChange={mockOnOpenChange}
        imageSrc={mockImageSrc}
        onCropComplete={mockOnCropComplete}
      />
    );
    expect(screen.getByText("Recadrer l'image")).toBeInTheDocument();
  });

  it("does not render when closed", () => {
    render(
      <ImageCropDialog
        open={false}
        onOpenChange={mockOnOpenChange}
        imageSrc={mockImageSrc}
        onCropComplete={mockOnCropComplete}
      />
    );
    expect(screen.queryByText("Recadrer l'image")).not.toBeInTheDocument();
  });

  it("displays title", () => {
    render(
      <ImageCropDialog
        open={true}
        onOpenChange={mockOnOpenChange}
        imageSrc={mockImageSrc}
        onCropComplete={mockOnCropComplete}
      />
    );
    expect(screen.getByText("Recadrer l'image")).toBeInTheDocument();
  });

  it("displays description", () => {
    render(
      <ImageCropDialog
        open={true}
        onOpenChange={mockOnOpenChange}
        imageSrc={mockImageSrc}
        onCropComplete={mockOnCropComplete}
      />
    );
    expect(screen.getByText(/Ajustez la position et le zoom/)).toBeInTheDocument();
  });

  it("renders cropper component", () => {
    render(
      <ImageCropDialog
        open={true}
        onOpenChange={mockOnOpenChange}
        imageSrc={mockImageSrc}
        onCropComplete={mockOnCropComplete}
      />
    );
    expect(screen.getByTestId("cropper")).toBeInTheDocument();
  });

  it("renders zoom slider", () => {
    render(
      <ImageCropDialog
        open={true}
        onOpenChange={mockOnOpenChange}
        imageSrc={mockImageSrc}
        onCropComplete={mockOnCropComplete}
      />
    );
    expect(screen.getByText("Zoom")).toBeInTheDocument();
  });

  it("renders cancel button", () => {
    render(
      <ImageCropDialog
        open={true}
        onOpenChange={mockOnOpenChange}
        imageSrc={mockImageSrc}
        onCropComplete={mockOnCropComplete}
      />
    );
    expect(screen.getByText("Annuler")).toBeInTheDocument();
  });

  it("renders confirm button", () => {
    render(
      <ImageCropDialog
        open={true}
        onOpenChange={mockOnOpenChange}
        imageSrc={mockImageSrc}
        onCropComplete={mockOnCropComplete}
      />
    );
    expect(screen.getByText("Confirmer")).toBeInTheDocument();
  });

  it("calls onOpenChange when cancel button is clicked", () => {
    render(
      <ImageCropDialog
        open={true}
        onOpenChange={mockOnOpenChange}
        imageSrc={mockImageSrc}
        onCropComplete={mockOnCropComplete}
      />
    );
    fireEvent.click(screen.getByText("Annuler"));
    expect(mockOnOpenChange).toHaveBeenCalledWith(false);
  });

  it("allows zoom adjustment", () => {
    render(
      <ImageCropDialog
        open={true}
        onOpenChange={mockOnOpenChange}
        imageSrc={mockImageSrc}
        onCropComplete={mockOnCropComplete}
      />
    );
    expect(screen.getByText("Zoom")).toBeInTheDocument();
  });
});
