'use client';

import { Controller, useFormContext } from 'react-hook-form';
import { Label } from '@/components/ui/label';
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from '@/components/ui/select';
import { cn } from '@/lib/utils';
import { useEffect } from 'react';

interface RHFSelectProps {
	name: string;
	label?: string;
	options: { value: string; label: string }[];
	className?: string;
	isLoading?: boolean;
	isRequired?: boolean;
	defaultValue?: string; // Add defaultValue prop
}

export default function RHFSelect({
	name,
	label,
	options,
	className = '',
	isLoading,
	isRequired = true,
	defaultValue, // Add defaultValue
}: RHFSelectProps) {
	const { control, clearErrors, setValue } = useFormContext();

	// Set default value when component mounts and options are available
	useEffect(() => {
		if (options.length > 0 && defaultValue) {
			setValue(name, defaultValue, { shouldValidate: false });
		} else if (options.length > 0 && isRequired && !defaultValue) {
			// Auto-select first option if required and no defaultValue
			setValue(name, options[0].value, { shouldValidate: false });
		}
	}, [options, name, setValue, isRequired, defaultValue]);

	return (
		<Controller
			control={control}
			name={name}
			defaultValue={
				defaultValue || (options.length > 0 ? options[0].value : '')
			} // Set defaultValue in Controller
			render={({ field, fieldState: { error } }) => (
				<div className="space-y-2">
					{label && (
						<Label
							htmlFor={name}
							className="text-foreground/80 font-sans"
						>
							{label}
							{isRequired ? (
								<span className="text-primary ml-1">*</span>
							) : (
								<span className="text-muted-foreground text-xs ml-1">
									(optional)
								</span>
							)}
						</Label>
					)}

					<Select
						value={field.value}
						onValueChange={(value) => {
							field.onChange(value);
							clearErrors(name);
						}}
					>
						<SelectTrigger
							className={cn(
								'w-full h-10 rounded-lg border py-2 text-sm font-normal font-sans',
								'bg-card border-border text-foreground placeholder:text-muted-foreground/50',
								'focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary',
								'transition-all duration-200',
								'disabled:cursor-not-allowed disabled:opacity-50',
								className,
								error
									? 'border-destructive focus:ring-destructive'
									: 'hover:border-primary/50'
							)}
						>
							<SelectValue placeholder="Select..." />
						</SelectTrigger>

						<SelectContent
							className={cn(
								'bg-card border border-primary/20 gold-glow rounded-lg p-1',
								'max-h-[300px]'
							)}
						>
							{isLoading ? (
								<SelectItem
									disabled
									value=""
									className="text-muted-foreground font-sans cursor-not-allowed"
								>
									<div className="flex items-center gap-2">
										<div className="animate-spin rounded-full h-3 w-3 border-b-2 border-primary" />
										Loading...
									</div>
								</SelectItem>
							) : (
								options.map((opt) => (
									<SelectItem
										key={opt.value}
										value={opt.value}
										className={cn(
											'font-sans text-foreground/80',
											'cursor-pointer rounded-md transition-colors duration-200',
											'focus:bg-primary/10 focus:text-foreground',
											'data-[highlighted]:bg-primary/10 data-[highlighted]:text-foreground',
											'data-[state=checked]:bg-primary/20 data-[state=checked]:text-primary data-[state=checked]:font-medium'
										)}
									>
										{opt.label}
									</SelectItem>
								))
							)}
						</SelectContent>
					</Select>

					{error && (
						<p className="text-destructive text-xs mt-1 font-sans">
							{error.message}
						</p>
					)}
				</div>
			)}
		/>
	);
}