FRASA-CAS/apps/cobranza/src/pages/HoyPage.tsx

import { useEffect, useMemo, useState } from 'react'
import { Link } from 'react-router-dom'
import { listarPlanes, type ResultadoPlanes } from '../services/repository'
import { cobranzaDelDia, round2, statusPago } from '../lib/cobranza'
import { formatoFechaCorta, formatoMoneda } from '../lib/formatters'
import KpiCard from '../components/KpiCard'

/** Vista "Cobranza del día": vencidos + por vencer en 7 días, a través de todos los planes activos */
export default function HoyPage() {
  const [resultado, setResultado] = useState<ResultadoPlanes | null>(null)
  const [errorCarga, setErrorCarga] = useState<string | null>(null)
  const hoy = useMemo(() => new Date(), [])

  useEffect(() => {
    let activo = true
    listarPlanes()
      .then((r) => {
        if (activo) setResultado(r)
      })
      .catch((e: unknown) => {
        if (activo) setErrorCarga(e instanceof Error ? e.message : 'Error al cargar los planes')
      })
    return () => {
      activo = false
    }
  }, [])

  const planes = useMemo(() => resultado?.planes ?? [], [resultado])
  const items = useMemo(() => cobranzaDelDia(planes, hoy), [planes, hoy])

  const vencidos = items.filter((i) => i.atraso > 0)
  const porVencer = items.length - vencidos.length
  const totalPorCobrar = round2(
    items.reduce((acc, i) => acc + (i.pago.monto - i.pago.montoPagado), 0),
  )

  if (!resultado) {
    return errorCarga ? (
      <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{errorCarga}</div>
    ) : (
      <p className="text-sm text-[#64748B]">Cargando...</p>
    )
  }

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-xl font-semibold text-[#111827]">Cobranza del día</h1>
        <p className="mt-1 text-sm text-[#64748B]">
          Pagos vencidos y vencimientos de los próximos 7 días, en todos los planes activos.
        </p>
        {resultado.origen === 'local' && (
          <p className="mt-2 text-xs text-amber-700">
            Modo offline: sin conexión al API; mostrando datos guardados en este navegador.
          </p>
        )}
      </div>

      <div className="grid grid-cols-2 gap-6 lg:grid-cols-3">
        <KpiCard titulo="Pagos vencidos" valor={vencidos.length} />
        <KpiCard titulo="Por vencer (7 días)" valor={porVencer} />
        <KpiCard titulo="Monto por cobrar" valor={formatoMoneda(totalPorCobrar)} />
      </div>

      <div className="overflow-x-auto rounded-xl border border-[#E5E7EB] bg-white shadow-sm">
        <table className="w-full text-left text-sm">
          <thead>
            <tr className="border-b border-[#E5E7EB] bg-[#F8FAFC] text-xs font-semibold uppercase tracking-wider text-[#64748B]">
              <th scope="col" className="px-4 py-3">Cliente</th>
              <th scope="col" className="px-4 py-3">Teléfono</th>
              <th scope="col" className="px-4 py-3">Unidad</th>
              <th scope="col" className="px-4 py-3"># pago</th>
              <th scope="col" className="px-4 py-3">Vencimiento</th>
              <th scope="col" className="px-4 py-3 text-right">Monto</th>
              <th scope="col" className="px-4 py-3 text-right">Restante</th>
              <th scope="col" className="px-4 py-3 text-right">Días atraso</th>
              <th scope="col" className="px-4 py-3">Plan</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-[#E5E7EB]">
            {items.map(({ plan, pago, atraso }) => (
              <tr
                key={`${plan.id}-${pago.id}`}
                className="transition-colors duration-100 ease-out hover:bg-[#F8FAFC]"
              >
                <td className="px-4 py-3 font-medium">{plan.clienteNombre}</td>
                <td className="px-4 py-3">
                  {plan.clienteTelefono ? (
                    <a href={`tel:${plan.clienteTelefono.replace(/\s/g, '')}`} className="text-accent hover:underline">
                      {plan.clienteTelefono}
                    </a>
                  ) : (
                    <span className="text-neutral-400">—</span>
                  )}
                </td>
                <td className="px-4 py-3">{plan.unidadCodigo}</td>
                <td className="px-4 py-3">{pago.numPago}</td>
                <td className="px-4 py-3">{formatoFechaCorta(pago.fechaVencimiento)}</td>
                <td className="px-4 py-3 text-right">{formatoMoneda(pago.monto)}</td>
                <td className="px-4 py-3 text-right font-medium">
                  {formatoMoneda(round2(pago.monto - pago.montoPagado))}
                </td>
                <td className="px-4 py-3 text-right">
                  {atraso > 0 ? (
                    <span className="font-medium text-red-700">{atraso}</span>
                  ) : (
                    <span className="text-amber-700">
                      {statusPago(pago, hoy) === 'PARCIAL' ? 'Parcial' : 'Por vencer'}
                    </span>
                  )}
                </td>
                <td className="px-4 py-3">
                  <Link to={`/planes/${plan.id}`} className="text-accent hover:underline">
                    Ver plan
                  </Link>
                </td>
              </tr>
            ))}
            {items.length === 0 && (
              <tr>
                <td colSpan={9} className="py-8 text-center text-neutral-500">
                  No hay pagos vencidos ni vencimientos en los próximos 7 días.
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </div>
  )
}