import React, { useState } from "react";
import { MdKeyboardArrowDown } from "react-icons/md";

interface DateFilterPopoverProps {
  isOpen: boolean;
  onClose: () => void;
  onApply: (startDate: string | null, endDate: string | null) => void;
  initialStartDate?: string | null;
  initialEndDate?: string | null;
  singleDateMode?: boolean;
  showDateRangeInfo?: boolean;
  dayHeaderFormat?: "short" | "long";
}

const DateFilterPopover: React.FC<DateFilterPopoverProps> = ({
  isOpen,
  onClose,
  onApply,
  initialStartDate,
  initialEndDate,
  singleDateMode = false,
  showDateRangeInfo = false,
  dayHeaderFormat = "short",
}) => {
  const [selectedYear, setSelectedYear] = useState(new Date().getFullYear());
  const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth());
  const [startDate, setStartDate] = useState<Date | null>(
    initialStartDate ? new Date(initialStartDate) : null
  );
  const [endDate, setEndDate] = useState<Date | null>(
    initialEndDate ? new Date(initialEndDate) : null
  );

  const currentYear = new Date().getFullYear();
  const years = Array.from({ length: 11 }, (_, i) => currentYear - 5 + i);

  const months = [
    "January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December",
  ];

  const dayHeaders =
    dayHeaderFormat === "long"
      ? ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
      : ["M", "T", "W", "T", "F", "S", "S"];

  const getDaysInMonth = (year: number, month: number) => {
    return new Date(year, month + 1, 0).getDate();
  };

  const getFirstDayOfMonth = (year: number, month: number) => {
    const firstDay = new Date(year, month, 1).getDay();
    return firstDay === 0 ? 6 : firstDay - 1;
  };

  const handleDateClick = (day: number) => {
    const clickedDate = new Date(selectedYear, selectedMonth, day);

    if (singleDateMode) {
      setStartDate(clickedDate);
      setEndDate(null);
    } else {
      if (!startDate || (startDate && endDate)) {
        setStartDate(clickedDate);
        setEndDate(null);
      } else if (startDate && !endDate) {
        if (clickedDate >= startDate) {
          setEndDate(clickedDate);
        } else {
          setStartDate(clickedDate);
          setEndDate(startDate);
        }
      }
    }
  };

  const isDateSelected = (day: number) => {
    const date = new Date(selectedYear, selectedMonth, day);
    if (!startDate) return false;

    if (!endDate || singleDateMode) {
      return date.toDateString() === startDate.toDateString();
    }

    return date >= startDate && date <= endDate;
  };

  const isStartDate = (day: number) => {
    const date = new Date(selectedYear, selectedMonth, day);
    return startDate && date.toDateString() === startDate.toDateString();
  };

  const isEndDate = (day: number) => {
    const date = new Date(selectedYear, selectedMonth, day);
    return endDate && date.toDateString() === endDate.toDateString();
  };

  const formatDate = (date: Date) => {
    return date.toLocaleDateString("en-US", {
      month: "short",
      day: "numeric",
      year: "numeric",
    });
  };

  const handleApply = () => {
    const start = startDate
      ? `${startDate.getFullYear()}-${String(startDate.getMonth() + 1).padStart(2, "0")}-${String(startDate.getDate()).padStart(2, "0")}`
      : null;
    const end = endDate
      ? `${endDate.getFullYear()}-${String(endDate.getMonth() + 1).padStart(2, "0")}-${String(endDate.getDate()).padStart(2, "0")}`
      : null;

    if (start || end) {
      onApply(start, end);
      onClose();
    }
  };

  const handleClear = () => {
    setStartDate(null);
    setEndDate(null);
    onApply(null, null);
    onClose();
  };

  if (!isOpen) return null;

  const daysInMonth = getDaysInMonth(selectedYear, selectedMonth);
  const firstDay = getFirstDayOfMonth(selectedYear, selectedMonth);
  const days = Array.from({ length: daysInMonth }, (_, i) => i + 1);
  const emptyDays = Array.from({ length: firstDay }, (_, i) => null);

  return (
    <div className="fixed inset-0 z-50 overflow-hidden">
      <div className="absolute inset-0 overflow-hidden">
        <div
          className="fixed inset-0 bg-black bg-opacity-25 transition-opacity"
          onClick={onClose}
        />

        <div className="absolute right-0 top-20 max-w-md transform p-4 transition-all md:right-16">
          <div className="bg-white rounded-xl shadow-[0px_4px_34px_0px_rgba(0,59,113,0.16)] overflow-hidden w-80">
            {/* Header with year and month selectors */}
            <div className="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
              <div className="flex items-center space-x-4">
                <div className="flex items-center rounded-lg border border-gray-300 px-3 py-2">
                  <select
                    value={selectedYear}
                    onChange={(e) => setSelectedYear(Number(e.target.value))}
                    className="bg-transparent text-sm outline-none appearance-none text-black"
                    style={{ padding: "4px" }}
                  >
                    {years.map((year) => (
                      <option key={year} value={year} style={{ padding: "4px" }}>
                        {year}
                      </option>
                    ))}
                  </select>
                  <MdKeyboardArrowDown className="text-gray-500" size={16} />
                </div>

                <div className="flex items-center rounded-lg border border-gray-300 px-3 py-2">
                  <select
                    value={selectedMonth}
                    onChange={(e) => setSelectedMonth(Number(e.target.value))}
                    className="bg-transparent text-sm outline-none appearance-none text-black"
                    style={{ padding: "4px" }}
                  >
                    {months.map((month, index) => (
                      <option key={month} value={index} style={{ padding: "4px" }}>
                        {month}
                      </option>
                    ))}
                  </select>
                  <MdKeyboardArrowDown className="text-gray-500" size={16} />
                </div>
              </div>
            </div>

            {/* Date range info (optional) */}
            {showDateRangeInfo && (
              <div className="px-6 py-3 bg-gray-50 border-b border-gray-200">
                <div className="text-sm text-gray-600">
                  {!singleDateMode && (
                    <>
                      <div className="flex justify-between">
                        <span>Start Date:</span>
                        <span className="font-medium">
                          {startDate ? formatDate(startDate) : "Not selected"}
                        </span>
                      </div>
                      <div className="flex justify-between mt-1">
                        <span>End Date:</span>
                        <span className="font-medium">
                          {endDate ? formatDate(endDate) : "Not selected"}
                        </span>
                      </div>
                    </>
                  )}
                  {singleDateMode && (
                    <div className="flex justify-between">
                      <span>Selected Date:</span>
                      <span className="font-medium">
                        {startDate ? formatDate(startDate) : "Not selected"}
                      </span>
                    </div>
                  )}
                </div>
              </div>
            )}

            {/* Calendar */}
            <div className="px-6 py-4">
              {/* Day headers */}
              <div className="grid grid-cols-7 gap-1 mb-2">
                {dayHeaders.map((day, index) => (
                  <div
                    key={`day-header-${index}`}
                    className={`text-center font-medium text-gray-500 py-2 ${
                      dayHeaderFormat === "long" ? "text-xs" : "text-sm"
                    }`}
                  >
                    {day}
                  </div>
                ))}
              </div>

              {/* Calendar grid */}
              <div className="grid grid-cols-7 gap-1">
                {emptyDays.map((_, index) => (
                  <div key={`empty-${index}`} className="h-10" />
                ))}

                {days.map((day) => {
                  const selected = isDateSelected(day);
                  const isStart = isStartDate(day);
                  const isEnd = isEndDate(day);

                  return (
                    <div key={day} className="relative">
                      <button
                        onClick={() => handleDateClick(day)}
                        className={`
                          h-10 w-10 text-sm rounded-full flex items-center justify-center cursor-pointer transition-colors relative
                          ${
                            selected
                              ? isStart || isEnd
                                ? "bg-[#3997E0] text-white"
                                : "bg-blue-100 text-blue-600"
                              : "text-gray-700 hover:bg-gray-100"
                          }
                        `}
                      >
                        {day}
                      </button>
                      {!singleDateMode && isStart && (
                        <div className="absolute -bottom-4 left-1/2 transform -translate-x-1/2">
                          <span className="text-xs font-medium text-[#3997E0] bg-blue-50 px-1 rounded">
                            Start
                          </span>
                        </div>
                      )}
                      {!singleDateMode && isEnd && (
                        <div className="absolute -bottom-4 left-1/2 transform -translate-x-1/2">
                          <span className="text-xs font-medium text-[#3997E0] bg-blue-50 px-1 rounded">
                            End
                          </span>
                        </div>
                      )}
                    </div>
                  );
                })}
              </div>
            </div>

            {/* Footer */}
            <div className="px-6 py-3 flex justify-between items-center border-t border-gray-100">
              <button
                onClick={handleClear}
                className="text-gray-600 text-sm font-medium hover:text-gray-800"
              >
                Clear
              </button>
              <button
                onClick={handleApply}
                className="bg-[#3997E0] text-white py-1 px-4 rounded-xl hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center"
              >
                Apply
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default DateFilterPopover;