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

// Mock ClickOutside
vi.mock("./ClickOutside", () => ({
  ClickOutside: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
}));

describe("DeleteTabloModal", () => {
  const mockTablo = {
    id: "tablo-1",
    name: "Test Tablo",
    color: "bg-blue-500",
    user_id: "user-id",
    access_level: "admin",
    is_admin: true,
    created_at: "2024-01-01T00:00:00Z",
    deleted_at: "2024-01-01T00:00:00Z",
    position: 0,
    status: "active",
    image: null,
  };

  const mockOnClose = vi.fn();
  const mockOnConfirm = vi.fn();

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

  it("renders without crashing when tablo is provided", () => {
    render(
      <DeleteTabloModal
        tablo={mockTablo}
        onClose={mockOnClose}
        onConfirm={mockOnConfirm}
        isDeleting={false}
      />
    );
    expect(screen.getByText("Delete project")).toBeInTheDocument();
  });

  it("returns null when tablo is null", () => {
    const { container } = render(
      <DeleteTabloModal
        tablo={null}
        onClose={mockOnClose}
        onConfirm={mockOnConfirm}
        isDeleting={false}
      />
    );
    expect(container.firstChild).toBeNull();
  });

  it("displays tablo name in confirmation message", () => {
    render(
      <DeleteTabloModal
        tablo={mockTablo}
        onClose={mockOnClose}
        onConfirm={mockOnConfirm}
        isDeleting={false}
      />
    );
    expect(screen.getByText(/Test Tablo/)).toBeInTheDocument();
  });

  it("calls onConfirm when delete button is clicked", () => {
    render(
      <DeleteTabloModal
        tablo={mockTablo}
        onClose={mockOnClose}
        onConfirm={mockOnConfirm}
        isDeleting={false}
      />
    );
    const deleteButton = screen.getByText("Delete");
    fireEvent.click(deleteButton);
    expect(mockOnConfirm).toHaveBeenCalledWith("tablo-1");
  });

  it("calls onClose when cancel button is clicked", () => {
    render(
      <DeleteTabloModal
        tablo={mockTablo}
        onClose={mockOnClose}
        onConfirm={mockOnConfirm}
        isDeleting={false}
      />
    );
    const cancelButton = screen.getByText("Cancel");
    fireEvent.click(cancelButton);
    expect(mockOnClose).toHaveBeenCalled();
  });

  it("disables buttons when isDeleting is true", () => {
    render(
      <DeleteTabloModal
        tablo={mockTablo}
        onClose={mockOnClose}
        onConfirm={mockOnConfirm}
        isDeleting={true}
      />
    );
    const deleteButton = screen.getByText("Deleting...");
    const cancelButton = screen.getByText("Cancel");
    expect(deleteButton).toBeDisabled();
    expect(cancelButton).toBeDisabled();
  });

  it("shows deleting text when isDeleting is true", () => {
    render(
      <DeleteTabloModal
        tablo={mockTablo}
        onClose={mockOnClose}
        onConfirm={mockOnConfirm}
        isDeleting={true}
      />
    );
    expect(screen.getByText("Deleting...")).toBeInTheDocument();
  });

  it("shows spinner when deleting", () => {
    const { container } = render(
      <DeleteTabloModal
        tablo={mockTablo}
        onClose={mockOnClose}
        onConfirm={mockOnConfirm}
        isDeleting={true}
      />
    );
    expect(container.querySelector(".animate-spin")).toBeInTheDocument();
  });

  it("displays warning message", () => {
    render(
      <DeleteTabloModal
        tablo={mockTablo}
        onClose={mockOnClose}
        onConfirm={mockOnConfirm}
        isDeleting={false}
      />
    );
    expect(
      screen.getByText("All data associated with this project will be permanently lost.")
    ).toBeInTheDocument();
  });
});
