---
/**
 * ============================================================
 * SVGarden — https://www.svgarden.dev
 * Author : Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * File   : src/pages/index.astro
 * Desc   : Gallery home — all snippets, live previews, search + filters
 * ============================================================
 */
import Base from '../layouts/Base.astro';
import SnippetCard from '../components/SnippetCard.astro';
import SearchBar from '../components/SearchBar.astro';
import TagFilter from '../components/TagFilter.astro';
import { loadSnippets, loadCategories } from '../lib/snippets.mjs';

const snippets = await loadSnippets();
const categories = await loadCategories();

// Technique facet: most-used techniques across the bank (top 18)
const techniqueCounts = new Map();
for (const s of snippets) {
  for (const t of s.techniques) techniqueCounts.set(t, (techniqueCounts.get(t) ?? 0) + 1);
}
const techniques = [...techniqueCounts.entries()]
  .sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]))
  .slice(0, 18)
  .map(([name, count]) => ({ name, count }));
---

<Base>
  <section class="sg-hero">
    <h1>A garden of SVG + CSS animations</h1>
    <p>
      {snippets.length} self-contained snippets you can preview live, customize, and copy.
      Every one works when pasted into a blank <code>.html</code> file — no frameworks, no build step,
      and each comes with a short lesson on how it works.
    </p>
  </section>

  <div class="sg-toolbar">
    <SearchBar />
    <span class="sg-count" data-sg-count aria-live="polite">{snippets.length} snippets</span>
  </div>
  <div class="sg-toolbar" style="padding-top: 0;">
    <TagFilter categories={categories} techniques={techniques} />
  </div>

  <div class="sg-grid" data-sg-grid>
    {snippets.map((s) => <SnippetCard snippet={s} />)}
  </div>
  <p class="sg-empty" data-sg-empty hidden>No snippets match — try a broader search.</p>
</Base>

<script>
  // Combines search results (sg:search) with chip filters (sg:filter).
  const cards = [...document.querySelectorAll<HTMLElement>('[data-sg-grid] .sg-card')];
  const count = document.querySelector('[data-sg-count]')!;
  const empty = document.querySelector<HTMLElement>('[data-sg-empty]')!;

  let matched: string[] | null = null; // null → no active search
  let category = '';
  let difficulty = '';
  let technique = '';

  const apply = () => {
    const order = new Map(matched?.map((slug, i) => [slug, i]));
    let visible = 0;
    for (const card of cards) {
      const okSearch = matched === null || order.has(card.dataset.slug!);
      const okCat = !category || card.dataset.category === category;
      const okDiff = !difficulty || card.dataset.difficulty === difficulty;
      const okTech = !technique || (card.dataset.techniques ?? '').split('|').includes(technique);
      const show = okSearch && okCat && okDiff && okTech;
      card.hidden = !show;
      card.style.order = String(order.get(card.dataset.slug!) ?? 0);
      if (show) visible++;
    }
    count.textContent = `${visible} snippet${visible === 1 ? '' : 's'}`;
    empty.hidden = visible > 0;
  };

  document.addEventListener('sg:search', (e) => {
    matched = (e as CustomEvent).detail.slugs;
    apply();
  });
  document.addEventListener('sg:filter', (e) => {
    ({ category, difficulty, technique } = (e as CustomEvent).detail);
    apply();
  });
</script>