/**
 * mist-list.ts — Mist list and explore page module.
 *
 * Responsibilities:
 *  1. Row hover entrance animations (staggered IntersectionObserver).
 *  2. Re-animate rows after HTMX fragment swap (type-filter navigation).
 */

// ── Row entrance animations ───────────────────────────────────────────────────

function animateRows(root: Element | Document = document): void {
  const rows = root.querySelectorAll<HTMLElement>('.ms-row');
  if (!rows.length) return;

  const io = new IntersectionObserver((entries) => {
    entries.forEach((entry, i) => {
      if (!entry.isIntersecting) return;
      const el = entry.target as HTMLElement;
      el.style.animationDelay = `${i * 20}ms`;
      io.unobserve(el);
    });
  }, { threshold: 0.02 });

  rows.forEach(el => io.observe(el));
}

// ── HTMX: re-animate after fragment swap ─────────────────────────────────────

function bindHtmxSwap(): void {
  document.body.addEventListener('htmx:afterSwap', (e: Event) => {
    const target = (e as CustomEvent).detail?.target as HTMLElement | undefined;
    if (!target) return;
    if (target.id === 'mist-rows' || target.closest('#mist-rows')) {
      animateRows(target);
    }
  });
}

// ── Entry point ───────────────────────────────────────────────────────────────

export function initMistList(_data?: Record<string, unknown>): void {
  animateRows();
  bindHtmxSwap();
}