'use client'
import { useEffect, useState } from 'react'
import { isSuppressed, type KpiData, type SuppressedPayload } from '@/lib/dashboard-types'
import { queries } from '@/lib/dashboard-queries'
import type { DashboardFilters } from '@/lib/dashboard-types'

interface KpiCardProps { label: string; value: string; sub?: string }

function KpiCard({ label, value, sub }: KpiCardProps) {
  return (
    <div className="db-kpi-card">
      <span className="db-kpi-value" aria-live="polite">{value}</span>
      <span className="db-kpi-label">{label}</span>
      {sub && <span className="db-kpi-sub">{sub}</span>}
    </div>
  )
}

interface Props { surveyId: string; filters: DashboardFilters }

export function KpiCards({ surveyId, filters }: Props) {
  const [data, setData] = useState<KpiData | SuppressedPayload | null>(null)
  const [error, setError] = useState(false)

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

  if (error) return <p className="db-error">Error al cargar KPIs</p>
  if (!data) {
    return (
      <div className="db-kpi-row">
        {[1,2,3,4].map(i => <div key={i} className="db-kpi-card db-skeleton-block" style={{height:96}} />)}
      </div>
    )
  }
  if (isSuppressed(data)) {
    return (
      <div className="db-kpi-row">
        {[1,2,3,4].map(i => (
          <div key={i} className="db-kpi-card db-suppressed-card">
            <span className="db-suppressed-icon">🔒</span>
            <span className="db-kpi-sub">n &lt; 5</span>
          </div>
        ))}
      </div>
    )
  }

  const d = data as KpiData
  return (
    <div className="db-kpi-row">
      <KpiCard label="Cuidadores activos"    value={`${d.pct_cuidadores}%`} sub={`n = ${d.n}`} />
      <KpiCard label="Score bienestar (0-100)" value={d.score_bienestar !== null ? `${d.score_bienestar}` : '—'} />
      <KpiCard label="Ausencias frecuentes"   value={`${d.pct_ausencias}%`} />
      <KpiCard label="Total respuestas"        value={d.n.toLocaleString('es-PY')} sub="en este corte" />
    </div>
  )
}