import { fireEvent, render, screen } from "@testing-library/react";
import type { EventAndTablo } from "@xtablo/shared/types/events.types";
import { describe, expect, it, vi } from "vitest";
import { EventDetailsModal } from "./EventDetailsModal";

// Mock CustomModal
vi.mock("./CustomModal", () => ({
  CustomModal: ({
    isOpen,
    children,
    title,
  }: {
    isOpen: boolean;
    children: React.ReactNode;
    title: string;
  }) =>
    isOpen ? (
      <div data-testid="custom-modal">
        <div>{title}</div>
        <div>{children}</div>
      </div>
    ) : null,
}));

describe("EventDetailsModal", () => {
  const mockEvent = {
    id: "event-1",
    title: "Test Event",
    start_date: "2024-01-15",
    start_time: "10:00:00",
    end_time: "11:00:00",
    description: "Test description",
    tablo_name: "Test Tablo",
    tablo_color: "bg-blue-500",
    tablo_id: "tablo-1",
    tablo_status: "active",
    event_id: "event-1",
  } as EventAndTablo;

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

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

  it("renders without crashing when open", () => {
    render(<EventDetailsModal event={mockEvent} isOpen={true} onClose={mockOnClose} />);
    expect(screen.getByTestId("custom-modal")).toBeInTheDocument();
  });

  it("does not render when closed", () => {
    render(<EventDetailsModal event={mockEvent} isOpen={false} onClose={mockOnClose} />);
    expect(screen.queryByTestId("custom-modal")).not.toBeInTheDocument();
  });

  it("returns null when event is null", () => {
    const { container } = render(
      <EventDetailsModal event={null} isOpen={true} onClose={mockOnClose} />
    );
    expect(container.firstChild).toBeNull();
  });

  it("displays event title", () => {
    render(<EventDetailsModal event={mockEvent} isOpen={true} onClose={mockOnClose} />);
    expect(screen.getByText("Test Event")).toBeInTheDocument();
  });

  it("displays event date and time labels", () => {
    render(<EventDetailsModal event={mockEvent} isOpen={true} onClose={mockOnClose} />);
    expect(screen.getByText("Date and time")).toBeInTheDocument();
  });

  it("displays tablo information", () => {
    render(<EventDetailsModal event={mockEvent} isOpen={true} onClose={mockOnClose} />);
    expect(screen.getByText("Test Tablo")).toBeInTheDocument();
  });

  it("displays description when present", () => {
    render(<EventDetailsModal event={mockEvent} isOpen={true} onClose={mockOnClose} />);
    expect(screen.getByText("Test description")).toBeInTheDocument();
  });

  it("shows close button", () => {
    render(<EventDetailsModal event={mockEvent} isOpen={true} onClose={mockOnClose} />);
    expect(screen.getByText("Close")).toBeInTheDocument();
  });

  it("calls onClose when close button is clicked", () => {
    render(<EventDetailsModal event={mockEvent} isOpen={true} onClose={mockOnClose} />);
    fireEvent.click(screen.getByText("Close"));
    expect(mockOnClose).toHaveBeenCalled();
  });

  it("shows edit button when canEdit is true", () => {
    render(
      <EventDetailsModal
        event={mockEvent}
        isOpen={true}
        onClose={mockOnClose}
        onEdit={mockOnEdit}
        canEdit={true}
      />
    );
    expect(screen.getByText("Edit")).toBeInTheDocument();
  });

  it("does not show edit button when canEdit is false", () => {
    render(
      <EventDetailsModal
        event={mockEvent}
        isOpen={true}
        onClose={mockOnClose}
        onEdit={mockOnEdit}
        canEdit={false}
      />
    );
    expect(screen.queryByText("Edit")).not.toBeInTheDocument();
  });

  it("calls onEdit when edit button is clicked", () => {
    render(
      <EventDetailsModal
        event={mockEvent}
        isOpen={true}
        onClose={mockOnClose}
        onEdit={mockOnEdit}
        canEdit={true}
      />
    );
    fireEvent.click(screen.getByText("Edit"));
    expect(mockOnEdit).toHaveBeenCalled();
  });

  it("displays status badge", () => {
    render(<EventDetailsModal event={mockEvent} isOpen={true} onClose={mockOnClose} />);
    // Status badge should be rendered (upcoming, today, or past)
    const modal = screen.getByTestId("custom-modal");
    expect(modal).toBeInTheDocument();
  });

  it("handles event without description", () => {
    const eventWithoutDesc = { ...mockEvent, description: null };
    render(<EventDetailsModal event={eventWithoutDesc} isOpen={true} onClose={mockOnClose} />);
    expect(screen.queryByText("eventDetailsModal.labels.description")).not.toBeInTheDocument();
  });
});
