/* DGxOne — store.js v1.1
   - Renders sections from /assets/products.json
   - Option pickers (size/color/etc.)
   - Cart stored in localStorage with drawer UI
   - Image lightbox + autoplay
*/
(() => {
  'use strict';

  const DATA_URL = '/assets/products.json';
  const CART_KEY = 'dgx.cart.v1';
  const PLACEHOLDER = '/assets/img/placeholder-hero.png';

  const $  = (s, r=document) => r.querySelector(s);
  const $$ = (s, r=document) => Array.from(r.querySelectorAll(s));
  const el = (t, c, html) => { const n=document.createElement(t); if(c) n.className=c; if(html!=null) n.innerHTML=html; return n; };

  /* ------------------- Fetch ------------------- */
  async function fetchProducts(){
    const res = await fetch(DATA_URL, { cache:'no-store' });
    if(!res.ok) throw new Error('Failed to load products.json');
    return res.json();
  }

  /* ------------------- CART ------------------- */
  let CART = loadCart();
  function loadCart(){ try{ return JSON.parse(localStorage.getItem(CART_KEY)||'[]'); }catch{ return []; } }
  function saveCart(){ try{ localStorage.setItem(CART_KEY, JSON.stringify(CART)); }catch{} updateCartBadge(); }
  function cartCount(){ return CART.reduce((a,i)=>a+i.quantity,0); }
  function updateCartBadge(){
    const b = $('#cartCount'); if(!b) return;
    const c = cartCount(); if(c>0){ b.textContent = c; b.hidden = false; } else { b.hidden = true; }
  }

  function addToCart(item){
    // item = {id,title,priceId,quantity,image,options:{Size:'M',Color:'Black'}}
    const key = `${item.id}::${JSON.stringify(item.options||{})}`;
    const found = CART.find(i => i.key === key);
    if(found){ found.quantity += item.quantity; }
    else { CART.push({ ...item, key }); }
    saveCart();
    openCart();
  }

  /* ------------------- CART DRAWER UI ------------------- */
  let cartDlg;
  function ensureCartUI(){
    if(cartDlg) return cartDlg;
    cartDlg = el('dialog'); cartDlg.id = 'cartDrawer';
    cartDlg.innerHTML = `
      <div class="cart-panel">
        <div class="cart-hd"><strong>Your cart</strong>
          <button class="dgx-btn" data-cart="close" style="margin-left:auto">Close</button>
        </div>
        <div class="cart-bd" id="cartList"></div>
        <div class="cart-ft">
          <div class="muted" id="cartSummary">0 items</div>
          <div style="display:flex;gap:8px">
            <button class="dgx-btn" data-cart="clear">Clear</button>
            <button class="dgx-btn primary" data-cart="checkout">Checkout</button>
          </div>
        </div>
      </div>`;
    document.body.appendChild(cartDlg);

    cartDlg.addEventListener('click', (e)=>{
      const btn = e.target.closest('[data-cart]');
      if(!btn) return;
      const act = btn.dataset.cart;
      if(act==='close'){ try{ cartDlg.close(); }catch{ cartDlg.removeAttribute('open'); } }
      if(act==='clear'){ CART = []; saveCart(); renderCart(); }
      if(act==='checkout'){
        if(CART.length===0) return;
        const items = CART.map(i => ({
          price: i.priceId,
          quantity: i.quantity,
          metadata: { title: i.title, ...(i.options||{}) }
        }));
        (window.checkout ? window.checkout(items, 'payment') : Promise.resolve())
        .catch(err => { alert('Checkout error: '+err.message); console.warn(err); });
      }
    });

    renderCart();
    return cartDlg;
  }

  function openCart(){
    ensureCartUI();
    renderCart();
    try{ cartDlg.showModal(); }catch{ cartDlg.setAttribute('open',''); }
  }

  function renderCart(){
    const list = $('#cartList', cartDlg); const sum = $('#cartSummary', cartDlg);
    if(!list || !sum) return;
    if(CART.length===0){
      list.innerHTML = `<p class="muted">Your cart is empty.</p>`;
      sum.textContent = '0 items';
      updateCartBadge();
      return;
    }

    list.innerHTML = CART.map(i => `
      <div class="cart-item" data-key="${i.key}">
        <img src="${i.image||PLACEHOLDER}" alt="">
        <div class="cart-meta">
          <div><strong>${i.title}</strong></div>
          ${i.options ? `<div class="muted">${Object.entries(i.options).map(([k,v])=>`${k}: ${v}`).join(' • ')}</div>` : ''}
        </div>
        <div style="display:grid;gap:6px;justify-items:end">
          <div class="qty">
            <button data-q="dec" aria-label="Decrease">−</button>
            <input type="text" value="${i.quantity}" aria-label="Quantity" readonly>
            <button data-q="inc" aria-label="Increase">+</button>
          </div>
          <button class="rmv" data-q="rmv" aria-label="Remove">Remove</button>
        </div>
      </div>
    `).join('');

    list.querySelectorAll('.cart-item').forEach(row => {
      const key = row.dataset.key;
      row.addEventListener('click', (e)=>{
        const b = e.target.closest('[data-q]'); if(!b) return;
        const act = b.dataset.q;
        const idx = CART.findIndex(x=>x.key===key); if(idx<0) return;
        if(act==='inc') CART[idx].quantity++;
        if(act==='dec') CART[idx].quantity = Math.max(1, CART[idx].quantity-1);
        if(act==='rmv') CART.splice(idx,1);
        saveCart(); renderCart();
      });
    });

    sum.textContent = `${cartCount()} item${cartCount()===1?'':'s'}`;
    updateCartBadge();
  }

  // Hook the header Cart button
  (function(){
    const btn = $('#cartBtn');
    if(btn){ btn.addEventListener('click', openCart); updateCartBadge(); }
  })();

  /* ------------------- LIGHTBOX ------------------- */
  let lb, lbImg, lbTitle, lbDots, state, timer;
  function ensureLightbox(){
    if(lb) return lb;
    lb = el('dialog'); lb.id='dgxLightbox';
    lb.innerHTML = `
      <div class="lb-wrap" data-lbwrap>
        <div class="lb-card">
          <div class="lb-media"><img id="lbImg" alt="" decoding="async" loading="eager"></div>
          <div class="lb-bar">
            <div class="lb-title" id="lbTitle"></div>
            <div class="lb-ctrls">
              <div class="lb-dotbar" id="lbDots"></div>
              <button class="lb-btn" id="lbPrev">‹</button>
              <button class="lb-btn" id="lbNext">›</button>
              <button class="lb-btn" id="lbPlay" aria-pressed="true">Pause</button>
              <button class="lb-close" id="lbClose">×</button>
            </div>
          </div>
        </div>
      </div>`;
    document.body.appendChild(lb);
    lbImg=$('#lbImg',lb); lbTitle=$('#lbTitle',lb); lbDots=$('#lbDots',lb);
    $('#lbPrev',lb).addEventListener('click',prev);
    $('#lbNext',lb).addEventListener('click',next);
    $('#lbPlay',lb).addEventListener('click',togglePlay);
    $('#lbClose',lb).addEventListener('click',close);
    lb.addEventListener('click',e=>{ if(e.target?.dataset?.lbwrap!=null) close(); });
    lb.addEventListener('close',stop);
    window.addEventListener('keydown',e=>{ if(!lb.open) return; if(e.key==='Escape') close(); if(e.key==='ArrowRight') next(); if(e.key==='ArrowLeft') prev(); });
    lb.addEventListener('mouseenter',()=>stop(false));
    lb.addEventListener('mouseleave',()=>play());
    return lb;
  }
  function openLightbox(images=[], title=''){ ensureLightbox(); if(!images.length) return;
    state={images,title,i:0,playing:true}; lbTitle.textContent=title||'Preview';
    lbDots.innerHTML=''; images.forEach((_,idx)=>{ const d=el('div','lb-dot'); if(idx===0) d.classList.add('is-active'); d.addEventListener('click',()=>go(idx)); lbDots.appendChild(d); });
    go(0); try{lb.showModal()}catch{lb.setAttribute('open','')} play();
  }
  function go(i){ if(!state) return; state.i=(i+state.images.length)%state.images.length; lbImg.src=state.images[state.i]; $$('.lb-dot',lbDots).forEach((d,idx)=>d.classList.toggle('is-active',idx===state.i)); }
  function next(){ go(state.i+1) } function prev(){ go(state.i-1) }
  function play(){ if(!state) return; stop(false); state.playing=true; const b=$('#lbPlay',lb); b.textContent='Pause'; b.setAttribute('aria-pressed','true'); timer=setInterval(next,3000); }
  function stop(update=true){ if(timer) clearInterval(timer); timer=null; if(state) state.playing=false; if(update&&lb?.open){const b=$('#lbPlay',lb); b.textContent='Play'; b.setAttribute('aria-pressed','false');} }
  function togglePlay(){ (state?.playing?stop:play)(); }
  function close(){ try{lb.close()}catch{lb.removeAttribute('open')} stop(); }

  /* ------------------- RENDER ------------------- */

  // Build option selects if product has options (e.g., Size, Color)
  function optionsBlock(p){
    if(!Array.isArray(p.options) || p.options.length===0) return '';
    return `
      <div class="pc-options">
        ${p.options.map(opt => `
          <div class="pc-opt">
            <label for="${p.id}-${opt.name}">${opt.name}</label>
            <select id="${p.id}-${opt.name}" name="${opt.name}">
              <option value="" disabled selected>Select ${opt.name}</option>
              ${opt.values.map(v=>`<option value="${v}">${v}</option>`).join('')}
            </select>
          </div>
        `).join('')}
      </div>`;
  }

  function readSelectedOptions(card){
    const selects = $$('select[name]', card);
    const chosen = {};
    for(const s of selects){
      if(!s.value) return null; // not all chosen
      chosen[s.name] = s.value;
    }
    return chosen;
  }

  function productCard(p, span='span-4'){
    const card = el('article', `product-card ${span}`); card.id=p.id;

    const imgs = Array.isArray(p.images)&&p.images.length ? p.images
               : (p.image ? [p.image] : [PLACEHOLDER]);

    const badge = p.badge ? `<div class="pc-badge">${p.badge}</div>` : '';

    // action button(s)
    let cta = '';
    if(p.status==='coming-soon' && p.cta?.action==='notify'){
      cta = `<button class="btn small" data-action="notify" data-form="${p.cta.formId||('notify-'+p.id)}">Notify me</button>`;
    }else if(p.priceId){
      cta = `<button class="btn small" data-action="add">Add to cart</button>`;
    }

    card.innerHTML = `
      <a class="pc-media" href="javascript:void(0)"><img src="${imgs[0]}" alt="${p.title||''}" loading="lazy" decoding="async"></a>
      <div class="pc-body">
        ${badge}
        <h3>${p.title||''}</h3>
        ${p.subtitle?`<p class="muted">${p.subtitle}</p>`:''}
        ${Array.isArray(p.bullets)&&p.bullets.length?`<ul>${p.bullets.map(b=>`<li>${b}</li>`).join('')}</ul>`:''}
      </div>
      ${optionsBlock(p)}
      <div class="pc-actions">${cta}</div>
    `;

    // ✅ Lightbox only from the image area, never from pickers/buttons/text
    const media = card.querySelector('.pc-media');
    media.addEventListener('click', (e) => {
      e.preventDefault();
      e.stopPropagation();
      openLightbox(imgs, p.title||'Preview');
    });

    // Actions (Add / Notify) — ignore clicks that aren't action buttons
    card.addEventListener('click', (e)=>{
      const btn = e.target.closest('button[data-action]');
      if(!btn) return;
      const act = btn.dataset.action;

      if(act==='notify'){
        showNotifyForm(btn.dataset.form||('notify-'+p.id), p.title||'Product');
        return;
      }
      if(act==='add'){
        const opt = readSelectedOptions(card);
        if(opt===null && Array.isArray(p.options) && p.options.length){
          alert('Please select all options.');
          return;
        }
        addToCart({
          id: p.id, title: p.title||'Item', priceId: p.priceId, image: imgs[0], quantity: 1, options: opt||{}
        });
      }
    });

    return card;
  }

  function membershipCard(p, span='span-6'){
    const wrap = el('article', `membership-card ${span}`); wrap.id=p.id;
    wrap.innerHTML = `
      <h3>${p.title||''}</h3>
      ${p.subtitle?`<p class="muted">${p.subtitle}</p>`:''}
      ${Array.isArray(p.bullets)&&p.bullets.length?`<ul>${p.bullets.map(b=>`<li>${b}</li>`).join('')}</ul>`:''}
      <div class="pc-actions">
        <button class="btn small" data-action="subscribe">Subscribe</button>
      </div>`;
    wrap.addEventListener('click', (e)=>{
      const b=e.target.closest('[data-action="subscribe"]'); if(!b) return;
      (window.checkout ? window.checkout([{price:p.priceId,quantity:1}], 'subscription') : Promise.resolve())
      .catch(err=>{ alert('Checkout error: '+err.message); console.warn(err); });
    });
    return wrap;
  }

  function sectionBlock(sec){
    const s = el('section','store-section');
    if(sec.title) s.appendChild(el('h2',null,sec.title));
    const grid = el('div','store-grid');
    (sec.products||[]).forEach(p=>{
      if(sec.id==='subscriptions' || p.mode==='subscription') grid.appendChild(membershipCard(p,'span-6'));
      else {
        const span = (p.feature || (sec.products.length===1 && (sec.id==='devices'||sec.id==='gear'))) ? 'span-12':'span-4';
        grid.appendChild(productCard(p, span));
      }
    });
    s.appendChild(grid); return s;
  }

  /* Netlify “Notify me” mini-dialog */
  function showNotifyForm(formId, productTitle){
    const d = el('dialog'); d.className='dgx-notify';
    d.innerHTML = `
      <form method="POST" data-netlify="true" name="${formId}" class="dgx-card">
        <div class="hd"><strong>Notify me: ${productTitle}</strong><button type="button" class="x" aria-label="Close">×</button></div>
        <div class="bd">
          <input type="hidden" name="form-name" value="${formId}">
          <label>Email <input name="email" type="email" required placeholder="you@example.com"></label>
          <label>Notes (optional) <textarea name="notes" rows="3" placeholder="Add color/size preference, etc."></textarea></label>
        </div>
        <div class="ft"><button class="btn primary" type="submit">Notify me</button></div>
      </form>`;
    document.body.appendChild(d);
    d.querySelector('.x').onclick=()=>{try{d.close()}catch{d.removeAttribute('open')} d.remove();};
    d.addEventListener('close',()=>d.remove());
    try{d.showModal()}catch{d.setAttribute('open','')}
  }

  /* ------------------- INIT ------------------- */
  async function init(){
    const host = $('#store-mount'); if(!host) return;
    host.innerHTML='';
    let data;
    try{ data = await fetchProducts(); }
    catch(e){ console.warn('[store] products.json failed', e); host.appendChild(el('p','muted','Store is temporarily unavailable.')); return; }
    (data.sections||[]).forEach(sec => host.appendChild(sectionBlock(sec)));
    updateCartBadge();
  }

  init();
})();