(function() {
  function waitForSubcategories(categoryId, callback, maxAttempts = 20, interval = 500) {
    let attempts = 0;
    const check = () => {
      const mainItem = document.getElementById(categoryId);
      if (!mainItem) {
        if (attempts < maxAttempts) {
          attempts++;
          setTimeout(check, interval);
        }
        return;
      }
      
      const subMenu = mainItem.querySelector('ul');
      if (subMenu) {
        const subItems = subMenu.querySelectorAll('li[id]');
        const validSubs = Array.from(subItems).filter(item => {
          const link = item.querySelector('a');
          return link && !link.getAttribute('href')?.includes('عرض-الكل');
        });
        
        if (validSubs.length > 0) {
          callback(validSubs);
          return;
        }
      }
      
      if (attempts < maxAttempts) {
        attempts++;
        setTimeout(check, interval);
      }
    };
    check();
  }

  function getCurrentCategoryId() {
    const pathParts = window.location.pathname.split('/');
    for (let part of pathParts) {
      if (part.startsWith('c') && part.length > 1) {
        return part.substring(1);
      }
    }
    return null;
  }

  function extractSubcategoryData(subItems) {
    const subcategories = [];
    subItems.forEach(item => {
      const link = item.querySelector('a');
      if (!link) return;
      
      let imageUrl = null;
      const img = item.querySelector('img');
      if (img) {
        imageUrl = img.src;
      } else {
        const text = link.textContent.trim();
        const otherImg = document.querySelector(`img[alt*="${text}"]`);
        if (otherImg) imageUrl = otherImg.src;
      }
      
      subcategories.push({
        id: item.id,
        name: link.textContent.trim(),
        url: link.href,
        image: imageUrl
      });
    });
    return subcategories;
  }

  function getDefaultImageSVG(name) {
    return 'data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'150\' height=\'150\' viewBox=\'0 0 150 150\'%3E%3Crect width=\'150\' height=\'150\' fill=\'%23f0f0f0\'/%3E%3Ctext x=\'50%25\' y=\'50%25\' dominant-baseline=\'middle\' text-anchor=\'middle\' font-family=\'Arial\' font-size=\'14\' fill=\'%23999\'%3E' + encodeURIComponent(name.charAt(0)) + '%3C/text%3E%3C/svg%3E';
  }


  function displaySubcategories(subcategories) {
    if (!subcategories || subcategories.length === 0) return;
    if (document.querySelector('.custom-subcategories-wrapper')) return;

    let html = `
      <div class="custom-subcategories-wrapper">
        <h3 class="subcategories-title">تسوق حسب التصنيف</h3>
        <div class="subcategories-grid">
    `;

    subcategories.forEach(sub => {
      const imageHtml = sub.image 
        ? `<img src="${sub.image}" alt="${sub.name}" loading="lazy" onerror="this.src='${getDefaultImageSVG(sub.name)}'">`
        : `<img src="${getDefaultImageSVG(sub.name)}" alt="${sub.name}" loading="lazy">`;
      
      html += `
        <a href="${sub.url}" class="subcategory-card">
          <div class="subcategory-image">
            ${imageHtml}
          </div>
          <h4 class="subcategory-name">${sub.name}</h4>
        </a>
      `;
    });

    html += '</div></div>';


    const breadcrumb = document.querySelector('nav.breadcrumbs');
    if (breadcrumb) {
      breadcrumb.insertAdjacentHTML('afterend', html);
    } else {
      const mainContent = document.querySelector('main .container, .products-area');
      if (mainContent) mainContent.insertAdjacentHTML('afterbegin', html);
    }
  }


  function init() {
    const categoryId = getCurrentCategoryId();
    if (!categoryId) return;


    waitForSubcategories(categoryId, function(subItems) {
      const subcategories = extractSubcategoryData(subItems);
      displaySubcategories(subcategories);
    }, 25, 400); 
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init, { once: true });
  } else {
    init();
  }
  
  window.addEventListener('load', function() {
    if (!document.querySelector('.custom-subcategories-wrapper')) {
      init();
    }
  }, { once: true });
})();