'use client';

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

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

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, hint, children,
}: {
  label: string; error?: string; required?: boolean; hint?: string; 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}
      {hint && !error && <p className="text-[11px] text-gray-400">{hint}</p>}
      {error && <p className="text-[11px] text-red-500">{error}</p>}
    </div>
  );
}

export default function StepGoals({ register, errors, setValue, watch, serverError }: Props) {
  const motivationValue = watch('motivation') || '';
  const heardFromValue  = watch('heardFrom')  || '';

  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">Your Goals</h3>
        <p className="text-xs text-gray-400 mt-0.5">Help us understand what drives you</p>
      </div>

      <Field
        label="Why do you want to join Ignite-100?"
        error={errors.motivation?.message}
        required
        hint={`${motivationValue.length}/1000 characters · minimum 50`}
      >
        <textarea
          {...register('motivation')}
          rows={5}
          placeholder="Share your goals, what you hope to learn, and how this program fits into your journey..."
          className={`${inputClass(!!errors.motivation)} resize-none`}
        />
      </Field>

      <Field label="How did you hear about Ignite-100?" error={errors.heardFrom?.message} required>
        <StringDropdown
          options={HEARD_FROM_OPTIONS}
          value={heardFromValue}
          onChange={(val) => setValue('heardFrom', val, { shouldValidate: true })}
          placeholder="Select an option"
          hasError={!!errors.heardFrom}
        />
      </Field>

      {/* Referral Code */}
      <Field
        label="Referral Code"
        error={errors.referralCode?.message}
        hint="If someone shared a code with you, enter it here (optional)"
      >
        <input
          {...register('referralCode')}
          placeholder="e.g. TECHTAN10, ORG-2024, john123…"
          className={inputClass(!!errors.referralCode)}
        />
      </Field>

      {serverError && (
        <div className="bg-red-50 border border-red-200 text-red-700 rounded-xl p-4 text-xs leading-relaxed">
          {serverError}
        </div>
      )}
    </div>
  );
}