import { render, screen, fireEvent } from "@testing-library/react";
import RescheduleConfirmDialog from "@/app/[lang]/dashboard/components/RescheduleConfirmDialog";

describe("RescheduleConfirmDialog", () => {
  const mockProps = {
    isOpen: true,
    onConfirm: jest.fn(),
    onCancel: jest.fn(),
    oldDate: "2024-01-15",
    oldTime: "10:00",
    newDate: "2024-01-20",
    newTime: "14:00",
    duration: 60,
    notifyCustomer: true,
    lang: "en" as const,
  };

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

  it("renders confirmation dialog when open", () => {
    render(<RescheduleConfirmDialog {...mockProps} />);

    expect(screen.getByText("Confirm Reschedule")).toBeInTheDocument();
    expect(screen.getByText(/Are you sure/)).toBeInTheDocument();
  });

  it("does not render when closed", () => {
    render(<RescheduleConfirmDialog {...mockProps} isOpen={false} />);

    expect(screen.queryByText("Confirm Reschedule")).not.toBeInTheDocument();
  });

  it("displays old and new appointment details", () => {
    render(<RescheduleConfirmDialog {...mockProps} />);

    expect(screen.getByText("From")).toBeInTheDocument();
    expect(screen.getByText("To")).toBeInTheDocument();
    expect(screen.getByText("60 minutes")).toBeInTheDocument();
  });

  it("shows WhatsApp notification status", () => {
    render(<RescheduleConfirmDialog {...mockProps} />);

    expect(
      screen.getByText(/Customer will be notified via WhatsApp/),
    ).toBeInTheDocument();
  });

  it("shows no notification message when notifyCustomer is false", () => {
    render(<RescheduleConfirmDialog {...mockProps} notifyCustomer={false} />);

    expect(
      screen.getByText(/Customer will not be notified/),
    ).toBeInTheDocument();
  });

  it("calls onConfirm when Confirm button clicked", () => {
    render(<RescheduleConfirmDialog {...mockProps} />);

    const confirmButton = screen.getByRole("button", { name: /Confirm/i });
    fireEvent.click(confirmButton);

    expect(mockProps.onConfirm).toHaveBeenCalledTimes(1);
  });

  it("calls onCancel when Cancel button clicked", () => {
    render(<RescheduleConfirmDialog {...mockProps} />);

    const cancelButton = screen.getByRole("button", { name: /Cancel/i });
    fireEvent.click(cancelButton);

    expect(mockProps.onCancel).toHaveBeenCalledTimes(1);
  });

  it("calls onCancel when backdrop clicked", () => {
    render(<RescheduleConfirmDialog {...mockProps} />);

    const backdrops = screen.getAllByLabelText("Close");
    // Click the backdrop div (not the button)
    const backdrop =
      backdrops.find((el) => el.tagName === "DIV") || backdrops[0];
    fireEvent.click(backdrop);

    expect(mockProps.onCancel).toHaveBeenCalledTimes(1);
  });

  it("renders in Arabic when lang is ar", () => {
    render(<RescheduleConfirmDialog {...mockProps} lang="ar" />);

    expect(screen.getByText("تأكيد إعادة الجدولة")).toBeInTheDocument();
    expect(screen.getByText("من")).toBeInTheDocument();
    expect(screen.getByText("إلى")).toBeInTheDocument();
  });

  it("handles keyboard Enter key to confirm", () => {
    render(<RescheduleConfirmDialog {...mockProps} />);

    fireEvent.keyDown(window, { key: "Enter" });

    expect(mockProps.onConfirm).toHaveBeenCalledTimes(1);
  });

  it("handles keyboard Escape key to cancel", () => {
    render(<RescheduleConfirmDialog {...mockProps} />);

    fireEvent.keyDown(window, { key: "Escape" });

    expect(mockProps.onCancel).toHaveBeenCalledTimes(1);
  });
});