'use client'

import { motion } from 'motion/react'
import { UseFormReturn } from 'react-hook-form'
import { WizardStepContent } from '@/components/forms/form-wizard'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { PhoneInput } from '@/components/ui/phone-input'
import { CountrySelect } from '@/components/ui/country-select'
import type { ApplicationFormData } from '@/server/routers/application'
import type { WizardConfig } from '@/types/wizard-config'
import { isFieldVisible, isFieldRequired, getFieldConfig } from '@/lib/wizard-config'

interface StepContactProps {
  form: UseFormReturn<ApplicationFormData>
  config?: WizardConfig
}

export function StepContact({ form, config }: StepContactProps) {
  const { register, formState: { errors }, setValue, watch } = form
  const country = watch('country')
  const phone = watch('contactPhone')

  const showPhone = !config || isFieldVisible(config, 'contactPhone')
  const showCountry = !config || isFieldVisible(config, 'country')
  const showCity = !config || isFieldVisible(config, 'city')
  const phoneRequired = !config || isFieldRequired(config, 'contactPhone')
  const countryRequired = !config || isFieldRequired(config, 'country')
  const phoneLabel = config ? getFieldConfig(config, 'contactPhone')?.label : undefined
  const countryLabel = config ? getFieldConfig(config, 'country')?.label : undefined

  return (
    <WizardStepContent
      title="Tell us about yourself"
      description="We'll use this information to contact you about your application."
    >
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        className="mx-auto max-w-md space-y-6"
      >
        {/* Full Name */}
        <div className="space-y-2">
          <Label htmlFor="contactName">
            Full Name <span className="text-destructive">*</span>
          </Label>
          <Input
            id="contactName"
            placeholder="John Smith"
            {...register('contactName')}
            className="h-12 text-base"
          />
          {errors.contactName && (
            <p className="text-sm text-destructive">{errors.contactName.message}</p>
          )}
        </div>

        {/* Email */}
        <div className="space-y-2">
          <Label htmlFor="contactEmail">
            Email Address <span className="text-destructive">*</span>
          </Label>
          <Input
            id="contactEmail"
            type="email"
            placeholder="john@example.com"
            {...register('contactEmail')}
            className="h-12 text-base"
          />
          {errors.contactEmail && (
            <p className="text-sm text-destructive">{errors.contactEmail.message}</p>
          )}
        </div>

        {/* Phone */}
        {showPhone && (
          <div className="space-y-2">
            <Label htmlFor="contactPhone">
              {phoneLabel ?? 'Phone Number'}{' '}
              {phoneRequired ? <span className="text-destructive">*</span> : <span className="text-muted-foreground text-xs">(optional)</span>}
            </Label>
            <PhoneInput
              value={phone}
              onChange={(value) => setValue('contactPhone', value || '')}
              defaultCountry="MC"
              className="h-12"
            />
            {errors.contactPhone && (
              <p className="text-sm text-destructive">{errors.contactPhone.message}</p>
            )}
          </div>
        )}

        {/* Country */}
        {showCountry && (
          <div className="space-y-2">
            <Label>
              {countryLabel ?? 'Country'}{' '}
              {countryRequired ? <span className="text-destructive">*</span> : <span className="text-muted-foreground text-xs">(optional)</span>}
            </Label>
            <CountrySelect
              value={country}
              onChange={(value) => setValue('country', value)}
              placeholder="Select your country"
              className="h-12"
            />
            {errors.country && (
              <p className="text-sm text-destructive">{errors.country.message}</p>
            )}
          </div>
        )}

        {/* City (optional) */}
        {showCity && (
          <div className="space-y-2">
            <Label htmlFor="city">
              City <span className="text-muted-foreground text-xs">(optional)</span>
            </Label>
            <Input
              id="city"
              placeholder="Monaco"
              {...register('city')}
              className="h-12 text-base"
            />
          </div>
        )}
      </motion.div>
    </WizardStepContent>
  )
}
