// ==================== Main ====================
// ========== Custom WhatsApp Icon ==========
waIcon = document.createElement('div');
waIcon.className = 'float-wa';
waIcon.innerHTML = `
  <a href='https://${location.host}/whatsapp/send' class="sicon-whatsapp2" target="_blank">
    <span>يا هلا👋 عندك سؤال؟ تواصل معنا</span>
  </a>
`;
const waIconBtn = document.createElement('button');
waIconBtn.className = 'hide-msg-btn sicon-cancel';
waIconBtn.onclick = () => waIcon.classList.add('hidden-msg');
waIcon.append(waIconBtn);
const prodOptCont = document.querySelector('.page-container.product-has-options .main-content');
prodOptCont ? prodOptCont.append(waIcon) : document.body.append(waIcon);

// ========== New Customer PopUp ==========
const popupKey = 'newCusPopupClosedAt';
const hoursToWait = 24;
const now = Date.now();
const lastClosedAt = localStorage.getItem(popupKey);
const shouldShowPopup = !lastClosedAt || (now - Number(lastClosedAt)) > hoursToWait * 60 * 60 * 1000;
if (shouldShowPopup) {
  const newCusPopUp = document.createElement('div');
  newCusPopUp.className = 'new-cus-popup';
  newCusPopUp.onclick = () => {
    newCusPopUp.classList.remove('show');
    localStorage.setItem(popupKey, Date.now().toString());
  };
  const nCPCont = document.createElement('div');
  newCusPopUp.append(nCPCont);
  const nCPLink = document.createElement('a');
  nCPLink.href = `https://api.whatsapp.com/send/?phone=966541655174&text=أرغب بكود خصم`;
  const nCPImg = document.createElement('img');
  nCPImg.src = "https://i.ibb.co/HLrqZZFZ/image.jpg";
  nCPImg.alt = "Whatsapp";
  nCPLink.append(nCPImg);
  const nCPIcon = document.createElement('i');
  nCPIcon.className = 'sicon-cancel';
  nCPCont.append(nCPLink, nCPIcon);
  document.body.append(newCusPopUp);
  setTimeout(() => {
    newCusPopUp.classList.add('show');
  }, 30000);
}

// ==================== Product Page ====================
if (document.body.classList.contains('product-single')) {
  const desc = document.querySelector('.article--main');

  // ========== Sort Sections ==========
  const sortCont = document.createElement('div');
  sortCont.className = 'sort-cont';
  const elementOrder = ['.main-link', '.product__description + div:has(> a)', 'div:has(>salla-installment)'];
  elementOrder.forEach(classSelc => {
    const e = document.querySelector(classSelc);
    if (e) sortCont.append(e);
  });
  desc ? document.getElementById('product-details-tab').after(sortCont) : document.getElementById('single-product-form').before(sortCont);

  if (desc) {
    // ========== Read More ==========
    if (desc.clientHeight > 320) {
      document.querySelector('.product__description').style.display = 'none';
      desc.classList.add('read-more-close');
      const readMoreWrap = document.createElement('div');
      readMoreWrap.className = 'read-more-wrap';
      const readMoreBtn = document.createElement('button');
      readMoreBtn.className = 'read-more-btn';
      readMoreBtn.textContent = 'قراءة المزيد';
      readMoreWrap.append(readMoreBtn);
      desc.after(readMoreWrap);
      readMoreBtn.onclick = function () {
        readMoreWrap.style.display = 'none';
        desc.classList.remove('read-more-close');
      }
    }
    // ========== Custom special Offer ==========
    const pElements = Array.from(desc.querySelectorAll("p"));
    const startIndex = pElements.findIndex(p => p.textContent.includes("بداية تعديل العرض الخاص"));
    if (startIndex !== -1) {
      let offerName = "";
      let offerTit = "";
      let relatedProductNames = [];

      for (let i = startIndex; i < pElements.length; i++) {
        const p = pElements[i];
        const text = p.textContent.trim();

        if (text.startsWith("العنوان:")) {
          offerName = text.replace("العنوان:", "").trim();
        } else if (text.startsWith("الوصف:")) {
          offerTit = text.replace("الوصف:", "").trim();
        } else if (text && text !== "بداية تعديل العرض الخاص") {
          relatedProductNames.push(text);
        }

        p.remove();
      }

      if (offerName && relatedProductNames.length > 0) {
        const parent = document.querySelector('.main-content');
        const sallaOffer = document.createElement('salla-offer');
        sallaOffer.className = 'hydrated';
        parent.append(sallaOffer);

        const sallaOfferWrapper = document.createElement('div');
        sallaOfferWrapper.className = 's-offer-wrapper';
        sallaOffer.append(sallaOfferWrapper);

        const sallaOfferBadge = document.createElement('p');
        sallaOfferBadge.className = 's-offer-corner-badge';
        sallaOfferBadge.textContent = offerName;
        sallaOfferWrapper.append(sallaOfferBadge);

        const sallaOfferSlider = document.createElement('salla-slider');
        sallaOfferSlider.id = 'offer-slider';
        sallaOfferSlider.className = 'cus s-slider-wrapper carousel-slider s-slider-horizontal';
        sallaOfferSlider.direction = 'rtl';

        if (offerTit) {
          sallaOfferSlider.blockTitle = offerTit;
        }

        sallaOfferWrapper.append(sallaOfferSlider);

        const checkInterval = setInterval(() => {
          const allRelatedProducts = [...document.querySelectorAll("#similar-slider .s-product-card-entry")];

          if (allRelatedProducts.length) {
            let offerSectionProducts = [];

            relatedProductNames.forEach(name => {
              allRelatedProducts.forEach(rp => {
                const titleEl = rp.querySelector('.s-product-card-content-title a');
                if (titleEl && titleEl.textContent.trim() === name) {
                  allRelatedProducts.splice(allRelatedProducts.indexOf(rp), 1);
                  offerSectionProducts.push(rp);
                }
              });
            });

            if (offerSectionProducts.length) {
              clearInterval(checkInterval);

              const swiperInterval = setInterval(() => {
                const offerSwiper = sallaOfferSlider.querySelector('.swiper-wrapper');

                if (offerSwiper) {
                  clearInterval(swiperInterval);

                  for (let i = 0; i < offerSectionProducts.length; i++) {
                    const slide = document.createElement('div');
                    slide.className = 's-offer-slide-one-fourth swiper-slide';
                    slide.role = 'group';
                    slide.ariaLabel = `${i + 1} / ${offerSectionProducts.length}`;
                    slide.append(offerSectionProducts[i]);
                    offerSwiper.append(slide);
                  }

                  document.querySelector('.s-products-slider-slider').update();
                }
              }, 100);
            }
          }
        }, 100);
      }
    }
  }
}