import { useEffect, useRef, useState } from 'react';

// ponytail: coordinar via window para evitar Context entre 2 islands hermanas
declare global {
  interface Window {
    __labreFiltrar?: () => void;
  }
}

const norm = (s: string) =>
  s.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();

function unify() {
  const cards = document.querySelectorAll<HTMLElement>('[data-cat]');
  let anyVisible = false;
  cards.forEach((el) => {
    const hidden = el.dataset.hiddenByCat === 'true' || el.dataset.hiddenBySearch === 'true';
    el.hidden = hidden;
    if (!hidden) anyVisible = true;
  });
  const empty = document.getElementById('catalogo-empty-filter');
  if (empty) empty.hidden = anyVisible || cards.length === 0;
}

function applyText(value: string) {
  const needle = norm(value.trim());
  const cards = document.querySelectorAll<HTMLElement>('[data-cat]');
  cards.forEach((el) => {
    if (!needle) {
      delete el.dataset.hiddenBySearch;
      return;
    }
    const nombre = norm(el.dataset.nombre ?? '');
    const inv = norm(el.dataset.numeroInventario ?? '');
    const match = nombre.includes(needle) || (!!inv && inv.includes(needle));
    if (match) delete el.dataset.hiddenBySearch;
    else el.dataset.hiddenBySearch = 'true';
  });
  unify();
}

export default function BuscadorCatalogo({ q: qInitial = '' }: { q?: string }) {
  const [q, setQ] = useState(qInitial);
  const timerRef = useRef<number | null>(null);

  useEffect(() => {
    window.__labreFiltrar = unify;
    applyText(qInitial);
    return () => {
      window.__labreFiltrar = undefined;
      if (timerRef.current) window.clearTimeout(timerRef.current);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const syncUrl = (value: string) => {
    const url = new URL(location.href);
    const clean = value.trim();
    if (clean) url.searchParams.set('q', clean);
    else url.searchParams.delete('q');
    history.replaceState(null, '', url.toString());
  };

  const onChange = (value: string) => {
    setQ(value);
    if (timerRef.current) window.clearTimeout(timerRef.current);
    timerRef.current = window.setTimeout(() => {
      applyText(value);
      syncUrl(value);
    }, 120);
  };

  const clear = () => {
    setQ('');
    if (timerRef.current) window.clearTimeout(timerRef.current);
    applyText('');
    syncUrl('');
  };

  return (
    <div>
      <label className="label sr-only" htmlFor="buscador-catalogo">
        Buscar material
      </label>
      <div className="relative">
        <input
          id="buscador-catalogo"
          className="input"
          type="search"
          placeholder="Buscar por nombre o número de inventario…"
          value={q}
          onChange={(e) => onChange(e.target.value)}
          autoComplete="off"
          style={{ paddingRight: q ? '2.5rem' : undefined }}
        />
        {q && (
          <button
            type="button"
            onClick={clear}
            aria-label="Limpiar búsqueda"
            className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 rounded-[2px] hover:bg-black/5 transition-colors"
          >
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
              <path d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        )}
      </div>
    </div>
  );
}