import { ro } from 'date-fns/locale';
import { CalendarIcon } from 'lucide-react';
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Calendar } from '@/components/ui/calendar';
import { Label } from '@/components/ui/label';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { formatDateRo, parseIsoDateString, toIsoDateString } from '@/lib/datetime';
import { cn } from '@/lib/utils';

export type DatePickerFieldProps = {
    label: string;
    value: string;
    onChange: (value: string) => void;
    disabled?: boolean;
    placeholder?: string;
    id?: string;
};

export function DatePickerField({
    label,
    value,
    onChange,
    disabled = false,
    placeholder,
    id,
}: DatePickerFieldProps) {
    const [open, setOpen] = useState(false);
    const selected = parseIsoDateString(value);
    const fieldId = id ?? label.toLowerCase().replace(/\s+/g, '-');

    return (
        <div className="space-y-1.5">
            <Label htmlFor={fieldId}>{label}</Label>
            <Popover open={open} onOpenChange={setOpen}>
                <PopoverTrigger asChild>
                    <Button
                        id={fieldId}
                        type="button"
                        variant="outline"
                        disabled={disabled}
                        className={cn(
                            'h-10 w-full justify-start text-left font-normal shadow-none hover:shadow-none',
                            !selected && 'text-muted-foreground',
                        )}
                    >
                        <CalendarIcon className="mr-2 h-4 w-4 shrink-0 opacity-70" />
                        {selected ? formatDateRo(value) : placeholder}
                    </Button>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0" align="start">
                    <Calendar
                        mode="single"
                        locale={ro}
                        selected={selected}
                        onSelect={(date) => {
                            onChange(toIsoDateString(date));
                            setOpen(false);
                        }}
                        defaultMonth={selected}
                    />
                </PopoverContent>
            </Popover>
        </div>
    );
}