/* Add custom Js code below */ 

// Function to create the product banner
function createProductBanner() {
    const productBanner = document.createElement('section');
    productBanner.className = 'product-custom-banner';
    productBanner.innerHTML = `
      <div class="banner banner--fixed overflow-hidden py-4">
        <img width="100%" class="pro-image" src="https://cdn.salla.sa/form-builder/cNBmCLVuWLncfHFQIEek3pdOZnn01QA5Wv3I8FqB.jpg" alt="Product Banner" onload="this.style.opacity=1" style="opacity:0; transition: opacity 0.3s;">
      </div>`;
    return productBanner;
}

// Main function to show product page details
function showProductPageDetails() {
    const productPage = document.querySelector('.product-single .full-description');
    
    // Check if already initialized to prevent duplicates
    if (!productPage || document.querySelector('.description-div.product-accordion')) {
        return;
    }
    
    const faqsDiv = document.createElement("div");
    faqsDiv.className = "description-div product-accordion";
    const brandsList = document.createElement("div");
  
    // الشحن والتوصيل
    const delivery = document.createElement("div");
    delivery.innerHTML = '<button class="accordion">الشحن والتوصيل</button><p class="accordion-content">للإطلاع على تفاصيل الشحن و التوصيل اضغط: هنا<a href="https://taled.net/%D8%B3%D9%8A%D8%A7%D8%B3%D8%A9-%D8%A7%D9%84%D8%B4%D8%AD%D9%86-%D9%88%D8%A7%D9%84%D8%AA%D9%88%D8%B5%D9%8A%D9%84/page-1130948455" target="_blank"> صفحة الشحن والتوصيل </a><br></p>';
    
    // الاسترجاع والاستبدال
    const packet = document.createElement("div");
    packet.innerHTML = '<button class="accordion">الاستبدال والاسترجاع</button><p class="accordion-content">للاطلاع على تفاصيل الاستبدال و الاسترجاع اضغط: هنا <a href="https://taled.net/%D8%B3%D9%8A%D8%A7%D8%B3%D8%A9-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%A8%D8%AF%D8%A7%D9%84-%D9%88%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%B1%D8%AC%D8%A7%D8%B9/page-490014304" target="_blank"> صفحة الاستبدال والاسترجاع </a><br></p>';
    
    // Product metadata - move original into accordion (no clone) to avoid duplication
    const productDetails = document.querySelector('salla-metadata .s-metadata-box');
    if (productDetails) {
        const des = document.createElement("div");
        const desTitle = document.createElement("button");
        desTitle.className = "accordion";
        desTitle.innerText = "مواصفات المنتج";
        const desText = document.createElement("p");
        desText.className = "accordion-content";
        
        // Move the original element into accordion so it appears only once
        desText.appendChild(productDetails);
        
        des.appendChild(desTitle);
        des.appendChild(desText);
        brandsList.appendChild(des);
        
        // Banner inside accordion, right after "مواصفات المنتج"
        brandsList.appendChild(createProductBanner());
        
        // Remove original wrapper so specs don't show again under salla-installment
        const metadataWrapper = document.querySelector('salla-metadata');
        if (metadataWrapper && !metadataWrapper.querySelector('.s-metadata-box')) {
            metadataWrapper.remove();
        }
    }
    
    brandsList.appendChild(packet);
    brandsList.appendChild(delivery);
    faqsDiv.appendChild(brandsList);
    
    productPage.after(faqsDiv);
    
    // Initialize accordion after adding
    initAccordion();
}

// Function to initialize accordion
function initAccordion() {
    const accordionBtns = document.querySelectorAll(".accordion");
    accordionBtns.forEach((accordion) => {
        // Remove old listeners by cloning
        const newAccordion = accordion.cloneNode(true);
        accordion.parentNode.replaceChild(newAccordion, accordion);
        
        newAccordion.onclick = function() {
            this.classList.toggle("is-open");
            let content = this.nextElementSibling;
            if (content.style.maxHeight) {
                content.style.maxHeight = null;
            } else {
                content.style.maxHeight = 'max-content';
            }
        };
    });
}

// Function to wait for element with retry
function waitForElement(selector, callback, maxAttempts = 20, interval = 200) {
    let attempts = 0;
    
    const checkElement = setInterval(() => {
        attempts++;
        const element = document.querySelector(selector);
        
        if (element) {
            clearInterval(checkElement);
            callback();
        } else if (attempts >= maxAttempts) {
            clearInterval(checkElement);
        }
    }, interval);
}

// Initialize function
function initProductPage() {
    // Remove old content first
    const oldAccordion = document.querySelector('.description-div.product-accordion');
    const oldBanner = document.querySelector('.product-custom-banner');
    if (oldAccordion) oldAccordion.remove();
    if (oldBanner) oldBanner.remove();
    
    // Wait for product page to be ready
    waitForElement('.product-single .full-description', () => {
        showProductPageDetails();
    });
}

// Initialize on page load
document.addEventListener("DOMContentLoaded", () => {
    initProductPage();
});

// Listen for Salla page navigation events
if (typeof salla !== 'undefined') {
    salla.event.page.onLoaded(() => {
        initProductPage();
    });
}

// Fallback: Check every 2 seconds if on product page
setInterval(() => {
    const product = document.querySelector('.product-single');
    const hasAccordion = document.querySelector('.description-div.product-accordion');
    
    if (product && !hasAccordion) {
        initProductPage();
    }
}, 2000);