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

const RIESGO_COLOR: Record<string, string> = {
  Alto:  '#ef4444',
  Medio: '#F8AD13',
  Bajo:  '#43BBC8',
}

export function TablaRiesgo({ surveyId, filters }: { surveyId: string; filters: DashboardFilters }) {
  const [data, setData] = useState<RiesgoData | null>(null)
  const [sup, setSup] = useState(false)

  useEffect(() => {
    setData(null); setSup(false)
    queries.riesgo(surveyId, filters)
      .then(d => { if (isSuppressed(d)) setSup(true); else setData(d as RiesgoData) })
      .catch(() => {})
  }, [surveyId, JSON.stringify(filters)])

  const status = !data && !sup ? 'loading' : sup ? 'suppressed' : 'ok'

  return (
    <WidgetShell title="📋 Tabla de riesgo de retención" status={status} n={data?.n_total} colSpan={12}>
      {data && (
        <div className="db-table-wrapper">
          <p className="db-table-note">
            Alto: ausencias frecuentes + empresa no comprende. Medio: una condición. Bajo: ninguna.
            La columna de departamento fue eliminada para evitar cruces reidentificables.
          </p>
          <table className="db-table" aria-label="Tabla de riesgo de retención">
            <thead>
              <tr>
                <th>Segmento</th>
                <th>N</th>
                <th>% del total</th>
                <th>Política más demandada</th>
              </tr>
            </thead>
            <tbody>
              {data.segmentos.map(seg => (
                <tr key={seg.segmento}>
                  <td>
                    <span className="db-risk-badge"
                      style={{ background: RIESGO_COLOR[seg.segmento] ?? '#6b7280' }}>
                      {seg.segmento}
                    </span>
                  </td>
                  <td>{seg.suppressed ? '—' : seg.n}</td>
                  <td>{seg.suppressed ? '—' : `${seg.pct}%`}</td>
                  <td>{seg.suppressed ? <span className="db-suppressed-hint">Datos insuficientes (n&lt;5)</span>
                        : seg.politica ?? '—'}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </WidgetShell>
  )
}