'use strict';

document.addEventListener('DOMContentLoaded', async () => {
  await SHOP.loadContext();
  await Promise.all([loadCategoryTiles(), loadFeatured()]);
  window.addEventListener('currencyChanged', loadFeatured);
});

async function loadCategoryTiles() {
  const grid = document.getElementById('category-grid');
  if (!grid) return;
  try {
    const data = await SHOP.fetchJSON('/api/category-tree?root_only=true');
    const cats = (data.categories || []).slice(0, 12);
    if (!cats.length) {
      grid.innerHTML = '<p class="loading">No categories yet.</p>';
      return;
    }
    grid.innerHTML = cats.map(c => `
      <a class="category-tile" href="/category.html?id=${encodeURIComponent(c.id)}">
        <span class="cat-name">${SHOP.escapeHtml(c.name)}</span>
      </a>`).join('');
  } catch (e) {
    console.warn('[categories]', e);
    grid.innerHTML = '<p class="loading">Could not load categories.</p>';
  }
}

async function loadFeatured() {
  const grid = document.getElementById('product-grid');
  if (!grid) return;
  grid.innerHTML = '<div class="loading">Loading…</div>';
  try {
    // pull a page from a random root category to vary the hero strip
    const tree = await SHOP.fetchJSON('/api/category-tree?root_only=true');
    const roots = tree.categories || [];
    if (!roots.length) { grid.innerHTML = '<p class="loading">No products yet.</p>'; return; }
    const pick = roots[Math.floor(Math.random() * roots.length)];
    const data = await SHOP.fetchJSON(`/api/category/${pick.id}?limit=12`);
    const products = data.products || [];
    grid.innerHTML = products.length
      ? products.map(SHOP.productCard).join('')
      : '<p class="loading">Nothing in this category yet.</p>';
  } catch (e) {
    console.warn('[featured]', e);
    grid.innerHTML = '<p class="error">Could not load products.</p>';
  }
}