/*
  ================================================================
  CORE CARE — الجافا سكريبت المتكامل (نسخة معدلة)
  يجمع بين:
    1. CCX بانر سينمائي (القسم الأول)
    2. Scroll Story (القسم الثاني) — مع إصلاح الترقيم والصور
    3. Header helper (شريط التنقل)

  ضعه كاملاً في: تخصيص الثيم ← الأكواد المخصصة ← JavaScript
  لا تضف وسمَي <script>.
  ================================================================
*/

(function () {
  "use strict";

  // ============================================================
  // 1. HEADER HELPER (شريط التنقل)
  // ============================================================
  if (!window.__coreCareHeaderReady) {
    window.__coreCareHeaderReady = true;

    var headerScheduled = false;

    function updateHeaderState() {
      document.body.classList.toggle(
        "cc-header-scrolled",
        window.scrollY > 60
      );
      headerScheduled = false;
    }

    function requestHeaderUpdate() {
      if (headerScheduled) return;
      headerScheduled = true;
      window.requestAnimationFrame(updateHeaderState);
    }

    function initCoreCareHeader() {
      if (!document.body || !document.getElementById("mainnav")) return;
      updateHeaderState();
      window.addEventListener("scroll", requestHeaderUpdate, { passive: true });
      window.addEventListener("resize", requestHeaderUpdate, { passive: true });
    }

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

  // ============================================================
  // 2. CCX BANNER (القسم الأول - البانر السينمائي المثبت)
  // ============================================================
  (function () {
    "use strict";

    var observerStarted = false;

    function clamp(value, min, max) {
      return Math.min(max, Math.max(min, value));
    }

    function initCoreCareBanner() {
      var root = document.getElementById("ccx");
      if (!root || root.dataset.ccxReady === "true") return;

      var track = root.querySelector(".ccx__track");
      var stage = root.querySelector(".ccx__stage");
      if (!track || !stage) return;

      root.dataset.ccxReady = "true";

      var layers = Array.prototype.slice.call(stage.querySelectorAll(".ccx__layer"));
      var steps = Array.prototype.slice.call(stage.querySelectorAll(".ccx__steps li"));
      var buttons = Array.prototype.slice.call(stage.querySelectorAll(".ccx__btn"));
      var reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

      var sceneCount = 3;
      var lastScene = -1;
      var ticking = false;
      var viewportHeight = window.innerHeight;
      var trackLeft = 0;
      var trackWidth = 0;
      var stageInBody = false;

      function setScene(sceneNumber) {
        stage.setAttribute("data-scene", String(sceneNumber));

        layers.forEach(function (element) {
          element.classList.toggle(
            "is-on",
            Number(element.dataset.scene) === sceneNumber
          );
        });

        steps.forEach(function (element) {
          element.classList.toggle(
            "is-active",
            Number(element.dataset.i) === sceneNumber
          );
        });
      }

      function measure() {
        viewportHeight = window.innerHeight;
        var rect = track.getBoundingClientRect();
        trackLeft = rect.left;
        trackWidth = rect.width;
      }

      function restoreStage() {
        if (stageInBody && track.isConnected) {
          track.appendChild(stage);
          stageInBody = false;
        }
        stage.classList.remove("is-fixed", "is-bottom");
        stage.style.left = "";
        stage.style.width = "";
      }

      function paint() {
        ticking = false;

        if (!root.isConnected || !track.isConnected || !stage.isConnected) {
          window.removeEventListener("scroll", requestPaint);
          window.removeEventListener("resize", handleResize);
          return;
        }

        var rect = track.getBoundingClientRect();
        var travel = Math.max(1, rect.height - viewportHeight);
        var progress = clamp(-rect.top / travel, 0, 1);
        var position = rect.top > 0 ? "before" : rect.bottom > viewportHeight ? "pinned" : "after";

        root.style.setProperty("--p", progress.toFixed(4));
        stage.style.setProperty("--p", progress.toFixed(4));

        if (progress > 0.88) {
          stage.setAttribute("data-progress", "end");
        } else {
          stage.removeAttribute("data-progress");
        }

        if (position === "pinned") {
          if (!stageInBody) {
            document.body.appendChild(stage);
            stageInBody = true;
          }
          stage.classList.add("is-fixed");
          stage.classList.remove("is-bottom");
          stage.style.left = trackLeft + "px";
          stage.style.width = trackWidth + "px";
        } else {
          if (stageInBody) {
            track.appendChild(stage);
            stageInBody = false;
          }
          stage.classList.remove("is-fixed");
          stage.classList.toggle("is-bottom", position === "after");
          stage.style.left = "";
          stage.style.width = "";
        }

        var rawScene = Math.min(progress * sceneCount, sceneCount - 0.0001);
        var scene = Math.floor(rawScene);
        var sceneProgress = rawScene - scene;

        root.style.setProperty("--sp", sceneProgress.toFixed(4));
        stage.style.setProperty("--sp", sceneProgress.toFixed(4));

        var bar = document.getElementById("ccxBar");
        if (bar) {
          bar.style.width = (progress * 100) + '%';
        }

        if (scene !== lastScene) {
          lastScene = scene;
          setScene(scene);
        }
      }

      function requestPaint() {
        if (ticking) return;
        ticking = true;
        window.requestAnimationFrame(paint);
      }

      function handleResize() {
        measure();
        requestPaint();
      }

      buttons.forEach(function (button) {
        button.addEventListener(
          "pointerdown",
          function (event) {
            var bounds = button.getBoundingClientRect();
            var ripple = document.createElement("span");
            ripple.className = "ccx__rip";
            ripple.style.left = event.clientX - bounds.left + "px";
            ripple.style.top = event.clientY - bounds.top + "px";
            button.appendChild(ripple);
            ripple.addEventListener(
              "animationend",
              function () {
                ripple.remove();
              },
              { once: true }
            );
          },
          { passive: true }
        );
      });

      setScene(0);

      if (reducedMotion) {
        restoreStage();
        return;
      }

      measure();
      paint();

      window.addEventListener("scroll", requestPaint, { passive: true });
      window.addEventListener("resize", handleResize, { passive: true });
      window.addEventListener("load", handleResize, { once: true });
    }

    function startObserver() {
      if (observerStarted || !document.documentElement) return;
      observerStarted = true;

      if ("MutationObserver" in window) {
        new MutationObserver(function () {
          initCoreCareBanner();
        }).observe(document.documentElement, {
          childList: true,
          subtree: true
        });
      }
    }

    function bootCoreCareBanner() {
      initCoreCareBanner();
      startObserver();
    }

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

    document.addEventListener("salla::page.ready", initCoreCareBanner);
  })();

  // ============================================================
  // 3. SCROLL STORY (القسم الثاني - رحلة الأقسام) — معدل
  // ============================================================
  (function () {
    "use strict";

    var storyObserverStarted = false;

    // دالة clamp للمساعدة
    function clamp(value, min, max) {
      return Math.min(max, Math.max(min, value));
    }

    function initScrollStory() {
      var section = document.getElementById("corecare-scroll-story");
      if (!section || section.dataset.storyReady === "true") return;

      var stage = section.querySelector(".cc-story__stage");
      var chapters = Array.prototype.slice.call(section.querySelectorAll(".cc-story__chapter"));
      var navButtons = Array.prototype.slice.call(section.querySelectorAll(".cc-story__nav button"));
      var images = Array.prototype.slice.call(section.querySelectorAll(".cc-story__image"));
      var orbitLabel = section.querySelector(".cc-story__orbit");
      var counterStrong = section.querySelector(".cc-story__counter strong");
      var aurora = section.querySelector(".cc-story__aurora");
      var reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

      if (!stage || chapters.length === 0) return;

      section.dataset.storyReady = "true";

      var storyTicking = false;
      var viewportHeight = window.innerHeight;
      var totalChapters = chapters.length;
      var currentChapter = 0;

      // ===== دالة تحديث الفصل (مع إصلاح الترقيم والصور) =====
      function updateChapter(index) {
        // 1. تحديث الفصول (النصوص)
        chapters.forEach(function (el, i) {
          el.classList.toggle("is-active", i === index);
        });

        // 2. تحديث الأزرار الجانبية
        navButtons.forEach(function (btn, i) {
          btn.classList.toggle("is-active", i === index);
        });

        // 3. ===== إصلاح: تحديث الصور =====
        images.forEach(function (img, i) {
          img.classList.toggle("is-active", i === index);
        });

        // 4. ===== إصلاح: تحديث العداد =====
        // العدد الإجمالي للأقسام (05) يتم تحديده من HTML
        if (counterStrong) {
          // تحديث الرقم الحالي (01, 02, 03, 04, 05)
          counterStrong.textContent = String(index + 1).padStart(2, "0");
        }

        // 5. تحديث تسمية المدار
        var activeChapter = chapters[index];
        if (orbitLabel && activeChapter) {
          var label = activeChapter.dataset.label || "العناية";
          orbitLabel.textContent = label;
        }

        // 6. تحديث لون الأورورا
        if (aurora && activeChapter) {
          var tone = activeChapter.dataset.tone || "#d8c6b9";
          aurora.style.setProperty("--cc-tone", tone);
          section.style.setProperty("--cc-tone", tone);
        }

        currentChapter = index;
      }

      function paintStory() {
        storyTicking = false;

        if (!section.isConnected) {
          window.removeEventListener("scroll", requestStoryPaint);
          window.removeEventListener("resize", handleStoryResize);
          return;
        }

        var rect = section.getBoundingClientRect();
        var totalHeight = rect.height;

        // حساب التقدم داخل القسم
        var progress = 0;
        if (totalHeight > viewportHeight) {
          progress = clamp(-rect.top / (totalHeight - viewportHeight), 0, 1);
        }

        // تحديد الفصل بناءً على التقدم
        var chapterIndex = Math.floor(progress * totalChapters);
        if (chapterIndex >= totalChapters) chapterIndex = totalChapters - 1;

        // ===== إصلاح: تحديث الفصل عند تغير التمرير =====
        if (chapterIndex !== currentChapter) {
          updateChapter(chapterIndex);
        }

        // تحريك الأورورا مع التمرير
        if (aurora) {
          aurora.style.setProperty("--cc-progress", progress.toFixed(4));
        }

        storyTicking = false;
      }

      function requestStoryPaint() {
        if (storyTicking) return;
        storyTicking = true;
        window.requestAnimationFrame(paintStory);
      }

      function handleStoryResize() {
        viewportHeight = window.innerHeight;
        requestStoryPaint();
      }

      // ---- أحداث الأزرار (التنقل اليدوي) ----
      navButtons.forEach(function (btn) {
        btn.addEventListener("click", function () {
          var index = parseInt(this.dataset.step, 10);
          if (!isNaN(index) && index >= 0 && index < totalChapters) {
            updateChapter(index);
            // التمرير إلى بداية القسم
            section.scrollIntoView({ behavior: "smooth", block: "start" });
          }
        });
      });

      // ---- التشغيل الأولي ----
      if (reducedMotion) {
        updateChapter(0);
        return;
      }

      updateChapter(0);
      viewportHeight = window.innerHeight;
      paintStory();

      window.addEventListener("scroll", requestStoryPaint, { passive: true });
      window.addEventListener("resize", handleStoryResize, { passive: true });
      window.addEventListener("load", handleStoryResize, { once: true });
    }

    function startStoryObserver() {
      if (storyObserverStarted || !document.documentElement) return;
      storyObserverStarted = true;

      if ("MutationObserver" in window) {
        new MutationObserver(function () {
          initScrollStory();
        }).observe(document.documentElement, {
          childList: true,
          subtree: true
        });
      }
    }

    function bootScrollStory() {
      initScrollStory();
      startStoryObserver();
    }

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

    document.addEventListener("salla::page.ready", initScrollStory);
  })();

})();

// ================================================================
// إصلاح ظهور اللون الأبيض بين CCX ومكونات سلة
// ================================================================

(function() {
  "use strict";

  function fixWhiteGap() {
    var ccx = document.getElementById('ccx');
    if (!ccx) return;

    var nextElement = ccx.nextElementSibling;
    if (!nextElement) return;

    var isSallaComponent = nextElement.classList.contains('ccm-store-sections') ||
                          nextElement.querySelector('.ccm-store-sections') ||
                          nextElement.querySelector('[class*="component"]');

    if (isSallaComponent) {
      nextElement.style.position = 'relative';
      nextElement.style.zIndex = '10';
      nextElement.style.marginTop = '-2px';
      nextElement.style.background = '#f5f0eb';

      var innerContainer = nextElement.querySelector('.container, .salla-container');
      if (innerContainer) {
        innerContainer.style.background = 'transparent';
        innerContainer.style.paddingTop = '20px';
      }

      console.log('✅ تم إصلاح الفجوة بين CCX ومكونات سلة');
    }
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', fixWhiteGap, { once: true });
  } else {
    fixWhiteGap();
  }

  document.addEventListener('salla::page.ready', fixWhiteGap);
})();