---
/**
 * ============================================================
 * SVGarden — https://www.svgarden.dev
 * Author : Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * File   : src/components/SearchBar.astro
 * Desc   : Instant client-side search — Fuse.js lazy-loaded on first focus
 * ============================================================
 */
---

<div class="sg-search">
  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
    <circle cx="11" cy="11" r="7" />
    <path d="m20 20-3.5-3.5" />
  </svg>
  <input
    type="search"
    id="sg-search-input"
    placeholder="Search animations… (title, tag, technique)"
    autocomplete="off"
    aria-label="Search animations"
  />
  <kbd aria-hidden="true">/</kbd>
</div>

<script>
  import type Fuse from 'fuse.js';

  const input = document.getElementById('sg-search-input') as HTMLInputElement;
  let fuse: Fuse<{ slug: string }> | null = null;
  let loading: Promise<void> | null = null;

  // Lazy-load Fuse.js + the index only when the visitor actually searches.
  const ensureIndex = () =>
    (loading ??= Promise.all([
      import('fuse.js'),
      fetch('/search-index.json').then((r) => r.json()),
    ]).then(([{ default: FuseCtor }, docs]) => {
      fuse = new FuseCtor(docs, {
        keys: [
          { name: 'title', weight: 3 },
          { name: 'tags', weight: 2 },
          { name: 'techniques', weight: 2 },
          { name: 'category', weight: 1 },
          { name: 'desc', weight: 1 },
        ],
        threshold: 0.35,
        ignoreLocation: true,
      });
    }));

  const emit = (slugs: string[] | null) =>
    document.dispatchEvent(new CustomEvent('sg:search', { detail: { slugs } }));

  input.addEventListener('focus', () => void ensureIndex(), { once: true });
  input.addEventListener('input', async () => {
    const q = input.value.trim();
    if (!q) return emit(null);
    await ensureIndex();
    emit(fuse!.search(q).map((r) => r.item.slug));
  });

  // `/` focuses search from anywhere (unless already typing in a field)
  document.addEventListener('keydown', (e) => {
    if (e.key === '/' && !(e.target instanceof HTMLInputElement) && !(e.target instanceof HTMLTextAreaElement)) {
      e.preventDefault();
      input.focus();
    }
  });
</script>