(function () {
  function initializePerfectBottomNav() {
    // --- تحميل Font Awesome ---
    if (!document.querySelector("link[href*='font-awesome']")) {
      const fa = document.createElement('link');
      fa.rel = 'stylesheet';
      fa.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css';
      document.head.appendChild(fa);
    }

    // --- إنشاء الشريط السفلي ---
    if (!document.getElementById("perfect-bottom-nav")) {
      const nav = document.createElement("div");
      nav.id = "perfect-bottom-nav";
      nav.style.cssText = `
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        display: flex;
        justify-content: space-around;
        background: white;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        padding: 10px 0;
        border-top: 1px solid #eee;
        height: auto;
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      `;
      nav.innerHTML = `
        <a href="/" style="display: flex; flex-direction: column; align-items: center; font-size: 12px; color: #333; text-decoration: none; padding: 8px;">
          <i class="fas fa-home"></i>
          <span>الرئيسية</span>
        </a>
        <button id="perfect-categories-btn" style="border: none; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; font-size: 12px; color: #333; padding: 8px;">
          <i class="fas fa-bars"></i>
          <span>التصنيفات</span>
        </button>
        <button id="perfect-login-btn" style="border: none; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; font-size: 12px; color: #333; padding: 8px;">
          <i class="fas fa-user"></i>
          <span>تسجيل الدخول</span>
        </button>
        <button id="perfect-cart-btn" style="border: none; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; font-size: 12px; color: #333; padding: 8px;">
          <i class="fas fa-shopping-bag"></i>
          <span>السلة</span>
        </button>
      `;
      document.body.appendChild(nav);
    }

    const nav = document.getElementById("perfect-bottom-nav");
    if (!nav) return;

    // --- ربط الأزرار ---
    const categoriesBtn = document.getElementById("perfect-categories-btn");
    const loginBtn = document.getElementById("perfect-login-btn");
    const cartBtn = document.getElementById("perfect-cart-btn");

    if (categoriesBtn) {
      categoriesBtn.addEventListener("click", function() {
        const originalMenuLink = document.querySelector("a.mburger[href='#mobile-menu']");
        if (originalMenuLink) {
          originalMenuLink.click();
        }
      });
    }

    if (cartBtn) {
      cartBtn.addEventListener("click", function() {
        try {
          salla.cart.open();
        } catch (e) {
          window.location.href = "/cart";
        }
      });
    }

    if (loginBtn) {
      loginBtn.addEventListener("click", function() {
        try {
          salla.event.dispatch("login::open");
          nav.style.display = "none";
        } catch (e) {
          const originalLoginBtn = document.querySelector("a.user-icon[href*=\"/login\"]");
          if (originalLoginBtn) {
            originalLoginBtn.click();
            nav.style.display = "none";
          }
        }
      });
    }

    // ===================================================
    // ✅ الحل: مراقبة نافذة التسجيل باستخدام الكلاس الصحيح
    // ===================================================
    let isLoginPopupVisible = false;

    function checkLoginPopup() {
      const loginModal = document.querySelector('.s-modal.s-modal-container:not(.s-hidden)');
      
      if (loginModal) {
        // النافذة مرئية → إخفاء الشريط
        if (!isLoginPopupVisible) {
          nav.style.display = 'none';
          isLoginPopupVisible = true;
        }
      } else {
        // النافذة غير مرئية → إظهار الشريط
        if (isLoginPopupVisible) {
          nav.style.display = 'flex';
          isLoginPopupVisible = false;
        }
      }
    }

    // --- تحقق كل 200ms ---
    setInterval(checkLoginPopup, 200);

    // --- احتياطي: عودة الشريط عند العودة ---
    window.addEventListener('popstate', () => {
      if (nav.style.display === 'none') {
        nav.style.display = 'flex';
        isLoginPopupVisible = false;
      }
    });
  }

  // --- الانتظار حتى جاهزية سلة ---
  const navInterval = setInterval(function() {
    if (window.salla && salla.event && salla.cart) {
      clearInterval(navInterval);
      initializePerfectBottomNav();
    }
  }, 100);
})();