document.addEventListener('DOMContentLoaded', function () {
  if (window.innerWidth > 768) return;
  if (document.querySelector('.mobile-bottom-nav')) return;

  const nav = document.createElement('nav');

  nav.className = 'mobile-bottom-nav';
  nav.dir = 'rtl';

  nav.innerHTML = `
    <a href="#" class="mobile-search-link">
      <svg viewBox="0 0 24 24">
        <circle cx="10.8" cy="10.8" r="7.2"></circle>
        <path d="m16.2 16.2 5 5"></path>
      </svg>
      <span>بحث</span>
    </a>

    <a href="/cart">
      <svg viewBox="0 0 24 24">
        <path d="M3 4h2l2.4 11h9.2L19 8H6"></path>
        <circle cx="9" cy="20" r="1"></circle>
        <circle cx="17" cy="20" r="1"></circle>
      </svg>
      <b class="cart-count">0</b>
      <span>السلة</span>
    </a>

    <a href="https://salla.sa/jamiladvanced/brands">
      <svg viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="8"></circle>
        <path d="m12 7 1.4 2.8 3.1.5-2.2 2.2.5 3.1-2.8-1.5-2.8 1.5.5-3.1-2.2-2.2 3.1-.5z"></path>
      </svg>
      <span>العلامات التجارية</span>
    </a>

    <a href="https://jamilest.com/category/rGQxy">
      <svg viewBox="0 0 24 24">
        <path d="M12 21c4.5-2.2 7-5.2 7-9 0-3.3-2-5.4-4.5-7.7.1 2.2-1 3.8-2.4 4.8.1-3.7-1.7-6.5-4.5-8.1C8.5 5.6 6 8.5 6 12c0 3.8 2.2 6.8 6 9z"></path>
      </svg>
      <span>الأكثر مبيعًا</span>
    </a>
  `;

  document.body.appendChild(nav);

  // فتح مربع البحث الموجود في الموقع
  const searchLink = nav.querySelector('.mobile-search-link');

  searchLink.addEventListener('click', function (event) {
    event.preventDefault();

    const searchInput = document.querySelector(
      'input.s-search-input[type="search"]'
    );

    if (searchInput) {
      searchInput.focus();
      searchInput.scrollIntoView({
        behavior: 'smooth',
        block: 'center'
      });
    }
  });

  // تحديث عداد السلة
  function updateCartCount() {
    const badge = nav.querySelector('.cart-count');

    const countElement =
      document.querySelector('[data-testid="header-cart-count"]') ||
      document.querySelector('.s-cart-summary-count');

    if (countElement) {
      badge.textContent = countElement.textContent.trim() || '0';
    }
  }

  updateCartCount();
  setInterval(updateCartCount, 2000);
});

document.addEventListener('DOMContentLoaded', function () {
  const button = document.createElement('button');

  button.id = 'back-to-top';
  button.type = 'button';
  button.innerHTML = '↑';
  button.setAttribute('aria-label', 'العودة إلى أعلى الصفحة');

  document.body.appendChild(button);

  window.addEventListener('scroll', function () {
    button.classList.toggle('show', window.scrollY > 400);
  });

  button.addEventListener('click', function () {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  });
});

(function () {
  function initDesktopSideMenu() {
    const menu = document.querySelector('#mobile-menu');
    const openBtn = document.querySelector('[data-testid="store-header-mobile-toggle"]');

    if (!menu || !openBtn) {
      setTimeout(initDesktopSideMenu, 500);
      return;
    }

    if (menu.dataset.desktopMenuReady === '1') return;
    menu.dataset.desktopMenuReady = '1';

    menu.querySelectorAll('li.lg\\:hidden').forEach(function (item) {
      const childList = item.querySelector(':scope > ul');

      if (!childList || item.querySelector(':scope > .menu-arrow')) return;

      const arrow = document.createElement('button');
      arrow.type = 'button';
      arrow.className = 'menu-arrow';
      arrow.setAttribute('aria-label', 'فتح التصنيف');

      item.insertBefore(arrow, item.firstChild);

      arrow.addEventListener('click', function (event) {
        event.preventDefault();
        event.stopPropagation();

        item.parentElement.querySelectorAll(':scope > li.is-open').forEach(function (openItem) {
          if (openItem !== item) {
            openItem.classList.remove('is-open');
          }
        });

        item.classList.toggle('is-open');
      });
    });

    openBtn.addEventListener('click', function (event) {
      event.preventDefault();
      event.stopPropagation();
      document.body.classList.add('desktop-menu-open');
    });

    document.addEventListener('click', function (event) {
      const closeBtn = event.target.closest('.close-mobile-menu');
      const currentMenu = document.querySelector('#mobile-menu');

      if (closeBtn) {
        document.body.classList.remove('desktop-menu-open');
        return;
      }

      if (
        document.body.classList.contains('desktop-menu-open') &&
        currentMenu &&
        !currentMenu.contains(event.target) &&
        !openBtn.contains(event.target)
      ) {
        document.body.classList.remove('desktop-menu-open');
      }
    });
  }

  document.addEventListener('DOMContentLoaded', initDesktopSideMenu);
  window.addEventListener('load', initDesktopSideMenu);
  setTimeout(initDesktopSideMenu, 1000);
  setTimeout(initDesktopSideMenu, 2500);
})();
(function () {
  function addSideLogoAndHome() {
    const menuList = document.querySelector('#mobile-menu .main-menu');

    if (!menuList) return;

    if (!menuList.querySelector('.side-logo-item')) {
      const logoItem = document.createElement('li');
      logoItem.className = 'side-logo-item lg:hidden';

      logoItem.innerHTML =
        '<img src="https://cdn.files.salla.network/homepage/1298238405/83cb9edf-75c6-4ea0-96d3-ebcbca14c6d5-original.webp" alt="logo">';

      menuList.insertBefore(logoItem, menuList.firstChild);
    }

    if (!menuList.querySelector('.side-home-link')) {
      const homeItem = document.createElement('li');
      homeItem.className = 'side-home-link lg:hidden text-sm font-bold';

      homeItem.innerHTML =
        '<a href="https://salla.sa/jamiladvanced" aria-label="الصفحة الرئيسية">الصفحة الرئيسية</a>';

      const logoItem = menuList.querySelector('.side-logo-item');
      logoItem.insertAdjacentElement('afterend', homeItem);
    }
  }

  document.addEventListener('DOMContentLoaded', addSideLogoAndHome);
  window.addEventListener('load', addSideLogoAndHome);
  setTimeout(addSideLogoAndHome, 1000);
  setTimeout(addSideLogoAndHome, 2500);
})();