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

// Umbrales de color SOLO visuales (no son la definición de la métrica, que
// vive en la RPC vía p_umbral_senales) — afinar libremente si el director
// prefiere otros cortes.
function colorClass(pct: number): string {
  if (pct >= 30) return ' db-big-stat-danger'
  if (pct >= 15) return ' db-big-stat-warn'
  return ''
}

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

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

  const status = error ? 'error' : data === null ? 'loading' : isSuppressed(data) ? 'suppressed' : 'ok'
  const ok = status === 'ok' ? (data as TalentoRiesgoData) : null

  return (
    <WidgetShell
      title="Talento en riesgo"
      subtitle="7.6 + 7.3 + 7.5 · métrica compuesta sobre la población cuidadora"
      status={status}
      n={ok?.n_cuidadores}
      colSpan={4}
      variant="star"
    >
      {ok && (
        <>
          <div className={`db-big-stat${colorClass(ok.pct_talento_riesgo)}`}>
            {ok.pct_talento_riesgo}%
          </div>
          <p className="db-big-stat-sub">
            de la plantilla cuidadora cumple al menos {ok.umbral_senales} de 3 señales de fuga
            (riesgo de salida, ausentismo recurrente, carrera congelada). Promedio:{' '}
            {ok.criterios_promedio} señales por persona.
          </p>
        </>
      )}
    </WidgetShell>
  )
}