/* ========================================================= */
/* NEXUM CONTROL — SCRIPT SAFE VERSION                        */
/* Menüpanel, Popup, Counter, FAQ, Fortschrittsanimation       */
/* ========================================================= */

var modal = document.querySelector("[data-interest-modal]");
var modalCard = document.querySelector(".modal-card");
var openButtons = document.querySelectorAll("[data-open-interest]");
var closeButtons = document.querySelectorAll("[data-close-interest]");
var interestClickButton = document.querySelector("[data-interest-click]");
var counterValues = document.querySelectorAll("[data-counter-value]");
var counterMessage = document.querySelector("[data-counter-message]");

function setCounterValue(value) {
  var finalValue = value !== null && value !== undefined ? value : 0;

  for (var i = 0; i < counterValues.length; i++) {
    counterValues[i].textContent = String(finalValue);
  }
}

/* ========================================================= */
/* MENÜ                                                       */
/* ========================================================= */

var menuToggle = document.querySelector("[data-menu-toggle]");
var menuPanel = document.querySelector("[data-menu-panel]");
var menuLinks = document.querySelectorAll("[data-menu-link]");

function closeMenu() {
  if (!menuPanel || !menuToggle) return;

  menuPanel.hidden = true;
  menuToggle.setAttribute("aria-expanded", "false");
}

function toggleMenu() {
  if (!menuPanel || !menuToggle) return;

  var isOpen = !menuPanel.hidden;
  menuPanel.hidden = isOpen;
  menuToggle.setAttribute("aria-expanded", String(!isOpen));
}

if (menuToggle) {
  menuToggle.addEventListener("click", function (event) {
    event.stopPropagation();
    toggleMenu();
  });
}

for (var ml = 0; ml < menuLinks.length; ml++) {
  menuLinks[ml].addEventListener("click", function () {
    closeMenu();
  });
}

document.addEventListener("click", function (event) {
  if (!menuPanel || menuPanel.hidden) return;
  if (menuPanel.contains(event.target)) return;
  if (menuToggle && menuToggle.contains(event.target)) return;

  closeMenu();
});

document.addEventListener("keydown", function (event) {
  if (event.key === "Escape") {
    closeMenu();

    if (modal && !modal.hidden) {
      closeInterestModal();
    }
  }
});

/* ========================================================= */
/* POPUP                                                      */
/* ========================================================= */

function openInterestModal() {
  if (!modal) return;

  modal.hidden = false;
  loadCounter();
}

function closeInterestModal() {
  if (!modal) return;

  modal.hidden = true;
}

for (var ob = 0; ob < openButtons.length; ob++) {
  openButtons[ob].addEventListener("click", function (event) {
    event.preventDefault();
    closeMenu();
    openInterestModal();
  });
}

for (var cb = 0; cb < closeButtons.length; cb++) {
  closeButtons[cb].addEventListener("click", function (event) {
    event.preventDefault();
    event.stopPropagation();
    closeInterestModal();
  });
}

if (modalCard) {
  modalCard.addEventListener("click", function (event) {
    event.stopPropagation();
  });
}

if (modal) {
  modal.addEventListener("click", function () {
    closeInterestModal();
  });
}

/* ========================================================= */
/* COUNTER                                                    */
/* ========================================================= */

function loadCounter() {
  if (!counterValues.length) return;

  fetch("backend/counter.php", {
    method: "GET",
    cache: "no-store"
  })
    .then(function (response) {
      return response.json();
    })
    .then(function (data) {
      setCounterValue(data.count);

      if (counterMessage) {
        counterMessage.textContent = "Der aktuelle Zähler wurde geladen.";
      }
    })
    .catch(function () {
      setCounterValue(0);

      if (counterMessage) {
        counterMessage.textContent = "Der Zähler konnte nicht geladen werden.";
      }
    });
}

function registerInterest() {
  if (!counterValues.length) return;

  fetch("backend/counter.php", {
    method: "POST",
    cache: "no-store"
  })
    .then(function (response) {
      return response.json();
    })
    .then(function (data) {
      setCounterValue(data.count);

      if (counterMessage) {
        if (data.accepted) {
          counterMessage.textContent = "Danke. Dein Interesse wurde anonym gezählt.";
        } else {
          counterMessage.textContent = data.message || "Dieser Klick wurde nicht erneut gezählt.";
        }
      }
    })
    .catch(function () {
      if (counterMessage) {
        counterMessage.textContent = "Counter funktioniert nur auf dem Server.";
      }
    });
}

if (interestClickButton) {
  interestClickButton.addEventListener("click", function (event) {
    event.preventDefault();
    registerInterest();
  });
}

/* ========================================================= */
/* FAQ                                                        */
/* ========================================================= */

var faqItems = document.querySelectorAll(".faq-item");

for (var fi = 0; fi < faqItems.length; fi++) {
  (function (item) {
    var button = item.querySelector(".faq-question");
    if (!button) return;

    var symbol = button.querySelector("strong");

    button.addEventListener("click", function () {
      var isOpen = item.classList.contains("open");

      item.classList.toggle("open", !isOpen);

      if (symbol) {
        symbol.textContent = isOpen ? "+" : "−";
      }
    });
  })(faqItems[fi]);
}

/* ========================================================= */
/* FORTSCHRITTSBALKEN                                        */
/* ========================================================= */

var progressItems = document.querySelectorAll(".progress-item");

function animateProgressItem(item) {
  var percent = item.getAttribute("data-progress") || "0";
  var fill = item.querySelector(".progress-fill");

  if (fill) {
    fill.style.width = percent + "%";
  }
}

if ("IntersectionObserver" in window) {
  var observer = new IntersectionObserver(function (entries) {
    for (var i = 0; i < entries.length; i++) {
      if (!entries[i].isIntersecting) continue;

      animateProgressItem(entries[i].target);
      observer.unobserve(entries[i].target);
    }
  }, { threshold: 0.35 });

  for (var pi = 0; pi < progressItems.length; pi++) {
    observer.observe(progressItems[pi]);
  }
} else {
  for (var pj = 0; pj < progressItems.length; pj++) {
    animateProgressItem(progressItems[pj]);
  }
}

/* ========================================================= */
/* START                                                      */
/* ========================================================= */

loadCounter();