pokemon/src/components/CardGrid.astro

---
import BackToTop from "./BackToTop.astro"
---
<div class="container-fluid container-sm mt-3">
<div class="row mb-4">
    <div class="col-md-2">
        <div class="h5 d-none">Inventory management placeholder</div>
        <div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="filterBar" aria-labelledby="filterBarLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="filterBarLabel">Filter by:</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body px-3 pt-0">
            <div id="facetContainer"></div>
        </div>
        </div>
    </div>
    <div class="col-sm-12 col-md-10 mt-0">
        <div class="d-flex flex-column gap-1 flex-md-row align-items-center mb-3 w-100 justify-content-start">
            <div id="sortBy"></div>
            <div id="totalResults"></div>
            <div id="activeFilters"></div>
        </div>
        <div id="cardGrid" aria-live="polite" class="row g-xxl-3 g-2 row-cols-2 row-cols-md-3 row-cols-xl-4 row-cols-xxxl-5"></div>
        <div id="notfound" aria-live="polite"></div>
    </div>
</div>

<div class="modal card-modal" id="cardModal" tabindex="-1" aria-labelledby="cardModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
        <div class="modal-content p-2">Loading...</div>
    </div>
</div>

<button id="modalPrevBtn" class="modal-nav-btn modal-nav-prev d-none" aria-label="Previous card">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
    </svg>
</button>
<button id="modalNextBtn" class="modal-nav-btn modal-nav-next d-none" aria-label="Next card">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
    </svg>
</button>

<BackToTop />
</div>

<script is:inline>
(function () {

  // ── Price mode helpers ────────────────────────────────────────────────────
  // marketPriceByCondition is injected into the modal HTML via a data attribute
  // on #inventoryEntryList: data-market-prices='{"Near Mint":6.00,...}'
  // See card-modal.astro for where this is set.

  function getMarketPrices(form) {
    const listEl = form.closest('.tab-pane')?.querySelector('#inventoryEntryList')
      ?? document.getElementById('inventoryEntryList');
    try {
      return JSON.parse(listEl?.dataset.marketPrices || '{}');
    } catch {
      return {};
    }
  }

  function applyPriceModeUI(form, mode) {
    const priceInput  = form.querySelector('#purchasePrice');
    const pricePrefix = form.querySelector('#pricePrefix');
    const priceSuffix = form.querySelector('#priceSuffix');
    const priceHint   = form.querySelector('#priceHint');
    if (!priceInput) return;

    const isPct = mode === 'percent';
    pricePrefix?.classList.toggle('d-none', isPct);
    priceSuffix?.classList.toggle('d-none', !isPct);
    priceInput.step        = isPct ? '1'    : '0.01';
    priceInput.max         = isPct ? '100'  : '';
    priceInput.placeholder = isPct ? '0'    : '0.00';
    priceInput.classList.toggle('rounded-end',   !isPct);
    priceInput.classList.toggle('rounded-start',  isPct);

    if (priceHint && !isPct) priceHint.textContent = 'Enter the purchase price.';
  }

  function updatePriceHint(form) {
    const priceInput = form.querySelector('#purchasePrice');
    const priceHint  = form.querySelector('#priceHint');
    if (!priceInput || !priceHint) return;

    const mode = form.querySelector('input[name="priceMode"]:checked')?.value ?? 'dollar';
    if (mode !== 'percent') { priceHint.textContent = 'Enter the purchase price.'; return; }

    const condition   = form.querySelector('input[name="condition"]:checked')?.value ?? 'Near Mint';
    const prices      = getMarketPrices(form);
    const marketPrice = prices[condition] ?? 0;
    const pct         = parseFloat(priceInput.value) || 0;
    const resolved    = ((pct / 100) * marketPrice).toFixed(2);
    priceHint.textContent = marketPrice
      ? `= $${resolved} (${pct}% of $${marketPrice.toFixed(2)} market)`
      : 'No market price available for this condition.';
  }

  function resolveFormPrice(form) {
    // Returns a FormData ready to POST; % is converted to $ in-place.
    const data = new FormData(form);
    const mode = data.get('priceMode');
    if (mode === 'percent') {
      const condition   = data.get('condition');
      const prices      = getMarketPrices(form);
      const marketPrice = prices[condition] ?? 0;
      const pct         = parseFloat(data.get('purchasePrice')) || 0;
      data.set('purchasePrice', ((pct / 100) * marketPrice).toFixed(2));
    }
    data.delete('priceMode'); // UI-only field
    return data;
  }

  // ── Empty state helper ────────────────────────────────────────────────────
  function syncEmptyState(invList) {
    const emptyState = document.getElementById('inventoryEmptyState');
    if (!emptyState) return;
    const hasEntries = invList.querySelector('[data-inventory-id]') !== null;
    emptyState.classList.toggle('d-none', hasEntries);
  }

  // ── Inventory form init (binding price-mode UI events) ───────────────────
  function initInventoryForms(root = document) {
    // Fetch inventory entries for this card
    const invList = root.querySelector('#inventoryEntryList') || document.getElementById('inventoryEntryList');
    if (invList && !invList.dataset.inventoryFetched) {
      invList.dataset.inventoryFetched = 'true';
      const cardId = invList.dataset.cardId;
      if (cardId) {
        const body = new FormData();
        body.append('cardId', cardId);
        fetch('/api/inventory', { method: 'POST', body })
          .then(r => r.text())
          .then(html => {
            invList.innerHTML = html || '';
            syncEmptyState(invList);
          })
          .catch(() => { invList.innerHTML = '<span class="text-danger">Failed to load inventory</span>'; });
      }
    }

    const forms = root.querySelectorAll('[data-inventory-form]');

    forms.forEach((form) => {
      if (form.dataset.inventoryBound === 'true') return;
      form.dataset.inventoryBound = 'true';

      const priceInput  = form.querySelector('#purchasePrice');
      const modeInputs  = form.querySelectorAll('input[name="priceMode"]');
      const condInputs  = form.querySelectorAll('input[name="condition"]');

      // Set initial UI state
      const checkedMode = form.querySelector('input[name="priceMode"]:checked')?.value ?? 'dollar';
      applyPriceModeUI(form, checkedMode);

      // Mode toggle
      modeInputs.forEach((input) => {
        input.addEventListener('change', () => {
          if (priceInput) priceInput.value = ''; // clear stale value on mode switch
          applyPriceModeUI(form, input.value);
          updatePriceHint(form);
        });
      });

      // Condition change updates the hint when in % mode
      condInputs.forEach((input) => {
        input.addEventListener('change', () => updatePriceHint(form));
      });

      // Live hint as user types
      priceInput?.addEventListener('input', () => updatePriceHint(form));

      // Reset — restore to $ mode
      form.addEventListener('reset', () => {
        setTimeout(() => {
          applyPriceModeUI(form, 'dollar');
          updatePriceHint(form);
        }, 0);
      });
    });
  }

  // ── Sort dropdown ─────────────────────────────────────────────────────────
  document.addEventListener('click', (e) => {
    const btn = e.target.closest('#sortBy [data-toggle="sort-dropdown"]');
    if (btn) {
      e.preventDefault();
      e.stopPropagation();
      const menu = btn.nextElementSibling;
      menu.classList.toggle('show');
      btn.setAttribute('aria-expanded', menu.classList.contains('show'));
      return;
    }

    const opt = e.target.closest('#sortBy .sort-option');
    if (opt) {
      e.preventDefault();
      const menu = opt.closest('.dropdown-menu');
      const btn2 = menu?.previousElementSibling;
      menu?.classList.remove('show');
      if (btn2) btn2.setAttribute('aria-expanded', 'false');

      const sortInput = document.getElementById('sortInput');
      if (sortInput) sortInput.value = opt.dataset.sort;
      document.getElementById('sortLabel').textContent = opt.dataset.label;
      document.querySelectorAll('.sort-option').forEach(o => o.classList.remove('active'));
      opt.classList.add('active');

      const start = document.getElementById('start');
      if (start) start.value = '0';
      document.getElementById('searchform').dispatchEvent(
        new Event('submit', { bubbles: true, cancelable: true })
      );
      return;
    }

    const menu = document.querySelector('#sortBy .dropdown-menu.show');
    if (menu) {
      menu.classList.remove('show');
      const btn3 = menu.previousElementSibling;
      if (btn3) btn3.setAttribute('aria-expanded', 'false');
    }
  });

  // ── Language toggle ───────────────────────────────────────────────────────
  document.addEventListener('click', (e) => {
    const btn = e.target.closest('.language-btn');
    if (!btn) return;
    e.preventDefault();

    const input = document.getElementById('languageInput');
    if (input) input.value = btn.dataset.lang;

    const start = document.getElementById('start');
    if (start) start.value = '0';

    document.getElementById('searchform').dispatchEvent(
      new Event('submit', { bubbles: true, cancelable: true })
    );
  });

  // ── Global helpers ────────────────────────────────────────────────────────
  window.copyImage = async function(img) {
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) ||
      (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);

    try {
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      canvas.width = img.naturalWidth;
      canvas.height = img.naturalHeight;

      await new Promise((resolve) => {
        const clean = new Image();
        clean.crossOrigin = 'anonymous';
        clean.onload = () => { ctx.drawImage(clean, 0, 0); resolve(); };
        clean.onerror = () => { ctx.drawImage(img, 0, 0); resolve(); };
        clean.src = img.src;
      });

      const blob = await new Promise((resolve, reject) => {
        canvas.toBlob(b => b ? resolve(b) : reject(new Error('toBlob failed')), 'image/png');
      });

      if (isIOS) {
        const file = new File([blob], 'card.png', { type: 'image/png' });
        await navigator.share({ files: [file] });
        return;
      }

      if (navigator.clipboard && navigator.clipboard.write) {
        await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
        showCopyToast('📋 Image copied!', '#198754');
      } else {
        const url = img.src;
        if (navigator.clipboard && navigator.clipboard.writeText) {
          await navigator.clipboard.writeText(url);
          showCopyToast('📋 Image URL copied!', '#198754');
        } else {
          const input = document.createElement('input');
          input.value = url;
          document.body.appendChild(input);
          input.select();
          document.execCommand('copy');
          document.body.removeChild(input);
          showCopyToast('📋 Image URL copied!', '#198754');
        }
      }
    } catch (err) {
      if (err.name === 'AbortError') return;
      console.error('Failed:', err);
      showCopyToast('❌ Copy failed', '#dc3545');
    }
  };

  function showCopyToast(message, color) {
    const toast = document.createElement('div');
    toast.textContent = message;
    toast.style.cssText = `
      position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
      background: ${color}; color: white; padding: 10px 20px;
      border-radius: 8px; font-size: 14px; z-index: 9999;
      opacity: 0; transition: opacity 0.2s ease;
      pointer-events: none;
    `;
    document.body.appendChild(toast);
    requestAnimationFrame(() => toast.style.opacity = '1');
    setTimeout(() => {
      toast.style.opacity = '0';
      toast.addEventListener('transitionend', () => toast.remove());
    }, 2000);
  }

  // ── Tab switching helper ──────────────────────────────────────────────────
  function switchToRequestedTab() {
    const tab = sessionStorage.getItem('openModalTab');
    if (!tab) return;
    sessionStorage.removeItem('openModalTab');
    requestAnimationFrame(() => {
      try {
        const tabEl = document.querySelector(`#cardModal [data-bs-target="#${tab}"]`);
        if (tabEl) bootstrap.Tab.getOrCreateInstance(tabEl).show();
      } catch (e) {
      }
    });
  }

  // ── State ─────────────────────────────────────────────────────────────────
  const cardIndex = [];
  let currentCardId = null;
  let isNavigating = false;

  // ── Register cards as HTMX loads them ────────────────────────────────────
  const cardGrid = document.getElementById('cardGrid');
  const gridObserver = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      for (const node of mutation.addedNodes) {
        if (node.nodeType !== 1) continue;
        const triggers = node.querySelectorAll
          ? node.querySelectorAll('[data-card-id]')
          : [];
        for (const el of triggers) {
          const id = Number(el.getAttribute('data-card-id'));
          if (id && !cardIndex.includes(id)) cardIndex.push(id);
        }
        if (node.dataset?.cardId) {
          const id = Number(node.dataset.cardId);
          if (id && !cardIndex.includes(id)) cardIndex.push(id);
        }
      }
    }
  });
  gridObserver.observe(cardGrid, { childList: true, subtree: true });

  // ── Navigation helpers ────────────────────────────────────────────────────
  function getAdjacentIds() {
    const idx = cardIndex.indexOf(currentCardId);
    return {
      prev: idx > 0 ? cardIndex[idx - 1] : null,
      next: idx < cardIndex.length - 1 ? cardIndex[idx + 1] : null,
      idx,
      total: cardIndex.length,
    };
  }

  function updateNavButtons(modal) {
    const prevBtn = document.getElementById('modalPrevBtn');
    const nextBtn = document.getElementById('modalNextBtn');
    if (!modal || !modal.classList.contains('show')) {
      prevBtn.classList.add('d-none');
      nextBtn.classList.add('d-none');
      return;
    }
    const { prev, next } = getAdjacentIds();
    prevBtn.classList.toggle('d-none', prev === null);
    nextBtn.classList.toggle('d-none', next === null);
  }

  function tryTriggerSentinel() {
    const sentinel = cardGrid.querySelector('[hx-trigger="revealed"]');
    if (!sentinel) return;
    if (typeof htmx !== 'undefined') {
      htmx.trigger(sentinel, 'revealed');
    } else {
      sentinel.scrollIntoView({ behavior: 'instant', block: 'end' });
    }
  }

  function initChartAfterSwap(modal) {
    const canvas = modal.querySelector('#priceHistoryChart');
    if (!canvas) return;
    requestAnimationFrame(() => {
      modal.dispatchEvent(new CustomEvent('card-modal:swapped', { bubbles: false }));
    });
  }

  async function loadCard(cardId, direction = null) {
    if (!cardId || isNavigating) return;
    isNavigating = true;

    currentCardId = cardId;

    const modal = document.getElementById('cardModal');
    const url = `/partials/card-modal?cardId=${cardId}`;

    const { idx, total } = getAdjacentIds();
    if (idx >= total - 3) tryTriggerSentinel();

    const doSwap = async () => {
      const response = await fetch(url);
      const html = await response.text();

      if (modal._reconnectChartObserver) modal._reconnectChartObserver();

      modal.querySelectorAll('[data-bs-toggle="tab"]').forEach(el => {
        bootstrap.Tab.getInstance(el)?.dispose();
      });

      modal.innerHTML = html;

      if (typeof htmx !== 'undefined') htmx.process(modal);
      initInventoryForms(modal);
      updateNavButtons(modal);
      initChartAfterSwap(modal);
      switchToRequestedTab();
    };

    if (document.startViewTransition && direction) {
      modal.dataset.navDirection = direction;
      await document.startViewTransition(doSwap).finished;
      delete modal.dataset.navDirection;
    } else {
      await doSwap();
    }

    isNavigating = false;

    const { idx: newIdx, total: newTotal } = getAdjacentIds();
    if (newIdx >= newTotal - 3) tryTriggerSentinel();
  }

  function navigatePrev() {
    const { prev } = getAdjacentIds();
    if (prev) loadCard(prev, 'prev');
  }

  function navigateNext() {
    const { next } = getAdjacentIds();
    if (next) loadCard(next, 'next');
  }

  document.getElementById('modalPrevBtn').addEventListener('click', navigatePrev);
  document.getElementById('modalNextBtn').addEventListener('click', navigateNext);

  document.addEventListener('keydown', (e) => {
    const modal = document.getElementById('cardModal');
    if (!modal.classList.contains('show')) return;
    if (e.key === 'ArrowLeft')  { e.preventDefault(); navigatePrev(); }
    if (e.key === 'ArrowRight') { e.preventDefault(); navigateNext(); }
  });

  let touchStartX = 0;
  let touchStartY = 0;
  const SWIPE_THRESHOLD = 50;

  document.getElementById('cardModal').addEventListener('touchstart', (e) => {
    touchStartX = e.touches[0].clientX;
    touchStartY = e.touches[0].clientY;
  }, { passive: true });

  document.getElementById('cardModal').addEventListener('touchend', (e) => {
    const dx = e.changedTouches[0].clientX - touchStartX;
    const dy = e.changedTouches[0].clientY - touchStartY;
    if (Math.abs(dx) < SWIPE_THRESHOLD || Math.abs(dy) > Math.abs(dx)) return;
    if (dx < 0) navigateNext();
    else navigatePrev();
  }, { passive: true });

  document.body.addEventListener('htmx:beforeRequest', async (e) => {
    if (e.detail.elt.getAttribute('hx-target') !== '#cardModal') return;

    const cardEl = e.detail.elt.closest('[data-card-id]');
    if (cardEl) currentCardId = Number(cardEl.getAttribute('data-card-id'));

    if (!document.startViewTransition) return;

    e.preventDefault();

    const url = e.detail.requestConfig.path;
    const target = document.getElementById('cardModal');
    const sourceImg = cardEl?.querySelector('img');

    const response = await fetch(url, { headers: { 'HX-Request': 'true' } });
    if (!response.ok) throw new Error(`Failed to load modal: ${response.status}`);
    const html = await response.text();

    const transitionName = `card-hero-${currentCardId}`;

    try {
      if (sourceImg) {
        sourceImg.style.viewTransitionName = transitionName;
        sourceImg.style.opacity = '0';
      }

      const transition = document.startViewTransition(async () => {
        if (sourceImg) sourceImg.style.viewTransitionName = '';

        if (target._reconnectChartObserver) target._reconnectChartObserver();

        target.querySelectorAll('[data-bs-toggle="tab"]').forEach(el => {
          bootstrap.Tab.getInstance(el)?.dispose();
        });

        target.innerHTML = html;

        if (typeof htmx !== 'undefined') htmx.process(target);
        initInventoryForms(target);

        const destImg = target.querySelector('img.card-image');
        if (destImg) {
          destImg.style.viewTransitionName = transitionName;
          if (!destImg.complete) {
            await new Promise(resolve => {
              destImg.addEventListener('load', resolve, { once: true });
              destImg.addEventListener('error', resolve, { once: true });
            });
          }
        }
      });

      await transition.finished;
      updateNavButtons(target);
      initChartAfterSwap(target);
      switchToRequestedTab();

    } catch (err) {
      console.error('[card-modal] transition failed:', err);
      e.detail.elt.dispatchEvent(new MouseEvent('click', { bubbles: true }));
    } finally {
      if (sourceImg) {
        sourceImg.style.viewTransitionName = '';
        sourceImg.style.opacity = '';
      }
      const destImg = target.querySelector('img.card-image');
      if (destImg) destImg.style.viewTransitionName = '';
    }
  });

  const cardModal = document.getElementById('cardModal');

  // ── Delegated submit handler for inventory form ──────────────────────────
  cardModal.addEventListener('submit', async (e) => {
    const form = e.target.closest('[data-inventory-form]');
    if (!form) return;
    e.preventDefault();

    if (!form.checkValidity()) { form.classList.add('was-validated'); return; }

    const cardId = form.closest('[data-card-id]')?.dataset.cardId;
    if (!cardId) return;

    const submitBtn = form.querySelector('button[type="submit"]');
    if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = 'Saving…'; }

    // resolveFormPrice converts % → $ and strips priceMode before POSTing
    const body = resolveFormPrice(form);
    body.append('action', 'add');
    body.append('cardId', cardId);

    try {
      const res = await fetch('/api/inventory', { method: 'POST', body });
      const html = await res.text();
      const invList = document.getElementById('inventoryEntryList');
      if (invList) {
        invList.innerHTML = html || '';
        syncEmptyState(invList);
      }
      form.reset();
      form.classList.remove('was-validated');
      // reset fires our listener which restores $ mode UI
    } catch {
      // keep current inventory list state
    } finally {
      if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = 'Save to inventory'; }
    }
  });

  // ── Delegated click handler for inventory entry buttons ─────────────────
  cardModal.addEventListener('click', async (e) => {
    const btn = e.target.closest('[data-inv-action]');
    if (!btn) return;

    const article = btn.closest('[data-inventory-id]');
    if (!article) return;

    const action = btn.dataset.invAction;
    const inventoryId = article.dataset.inventoryId;
    const cardId = article.dataset.cardId;
    const qtyEl = article.querySelector('[data-inv-qty]');
    let qty = Number(qtyEl?.textContent) || 1;

    if (action === 'increment') {
      qtyEl.textContent = ++qty;
      return;
    }

    if (action === 'decrement') {
      if (qty > 1) qtyEl.textContent = --qty;
      return;
    }

    // update or remove — POST to API and reload inventory list
    btn.disabled = true;
    const body = new FormData();
    body.append('cardId', cardId);

    if (action === 'update') {
      body.append('action', 'update');
      body.append('inventoryId', inventoryId);
      body.append('quantity', String(qty));
      body.append('purchasePrice', article.dataset.purchasePrice);
      body.append('note', article.dataset.note || '');
    } else if (action === 'remove') {
      body.append('action', 'remove');
      body.append('inventoryId', inventoryId);
    }

    try {
      const res = await fetch('/api/inventory', { method: 'POST', body });
      const html = await res.text();
      const invList = document.getElementById('inventoryEntryList');
      if (invList) {
        invList.innerHTML = html || '';
        syncEmptyState(invList);
      }
    } catch {
      // keep current state
    } finally {
      btn.disabled = false;
    }
  });

  cardModal.addEventListener('shown.bs.modal', () => {
    updateNavButtons(cardModal);
    initChartAfterSwap(cardModal);
    initInventoryForms(cardModal);
    switchToRequestedTab();
  });

  cardModal.addEventListener('hidden.bs.modal', () => {
    currentCardId = null;
    updateNavButtons(null);
  });

  document.addEventListener('DOMContentLoaded', () => {
    initInventoryForms();

    const pending = sessionStorage.getItem('pendingSearch');
    if (pending) {
        sessionStorage.removeItem('pendingSearch');
        const input = document.getElementById('searchInput');
        if (input) input.value = pending;
        // The form's hx-trigger="load" will fire automatically on page load,
        // picking up the pre-populated input value — no manual trigger needed.
    }
  });

})();
</script>