import { useForm } from 'react-hook-form'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import type { Member } from '@/types/account'

interface MemberFormProps {
  accountId: string
  defaultValues?: Partial<Member>
  onSubmit: (data: Record<string, unknown>) => void
  loading?: boolean
}

export function MemberForm({ accountId, defaultValues, onSubmit, loading }: MemberFormProps) {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm({
    defaultValues: {
      firstName: defaultValues?.firstName ?? '',
      lastName: defaultValues?.lastName ?? '',
      dateOfBirth: defaultValues?.dateOfBirth ?? '',
      isMinor: defaultValues?.isMinor ?? false,
      email: defaultValues?.email ?? '',
      phone: defaultValues?.phone ?? '',
      notes: defaultValues?.notes ?? '',
    },
  })

  const dateOfBirth = watch('dateOfBirth')

  function handleFormSubmit(data: Record<string, unknown>) {
    // Strip empty strings to undefined for the API
    const cleaned: Record<string, unknown> = { accountId }
    for (const [key, value] of Object.entries(data)) {
      cleaned[key] = value === '' ? undefined : value
    }
    onSubmit(cleaned)
  }

  return (
    <form onSubmit={handleSubmit(handleFormSubmit)} noValidate className="space-y-4">
      <div className="grid grid-cols-2 gap-4">
        <div className="space-y-2">
          <Label htmlFor="firstName">First Name *</Label>
          <Input id="firstName" {...register('firstName', { required: 'Required' })} />
          {errors.firstName && <p className="text-sm text-destructive">{errors.firstName.message}</p>}
        </div>
        <div className="space-y-2">
          <Label htmlFor="lastName">Last Name *</Label>
          <Input id="lastName" {...register('lastName', { required: 'Required' })} />
          {errors.lastName && <p className="text-sm text-destructive">{errors.lastName.message}</p>}
        </div>
      </div>
      <div className="space-y-2">
        <Label htmlFor="memberEmail">Email</Label>
        <Input id="memberEmail" type="email" {...register('email')} />
      </div>
      <div className="grid grid-cols-2 gap-4">
        <div className="space-y-2">
          <Label htmlFor="dateOfBirth">Date of Birth</Label>
          <Input id="dateOfBirth" type="date" {...register('dateOfBirth')} />
        </div>
        <div className="space-y-2">
          <Label htmlFor="memberPhone">Phone</Label>
          <Input id="memberPhone" {...register('phone')} />
        </div>
      </div>
      {!dateOfBirth && (
        <div className="flex items-center gap-2">
          <input type="checkbox" id="isMinor" {...register('isMinor')} className="rounded" />
          <Label htmlFor="isMinor" className="font-normal">This person is a minor (under 18)</Label>
        </div>
      )}
      <div className="space-y-2">
        <Label htmlFor="memberNotes">Notes</Label>
        <Textarea id="memberNotes" {...register('notes')} />
      </div>
      <Button type="submit" disabled={loading}>
        {loading ? 'Saving...' : defaultValues ? 'Update Member' : 'Add Member'}
      </Button>
    </form>
  )
}
