{% extends "_base.html" %}
{% block title %}Recipes · Cauldron{% endblock %}
{% block content %}

<div class="page-head">
  <div class="crumb">// recipes</div>
  <h1>the <span class="accent">grimoire</span></h1>
  <div class="lede">tap any to open. mushroom 🍄 pins it for the household plan.</div>
</div>

<div class="search-row">
  <input type="text" id="search" placeholder="search…" autocomplete="off" autocapitalize="off" spellcheck="false">
  <span class="count" id="count">{{ total }}</span>
</div>

<div class="chip-row">
  <span class="chip-label">sort</span>
  {% for s in [('newest','newest'), ('made','recent'), ('az','a–z'), ('updated','updated')] %}
    <a class="chip {% if sort == s[0] %}active{% endif %}" href="?sort={{ s[0] }}{% if category %}&cat={{ category }}{% endif %}">{{ s[1] }}</a>
  {% endfor %}
</div>

{% if categories %}
<div class="chip-row">
  <span class="chip-label">cat</span>
  <a class="chip {% if not category %}active{% endif %}" href="?sort={{ sort }}">all</a>
  {% for c in categories[:14] %}
    <a class="chip {% if category == c.slug %}active{% endif %}" href="?sort={{ sort }}&cat={{ c.slug }}">{{ c.name|lower }}</a>
  {% endfor %}
</div>
{% endif %}

<div class="recipe-grid" id="grid">
  {% for r in recipes %}
    {% include "_recipe_card.html" %}
  {% endfor %}
</div>

<div class="scroll-state" id="state">{% if total <= recipes|length %}— end —{% endif %}</div>
<div class="scroll-sentinel" id="sentinel"></div>

<script>
(function(){
  const grid     = document.getElementById('grid');
  const state    = document.getElementById('state');
  const count    = document.getElementById('count');
  const search   = document.getElementById('search');
  const sentinel = document.getElementById('sentinel');

  const initialSort = {{ sort|tojson }};
  const initialCat  = {{ (category or '')|tojson }};
  let nextPage = {{ 2 if pages > 1 else 0 }};
  let total    = {{ total }};
  let q        = '';
  let loading  = false;
  let aborter  = null;

  const SHROOM = `<svg class="shroom" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M5 11 q0 -7 7 -7 q7 0 7 7 q0 1.4 -1 1.4 H6 q-1 0 -1 -1.4z" fill="#9b5fe8"/>
    <path d="M9.5 12.4 v6 q0 1.6 2.5 1.6 q2.5 0 2.5 -1.6 v-6" fill="#e8e0c8" stroke="#9b5fe8" stroke-width=".7"/>
    <circle cx="9" cy="8" r="1" fill="#0a0a0c"/>
    <circle cx="15" cy="7.5" r=".8" fill="#0a0a0c"/>
    <circle cx="12" cy="9.5" r=".7" fill="#0a0a0c"/>
  </svg>`;

  function escapeHtml(s) { return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c])); }
  function escapeAttr(s) { return escapeHtml(s); }

  function renderCard(r) {
    const tags = (r.tags || []).slice(0, 3).map(t => `<span class="rtag">${escapeHtml(t.name)}</span>`).join('');
    const meta = [
      r.totalTime ? escapeHtml(r.totalTime) : '',
      r.recipeYield ? escapeHtml(r.recipeYield) : '',
      r.dateUpdated ? r.dateUpdated.slice(0,10) : ''
    ].filter(Boolean).join(' · ');
    const picked = r.picked ? ' picked' : '';
    const onClass = r.picked ? ' on' : '';
    return `<a class="recipe-card${picked}" href="/recipes/${encodeURIComponent(r.slug)}" data-slug="${escapeAttr(r.slug)}" data-name="${escapeAttr(r.name||'')}">
      <span class="rmain">
        <div class="rname">${escapeHtml(r.name||'(untitled)')}</div>
        <div class="rmeta">${meta}</div>
        ${tags ? `<div class="rtags">${tags}</div>` : ''}
      </span>
      <button class="pick-btn${onClass}" type="button" aria-label="pin to plan" data-slug="${escapeAttr(r.slug)}" data-name="${escapeAttr(r.name||'')}">${SHROOM}</button>
    </a>`;
  }

  async function loadMore(reset=false) {
    if (loading) return;
    if (!reset && !nextPage) return;
    loading = true;
    if (aborter) aborter.abort();
    aborter = new AbortController();
    state.classList.remove('done', 'error');
    state.textContent = '…';
    const page = reset ? 1 : nextPage;
    const url = `/api/recipes.json?page=${page}&sort=${encodeURIComponent(initialSort)}`
              + (initialCat ? `&cat=${encodeURIComponent(initialCat)}` : '')
              + (q ? `&q=${encodeURIComponent(q)}` : '');
    try {
      const r = await fetch(url, { signal: aborter.signal });
      if (!r.ok) throw new Error(r.status);
      const data = await r.json();
      if (reset) grid.innerHTML = '';
      for (const item of (data.items || [])) {
        grid.insertAdjacentHTML('beforeend', renderCard(item));
      }
      total = data.total ?? total;
      count.textContent = `${total}`;
      nextPage = data.next || 0;
      state.textContent = nextPage ? '' : '— end —';
      if (!nextPage) state.classList.add('done');
    } catch (e) {
      if (e.name !== 'AbortError') {
        state.textContent = 'load failed';
        state.classList.add('error');
      }
    } finally {
      loading = false;
    }
  }

  grid.addEventListener('click', async (e) => {
    const btn = e.target.closest('.pick-btn');
    if (!btn) return;
    e.preventDefault(); e.stopPropagation();
    const slug = btn.dataset.slug;
    const name = btn.dataset.name;
    const card = btn.closest('.recipe-card');
    const wasOn = btn.classList.contains('on');
    btn.classList.toggle('on');
    if (card) card.classList.toggle('picked');
    try {
      const r = await fetch(`/api/picks/${encodeURIComponent(slug)}`, {
        method: wasOn ? 'DELETE' : 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: wasOn ? null : JSON.stringify({ name })
      });
      if (!r.ok) throw new Error(r.status);
    } catch (err) {
      btn.classList.toggle('on');
      if (card) card.classList.toggle('picked');
    }
  });

  let searchTimer = null;
  search.addEventListener('input', () => {
    clearTimeout(searchTimer);
    searchTimer = setTimeout(() => {
      q = search.value.trim();
      loadMore(true);
    }, 250);
  });

  const io = new IntersectionObserver((entries) => {
    if (entries.some(e => e.isIntersecting)) loadMore();
  }, { rootMargin: '300px 0px' });
  io.observe(sentinel);
})();
</script>

{% endblock %}