import { Calendar } from '@/components/ui/calendar';
import { Button } from '@/components/ui/button';
import CommonImage from '@/components/common/CommonImage';
import { format } from 'date-fns';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover';
import { FormElement } from '@/types/form-types';
import React, { useMemo, useState, useCallback } from 'react';
import { DateRange } from 'react-day-picker';

interface FormDatePickerProps {
  element: FormElement;
  field: {
    value: DateRange | null | undefined;
    onChange: (value: DateRange | null | undefined) => void;
  };
}

const DATE_FORMAT = 'LLL dd, y';

export const FormDatePicker = React.memo(({ field }: FormDatePickerProps) => {
  const [open, setOpen] = useState(false);

  // ✅ Ensure value is always either valid or undefined
  const selectedRange = field.value ?? undefined;

  const formattedDateRange = useMemo(() => {
    if (!selectedRange?.from) return <span>Pick a date range</span>;

    if (selectedRange.to) {
      return (
        <>
          {format(selectedRange.from, DATE_FORMAT)} -{' '}
          {format(selectedRange.to, DATE_FORMAT)}
        </>
      );
    }

    return format(selectedRange.from, DATE_FORMAT);
  }, [selectedRange]);

  // ✅ FIX: Clear properly using null
  const handleClear = useCallback(() => {
    field.onChange(null); // 🔥 important
    setOpen(false);
  }, [field]);

  const handleApply = useCallback(() => {
    setOpen(false);
  }, []);

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          className="w-full justify-start text-left font-normal calendar-date-button flex content-between"
          aria-label="Select date range"
        >
          {formattedDateRange}
          <CommonImage
            src="/main/date_calendar.webp"
            width={18}
            height={18}
            alt="calendar"
            classname="calendar-icon"
          />
        </Button>
      </PopoverTrigger>

      <PopoverContent
        className="w-auto p-4 space-y-2 calendar-date-widget"
        align="start"
      >
        <Calendar
          key={selectedRange ? JSON.stringify(selectedRange) : 'empty'}
          // 🔥 forces rerender when cleared
          initialFocus
          mode="range"
          defaultMonth={selectedRange?.from}
          selected={selectedRange}
          numberOfMonths={2}
          onSelect={(range) => field.onChange(range ?? null)} // 🔥 normalize
          disabled={(date) =>
            date > new Date() || date < new Date('1900-01-01')
          }
          showOutsideDays
          fixedWeeks
        />

        <div className="flex justify-end gap-2 pt-2">
          <Button
            size="sm"
            onClick={handleApply}
            disabled={!selectedRange?.from}
            type="button"
            className="calendar-apply-btn"
          >
            Apply
          </Button>

          <Button
            size="sm"
            variant="ghost"
            onClick={handleClear}
            type="button"
            className="calendar-clear-btn"
          >
            Clear
          </Button>
        </div>
      </PopoverContent>
    </Popover>
  );
});

FormDatePicker.displayName = 'FormDatePicker';