/* =====================================================
   WIHAF — الجافاسكربت (خفيف)
   1) زرا القائمة والبحث في الهيدر   2) زر الرجوع للأعلى + ظل الهيدر
   3) تفاصيل المنتج: عرض المزيد / عرض أقل
   — ما فيه انتظار ولا مؤقتات: كل شي يشتغل أول ما تجهز الصفحة.
   — ترتيب الهيدر كله CSS، والقائمة تتبني لما تضغط عليها فقط.

   *** احذف أي كود جافاسكربت قديم لوهاف وحط هذا الملف وحده ***
   للتأكد: DevTools ← Elements ← وسم <html> فيه data-wihaf-js="v19"
   ===================================================== */
(function () {
  'use strict';
  var d = document, root = d.documentElement;
  if (root.getAttribute('data-wihaf-js')) return;
  root.setAttribute('data-wihaf-js', 'v19');

  var raf = window.requestAnimationFrame || function (f) { return setTimeout(f, 16); };
  var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  var MENU = '.main-nav-container .main-menu, .main-nav-container salla-menu, .main-nav-container .navbar-nav, .main-menu';

  function ready(fn) {
    if (d.readyState === 'loading') d.addEventListener('DOMContentLoaded', fn);
    else fn();
  }
  function txt(a) { return (a.textContent || '').replace(/\s+/g, ' ').trim(); }

  /* ---------- 1) الهيدر: زر القائمة + زر البحث ---------- */
  var SEARCH_SVG =
    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" ' +
    'stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M16.5 16.5L21 21"/></svg>';

  // قائمة التصنيفات (رئيسي ← فرعي) من قائمة الهيدر الأصلية، بدون تكرار
  function list(ul, lvl) {
    var out = d.createElement('ul'), seen = {};
    out.className = 'wihaf-drawer__list wihaf-drawer__list--l' + lvl;
    [].forEach.call(ul.children, function (li) {
      var sub = li.querySelector('ul');
      var a = [].filter.call(li.querySelectorAll('a[href]'), function (x) { return !sub || !sub.contains(x); })[0];
      var t = a && txt(a);
      if (!t || seen[t]) return;
      seen[t] = 1;
      var item = d.createElement('li'), l = d.createElement('a');
      l.href = a.getAttribute('href');
      l.textContent = t;
      item.appendChild(l);
      if (sub && lvl < 2) item.appendChild(list(sub, lvl + 1));
      out.appendChild(item);
    });
    return out;
  }
  function flat(m) {
    var out = d.createElement('ul'), seen = {};
    out.className = 'wihaf-drawer__list wihaf-drawer__list--l0';
    [].forEach.call(m.querySelectorAll('a[href]'), function (a) {
      var t = txt(a), h = a.getAttribute('href');
      if (!t || h === '#' || seen[h + t]) return;
      seen[h + t] = 1;
      var li = d.createElement('li'), l = d.createElement('a');
      l.href = h;
      l.textContent = t;
      li.appendChild(l);
      out.appendChild(li);
    });
    return out;
  }
  function buildMenu() {
    var m = d.querySelector(MENU);
    if (!m) return null;
    var ul = m.matches('ul') ? m : m.querySelector('ul');
    var l = ul ? list(ul, 0) : null;
    if (!l || !l.children.length) l = flat(m);
    return l.children.length ? l : null;
  }

  function header() {
    var row = d.querySelector('.main-nav-container .container > .flex.items-stretch') ||
              d.querySelector('.main-nav-container .container');
    if (!row) return;

    var g = d.createElement('div');
    g.className = 'wihaf-hd-start';
    g.innerHTML =
      '<button type="button" class="wihaf-burger" aria-label="القائمة" aria-expanded="false">' +
        '<i class="wihaf-burger__icon"><span></span><span></span><span></span></i>' +
        '<em class="wihaf-burger__label">القائمة</em></button>' +
      '<button type="button" class="wihaf-search-btn" aria-label="بحث">' + SEARCH_SVG + '</button>';
    row.insertBefore(g, row.firstChild);
    var burger = g.firstChild, searchBtn = g.lastChild;

    // البحث: نركّز على حقل سلة الأصلي فتفتح نافذتها
    searchBtn.addEventListener('click', function () {
      var i = d.querySelector('salla-search input');
      if (i) { i.focus(); i.click(); }
    });

    // القائمة: الدرج يتبني أول مرة تضغط
    var drawer = null, overlay = null, nav = null, tries = 0;
    function fill() {
      var l = buildMenu();
      if (l) { nav.textContent = ''; nav.appendChild(l); }
      else if (++tries < 15) setTimeout(fill, 400);          // القائمة لسا تتحمّل
    }
    function create() {
      overlay = d.createElement('div');
      overlay.className = 'wihaf-drawer-overlay';
      drawer = d.createElement('aside');
      drawer.className = 'wihaf-drawer';
      drawer.setAttribute('role', 'dialog');
      drawer.setAttribute('aria-modal', 'true');
      drawer.setAttribute('aria-label', 'القائمة');
      drawer.innerHTML =
        '<div class="wihaf-drawer__head"><span class="wihaf-drawer__title">التصنيفات</span>' +
        '<button type="button" class="wihaf-drawer__close" aria-label="إغلاق">&times;</button></div>' +
        '<nav class="wihaf-drawer__nav"></nav>';
      nav = drawer.querySelector('.wihaf-drawer__nav');
      d.body.appendChild(overlay);
      d.body.appendChild(drawer);
      overlay.addEventListener('click', function () { set(false); });
      drawer.addEventListener('click', function (e) {
        if (e.target.closest('.wihaf-drawer__close, a')) set(false);
      });
      d.addEventListener('keydown', function (e) { if (e.key === 'Escape') set(false); });
      fill();
    }
    function set(on) {
      if (!drawer) { if (!on) return; create(); }
      raf(function () {                                      // فريم واحد عشان الحركة تشتغل أول مرة
        overlay.classList.toggle('is-open', on);
        drawer.classList.toggle('is-open', on);
        burger.setAttribute('aria-expanded', on ? 'true' : 'false');
        root.classList.toggle('wihaf-lock', on);
      });
    }
    burger.addEventListener('click', function () {
      set(!(drawer && drawer.classList.contains('is-open')));
    });
  }

  /* ---------- 2) زر الرجوع للأعلى + ظل الهيدر عند التمرير ---------- */
  function scrollFx() {
    var top = d.createElement('button');
    top.type = 'button';
    top.className = 'wihaf-top';
    top.setAttribute('aria-label', 'الرجوع للأعلى');
    top.innerHTML = '<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" ' +
      'stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>';
    d.body.appendChild(top);
    top.addEventListener('click', function () {
      window.scrollTo({ top: 0, behavior: reduce ? 'auto' : 'smooth' });
    });
    var busy = false;
    function update() {
      busy = false;
      var y = window.pageYOffset || 0;
      d.body.classList.toggle('wihaf-scrolled', y > 40);
      top.classList.toggle('is-visible', y > 600);
    }
    window.addEventListener('scroll', function () {
      if (!busy) { busy = true; raf(update); }
    }, { passive: true });
    update();
  }

  /* ---------- 3) تفاصيل المنتج: عرض المزيد / عرض أقل (جوال 220px، كمبيوتر 320px) ---------- */
  function details() {
    var desc = d.querySelector('.product__description');
    if (!desc || desc.hasAttribute('data-wihaf')) return;
    desc.setAttribute('data-wihaf', '1');
    desc.classList.add('wihaf-collapsible');

    var btn = d.createElement('button');
    btn.type = 'button';
    btn.className = 'wihaf-more';
    btn.hidden = true;
    btn.setAttribute('aria-expanded', 'false');
    btn.innerHTML = '<span class="wihaf-more__label">عرض المزيد</span>' +
      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" ' +
      'stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>';
    desc.parentNode.insertBefore(btn, desc.nextSibling);
    var label = btn.firstChild, open = false;
    function limit() { return window.innerWidth < 768 ? 220 : 320; }

    function measure() {
      if (open) return;
      if (desc.scrollHeight <= limit() + 60) {
        desc.classList.remove('is-collapsed');
        desc.style.maxHeight = '';
        btn.hidden = true;
      } else {
        btn.hidden = false;
        desc.classList.add('is-collapsed');
        desc.style.maxHeight = limit() + 'px';
      }
    }
    btn.addEventListener('click', function () {
      open = !open;
      if (open) {
        desc.classList.remove('is-collapsed');
        desc.style.maxHeight = desc.scrollHeight + 'px';
        setTimeout(function () { if (open) desc.style.maxHeight = 'none'; }, 550);
      } else {
        desc.style.maxHeight = desc.scrollHeight + 'px';
        void desc.offsetHeight;
        desc.classList.add('is-collapsed');
        desc.style.maxHeight = limit() + 'px';
        var y = desc.getBoundingClientRect().top;
        if (y < 0) window.scrollBy({ top: y - 120, behavior: reduce ? 'auto' : 'smooth' });
      }
      label.textContent = open ? 'عرض أقل' : 'عرض المزيد';
      btn.setAttribute('aria-expanded', open ? 'true' : 'false');
    });
    measure();
    window.addEventListener('load', measure);              // بعد ما الصور تتحمّل يتغير الطول
  }

  ready(function () {
    header();
    scrollFx();
    details();
  });
})();