'use client';

import { UseFormRegister, FormState, UseFormSetValue, UseFormWatch } from 'react-hook-form';
import { RegistrationFormData } from '@/lib/validations/registration';
import CustomDropdown from './CustomDropdown';

const AGE_RANGES = [
  { value: 'under_18', label: 'Under 18' },
  { value: '18_25',    label: '18 – 25' },
  { value: '26_30',    label: '26 – 30' },
  { value: '31_35',    label: '31 – 35' },
  { value: '36_plus',  label: '36 and above' },
];

interface Props {
  register: UseFormRegister<RegistrationFormData>;
  errors: FormState<RegistrationFormData>['errors'];
  setValue: UseFormSetValue<RegistrationFormData>;
  watch: UseFormWatch<RegistrationFormData>;
}

function inputClass(hasError: boolean) {
  return `w-full px-3 py-3 rounded-md border text-sm transition-all outline-none focus:ring-2 ${
    hasError
      ? 'border-red-300 bg-red-50 focus:ring-red-200 focus:border-red-400'
      : 'border-gray-200 focus:ring-gray-900/10 focus:border-gray-400 bg-gray-300'
  }`;
}

function Field({
  label, error, required, children,
}: {
  label: string; error?: string; required?: boolean; children: React.ReactNode;
}) {
  return (
    <div className="space-y-1.5">
      <label className="block text-xs font-semibold text-gray-700 uppercase tracking-wide">
        {label}{required && <span className="text-orange-500 ml-1">*</span>}
      </label>
      {children}
      {error && <p className="text-[11px] text-red-500">{error}</p>}
    </div>
  );
}

export default function StepPersonal({ register, errors, setValue, watch }: Props) {
  const genderValue   = watch('gender')   || '';
  const ageRangeValue = watch('ageRange') || '';

  return (
    <div className="space-y-5 animate-in fade-in slide-in-from-right-4 duration-300">
      <div className="mb-1">
        <h3 className="text-lg font-bold text-gray-900">Personal Information</h3>
        <p className="text-xs text-gray-500 mt-1">Tell us a bit about yourself</p>
      </div>
      <br />
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <Field label="Full Name" error={errors.fullName?.message} required>
          <input
            {...register('fullName')}
            placeholder="e.g. Adaeze Okafor"
            className={inputClass(!!errors.fullName)}
          />
        </Field>
        <Field label="Email Address" error={errors.email?.message} required>
          <input
            {...register('email')}
            type="email"
            placeholder="adaeze@example.com"
            className={inputClass(!!errors.email)}
          />
        </Field>
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <Field label="Phone Number" error={errors.phone?.message} required>
          <input
            {...register('phone')}
            placeholder="08012345678"
            className={inputClass(!!errors.phone)}
          />
        </Field>
        <Field label="Gender" error={errors.gender?.message} required>
          <CustomDropdown
            options={[
              { value: 'male',              label: 'Male' },
              { value: 'female',            label: 'Female' },
              { value: 'prefer_not_to_say', label: 'Prefer not to say' },
            ]}
            value={genderValue}
            onChange={(val) =>
              setValue('gender', val as RegistrationFormData['gender'], { shouldValidate: true })
            }
            placeholder="Choose your gender"
            hasError={!!errors.gender}
          />
        </Field>
      </div>
      <Field label="Age Range" error={errors.ageRange?.message} required>
        <CustomDropdown
          options={AGE_RANGES}
          value={ageRangeValue}
          onChange={(val) =>
            setValue('ageRange', val as RegistrationFormData['ageRange'], { shouldValidate: true })
          }
          placeholder="Select your age range"
          hasError={!!errors.ageRange}
        />
      </Field>
    </div>
  );
}