'use client';

import { Controller, useFormContext } from 'react-hook-form';
import { CalendarIcon } from 'lucide-react';
import { format } from 'date-fns';

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 { cn } from '@/lib/utils';

interface DatePickerDisabledProps {
	before?: Date;
	after?: Date;
	dates?: Date[];
}

interface IProps {
	name: string;
	label: string;
	isRequired?: boolean;
	placeholder?: string;
	disabled?: DatePickerDisabledProps;
}

const RHFDatePicker = ({
	name,
	label,
	isRequired = true,
	placeholder = 'YYYY-MM-DD',
	disabled,
}: IProps) => {
	const { control, clearErrors } = useFormContext();
	return (
		<Controller
			name={name}
			control={control}
			render={({ field, fieldState: { error } }) => {
				const selectedDate = field.value
					? new Date(field.value)
					: undefined;

				// Validate if the date is valid
				const isValidDate = selectedDate && !isNaN(selectedDate.getTime());

				return (
					<div className="space-y-2">
						{/* Label */}
						<Label className="text-sm font-medium mb-1 block">
							{label}{' '}
							{isRequired ? (
								<span className="text-red-500 align-middle">*</span>
							) : (
								<span className="text-gray-400 font-normal text-[10px]">
									(optional)
								</span>
							)}
						</Label>

						{/* Date Picker */}
						<Popover>
							<PopoverTrigger asChild>
								<Button
									type="button"
									variant="outline"
									className={cn(
										'bg-white h-10 w-full justify-between px-3 text-left font-normal',
										error ? 'border-red-500' : 'border-gray-300',
										!field.value && 'text-muted-foreground'
									)}
								>
									{isValidDate
										? format(selectedDate, 'MM/dd/yyyy')
										: placeholder}
									<CalendarIcon className="h-5 w-5 opacity-60" />
								</Button>
							</PopoverTrigger>

							<PopoverContent
								className="w-auto p-0 bg-white"
								align="start"
								side="bottom"
								sideOffset={4}
							>
								<Calendar
									mode="single"
									captionLayout="dropdown"
									fromYear={
										disabled?.before
											? disabled.before.getFullYear()
											: 1900
									}
									toYear={
										disabled?.after
											? disabled.after.getFullYear()
											: 2100
									}
									selected={isValidDate ? selectedDate : undefined}
									defaultMonth={
										isValidDate ? selectedDate : new Date()
									}
									disabled={(date) => {
										if (disabled?.before && date < disabled.before)
											return true;
										if (disabled?.after && date > disabled.after)
											return true;
										if (
											disabled?.dates?.some(
												(d) =>
													format(d, 'yyyy-MM-dd') ===
													format(date, 'yyyy-MM-dd')
											)
										)
											return true;

										return false;
									}}
									onMonthChange={(month) => {
										// Ensure month stays inside the allowed year/month
										if (disabled?.before && month < disabled.before) {
											return;
										}
										if (disabled?.after && month > disabled.after) {
											return;
										}
									}}
									onSelect={(date) => {
										if (date) {
											const isoDate = date
												.toISOString()
												.split('T')[0];
											field.onChange(isoDate);
											clearErrors(name);
										}
									}}
								/>
							</PopoverContent>
						</Popover>

						{/* Error */}
						{error && (
							<p className="text-red-500 text-xs mt-1">
								{error.message}
							</p>
						)}
					</div>
				);
			}}
		/>
	);
};

export default RHFDatePicker;