import { DateRangePicker } from '@admin/components/dashboard/date-range-picker';
import { format } from 'date-fns';

interface AppDateRangeFilterProps {
    startDate: string; // YYYY-MM-DD
    endDate: string; // YYYY-MM-DD
    onStartDateChange: (date: string) => void; // expects YYYY-MM-DD or ''
    onEndDateChange: (date: string) => void; // expects YYYY-MM-DD or ''
    className?: string;
}

// Wrapper that adapts the dashboard DateRangePicker (Date objects) to the table filter (string dates)
export default function AppDateRangeFilter({ startDate, endDate, onStartDateChange, onEndDateChange, className }: AppDateRangeFilterProps) {
    // Parse incoming strings to Date objects (ignore invalid)
    const parse = (v: string): Date | undefined => {
        if (!v) return undefined;
        const d = new Date(v + 'T00:00:00');
        return isNaN(d.getTime()) ? undefined : d;
    };

    const dateObj = { from: parse(startDate), to: parse(endDate) };

    const handleSetDate = (range: { from: Date | undefined; to: Date | undefined }) => {
        if (range.from) {
            onStartDateChange(format(range.from, 'yyyy-MM-dd'));
        } else {
            onStartDateChange('');
        }
        if (range.to) {
            onEndDateChange(format(range.to, 'yyyy-MM-dd'));
        } else {
            onEndDateChange('');
        }
    };

    return (
        <div className={className || ''}>
            <DateRangePicker date={dateObj} setDate={handleSetDate as any} />
        </div>
    );
}