'use client'
import { useState } from 'react'
import { useSearchParams } from 'next/navigation'
import { AdminNavBar } from '@/components/admin-nav-bar'
import { FilterSidebar } from '@/components/dashboard/filter-sidebar'
import { TalentoRiesgoCard } from '@/components/dashboard/talento-riesgo-card'
import { PrevalenciaCuidadoresCard } from '@/components/dashboard/prevalencia-cuidadores-card'
import { PuntoCiegoCard } from '@/components/dashboard/punto-ciego-card'
import { SenalesImpactoBar } from '@/components/dashboard/senales-impacto-bar'
import { ApoyosBarME } from '@/components/dashboard/apoyos-bar-me'
import { SegmentacionBar } from '@/components/dashboard/segmentacion-bar'
import { DisposicionRedCard } from '@/components/dashboard/disposicion-red-card'
import type { DashboardFilters } from '@/lib/dashboard-types'

// El survey_id se pasa como query param: /dashboard?survey_id=UUID
// '00000000-0000-0000-0000-000000000000' = flag p_all (vista agregada de todos los surveys)
const SURVEY_OPTIONS = [
  { label: 'Todos', id: '00000000-0000-0000-0000-000000000000' },
  { label: 'InQuality', id: '30000000-0000-0000-0000-000000000002' },
  { label: 'Fundación Solidaridad', id: '30000000-0000-0000-0000-000000000003' },
  { label: 'Demo', id: '30000000-0000-0000-0000-000000000001' },
]

type Lens = 'empresa' | 'pais' | 'humana'

const LENSES: { id: Lens; label: string; sub: string }[] = [
  { id: 'empresa', label: 'Mirada Empresa', sub: 'rendimiento · rotación · clima' },
  { id: 'pais', label: 'Mirada País', sub: 'desarrollo · vulnerabilidad · política' },
  { id: 'humana', label: 'Mirada Humana', sub: 'bienestar · derechos · desarrollo' },
]

function PlaceholderLens({ title, hint }: { title: string; hint: string }) {
  return (
    <div className="db-placeholder" role="status">
      <span className="db-placeholder-icon" aria-hidden="true">🔒</span>
      <p className="db-placeholder-title">{title} — Disponible próximamente</p>
      <p className="db-placeholder-hint">{hint}</p>
    </div>
  )
}

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)
  const [lens, setLens] = useState<Lens>('empresa')

  return (
    <>
      <AdminNavBar active="dashboard" />
      <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>
          <nav className="db-survey-nav" aria-label="Selección de empresa">
            {SURVEY_OPTIONS.map((opt) => (
              <a
                key={opt.id}
                href={`/dashboard?survey_id=${opt.id}`}
                className={
                  opt.id === surveyId
                    ? 'db-survey-link db-survey-link-active'
                    : 'db-survey-link'
                }
                aria-current={opt.id === surveyId ? 'page' : undefined}
              >
                {opt.label}
              </a>
            ))}
          </nav>
        </header>

        <nav className="db-tabs" aria-label="Mirada del dashboard">
          {LENSES.map((l) => (
            <button
              key={l.id}
              type="button"
              className={`db-tab${lens === l.id ? ' db-tab-active' : ''}`}
              onClick={() => setLens(l.id)}
              aria-current={lens === l.id ? 'page' : undefined}
            >
              <span>{l.label}</span>
              <span className="db-tab-lens">{l.sub}</span>
            </button>
          ))}
        </nav>

        {lens === 'empresa' && (
          <>
            <div className="db-lens-intro">
              <strong>Mirada Empresa.</strong> Traduce el cuidado a lenguaje de negocio: cuánto cuesta el
              punto ciego y qué talento está en riesgo.
            </div>

            {/* Fila 1: núcleo — estrella + prevalencia + punto ciego */}
            <section className="db-grid db-section" aria-label="Indicadores núcleo">
              <TalentoRiesgoCard surveyId={surveyId} filters={filters} />
              <PrevalenciaCuidadoresCard surveyId={surveyId} filters={filters} />
              <PuntoCiegoCard surveyId={surveyId} filters={filters} />
            </section>

            {/* Fila 2: señales de impacto (6) + apoyos demandados (6) */}
            <section className="db-grid db-section" aria-label="Señales de impacto y apoyos">
              <SenalesImpactoBar surveyId={surveyId} filters={filters} />
              <ApoyosBarME surveyId={surveyId} filters={filters} />
            </section>

            {/* Fila 3: segmentación (12, SEC) */}
            <section className="db-grid db-section" aria-label="Segmentación de la carga">
              <SegmentacionBar surveyId={surveyId} filters={filters} />
            </section>

            {/* Fila 4: disposición a red de apoyo (4, SEC) */}
            <section className="db-grid db-section" aria-label="Disposición a participar">
              <DisposicionRedCard surveyId={surveyId} filters={filters} />
            </section>

            <p className="db-table-note" style={{ textAlign: 'right' }}>
              k≥5 aplicado · segmentos con n&lt;5 suprimidos
            </p>
          </>
        )}

        {lens === 'pais' && (
          <PlaceholderLens
            title="Mirada País"
            hint="Insumo para el estudio país y el Sistema Nacional de Cuidados (SINACUP) — desarrollo, vulnerabilidad, impacto económico. En construcción."
          />
        )}

        {lens === 'humana' && (
          <PlaceholderLens
            title="Mirada Humana"
            hint="Bienestar de quien cuida y de quien es cuidado — agotamiento, soledad del cuidado, disposición solidaria. En construcción."
          />
        )}
      </div>
      </div>
    </>
  )
}