import { useForm, FormProvider } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import type { Coacreditado } from '../types'
import { coacreditadoSchema } from '../lib/schemas'
import DatosGeneralesCampos from './DatosGeneralesCampos'
import EmpleoCampos from './EmpleoCampos'
import EconomicosCampos from './EconomicosCampos'
import Navegacion from './Navegacion'
import type { PasoProps } from './DatosGeneralesForm'

/** Paso 4: co-acreditado o cónyuge (opcional, toggle) */
export default function CoacreditadoForm({ valores, onAnterior, onSiguiente }: PasoProps<Coacreditado>) {
  const metodos = useForm<Coacreditado>({
    resolver: zodResolver(coacreditadoSchema),
    defaultValues: valores,
    mode: 'onSubmit',
  })
  const tieneCoacreditado = metodos.watch('tieneCoacreditado')

  return (
    <FormProvider {...metodos}>
      <form onSubmit={metodos.handleSubmit(onSiguiente)} noValidate>
        <label htmlFor="tieneCoacreditado" className="flex items-center gap-3 px-6 py-5">
          <input
            id="tieneCoacreditado"
            type="checkbox"
            className="h-5 w-5 accent-accent"
            {...metodos.register('tieneCoacreditado')}
          />
          <span className="text-sm font-medium text-[#111827]">¿Hay co-acreditado o cónyuge?</span>
        </label>

        {tieneCoacreditado && (
          <div className="border-t border-[#E5E7EB]">
            <DatosGeneralesCampos prefix="generales." compacto />
            <EmpleoCampos prefix="empleo." />
            <EconomicosCampos prefix="economicos." />
          </div>
        )}

        <Navegacion onAnterior={onAnterior} />
      </form>
    </FormProvider>
  )
}