'use client'
import { DEPARTMENTS } from '@/lib/paraguay-geo'
import { ETARIO_ORDER } from '@/lib/dashboard-utils'
import type { DashboardFilters } from '@/lib/dashboard-types'

const GENEROS = ['Femenino','Masculino','No binario/Otro','Prefiero no decir']
const MODALIDADES = ['Presencial','Remoto (home office)','Híbrido']

interface Props {
  filters: DashboardFilters
  onChange: (f: DashboardFilters) => void
  collapsed: boolean
  onToggle: () => void
}

export function FilterSidebar({ filters, onChange, collapsed, onToggle }: Props) {
  function toggleArray(key: keyof DashboardFilters, val: string) {
    const arr = (filters[key] as string[] | undefined) ?? []
    const next = arr.includes(val) ? arr.filter(v => v !== val) : [...arr, val]
    onChange({ ...filters, [key]: next.length ? next : undefined })
  }

  function reset() { onChange({}) }

  return (
    <aside className={`db-sidebar${collapsed ? ' db-sidebar-collapsed' : ''}`}
      aria-label="Filtros del dashboard">
      <button className="db-sidebar-toggle" onClick={onToggle}
        aria-expanded={!collapsed} aria-controls="db-sidebar-content">
        {collapsed ? '▶ Filtros' : '◀ Cerrar'}
      </button>

      {!collapsed && (
        <div id="db-sidebar-content" className="db-sidebar-content">
          <div className="db-filter-group">
            <label className="db-filter-label" htmlFor="filter-depto">Departamento</label>
            <select id="filter-depto" className="db-filter-select"
              value={filters.depto ?? ''}
              onChange={e => onChange({ ...filters, depto: e.target.value || undefined })}>
              <option value="">Todos</option>
              {DEPARTMENTS.map(d => <option key={d} value={d}>{d}</option>)}
            </select>
          </div>

          <div className="db-filter-group">
            <span className="db-filter-label">Género</span>
            {GENEROS.map(g => (
              <label key={g} className="db-filter-check">
                <input type="checkbox"
                  checked={(filters.genero ?? []).includes(g)}
                  onChange={() => toggleArray('genero', g)} />
                {g}
              </label>
            ))}
          </div>

          <div className="db-filter-group">
            <span className="db-filter-label">Rango etario</span>
            {ETARIO_ORDER.filter(e => e !== 'Prefiero no decir').map(e => (
              <label key={e} className="db-filter-check">
                <input type="checkbox"
                  checked={(filters.etario ?? []).includes(e)}
                  onChange={() => toggleArray('etario', e)} />
                {e}
              </label>
            ))}
          </div>

          <div className="db-filter-group">
            <span className="db-filter-label">Modalidad</span>
            {MODALIDADES.map(m => (
              <label key={m} className="db-filter-check">
                <input type="checkbox"
                  checked={(filters.modalidad ?? []).includes(m)}
                  onChange={() => toggleArray('modalidad', m)} />
                {m}
              </label>
            ))}
          </div>

          <button className="db-filter-reset" onClick={reset}>Resetear filtros</button>
        </div>
      )}
    </aside>
  )
}
