'use client'
import { useState } from 'react'
import { useSearchParams } from 'next/navigation'
import { KpiCards }              from '@/components/dashboard/kpi-cards'
import { ParaguayMap }           from '@/components/dashboard/paraguay-map'
import { DonutCuidados }         from '@/components/dashboard/donut-cuidados'
import { GaugeOrganizacional }   from '@/components/dashboard/gauge-organizacional'
import { HeatmapWidget }         from '@/components/dashboard/heatmap-widget'
import { PiramideDemografica }   from '@/components/dashboard/piramide-demografica'
import { ApoyosBar }              from '@/components/dashboard/apoyos-bar'
import { IntensidadProductividad } from '@/components/dashboard/intensidad-productividad'
import { TablaSaturacion }       from '@/components/dashboard/tabla-saturacion'
import { FilterSidebar }         from '@/components/dashboard/filter-sidebar'
import type { DashboardFilters } from '@/lib/dashboard-types'

// El survey_id se pasa como query param: /dashboard?survey_id=UUID
export default function DashboardPage() {
  const searchParams = useSearchParams()
  const surveyId = searchParams.get('survey_id') ?? '30000000-0000-0000-0000-000000000001'
  const [filters, setFilters] = useState<DashboardFilters>({})
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)

  function handleDeptoClick(depto: string) {
    setFilters(f => ({ ...f, depto: depto || undefined }))
  }

  return (
    <div className="db-page">
      <FilterSidebar
        filters={filters}
        onChange={setFilters}
        collapsed={sidebarCollapsed}
        onToggle={() => setSidebarCollapsed(c => !c)}
      />

      <div className="db-main">
        <header className="db-page-header">
          <h1 className="db-page-title">Economía del Cuidado — Paraguay</h1>
          <p className="db-page-subtitle">
            Datos agregados · k-anonimato k≥5 · Encuesta Mapeo de Cuidadores 2026
            {filters.depto && <span className="db-active-filter"> · Filtro: {filters.depto}</span>}
          </p>
        </header>

        {/* Fila 1: KPIs (span 12) */}
        <section className="db-section" aria-label="Indicadores clave">
          <KpiCards surveyId={surveyId} filters={filters} />
        </section>

        {/* Fila 2: Mapa (6) + Donut (3) + Gauge (3) */}
        <section className="db-grid db-section" aria-label="Distribución geográfica y tipos">
          <ParaguayMap surveyId={surveyId} filters={filters} onDeptoClick={handleDeptoClick} />
          <DonutCuidados surveyId={surveyId} filters={filters} />
          <GaugeOrganizacional surveyId={surveyId} filters={filters} />
        </section>

        {/* Fila 3: Heatmap (6) + Pirámide (6) */}
        <section className="db-grid db-section" aria-label="Intensidad y demografía">
          <HeatmapWidget surveyId={surveyId} filters={filters} />
          <PiramideDemografica surveyId={surveyId} filters={filters} />
        </section>

        {/* Fila 4: Apoyos demandados (6) + Hexbin intensidad/bienestar (6) */}
        <section className="db-grid db-section" aria-label="Apoyos e impacto">
          <ApoyosBar surveyId={surveyId} filters={filters} />
          <IntensidadProductividad surveyId={surveyId} filters={filters} />
        </section>

        {/* Fila 5: Saturación del cuidador (12) */}
        <section className="db-grid db-section" aria-label="Saturación del cuidador">
          <TablaSaturacion surveyId={surveyId} filters={filters} />
        </section>
      </div>
    </div>
  )
}