'use client'
import { useEffect, useState } from 'react'
import {
  isSuppressed,
  type DisposicionRedData,
  type SuppressedPayload,
  type DashboardFilters,
} from '@/lib/dashboard-types'
import { queries } from '@/lib/dashboard-queries'
import { WidgetShell } from './widget-shell'

export function DisposicionRedCard({ surveyId, filters }: { surveyId: string; filters: DashboardFilters }) {
  const [data, setData] = useState<DisposicionRedData | SuppressedPayload | null>(null)
  const [error, setError] = useState(false)

  useEffect(() => {
    setData(null); setError(false)
    queries.meDisposicionRed(surveyId, filters)
      .then((d) => setData(d as DisposicionRedData | SuppressedPayload))
      .catch(() => setError(true))
  }, [surveyId, JSON.stringify(filters)])

  // Esta RPC tiene su propio shape de "suppressed" (n_grupo_apoyo/n_voluntariado,
  // no min_n/n genérico) — isSuppressed() solo mira `status`, sigue funcionando.
  const status = error ? 'error' : data === null ? 'loading' : isSuppressed(data) ? 'suppressed' : 'ok'
  const ok = status === 'ok' ? (data as DisposicionRedData) : null

  return (
    <WidgetShell
      title="Disposición a red de apoyo"
      subtitle="9.3 (grupo de apoyo) + 9.4 (voluntariado)"
      status={status}
      colSpan={4}
    >
      {ok && (
        <div style={{ display: 'flex', gap: 20 }}>
          <div style={{ flex: 1, textAlign: 'center' }}>
            <div className="db-big-stat" style={{ fontSize: '1.625rem' }}>
              {ok.pct_grupo_apoyo !== null ? `${ok.pct_grupo_apoyo}%` : 'n<5'}
            </div>
            <p className="db-big-stat-sub">grupo de apoyo (n={ok.n_grupo_apoyo})</p>
          </div>
          <div style={{ flex: 1, textAlign: 'center' }}>
            <div className="db-big-stat" style={{ fontSize: '1.625rem' }}>
              {ok.pct_voluntariado !== null ? `${ok.pct_voluntariado}%` : 'n<5'}
            </div>
            <p className="db-big-stat-sub">voluntariado (n={ok.n_voluntariado})</p>
          </div>
        </div>
      )}
    </WidgetShell>
  )
}