import { useFormContext, Controller } from 'react-hook-form';
import { useState } from 'react';
import { Eye, EyeOff, Lock } from 'lucide-react';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';

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

export default function RHFPasswordField({
	name,
	label,
	isRequired = true,
	className = '',
	...other
}: IProps & React.InputHTMLAttributes<HTMLInputElement>) {
	const { control, clearErrors } = useFormContext();
	const [showPassword, setShowPassword] = useState(false);
	return (
		<Controller
			name={name}
			control={control}
			render={({ field, fieldState: { error } }) => (
				<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">
						{/* Left Lock Icon */}
						<div className="absolute left-3 top-1/2 -translate-y-1/2 text-[#B8B2A8]">
							<Lock className="w-5 h-5" aria-hidden="true" />
						</div>

						<Input
							id={name}
							{...field}
							value={field.value ?? ''}
							onChange={(e) => {
								field.onChange(e.target.value);
								clearErrors(name);
							}}
							type={showPassword ? 'text' : 'password'}
							aria-invalid={!!error}
							aria-describedby={error ? `${name}-error` : undefined}
							className={`
                w-full h-11
                pl-10 pr-11
                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
                disabled:bg-[#14110E]
                disabled:text-[#B8B2A8]
                disabled:border-[#2A2520]
                ${className}
              `}
							{...other}
						/>

						{/* Toggle Icon */}
						<button
							type="button"
							onClick={() => setShowPassword(!showPassword)}
							className="absolute right-3 top-1/2 -translate-y-1/2 text-[#B8B2A8] hover:text-[#EDEBE6] transition-colors duration-200"
							tabIndex={-1}
						>
							{showPassword ? (
								<EyeOff className="w-5 h-5" />
							) : (
								<Eye className="w-5 h-5" />
							)}
						</button>
					</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>
			)}
		/>
	);
}