import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Controller, useFormContext } from 'react-hook-form';
import { Mail, User, Phone, Globe, Hash } from 'lucide-react';

interface IProps {
	name: string;
	label: string;
	isRequired?: boolean;
	leftIcon?: 'mail' | 'user' | 'phone' | 'globe' | 'hash';
	type?: React.HTMLInputTypeAttribute;
}

type CombinedProps = IProps &
	Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>;

const iconMap = {
	mail: Mail,
	user: User,
	phone: Phone,
	globe: Globe,
	hash: Hash,
};

export default function RHFTextField({
	name,
	label,
	isRequired = true,
	leftIcon,
	type = 'text',
	className = '',
	...other
}: CombinedProps) {
	const { control, clearErrors } = useFormContext();
	const Icon = leftIcon ? iconMap[leftIcon] : null;

	return (
		<Controller
			name={name}
			control={control}
			render={({ field, fieldState: { error } }) => {
				const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
					let value: string | number = e.target.value;

					if (type === 'number') {
						value = e.target.value ? parseFloat(e.target.value) : '';
					}

					field.onChange(value);
					clearErrors(name);
				};

				return (
					<div className="space-y-1.5">
						<Label
							htmlFor={name}
							className="text-sm font-medium text-[#EDEBE6]"
						>
							{label}
							{isRequired ? (
								<span
									className="text-[#CBB26A] ml-1"
									aria-hidden="true"
								>
									*
								</span>
							) : (
								<span className="text-[#B8B2A8] font-normal text-xs ml-1">
									(optional)
								</span>
							)}
						</Label>

						<div className="relative">
							{Icon && (
								<div className="absolute left-3 top-1/2 -translate-y-1/2 text-[#B8B2A8] z-10">
									<Icon className="w-5 h-5" aria-hidden="true" />
								</div>
							)}

							<Input
								id={name}
								type={type}
								{...field}
								value={field.value ?? ''}
								onChange={handleChange}
								aria-invalid={!!error}
								aria-describedby={error ? `${name}-error` : undefined}
								className={`
                  w-full h-11
                  ${Icon ? 'pl-10' : 'pl-4'} pr-4
                  bg-[#1A1612]
                  border ${error ? 'border-red-500' : 'border-[#3A332C]'}
                  rounded-lg
                  text-[#EDEBE6] text-base
                  placeholder:text-[#B8B2A8] placeholder:text-sm
                  shadow-[0_2px_8px_rgba(0,0,0,0.4)]
                  transition-all duration-300
                  hover:border-[#B89E55]
                  focus:border-[#CBB26A]
                  focus:ring-2 focus:ring-[#CBB26A]/20
                  focus:shadow-[0_0_0_1px_#CBB26A]
                  focus:ring-offset-0
                  focus:bg-[#1A1612]
                  disabled:bg-[#14110E]
                  disabled:text-[#B8B2A8]
                  disabled:border-[#2A2520]
                  autofill:bg-[#1A1612]
                  autofill:text-[#EDEBE6]
                  autofill:shadow-[inset_0_0_0px_1000px_#1A1612]
                  ${className}
                `}
								{...other}
							/>
						</div>

						{error && (
							<p
								id={`${name}-error`}
								className="text-red-500 text-xs mt-1.5 flex items-center gap-1"
								role="alert"
							>
								<span
									className="inline-block w-1 h-1 bg-red-500 rounded-full"
									aria-hidden="true"
								/>
								{error.message}
							</p>
						)}
					</div>
				);
			}}
		/>
	);
}