const showShippingDetails = () => {
  var lang = document.querySelector("html").lang || "ar";
  const descDiv = document.createElement("div");
  descDiv.classList.add("description-div");
  const brandsList = document.createElement("div");

  /* === الشحن والتوصيل === */
  let shipping = document.createElement("div");
  shipping.innerHTML = `
        <button class="accordion desc-accordion flex gap-1">
        <img width="24" src="https://cdn.salla.sa/form-builder/JEfjpULCtVKVfnFuicM3r0AcKuSM3ujuNsuDCRSn.png" alt="">
        ${lang === "en" ? "Shipping & Delivery" : "الشحن والتوصيل"}</button>
        <p class="accordion-content">
        ${
          lang === "ar"
            ? "لمعرفة سياسة الشحن والتوصيل, "
            : "To know the shipping and delivery policy, "
        }
        <a href="https://byamore.com/${lang}/%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-2133745210" target="_blank">
        ${lang === "ar" ? "اضغط هنا" : "Click here"} </a>
        </p>
    `;
  /* === التبديل والإسترجاع === */
  let exchange = document.createElement("div");
  exchange.innerHTML = `
        <button  class="accordion desc-accordion flex gap-1">
        <img width="24" src="https://cdn.salla.sa/form-builder/eG33JYIPTgOoy6bdNIpP2NCkgiHcueAfdbzuWIHw.png" alt="">
        ${lang === "en" ? "Exchanges & Returns" : "التبديل والإسترجاع"}</button>
        <p class="accordion-content">
        ${
          lang === "ar"
            ? "لمعرفة سياسة التبديل والإسترجاع, "
            : "To know the exchange and returns policy, "
        }
        <a href="https://byamore.com/${lang}/%D8%B3%D9%8A%D8%A7%D8%B3%D8%A9-%D8%A7%D9%84%D8%A5%D8%B3%D8%AA%D8%A8%D8%AF%D8%A7%D9%84-%D9%88%D8%A7%D9%84%D8%A5%D8%B3%D8%AA%D8%B1%D8%AC%D8%A7%D8%B9/page-27259199" target="_blank">
        ${lang === "ar" ? "اضغط هنا" : "Click here"} </a>
        </p>
    `;

  brandsList.appendChild(shipping);
  brandsList.appendChild(exchange);
  descDiv.appendChild(brandsList);

  // show in productForm
  const productForm = document.querySelector(".product-single .product-form");
  if (productForm) {
    productForm.after(descDiv);
  }
};
// accordion toggle Listener
document.addEventListener("click", (e) => {
  if (
    e.target.classList.contains("desc-accordion") ||
    e.target.classList.contains("links-accordion")
  ) {
    e.target.classList.toggle("active");
    const panel = e.target.nextElementSibling;
    panel.style.display = panel.style.display === "block" ? "none" : "block";
  }
});

document.addEventListener("DOMContentLoaded", () => {
  const product = document.querySelector(".product-single");
  if (product) {
    showShippingDetails();
  }
});

const updateFooter = () => {
  const contacts = document.querySelector(
    "div:has(> .enhanced_rounded_contacts)"
  );
  const social = document.querySelector(
    ".store-footer div:has(> .rounded_contacts)"
  );
  if (contacts && social) {
    contacts.appendChild(social);
  }
};

// راوبط مهمة على شكل توقل
const showFooterLinkAsAccordion = () => {
  var lang = document.documentElement.lang || "ar";

  const linksItems = document.querySelector(".footer-list.store-links-items");
  if (linksItems) {
    const linksDiv = document.createElement("div");
    linksDiv.classList.add("links-toggle");
    var button = document.createElement("button");
    button.classList.add("accordion", "links-accordion");
    button.textContent = lang === "ar" ? "روابط مهمة" : "Important Links";
    var p = document.createElement("p");
    p.classList.add("accordion-content");
    const linksItems2 = linksItems.cloneNode(true);
    p.appendChild(linksItems2);

    linksDiv.appendChild(button);
    linksDiv.appendChild(p);

    // show in store
    const storeFooter = document.querySelector(
      ".store-footer .grid > div:has(.footer-list.store-links-items)"
    );
    if (storeFooter) {
      storeFooter.appendChild(linksDiv);
    }
  }
};
document.addEventListener("DOMContentLoaded", () => {
  updateFooter();
  showFooterLinkAsAccordion();
});

// ### update Tabby & Tamara shapes
hideInstallmentWhenUpdated(1000);
updateTabbyAndTamaraStyles();
document.addEventListener("DOMContentLoaded", () => {
  hideInstallmentWhenUpdated(1000);
  setTimeout(() => {
    updateTabbyAndTamaraStyles();
  }, 1000);
  setTimeout(() => {
    updateTabbyAndTamaraStyles();
  }, 1000);
});
document.addEventListener("DOMContentLoaded", () => {
  setTimeout(() => {
    updateTabbyAndTamaraStyles();
  }, 400);
});
document.addEventListener("change", () => {
  hideInstallmentWhenUpdated(600);
  setTimeout(() => {
    updateTabbyAndTamaraStyles();
  }, 600);
  setTimeout(() => {
    updateTabbyAndTamaraStyles();
  }, 600);
});

function hideInstallmentWhenUpdated(time = 300) {
  const installment = document.querySelector("salla-installment.hydrated");
  if (installment) {
    installment.style.opacity = "0";
    setTimeout(() => {
      installment.style.opacity = "1";
    }, time);
  }
}
function updateTabbyAndTamaraStyles() {
  const tamaraWidget = document.querySelector("tamara-widget");
  if (tamaraWidget) {
    const tamaraShadowRoot = tamaraWidget.shadowRoot;
    if (tamaraShadowRoot) {
      const innerTamara = tamaraShadowRoot.querySelector(
        ".tamara-summary-widget__container"
      );
      if (innerTamara) {
        const tamaraStyle = document.createElement("style");
        tamaraStyle.textContent = `
          .tamara-summary-widget__container { 
            position: relative !important;
            display: inline-block !important;
            padding: 12px 6px !important;
            border-radius: 8px !important;
            font-size: 11px !important;
            border: 1px solid #de9681 !important;
            background-color: rgba(255, 255, 255, 0.45);
          }
          .tamara-summary-widget__container .tamara-badge {
            position: absolute;
            top: -14px !important;
            left: 13px;
            height: 22px;
            width: auto;
            max-height: 22px !important;
          }
          .tamara-summary-widget__container * {
            font-size: 12px;
          }
        `;
        innerTamara.after(tamaraStyle);
      }
    }
  }

  const tabbyWidget = document.querySelector(".styles__containerPortal--c9f84");
  if (tabbyWidget) {
    const tabbyShadowRoot = tabbyWidget.shadowRoot;
    if (tabbyShadowRoot) {
      const innerTabby = tabbyShadowRoot.querySelector(
        ".styles__tabbyPromoSnippet--ed9ac"
      );
      if (innerTabby) {
        const tabbyStyle = document.createElement("style");
        tabbyStyle.textContent = `
          .styles__tabbyPromoSnippet--ed9ac {
            position: relative !important;
            display: inline-block !important;
            padding: 12px 10px !important;
            border: none !important;
            font-size: 13px !important;
            border: 1px solid #3bffc4 !important;
            background-color: rgba(255, 255, 255, 0.45);
          }
          .styles__tabbyPromoSnippet--ed9ac .styles__containerPortal--c9f84 {
            position: absolute;
            top: -15px !important;
            left: 13px;
            max-height: 22px !important;
          }
          .styles__tabbyPromoSnippet--ed9ac * {
            font-size: 13px;
          }
          .styles__tabbyPromoSnippetContentRtl--bcbcb {
            margin: 0 !important;
          }
        `;
        innerTabby.after(tabbyStyle);
      }
    }
  }
}