'use client';

import { Button } from '@/components/ui/button';
import { Calendar } from '@/components/ui/calendar';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { cn } from '@/utils/common';
import { format } from 'date-fns';
import { CalendarIcon } from 'lucide-react';
import * as React from 'react';
import { Controller, useFormContext } from 'react-hook-form';

interface DatePickerFieldProps {
    name: string;
    placeholder?: string;
    disabled?: boolean;
    className?: string;
    fromDate?: Date;
    toDate?: Date;
}

export const DatePickerField = ({ name, placeholder = 'Pick a date', disabled, className, fromDate, toDate }: DatePickerFieldProps) => {
    const { control } = useFormContext();
    const [open, setOpen] = React.useState(false);

    return (
        <Controller
            control={control}
            name={name}
            render={({ field }) => {
                // Convert string value to Date object for the picker
                const dateValue = field.value ? new Date(field.value) : undefined;

                return (
                    <Popover open={open} onOpenChange={setOpen}>
                        <PopoverTrigger asChild className="border-input">
                            <Button
                                variant="outline"
                                disabled={disabled}
                                className={cn('h-9 w-full justify-start text-left font-normal', !dateValue && 'text-muted-foreground', className)}
                            >
                                <CalendarIcon className="mr-2 h-4 w-4 shrink-0" />
                                <span className="truncate">{dateValue ? format(dateValue, 'MM/dd/yyyy') : placeholder}</span>
                            </Button>
                        </PopoverTrigger>
                        <PopoverContent className="w-auto p-0" align="start">
                            <Calendar
                                mode="single"
                                selected={dateValue}
                                onSelect={(date) => {
                                    // Convert Date object to ISO string for form
                                    field.onChange(date ? format(date, 'yyyy-MM-dd') : '');
                                    // Close the popover after selection
                                    setOpen(false);
                                }}
                                disabled={(date) => {
                                    if (fromDate && date < fromDate) return true;
                                    if (toDate && date > toDate) return true;
                                    return false;
                                }}
                                initialFocus
                            />
                        </PopoverContent>
                    </Popover>
                );
            }}
        />
    );
};