/* =========================================================================
   إشعار الخصم - متجر سلة
   يعرض:
   1) بانر خصم أعلى المتجر (في الصفحة الرئيسية وكل الصفحات)
   2) شارة خصم على كل كارت منتج
   طريقة التركيب: انسخ هذا الكود بالكامل وضعه في:
   لوحة تحكم سلة > المتجر الإلكتروني > الإعدادات المتقدمة > أكواد إضافية
   (Custom Code / Scripts) داخل وسم <script> في نهاية الصفحة
   ========================================================================= */

(function () {
  "use strict";

  /* ---------------------- إعدادات يمكنك تعديلها بسهولة ---------------------- */
  const CONFIG = {
    discountPercent: "10%",
    discountCode: "AL10",
    bannerText: "لمسة مائية وعروض استثنائية - استمتع بخصم",
    bannerCtaText: "انسخ الكود",
    badgeText: "خصم", // النص الذي يظهر داخل شارة المنتج
    showBannerOncePerSession: false, // true = يظهر مرة واحدة لكل جلسة تصفح
    bannerBg: "#0f172a",
    accentColor: "#22d3ee",
    codeBg: "#facc15",
  };

  /* ------------------------------ الأنماط (CSS) ------------------------------ */
  const style = document.createElement("style");
  style.textContent = `
    .sd-banner {
      direction: rtl;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      background: ${CONFIG.bannerBg};
      color: #fff;
      padding: 10px 16px;
      font-family: inherit;
      font-size: 15px;
      position: relative;
      z-index: 999;
      animation: sd-slide-down .4s ease;
    }
    @keyframes sd-slide-down {
      from { transform: translateY(-100%); opacity: 0; }
      to   { transform: translateY(0); opacity: 1; }
    }
    .sd-banner b { color: ${CONFIG.accentColor}; }
    .sd-banner .sd-code {
      background: ${CONFIG.codeBg};
      color: #111;
      font-weight: 700;
      padding: 2px 10px;
      border-radius: 6px;
      cursor: pointer;
      user-select: all;
      letter-spacing: 1px;
    }
    .sd-banner .sd-close {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      cursor: pointer;
      background: transparent;
      border: none;
      color: #fff;
      font-size: 18px;
      line-height: 1;
      opacity: .7;
    }
    .sd-banner .sd-close:hover { opacity: 1; }

    .sd-badge {
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 5;
      background: ${CONFIG.codeBg};
      color: #111;
      font-size: 12px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 4px;
      box-shadow: 0 2px 6px rgba(0,0,0,.15);
      direction: rtl;
      pointer-events: none;
    }
    .sd-badge span.sd-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #16a34a;
      display: inline-block;
      animation: sd-pulse 1.4s infinite;
    }
    @keyframes sd-pulse {
      0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.6); }
      70%  { box-shadow: 0 0 0 6px rgba(22,163,74,0); }
      100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
    }
  `;
  document.head.appendChild(style);

  /* ------------------------------ بانر أعلى المتجر ------------------------------ */
  function initBanner() {
    const dismissed = CONFIG.showBannerOncePerSession
      ? sessionStorage.getItem("sd_banner_dismissed")
      : null;
    if (dismissed) return;
    if (document.querySelector(".sd-banner")) return;

    const banner = document.createElement("div");
    banner.className = "sd-banner";
    banner.innerHTML = `
      <button class="sd-close" title="إغلاق">&times;</button>
      <span>${CONFIG.bannerText} <b>${CONFIG.discountPercent}</b> على جميع المنتجات عند استخدام كود</span>
      <span class="sd-code" title="اضغط للنسخ">${CONFIG.discountCode}</span>
    `;

    document.body.insertBefore(banner, document.body.firstChild);

    banner.querySelector(".sd-close").addEventListener("click", function () {
      banner.remove();
      if (CONFIG.showBannerOncePerSession) {
        sessionStorage.setItem("sd_banner_dismissed", "1");
      }
    });

    const codeEl = banner.querySelector(".sd-code");
    codeEl.addEventListener("click", function () {
      navigator.clipboard?.writeText(CONFIG.discountCode).then(() => {
        const original = codeEl.textContent;
        codeEl.textContent = "تم النسخ ✓";
        setTimeout(() => (codeEl.textContent = original), 1200);
      });
    });
  }

  /* ------------------------------ شارة على كروت المنتجات ------------------------------ */
  // نجرب أكثر من محدد (selector) لأن قوالب سلة تختلف في تسمية كروت المنتج
  const PRODUCT_CARD_SELECTORS = [
    "salla-product-card",
    ".s-product-card-entry",
    ".s-block-product-card",
    ".card-product-item",
    ".product-item",
    "[class*='product-card']",
  ];

  function getProductCards() {
    const found = new Set();
    PRODUCT_CARD_SELECTORS.forEach((sel) => {
      document.querySelectorAll(sel).forEach((el) => found.add(el));
    });
    const all = Array.from(found);
    // مهم جدًا: بعض المحددات (selectors) بتلاقي أكتر من عنصر متداخل في نفس
    // الكارت (مثلاً غلاف الصورة + غلاف السعر + الكارت نفسه)، فلو مانفيناش
    // النتيجة هنا هتتكرر الشارة كذا مرة فوق بعض زي اللي حصل في السكرين شوت.
    // الحل: نستبعد أي عنصر يكون "جوا" عنصر تاني موجود في نفس القايمة،
    // ونسيب بس العنصر الأب (الكارت الحقيقي).
    return all.filter(
      (el) => !all.some((other) => other !== el && other.contains(el))
    );
  }

  function addBadgeToCard(card) {
    if (card.dataset.sdBadged) return; // تجنب التكرار
    // نحتاج أن يكون الكارت position relative عشان الشارة تظهر بشكل صحيح
    const computedPosition = window.getComputedStyle(card).position;
    if (computedPosition === "static") {
      card.style.position = "relative";
    }

    const badge = document.createElement("div");
    badge.className = "sd-badge";
    badge.innerHTML = `<span class="sd-dot"></span> ${CONFIG.badgeText} ${CONFIG.discountPercent}`;
    card.appendChild(badge);

    card.dataset.sdBadged = "1";
  }

  function initProductBadges() {
    getProductCards().forEach(addBadgeToCard);
  }

  // مراقبة أي منتجات تُضاف لاحقًا (تحميل كسول / تمرير لانهائي / فلاتر AJAX)
  function watchForNewProducts() {
    let debounceTimer = null;
    const observer = new MutationObserver(() => {
      clearTimeout(debounceTimer);
      debounceTimer = setTimeout(initProductBadges, 150);
    });
    observer.observe(document.body, { childList: true, subtree: true });
  }

  /* ------------------------------ التشغيل ------------------------------ */
  function start() {
    initBanner();
    initProductBadges();
    watchForNewProducts();
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", start);
  } else {
    start();
  }
})();