/* Add custom Js styles below */ 
(function () {
  // prevent duplicate injection
  if (document.getElementById("mobile-bottom-nav")) return;

  function createBottomNav() {
    // Create container
    var nav = document.createElement("div");
    nav.id = "mobile-bottom-nav";

    nav.innerHTML = `
      <a href="/" class="nav-home">
        <i class="sicon-home"></i>
        <span>الرئيسية</span>
      </a>

      <a href="/wishlist" class="nav-wishlist">
        <i class="sicon-heart"></i>
        <span>المفضلة</span>
      </a>

      <a href="/cart" class="cart-item nav-cart">
        <i class="sicon-cart"></i>
        <span>السلة</span>
        <em class="cart-badge">0</em>
      </a>

      <a href="#" class="nav-account">
        <i class="sicon-user"></i>
        <span>حسابي</span>
      </a>
    `;

    document.body.appendChild(nav);

    // Account button: open login modal if available
    var accountBtn = nav.querySelector(".nav-account");
    accountBtn.addEventListener("click", function (e) {
      e.preventDefault();
      if (window.salla && salla.event && typeof salla.event.dispatch === "function") {
        salla.event.dispatch("login::open");
      } else {
        // fallback (rare)
        window.location.href = "/login";
      }
    });

    // Active state (simple)
    try {
      var path = window.location.pathname || "/";
      if (path === "/" || path === "") nav.querySelector(".nav-home")?.classList.add("active");
      if (path.includes("wishlist")) nav.querySelector(".nav-wishlist")?.classList.add("active");
      if (path.includes("cart")) nav.querySelector(".nav-cart")?.classList.add("active");
      if (path.includes("profile") || path.includes("account")) nav.querySelector(".nav-account")?.classList.add("active");
    } catch (err) {}

    // Cart badge from Salla (if available)
    var badge = nav.querySelector(".cart-badge");
    function updateBadge(count) {
      if (!badge) return;
      if (count && count > 0) {
        badge.textContent = count;
        badge.style.display = "inline-flex";
      } else {
        badge.style.display = "none";
      }
    }

    // Try to read cart count
    if (window.Salla && typeof Salla.onReady === "function") {
      Salla.onReady(function () {
        if (window.salla && salla.cart && typeof salla.cart.get === "function") {
          salla.cart.get().then(function (cart) {
            updateBadge(cart && cart.count ? cart.count : 0);
          }).catch(function(){});
        }
      });
    }
  }

  // Run after DOM is ready
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", createBottomNav);
  } else {
    createBottomNav();
  }
})();