/* 1. السكريبت الموحد لإدارة الروابط والأقسام الفرعية */
salla.onReady()
  .then(() => salla.lang.onLoaded())
  .then(async () => {
    
    // --- الجزء الأول: إدارة الروابط اليدوية (السلايدر والبلوكات) ---
    // نستخدم دالة للتأكد من وجود العنصر قبل إضافة الضغطة عليه لتجنب الأخطاء
    const addSafeLink = (selector, url) => {
      const element = document.querySelector(selector);
      if (element) {
        element.style.cursor = 'pointer'; // تغيير شكل الماوس ليدل على أنه رابط
        element.addEventListener('click', () => {
          window.location.href = url;
        });
      }
    };

    // تطبيق الروابط
    addSafeLink("#default-home-slider-0", "https://salla.sa/taelila/%D8%B3%D8%AD%D8%A8%D8%AAT-%D8%AC%D8%A7%D9%87%D8%B2%D9%87/c2010074681");
    addSafeLink("#info-blocks-2-1 .info-block:nth-child(1)", "https://example.com");


    // --- الجزء الثاني: عرض شبكة الأقسام الفرعية (التصميم الجديد) ---
    try {
      const response = await salla.api.component.getMenus();
      const { data } = response;

      // استخراج معرف القسم من الرابط
      const urlParams = new URLSearchParams(window.location.search);
      let categoryId = urlParams.get('filters[category_id]');

      if (!categoryId) {
        const pathMatches = window.location.pathname.match(/c(\d+)/);
        if (pathMatches) categoryId = pathMatches[1];
      }

      if (!categoryId) return;

      // البحث عن القسم الحالي للحصول على أبنائه
      const findCategoryById = (categories, id) => {
        for (const cat of categories) {
          if (cat.id == id) return cat;
          if (cat.children && cat.children.length > 0) {
            const found = findCategoryById(cat.children, id);
            if (found) return found;
          }
        }
        return null;
      };

      const foundCategory = findCategoryById(data, categoryId);

      // إذا وجدنا القسم وله أقسام فرعية، نقوم برسم الشبكة
      if (foundCategory && foundCategory.children && foundCategory.children.length > 0) {
        const targetChildren = foundCategory.children;

        const container = document.createElement('div');
        container.className = 'subcategories-grid-wrapper';
        
        container.innerHTML = `
          <div class="sub-categories-grid">
            ${targetChildren.map(sub => `
              <a href="${sub.url || '#'}" class="sub-category-card">
                <div class="img-box">
                  <img src="${sub.image || 'https://salla.sa/assets/images/placeholder.png'}" alt="${sub.name || sub.title}">
                </div>
                <span class="cat-title">${sub.name || sub.title}</span>
              </a>
            `).join('')}
          </div>
        `;

        // إضافة التنسيقات (CSS)
        const style = document.createElement('style');
        style.textContent = `
          .subcategories-grid-wrapper {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 15px;
          }
          .sub-categories-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
          }
          .sub-category-card {
            text-decoration: none !important;
            text-align: center;
            display: block;
            transition: transform 0.2s ease;
          }
          .sub-category-card:hover { transform: translateY(-5px); }
          .sub-category-card .img-box {
            background: #000;
            aspect-ratio: 1 / 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 10px;
            overflow: hidden;
          }
          .sub-category-card .img-box img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
          }
          .sub-category-card .cat-title {
            color: #333;
            font-size: 14px;
            font-weight: bold;
            display: block;
          }
          @media (max-width: 768px) {
            .sub-categories-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
            .sub-category-card .cat-title { font-size: 12px; }
          }
        `;
        document.head.appendChild(style);

        // مكان الحقن في الصفحة
        const targetElement = document.querySelector('.page-header') || document.querySelector('.breadcrumb-container');
        if (targetElement) {
          targetElement.insertAdjacentElement('afterend', container);
        } else {
          document.body.prepend(container);
        }
      }
    } catch (error) {
      console.error('Error in Salla Custom Script:', error);
    }
  });