import { useFormContext } from 'react-hook-form'
import { CampoNumero, CampoTexto } from '../components/Campos'
import SectionCard from '../components/SectionCard'
import { formatoMoneda } from '../lib/formatters'

interface Props {
  prefix: string
}

/** Campos de datos económicos con totales calculados de solo lectura */
export default function EconomicosCampos({ prefix }: Props) {
  const { watch } = useFormContext()
  const p = (campo: string) => `${prefix}${campo}`

  const ingresosMensuales = Number(watch(p('ingresosMensuales'))) || 0
  const otrosIngresos = Number(watch(p('otrosIngresos'))) || 0
  const gastosLuz = Number(watch(p('gastosLuz'))) || 0
  const gastosOtros = Number(watch(p('gastosOtros'))) || 0

  return (
    <SectionCard titulo="Datos económicos">
      <CampoNumero nombre={p('ingresosMensuales')} etiqueta="Ingresos mensuales" />
      <CampoNumero nombre={p('otrosIngresos')} etiqueta="Otros ingresos" />
      <label htmlFor={`${prefix}totalIngresos`} className="block">
        <span className="mb-1 block text-xs font-medium text-[#4B5563]">Total ingresos</span>
        <input
          id={`${prefix}totalIngresos`}
          type="text"
          readOnly
          value={formatoMoneda(ingresosMensuales + otrosIngresos)}
          className="w-full rounded-lg border border-[#E5E7EB] bg-[#F8FAFC] px-3 py-2.5 text-sm font-semibold text-[#111827]"
        />
      </label>
      <CampoNumero nombre={p('gastosLuz')} etiqueta="Gastos luz" />
      <CampoNumero nombre={p('gastosOtros')} etiqueta="Otros gastos" />
      <label htmlFor={`${prefix}gastosTotal`} className="block">
        <span className="mb-1 block text-xs font-medium text-[#4B5563]">Gastos total</span>
        <input
          id={`${prefix}gastosTotal`}
          type="text"
          readOnly
          value={formatoMoneda(gastosLuz + gastosOtros)}
          className="w-full rounded-lg border border-[#E5E7EB] bg-[#F8FAFC] px-3 py-2.5 text-sm font-semibold text-[#111827]"
        />
      </label>
      <CampoTexto nombre={p('dependientes.personas')} etiqueta="Dependientes económicos (personas)" />
      <CampoTexto nombre={p('dependientes.parentesco')} etiqueta="Parentesco" />
      <CampoTexto nombre={p('dependientes.edad')} etiqueta="Edad" />
    </SectionCard>
  )
}