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

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

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

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

  return (
    <WidgetShell title="Apoyos más demandados" subtitle="6.2 · apoyos de la empresa que los respondentes consideran que más los ayudarían" status={status} n={data?.n_total} colSpan={6}>
      {data && (
        <ul className="db-bar-list" aria-label="Apoyos más demandados">
          {data.data.length === 0 && (
            <li className="db-suppressed-hint">No hay datos suficientes por apoyo (n&lt;5 en todos).</li>
          )}
          {data.data.map(item => (
            <li key={item.politica} className="db-bar-item">
              <span className="db-bar-label">{item.politica}</span>
              <div className="db-bar-track" aria-hidden="true">
                <div className="db-bar-fill"
                  style={{ width: `${item.pct}%`, background: '#43BBC8' }} />
              </div>
              <span className="db-bar-pct">{item.pct}%</span>
            </li>
          ))}
        </ul>
      )}
    </WidgetShell>
  )
}