import { useEffect, useState } from 'react';

type Cat = { id: number; nombre: string };
type Props = { categorias: Cat[] };

const ALL = 'all';

function applyFilter(value: string) {
  const cards = document.querySelectorAll<HTMLElement>('[data-cat]');
  cards.forEach((el) => {
    const cat = el.dataset.cat;
    const show = value === ALL || cat === value;
    if (show) delete el.dataset.hiddenByCat;
    else el.dataset.hiddenByCat = 'true';
  });
  // El buscador (BuscadorCatalogo, client:load) define este helper y unifica
  // ambos flags (cat + search). Fallback si aún no montó: aplicar directo.
  if (typeof window !== 'undefined' && window.__labreFiltrar) {
    window.__labreFiltrar();
  } else {
    let anyVisible = false;
    cards.forEach((el) => {
      el.hidden = el.dataset.hiddenByCat === 'true';
      if (!el.hidden) anyVisible = true;
    });
    const empty = document.getElementById('catalogo-empty-filter');
    if (empty) empty.hidden = anyVisible || cards.length === 0;
  }
}

export default function FiltroCategorias({ categorias }: Props) {
  const [active, setActive] = useState<string>(ALL);

  useEffect(() => {
    const url = new URL(location.href);
    const cat = url.searchParams.get('cat');
    const initial = cat && categorias.some((c) => String(c.id) === cat) ? cat : ALL;
    setActive(initial);
    applyFilter(initial);
  }, [categorias]);

  const pick = (value: string) => {
    setActive(value);
    const url = new URL(location.href);
    if (value === ALL) url.searchParams.delete('cat');
    else url.searchParams.set('cat', value);
    history.replaceState(null, '', url.toString());
    applyFilter(value);
  };

  const chipClass = (v: string) =>
    v === active
      ? 'bg-verde-institucional text-bone-white rounded-[8px] px-3 py-1 border border-verde-institucional inline-flex items-center whitespace-nowrap text-xs font-medium cursor-pointer transition-colors'
      : 'chip cursor-pointer hover:bg-linen hover:border-dorado-uabc transition-colors';

  return (
    <div
      role="tablist"
      aria-label="Filtrar por categoría"
      className="flex gap-2 overflow-x-auto -mx-4 px-4 pb-1"
      style={{ scrollbarWidth: 'thin' }}
    >
      <button
        type="button"
        role="tab"
        aria-selected={active === ALL}
        className={chipClass(ALL)}
        data-cat-value={ALL}
        data-cat-active={active === ALL ? 'true' : undefined}
        onClick={() => pick(ALL)}
      >
        Todas
      </button>
      {categorias.map((c) => {
        const v = String(c.id);
        return (
          <button
            key={c.id}
            type="button"
            role="tab"
            aria-selected={active === v}
            className={chipClass(v)}
            data-cat-value={v}
            data-cat-active={active === v ? 'true' : undefined}
            onClick={() => pick(v)}
          >
            {c.nombre}
          </button>
        );
      })}
    </div>
  );
}