/* ============================================================
   Storefront Enhancements — Cosmetics & Pharmacy
   Drop this in a <script defer> tag at the bottom of your theme
   ============================================================ */

(function () {
  'use strict';

  /* ---------- 0. Helpers ---------- */
  const $  = (sel, ctx = document) => ctx.querySelector(sel);
  const $$ = (sel, ctx = document) => Array.from(ctx.querySelectorAll(sel));
  const onReady = (fn) =>
    document.readyState !== 'loading'
      ? fn()
      : document.addEventListener('DOMContentLoaded', fn);

  /* ---------- 1. Lazy-load images (perf win) ----------
     Cosmetics stores are image-heavy. Native lazy-loading
     cuts initial page weight a lot. */
  function enableLazyImages() {
    $$('img').forEach((img) => {
      if (!img.hasAttribute('loading')) img.setAttribute('loading', 'lazy');
      if (!img.hasAttribute('decoding')) img.setAttribute('decoding', 'async');
    });
  }

  /* ---------- 2. "Prescription required" badge ----------
     Auto-flag products whose title/description mentions
     prescription keywords (Arabic + English). */
  function flagPrescriptionProducts() {
    const keywords = [
      'بوصفة طبية', 'وصفة طبية', 'يصرف بوصفة',
      'prescription', 'rx only', 'rx-only'
    ];
    const cards = $$('.s-product-card-entry, .product-entry, [class*="product-card"]');

    cards.forEach((card) => {
      const text = (card.innerText || '').toLowerCase();
      const isRx = keywords.some((k) => text.includes(k.toLowerCase()));
      if (!isRx || card.querySelector('.rx-badge')) return;

      const badge = document.createElement('span');
      badge.className = 'rx-badge';
      badge.textContent = 'Rx — يصرف بوصفة طبية';
      Object.assign(badge.style, {
        position: 'absolute',
        top: '0.5rem',
        insetInlineStart: '0.5rem',   // RTL-safe
        zIndex: '10',
        padding: '0.25rem 0.5rem',
        borderRadius: '0.25rem',
        background: '#991b1b',
        color: '#fff',
        fontSize: '0.75rem',
        fontWeight: '700',
        letterSpacing: '0.02em'
      });

      const host = card.querySelector('.s-product-card-image, .product-image, .image') || card;
      if (getComputedStyle(host).position === 'static') host.style.position = 'relative';
      host.appendChild(badge);
    });
  }

  /* ---------- 3. Expiry / batch reminder on add-to-cart ----------
     For pharma stores: a one-time gentle reminder that the
     customer should check expiry & seal on delivery. */
  function attachExpiryReminder() {
    document.addEventListener('click', (e) => {
      const btn = e.target.closest('[data-on-click="add-product-to-cart"], .btn--add-to-cart, .add-to-cart');
      if (!btn) return;
      if (sessionStorage.getItem('rxReminderShown')) return;

      sessionStorage.setItem('rxReminderShown', '1');
      showToast(
        'تذكير: يُرجى التحقق من تاريخ الصلاحية وسلامة العبوة عند الاستلام.',
        'info'
      );
    });
  }

  /* ---------- 4. Lightweight toast system ---------- */
  function showToast(message, type = 'info', duration = 4000) {
    let host = $('#toast-host');
    if (!host) {
      host = document.createElement('div');
      host.id = 'toast-host';
      Object.assign(host.style, {
        position: 'fixed',
        bottom: '1.5rem',
        insetInlineEnd: '1.5rem',
        zIndex: '9999',
        display: 'flex',
        flexDirection: 'column',
        gap: '0.5rem',
        pointerEvents: 'none'
      });
      document.body.appendChild(host);
    }

    const colors = {
      info:    { bg: '#30126d', fg: '#fff' },
      success: { bg: '#16a34a', fg: '#fff' },
      warn:    { bg: '#eb3c2d', fg: '#fff' }
    }[type] || { bg: '#30126d', fg: '#fff' };

    const toast = document.createElement('div');
    toast.textContent = message;
    Object.assign(toast.style, {
      background: colors.bg,
      color: colors.fg,
      padding: '0.75rem 1rem',
      borderRadius: '0.5rem',
      boxShadow: '0 6px 20px rgba(0,0,0,0.18)',
      fontSize: '0.9rem',
      maxWidth: '320px',
      pointerEvents: 'auto',
      opacity: '0',
      transform: 'translateY(8px)',
      transition: 'opacity 200ms ease, transform 200ms ease'
    });
    host.appendChild(toast);
    requestAnimationFrame(() => {
      toast.style.opacity = '1';
      toast.style.transform = 'translateY(0)';
    });

    setTimeout(() => {
      toast.style.opacity = '0';
      toast.style.transform = 'translateY(8px)';
      setTimeout(() => toast.remove(), 220);
    }, duration);
  }

  /* ---------- 5. Recently viewed products ----------
     Useful for skincare shoppers comparing items. */
  const RV_KEY  = 'recentlyViewed';
  const RV_MAX  = 8;

  function trackRecentlyViewed() {
    const onProductPage = /\/p\/|\/product\//.test(location.pathname);
    if (!onProductPage) return;

    const title = $('h1')?.innerText?.trim();
    const image = $('meta[property="og:image"]')?.content || $('.product-image img')?.src;
    if (!title) return;

    const item = { url: location.pathname, title, image, t: Date.now() };
    let list;
    try { list = JSON.parse(localStorage.getItem(RV_KEY) || '[]'); }
    catch { list = []; }

    list = list.filter((p) => p.url !== item.url);
    list.unshift(item);
    list = list.slice(0, RV_MAX);
    localStorage.setItem(RV_KEY, JSON.stringify(list));
  }

  function renderRecentlyViewed() {
    let list;
    try { list = JSON.parse(localStorage.getItem(RV_KEY) || '[]'); }
    catch { return; }
    if (!list.length) return;

    const mount = $('#recently-viewed') || (() => {
      const main = $('main') || document.body;
      const section = document.createElement('section');
      section.id = 'recently-viewed';
      section.style.margin = '2rem auto';
      section.style.maxWidth = '1200px';
      section.style.padding = '0 1rem';
      main.appendChild(section);
      return section;
    })();

    mount.innerHTML = `
      <h2 style="color:#30126d;font-weight:800;font-size:1.25rem;margin-bottom:1rem;">
        شوهدت مؤخراً
      </h2>
      <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:0.75rem;">
        ${list.map((p) => `
          <a href="${p.url}" style="display:block;border:1px solid #c9cdcf;border-radius:0.5rem;padding:0.5rem;text-align:center;text-decoration:none;color:#30126d;background:#f9f9f9;transition:transform .2s ease, box-shadow .2s ease;"
             onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 6px 18px rgba(48,18,109,0.12)';"
             onmouseout="this.style.transform='';this.style.boxShadow='';">
            ${p.image ? `<img src="${p.image}" alt="" loading="lazy" style="width:100%;height:100px;object-fit:cover;border-radius:0.375rem;margin-bottom:0.5rem;">` : ''}
            <span style="font-size:0.8rem;font-weight:700;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">
              ${p.title}
            </span>
          </a>`).join('')}
      </div>`;
  }

  /* ---------- 6. Sticky add-to-cart on mobile (product page) ----------
     Increases conversion on long product pages. */
  function stickyAddToCartMobile() {
    if (window.innerWidth > 768) return;
    const original = $('.btn--add-to-cart, [data-on-click="add-product-to-cart"]');
    if (!original) return;

    const bar = document.createElement('div');
    Object.assign(bar.style, {
      position: 'fixed',
      bottom: '0',
      insetInline: '0',
      padding: '0.75rem 1rem',
      background: '#fff',
      boxShadow: '0 -4px 16px rgba(0,0,0,0.08)',
      zIndex: '999',
      display: 'none'
    });

    const clone = original.cloneNode(true);
    clone.style.width = '100%';
    clone.style.padding = '0.85rem';
    clone.style.fontSize = '1rem';
    clone.addEventListener('click', () => original.click());
    bar.appendChild(clone);
    document.body.appendChild(bar);

    const io = new IntersectionObserver(([entry]) => {
      bar.style.display = entry.isIntersecting ? 'none' : 'block';
    }, { threshold: 0.1 });
    io.observe(original);
  }

  /* ---------- 7. Smart search debounce ----------
     If your theme has a live search input, this prevents
     a request on every keystroke. */
  function debounceSearch() {
    const input = $('input[type="search"], #search-input, .search-input');
    if (!input) return;
    let timer;
    input.addEventListener('input', (e) => {
      clearTimeout(timer);
      const value = e.target.value.trim();
      timer = setTimeout(() => {
        input.dispatchEvent(new CustomEvent('search:debounced', { detail: { value } }));
      }, 300);
    });
  }

  /* ---------- 8. Re-run dynamic enhancements on Salla page changes ---------- */
  function observeDomChanges() {
    const target = $('main') || document.body;
    const mo = new MutationObserver(() => {
      enableLazyImages();
      flagPrescriptionProducts();
    });
    mo.observe(target, { childList: true, subtree: true });
  }

  /* ---------- Init ---------- */
  onReady(() => {
    enableLazyImages();
    flagPrescriptionProducts();
    attachExpiryReminder();
    trackRecentlyViewed();
    renderRecentlyViewed();
    stickyAddToCartMobile();
    debounceSearch();
    observeDomChanges();
  });

  // Expose toast for your own use elsewhere
  window.storeToast = showToast;
})();