import { CalendarIcon } from "lucide-react";
import {
  Button as RACButton,
  DateRangePicker,
  Dialog as RACDialog,
  Group,
  Label as RACLabel,
  Popover,
} from "react-aria-components";
import { cn } from "@/lib/utils";
import { RangeCalendar } from "@/components/ui/calendar-rac";
import { DateInput, dateInputStyle } from "@/components/ui/datefield-rac";
import { CalendarDate } from '@internationalized/date';

export function DateRangePickerRAC({
    startDate,
    endDate,
    onChange,
    required,
    showError,
    label,
}: {
    startDate: string | null | undefined,
    endDate: string | null | undefined,
    onChange: (start: string | null, end: string | null) => void,
    required?: boolean,
    showError?: boolean,
    label?: string,
}) {
    // Helpers para convertir entre string y CalendarDate
    function toCalendarDateValue(date?: string | null): CalendarDate | null {
        if (!date) return null;
        if (typeof date === 'string' && date.length >= 10) {
            const [y, m, d] = date.slice(0, 10).split('-').map(Number);
            if (y && m && d) return new CalendarDate(y, m, d);
        }
        return null;
    }
    function fromCalendarDateValue(cd: CalendarDate | null): string | null {
        if (!cd) return null;
        return `${cd.year.toString().padStart(4, '0')}-${cd.month.toString().padStart(2, '0')}-${cd.day.toString().padStart(2, '0')}`;
    }

    return (
        <DateRangePicker
            className="*:not-first:mt-2"
            onChange={(range: any) => {
                onChange(
                    fromCalendarDateValue(range?.start || null),
                    fromCalendarDateValue(range?.end || null)
                );
            }}
            isRequired={required}
            aria-label={label || "Seleccionar rango de fechas"}
        >
            {/* <RACLabel className="text-foreground text-sm font-medium">
            </RACLabel> */}
            <div className="flex">
                <Group className={cn(dateInputStyle, "pe-9")}>
                    <DateInput slot="start" unstyled />
                    <span aria-hidden="true" className="text-muted-foreground/70 px-2">
                        -
                    </span>
                    <DateInput slot="end" unstyled />
                </Group>
                <RACButton className="text-muted-foreground/80 hover:text-foreground data-focus-visible:border-ring data-focus-visible:ring-ring/50 z-10 -ms-9 -me-px flex w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none data-focus-visible:ring-[3px]">
                    <CalendarIcon size={16} />
                </RACButton>
            </div>
            <Popover
                className="pointer-events-auto bg-background text-popover-foreground data-entering:animate-in data-exiting:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0 data-[entering]:zoom-in-95 data-[exiting]:zoom-out-95 data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2 z-50 rounded-md border shadow-lg outline-hidden"
                offset={4}
            >
                <RACDialog className="max-h-[inherit] overflow-auto p-2">
                    <RangeCalendar />
                </RACDialog>
            </Popover>
            {showError && required && (!startDate || !endDate) && (
                <div className="text-destructive text-xs mt-1">Selecciona un rango de fechas.</div>
            )}
        </DateRangePicker>
    );
}