import { fireEvent, screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import type { EventType } from "../hooks/event-types";
import { renderWithProviders } from "../utils/testHelpers";
import { EventTypeCard } from "./EventTypeCard";

// Mock hooks
vi.mock("../hooks/event-types", () => ({
  useEventTypes: () => ({
    toggleEventType: vi.fn(),
    deleteEventType: vi.fn(),
  }),
}));

vi.mock("../lib/env", () => ({
  isDev: false,
}));

describe("EventTypeCard", () => {
  const mockEventType: EventType = {
    id: "1",
    name: "30 Min Meeting",
    duration: 30,
    isActive: true,
    standardName: "30-min-meeting",
    bufferTime: 10,
    maxBookingsPerDay: 5,
    minAdvanceBooking: { value: 1, unit: "hours" as const },
    requiresApproval: false,
    description: "Test description",
  };

  const handleEditEventType = vi.fn();

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

  it("renders without crashing", () => {
    renderWithProviders(
      <EventTypeCard eventType={mockEventType} handleEditEventType={handleEditEventType} />
    );
    expect(screen.getByText("30 Min Meeting")).toBeInTheDocument();
  });

  it("displays event type name", () => {
    renderWithProviders(
      <EventTypeCard eventType={mockEventType} handleEditEventType={handleEditEventType} />
    );
    expect(screen.getByText("30 Min Meeting")).toBeInTheDocument();
  });

  it("displays duration information", () => {
    renderWithProviders(
      <EventTypeCard eventType={mockEventType} handleEditEventType={handleEditEventType} />
    );
    expect(screen.getByText("Duration:")).toBeInTheDocument();
    // Duration is displayed as "30 min"
    const durationElements = screen.getAllByText((_content, element) => {
      return (
        (element?.textContent?.includes("30") && element?.textContent?.includes("min")) || false
      );
    });
    expect(durationElements.length).toBeGreaterThan(0);
  });

  it("displays buffer time when present", () => {
    renderWithProviders(
      <EventTypeCard eventType={mockEventType} handleEditEventType={handleEditEventType} />
    );
    expect(screen.getByText("Buffer time:")).toBeInTheDocument();
    expect(screen.getByText(/10/)).toBeInTheDocument();
  });

  it("displays max bookings per day when present", () => {
    renderWithProviders(
      <EventTypeCard eventType={mockEventType} handleEditEventType={handleEditEventType} />
    );
    expect(screen.getByText("5")).toBeInTheDocument();
  });

  it("shows active status when isActive is true", () => {
    renderWithProviders(
      <EventTypeCard eventType={mockEventType} handleEditEventType={handleEditEventType} />
    );
    expect(screen.getByText("Active")).toBeInTheDocument();
  });

  it("shows inactive status when isActive is false", () => {
    const inactiveEventType = { ...mockEventType, isActive: false };
    renderWithProviders(
      <EventTypeCard eventType={inactiveEventType} handleEditEventType={handleEditEventType} />
    );
    expect(screen.getByText("Inactive")).toBeInTheDocument();
  });

  it("calls handleEditEventType when edit button is clicked", () => {
    renderWithProviders(
      <EventTypeCard eventType={mockEventType} handleEditEventType={handleEditEventType} />
    );
    const editButton = screen.getByLabelText("Edit");
    fireEvent.click(editButton);
    expect(handleEditEventType).toHaveBeenCalledWith(mockEventType.id, mockEventType);
  });

  it("has settings, preview, edit, and delete buttons", () => {
    renderWithProviders(
      <EventTypeCard eventType={mockEventType} handleEditEventType={handleEditEventType} />
    );
    expect(screen.getByLabelText("Configure integration")).toBeInTheDocument();
    expect(screen.getByLabelText("Preview")).toBeInTheDocument();
    expect(screen.getByLabelText("Edit")).toBeInTheDocument();
    expect(screen.getByLabelText("Delete")).toBeInTheDocument();
  });

  it("applies opacity when inactive", () => {
    const inactiveEventType = { ...mockEventType, isActive: false };
    const { container } = renderWithProviders(
      <EventTypeCard eventType={inactiveEventType} handleEditEventType={handleEditEventType} />
    );
    const card = container.querySelector(".opacity-70");
    expect(card).toBeInTheDocument();
  });
});
