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

// Tile-map de Paraguay (fallback aprobado en el prompt cuando no se consigue SVG fiel)
// col/row en grilla 5×6
const TILES = [
  { name: 'Alto Paraguay',       col: 2, row: 0 },
  { name: 'Boquerón',            col: 0, row: 1 },
  { name: 'Presidente Hayes',    col: 1, row: 1 },
  { name: 'Concepción',          col: 2, row: 1 },
  { name: 'San Pedro',           col: 3, row: 1 },
  { name: 'Amambay',             col: 4, row: 1 },
  { name: 'Asunción (Capital)',  col: 1, row: 2 },
  { name: 'Cordillera',          col: 2, row: 2 },
  { name: 'Caaguazú',            col: 3, row: 2 },
  { name: 'Canindeyú',           col: 4, row: 2 },
  { name: 'Central',             col: 1, row: 3 },
  { name: 'Guairá',              col: 2, row: 3 },
  { name: 'Alto Paraná',         col: 4, row: 3 },
  { name: 'Ñeembucú',            col: 0, row: 4 },
  { name: 'Misiones',            col: 1, row: 4 },
  { name: 'Paraguarí',           col: 2, row: 4 },
  { name: 'Caazapá',             col: 3, row: 4 },
  { name: 'Itapúa',              col: 2, row: 5 },
]

function lerp(t: number, a: string, b: string): string {
  // simple teal interpolation: #E7E6E5 (light) → #43BBC8 (teal)
  const parseHex = (h: string) => [
    parseInt(h.slice(1,3),16), parseInt(h.slice(3,5),16), parseInt(h.slice(5,7),16)
  ]
  const ca = parseHex(a); const cb = parseHex(b)
  const r = Math.round(ca[0] + (cb[0]-ca[0])*t)
  const g = Math.round(ca[1] + (cb[1]-ca[1])*t)
  const bv= Math.round(ca[2] + (cb[2]-ca[2])*t)
  return `#${r.toString(16).padStart(2,'0')}${g.toString(16).padStart(2,'0')}${bv.toString(16).padStart(2,'0')}`
}

interface Props { surveyId: string; filters: DashboardFilters; onDeptoClick: (d: string) => void }

export function ParaguayMap({ surveyId, filters, onDeptoClick }: Props) {
  const [data, setData] = useState<PrevalenciaData | SuppressedPayload | null>(null)
  const [tooltip, setTooltip] = useState<{ name: string; pct: number | null; n: number | null } | null>(null)

  useEffect(() => {
    setData(null)
    queries.prevalencia(surveyId, filters)
      .then(d => setData(d as PrevalenciaData | SuppressedPayload))
      .catch(() => {})
  }, [surveyId, JSON.stringify(filters)])

  const deptoMap = new Map(
    (!data || isSuppressed(data)) ? [] :
    (data as PrevalenciaData).data.map(d => [d.depto, d])
  )

  const status = !data ? 'loading' : isSuppressed(data) ? 'suppressed' : 'ok'
  const n = !isSuppressed(data) && data ? (data as PrevalenciaData).n_total : undefined

  return (
    <WidgetShell title="Prevalencia de cuidadores por departamento" subtitle="A1 · % cuidadores activos por departamento" status={status} n={n} colSpan={6}>
      <div className="db-map-wrapper" role="img" aria-label="Mapa de Paraguay con prevalencia de cuidadores por departamento">
        {tooltip && (
          <div className="db-map-tooltip" aria-live="polite">
            <strong>{tooltip.name}</strong>
            {tooltip.pct !== null
              ? <> · {tooltip.pct}% · n={tooltip.n}</>
              : <> · Datos insuficientes</>}
          </div>
        )}
        <div className="db-tile-grid">
          {TILES.map(tile => {
            const d = deptoMap.get(tile.name)
            const suppressed = !d || d.suppressed
            const pct = d?.pct_cuidadores ?? null
            const color = suppressed ? '#2a3547' : lerp((pct ?? 0)/100, '#E7E6E5', '#43BBC8')
            const isSelected = filters.depto === tile.name
            return (
              <button
                key={tile.name}
                className={`db-tile${isSelected ? ' db-tile-selected' : ''}${suppressed ? ' db-tile-suppressed' : ''}`}
                style={{
                  gridColumn: tile.col + 1,
                  gridRow: tile.row + 1,
                  background: color,
                }}
                onClick={() => onDeptoClick(isSelected ? '' : tile.name)}
                onMouseEnter={() => setTooltip({ name: tile.name, pct, n: d?.n ?? null })}
                onMouseLeave={() => setTooltip(null)}
                title={suppressed ? `${tile.name} — Datos insuficientes` : `${tile.name} — ${pct}% (n=${d?.n})`}
                aria-label={suppressed
                  ? `${tile.name}: datos insuficientes`
                  : `${tile.name}: ${pct}% cuidadores, n=${d?.n}`}
                aria-pressed={isSelected}
              >
                <span className="db-tile-name">{tile.name.replace(' (Capital)','')}</span>
                {!suppressed && pct !== null && (
                  <span className="db-tile-pct">{pct}%</span>
                )}
              </button>
            )
          })}
        </div>
      </div>
    </WidgetShell>
  )
}