import { format } from 'date-fns';
import { CalendarIcon } from 'lucide-react';
import * as React from 'react';
import { DateRange } from 'react-date-range';

import { Button } from '@admin/components/ui/button';
import { Popover, PopoverContent, PopoverTrigger } from '@admin/components/ui/popover';
import { cn } from '@admin/lib/utils';

interface DateRangePickerProps {
    date: { from: Date | undefined; to: Date | undefined };
    setDate: React.Dispatch<React.SetStateAction<{ from: Date | undefined; to: Date | undefined }>>;
    isOpen?: boolean;
    onOpenChange?: (open: boolean) => void;
}

export function DateRangePicker({ date, setDate, isOpen, onOpenChange }: DateRangePickerProps) {
    const [state, setState] = React.useState([
        {
            startDate: date.from || new Date(),
            endDate: date.to || new Date(),
            key: 'selection',
        },
    ]);

    // Sync with external state
    React.useEffect(() => {
        setState([
            {
                startDate: date.from || new Date(),
                endDate: date.to || new Date(),
                key: 'selection',
            },
        ]);
    }, [date.from, date.to]);

    const handleDateRangeChange = (item: any) => {
        const newState = [item.selection];
        setState(newState);
        setDate({
            from: item.selection.startDate,
            to: item.selection.endDate,
        });
    };

    // 🧩 Fix: prevent react-date-range from auto-selecting text in startDate input
    React.useEffect(() => {
        if (isOpen) {
            const timer = setTimeout(() => {
                const dateInputs = document.querySelectorAll<HTMLInputElement>('.rdrDateInput input');
                dateInputs.forEach((input) => {
                    const len = input.value.length;
                    try {
                        input.setSelectionRange(len, len);
                    } catch {}
                });
            }, 50); // small delay to let popover render first
            return () => clearTimeout(timer);
        }
    }, [isOpen]);

    return (
        <div className="grid gap-2">
            <Popover open={isOpen} onOpenChange={onOpenChange}>
                <PopoverTrigger asChild>
                    <Button
                        variant="outline"
                        className={cn(
                            'w-auto justify-start border-gray-300 bg-card text-left font-normal text-text-primary',
                            !date && 'text-muted-foreground',
                        )}
                    >
                        <CalendarIcon className="mr-2 h-4 w-4 text-text-primary" />
                        {date?.from && date?.to ? (
                            <>
                                {format(date.from, 'dd MMM, yyyy')} - {format(date.to, 'dd MMM, yyyy')}
                            </>
                        ) : (
                            <span>Pick a date range</span>
                        )}
                    </Button>
                </PopoverTrigger>
                <PopoverContent
                    className="w-auto max-w-fit border-gray-200 bg-card p-0"
                    align="end"
                    side="bottom"
                    sideOffset={5}
                    avoidCollisions={true}
                    collisionPadding={10}
                >
                    <div className="overflow-hidden rounded-md">
                        <DateRange
                            rangeColors={['var(--primary)']}
                            editableDateInputs={true}
                            onChange={handleDateRangeChange}
                            moveRangeOnFirstSelection={false}
                            ranges={state}
                        />
                    </div>
                </PopoverContent>
            </Popover>
        </div>
    );
}