/* Add custom JS code below */ 
/**
 * NUO × Selia — small storefront enhancements
 * Paste this file as-is into Salla > Store Design > Customize theme > JavaScript.
 * Do not wrap it in <script> tags.
 *
 * This script does not send, store, or track customer data.
 */

(() => {
  "use strict";

  const doc = document;
  const root = doc.documentElement;

  const SETTINGS = Object.freeze({
    bundleKeywords: ["البكج", "الدورتين", "باقة الدورتين", "bundle"],
    revealSelectors: [
      ".s-block__title",
      ".section-title",
      "salla-product-card",
      ".s-product-card-entry",
      ".product-entry",
      ".testimonial-item",
      ".feature-item",
      "salla-accordion",
      ".faq-item",
    ].join(","),
    trustItems: [
      {
        icon: "01",
        title: "تعلّم على جوالك",
        text: "شرح عملي وخطوات قابلة للتطبيق",
      },
      { icon: "02", title: "دخول فوري", text: "ابدأ مباشرة بعد إتمام الطلب" },
      {
        icon: "03",
        title: "خبرة من السوق",
        text: "محتوى مبني على 9 سنوات ممارسة",
      },
    ],
  });

  const q = (selector, scope = doc) => scope.querySelector(selector);
  const qa = (selector, scope = doc) => [...scope.querySelectorAll(selector)];

  function normalizedText(value = "") {
    return value.replace(/\s+/g, " ").trim().toLowerCase();
  }

  function cleanText(value = "") {
    return value.replace(/\s+/g, " ").trim();
  }

  function isHomePage() {
    const path = window.location.pathname.replace(/\/+$/, "") || "/";
    return path === "/" || /^\/(ar|en)$/i.test(path);
  }

  function isProductPage() {
    const path = window.location.pathname;
    return (
      /\/(products?|p)\//i.test(path) ||
      Boolean(q("salla-add-product-button, .product-form .add-to-cart"))
    );
  }

  function setPageClasses() {
    root.classList.add("nuo-js");
    if (!doc.body) return;

    doc.body.classList.add("nuo-ready");
    doc.body.classList.toggle("nuo-home", isHomePage());
    doc.body.classList.toggle("nuo-product-page", isProductPage());
  }

  function findProductCards() {
    const selectors = [
      "salla-product-card",
      ".s-product-card-entry",
      ".product-entry",
      ".product-card",
      "[data-product-id]",
    ].join(",");

    return qa(selectors).filter((card, index, cards) => {
      return (
        cards.findIndex(
          (candidate) => candidate === card || candidate.contains(card),
        ) === index
      );
    });
  }

  function markBundleCard() {
    findProductCards().forEach((card) => {
      if (card.classList.contains("nuo-bundle-card")) return;

      const titleNode = q(
        ".s-product-card-content-title, .product-entry__title, .product-card__title, h3, h4",
        card,
      );
      const title = normalizedText(
        titleNode?.textContent || card.textContent || "",
      );
      const isBundle = SETTINGS.bundleKeywords.some((keyword) =>
        title.includes(keyword),
      );

      if (!isBundle) return;

      card.classList.add("nuo-bundle-card");
      if (!q(".nuo-bundle-badge", card)) {
        const badge = doc.createElement("span");
        badge.className = "nuo-bundle-badge";
        badge.textContent = "الأوفر";
        badge.setAttribute("aria-label", "الخيار الأوفر");
        card.prepend(badge);
      }
    });
  }

  function findHeroBlock() {
    const hero = q(
      [
        ".s-block--photos-slider",
        ".s-block--hero",
        ".main-slider",
        ".home-slider",
        ".hero-slider",
      ].join(","),
    );

    if (!hero) return null;
    return hero.closest("section") || hero;
  }

  function createTrustStrip() {
    if (!isHomePage() || q(".nuo-trust-strip")) return;

    const anchor = findHeroBlock() || q("main > section, main > div");
    if (!anchor?.parentNode) return;

    const section = doc.createElement("section");
    section.className = "nuo-trust-strip";
    section.setAttribute("aria-label", "مميزات دورات NUO");

    const inner = doc.createElement("div");
    inner.className = "nuo-trust-strip__inner";

    SETTINGS.trustItems.forEach((item) => {
      const block = doc.createElement("div");
      block.className = "nuo-trust-strip__item";

      const icon = doc.createElement("span");
      icon.className = "nuo-trust-strip__icon";
      icon.setAttribute("aria-hidden", "true");
      icon.textContent = item.icon;

      const copy = doc.createElement("span");
      const title = doc.createElement("strong");
      const description = doc.createElement("span");
      title.textContent = item.title;
      description.textContent = item.text;
      copy.append(title, description);

      block.append(icon, copy);
      inner.append(block);
    });

    section.append(inner);
    anchor.insertAdjacentElement("afterend", section);
  }

  const observedForReveal = new WeakSet();
  let revealObserver;

  function setupRevealMotion() {
    const reduceMotion = window.matchMedia(
      "(prefers-reduced-motion: reduce)",
    ).matches;

    if (!revealObserver && !reduceMotion && "IntersectionObserver" in window) {
      revealObserver = new IntersectionObserver(
        (entries) => {
          entries.forEach((entry) => {
            if (!entry.isIntersecting) return;
            entry.target.classList.add("nuo-visible");
            revealObserver.unobserve(entry.target);
          });
        },
        {
          rootMargin: "0px 0px -8% 0px",
          threshold: 0.08,
        },
      );
    }

    qa(SETTINGS.revealSelectors).forEach((element) => {
      if (observedForReveal.has(element)) return;
      observedForReveal.add(element);
      element.classList.add("nuo-reveal");

      if (reduceMotion || !revealObserver) {
        element.classList.add("nuo-visible");
      } else {
        revealObserver.observe(element);
      }
    });
  }

  function visibleElement(elements) {
    return elements.find((element) => {
      const style = window.getComputedStyle(element);
      return (
        style.display !== "none" &&
        style.visibility !== "hidden" &&
        element.getClientRects().length > 0
      );
    });
  }

  function findOriginalAddButton() {
    const candidates = qa(
      [
        "salla-add-product-button button",
        ".product-form .add-to-cart",
        '.product-form button[type="submit"]',
        "button.add-to-cart",
        "[data-add-to-cart]",
      ].join(","),
    );

    return visibleElement(candidates);
  }

  function getProductTitle() {
    return cleanText(
      q(".product-title, .product-details h1, main h1")?.textContent ||
        "ابدأ دورتك الآن",
    );
  }

  function getProductPrice() {
    const node = q(
      [
        ".product-price",
        ".total-price",
        ".price-wrapper",
        '[data-testid="product-price"]',
      ].join(","),
    );
    return (node?.textContent || "").replace(/\s+/g, " ").trim();
  }

  function syncMobileCtaState(ctaButton, originalButton) {
    const disabled = Boolean(
      originalButton?.disabled ||
        originalButton?.getAttribute("aria-disabled") === "true" ||
        originalButton?.classList.contains("is-disabled"),
    );

    ctaButton.disabled = disabled;
    ctaButton.setAttribute("aria-disabled", String(disabled));
  }

  function createMobileProductCta() {
    if (!isProductPage() || q(".nuo-mobile-cta")) return;

    const originalButton = findOriginalAddButton();
    if (!originalButton) return;

    const bar = doc.createElement("div");
    bar.className = "nuo-mobile-cta";
    bar.setAttribute("role", "region");
    bar.setAttribute("aria-label", "شراء الدورة");

    const meta = doc.createElement("div");
    meta.className = "nuo-mobile-cta__meta";

    const title = doc.createElement("strong");
    title.textContent = getProductTitle();

    const price = doc.createElement("span");
    price.textContent = getProductPrice() || "ابدأ الآن";

    const button = doc.createElement("button");
    button.type = "button";
    button.className = "nuo-mobile-cta__button";
    button.textContent = "اشترِ الآن";
    button.addEventListener("click", () => {
      const currentButton = findOriginalAddButton();
      if (!currentButton) return;
      currentButton.scrollIntoView({ behavior: "smooth", block: "center" });
      window.setTimeout(() => currentButton.click(), 280);
    });

    meta.append(title, price);
    bar.append(meta, button);
    doc.body.append(bar);

    syncMobileCtaState(button, originalButton);
    window.setInterval(() => {
      const currentButton = findOriginalAddButton();
      if (currentButton) syncMobileCtaState(button, currentButton);
    }, 1500);
  }

  function enhance() {
    setPageClasses();
    markBundleCard();
    createTrustStrip();
    setupRevealMotion();
    createMobileProductCta();
  }

  let mutationTimer;

  function watchDynamicContent() {
    if (!doc.body || !("MutationObserver" in window)) return;

    const observer = new MutationObserver(() => {
      window.clearTimeout(mutationTimer);
      mutationTimer = window.setTimeout(enhance, 180);
    });

    observer.observe(doc.body, { childList: true, subtree: true });
  }

  function start() {
    enhance();
    watchDynamicContent();
  }

  if (doc.readyState === "loading") {
    doc.addEventListener("DOMContentLoaded", start, { once: true });
  } else {
    start();
  }
})();