import { jest } from "@jest/globals";

import React from "react";
import { render, screen, fireEvent } from "@testing-library/react";
import CustomDateRangePicker from "../components/DateRangePicker";

const mockToastError = jest.fn();

jest.unstable_mockModule("react-toastify", () => ({
  toast: {
    error: (...args) => mockToastError(...args),
  },
}));

describe("CustomDateRangePicker Component", () => {
  const mockOnChange = jest.fn();
  const mockOnApply = jest.fn();
  const mockOnClose = jest.fn();

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

  test("initializes with selDate when provided", () => {
    const start = new Date(2023, 0, 1);
    const end = new Date(2023, 0, 5);

    render(
      <CustomDateRangePicker
        onChange={mockOnChange}
        onApply={mockOnApply}
        onClose={mockOnClose}
        selDate={{ startDate: start, endDate: end }}
      />
    );

    expect(screen.getByText("Apply")).toBeEnabled();
  });

  test("calls onApply when Apply button is clicked", () => {
    const start = new Date(2023, 0, 1);
    const end = new Date(2023, 0, 5);

    render(
      <CustomDateRangePicker
        onChange={mockOnChange}
        onApply={mockOnApply}
        onClose={mockOnClose}
        selDate={{ startDate: start, endDate: end }}
      />
    );

    const applyButton = screen.getByText("Apply");
    expect(applyButton).toBeEnabled(); // Make sure button is enabled first
    
    fireEvent.click(applyButton);
    expect(mockOnApply).toHaveBeenCalledTimes(1);
    expect(mockOnApply).toHaveBeenCalledWith(
      expect.objectContaining({
        startDate: expect.any(Date),
        endDate: expect.any(Date),
      })
    );
  });

  test("calls onClose when Close button is clicked", () => {
    render(
      <CustomDateRangePicker
        onChange={mockOnChange}
        onApply={mockOnApply}
        onClose={mockOnClose}
      />
    );

    fireEvent.click(screen.getByText("Close"));
    expect(mockOnClose).toHaveBeenCalledTimes(1);
  });

  test("calls onChange when Clear button is clicked", () => {
    render(
      <CustomDateRangePicker
        onChange={mockOnChange}
        onApply={mockOnApply}
        onClose={mockOnClose}
      />
    );

    fireEvent.click(screen.getByText("Clear"));
    expect(mockOnChange).toHaveBeenCalledTimes(2);
  });

  test("does not call onChange if disableDefaultRange is true on mount", () => {
    render(
      <CustomDateRangePicker
        onChange={mockOnChange}
        onApply={mockOnApply}
        onClose={mockOnClose}
        disableDefaultRange
      />
    );
    expect(mockOnChange).not.toHaveBeenCalled();
  });

  test("disables Apply and shows toast when range > 30 days", () => {
    const selDate = {
      startDate: new Date(2023, 0, 1),
      endDate: new Date(2023, 2, 15), // 70+ days later
    };

    render(
      <CustomDateRangePicker
        selDate={selDate}
        onChange={mockOnChange}
        onApply={mockOnApply}
        onClose={mockOnClose}
      />
    );

    const applyButton = screen.getByText("Apply");
    expect(applyButton).toBeDisabled();

  });

  test("renders action buttons container", () => {
    render(
      <CustomDateRangePicker
        onChange={mockOnChange}
        onApply={mockOnApply}
        onClose={mockOnClose}
      />
    );

    expect(screen.getByTestId("date-picker")).toBeInTheDocument();
  });

  test("renders with default date range when selDate is not provided", () => {
    render(
      <CustomDateRangePicker
        onChange={mockOnChange}
        onApply={mockOnApply}
        onClose={mockOnClose}
      />
    );

    expect(screen.getByText("Apply")).toBeInTheDocument();
    expect(screen.getByText("Clear")).toBeInTheDocument();
    expect(screen.getByText("Close")).toBeInTheDocument();
  });

  test("handles close button click with valid date range", () => {
    const selDate = {
      startDate: new Date(2023, 0, 1),
      endDate: new Date(2023, 0, 10),
    };

    render(
      <CustomDateRangePicker
        selDate={selDate}
        onChange={mockOnChange}
        onApply={mockOnApply}
        onClose={mockOnClose}
      />
    );

    fireEvent.click(screen.getByText("Close"));
    expect(mockOnClose).toHaveBeenCalledTimes(1);
  });

  test("enables Apply button for valid date range under 30 days", () => {
    const selDate = {
      startDate: new Date(2023, 0, 1),
      endDate: new Date(2023, 0, 15),
    };

    render(
      <CustomDateRangePicker
        selDate={selDate}
        onChange={mockOnChange}
        onApply={mockOnApply}
        onClose={mockOnClose}
      />
    );

    const applyButton = screen.getByText("Apply");
    expect(applyButton).not.toBeDisabled();
  });

  test("renders Clear button", () => {
    render(
      <CustomDateRangePicker
        onChange={mockOnChange}
        onApply={mockOnApply}
        onClose={mockOnClose}
      />
    );

    expect(screen.getByTestId("search-clear-button")).toBeInTheDocument();
  });

  test("renders Close button", () => {
    render(
      <CustomDateRangePicker
        onChange={mockOnChange}
        onApply={mockOnApply}
        onClose={mockOnClose}
      />
    );

    expect(screen.getByTestId("close-date")).toBeInTheDocument();
  });
});
