date-wizard/public/activity.js

// Aktivitäts-Auswahl: lädt Aktivitäten aus appsettings.json, Kartenauswahl + Weiter-Button

(function () {
  const activityGrid = document.getElementById("activityGrid");
  const dateSummary = document.getElementById("dateSummary");
  const timeNotice = document.getElementById("timeNotice");
  const continueBtn = document.getElementById("continueBtn");

  const selectedDate = localStorage.getItem("selectedDate");
  const selectedDateType = localStorage.getItem("selectedDateType") || "long";

  if (!selectedDate) {
    window.location.href = "datetime.html";
    return;
  }

  const dateObj = new Date(`${selectedDate}T00:00:00`);
  const formattedDate = dateObj.toLocaleDateString("de-DE", {
    weekday: "long",
    day: "numeric",
    month: "long",
    year: "numeric",
  });
  dateSummary.textContent = `Für unser Date am ${formattedDate}.`;

  let availableActivities = [];
  let selectedList = [];

  fetch("appsettings.json")
    .then((response) => response.json())
    .then((settings) => {
      const allActivities = settings.activities || [];
      if (selectedDateType === "short") {
        availableActivities = allActivities.filter((a) => a.type === "short");
      } else {
        availableActivities = allActivities;
      }
      renderActivities();
    })
    .catch(() => {
      activityGrid.textContent = "Aktivitäten konnten nicht geladen werden.";
    });

  function renderActivities() {
    activityGrid.innerHTML = "";
    const hasShortSelected = selectedList.some((a) => a.type === "short");

    availableActivities.forEach((activity) => {
      const card = document.createElement("button");
      card.type = "button";
      card.className = "activity-card";
      card.dataset.activity = activity.name;

      const isSelected = selectedList.some((a) => a.name === activity.name);
      if (isSelected) {
        card.classList.add("selected");
      }

      const isLongDisabled = hasShortSelected && activity.type === "long";
      if (isLongDisabled) {
        card.classList.add("is-disabled");
        card.disabled = true;
      }

      const icon = document.createElement("span");
      icon.className = "icon";
      icon.setAttribute("aria-hidden", "true");
      icon.textContent = activity.icon;

      const label = document.createElement("span");
      label.className = "label";
      label.textContent = activity.name;

      card.append(icon, label);

      card.addEventListener("click", () => {
        handleCardClick(activity);
      });

      activityGrid.appendChild(card);
    });

    updateNoticeAndContinue();
  }

  function handleCardClick(activity) {
    const isAlreadySelected = selectedList.some((a) => a.name === activity.name);

    if (activity.type === "long") {
      if (isAlreadySelected) {
        selectedList = [];
      } else {
        selectedList = [activity];
      }
    } else {
      // Short activity
      if (isAlreadySelected) {
        selectedList = selectedList.filter((a) => a.name !== activity.name);
      } else if (selectedDateType === "short") {
        // An kurzen Tagen ist nur maximal eine kurze Aktivität erlaubt
        selectedList = [activity];
      } else {
        // An langen Tagen:
        // Falls vorher eine lange Aktivität gewählt war, ersetzen
        if (selectedList.some((a) => a.type === "long")) {
          selectedList = [activity];
        } else if (selectedList.length >= 2) {
          // Maximal 2 kurze Aktivitäten, die zweite ersetzen
          selectedList = [selectedList[0], activity];
        } else {
          selectedList.push(activity);
        }
      }
    }

    renderActivities();
  }

  function updateNoticeAndContinue() {
    const shortCount = selectedList.filter((a) => a.type === "short").length;
    const hasLong = selectedList.some((a) => a.type === "long");

    if (selectedDateType === "long" && shortCount === 1 && !hasLong) {
      timeNotice.textContent =
        "💡 An diesem Tag haben wir reichlich Zeit! Wenn du möchtest, kannst du noch eine zweite kurze Aktivität auswählen.";
      timeNotice.classList.remove("hidden");
    } else if (selectedDateType === "long" && shortCount === 2) {
      timeNotice.textContent = "🎉 Perfekt! Du hast 2 kurze Aktivitäten für unseren Tag ausgewählt.";
      timeNotice.classList.remove("hidden");
    } else {
      timeNotice.classList.add("hidden");
    }

    continueBtn.disabled = selectedList.length === 0;
  }

  continueBtn.addEventListener("click", () => {
    if (selectedList.length === 0) {
      return;
    }
    localStorage.setItem("selectedActivities", JSON.stringify(selectedList));
    localStorage.setItem("selectedActivity", selectedList.map((a) => a.name).join(" + "));
    window.location.href = "name.html";
  });
})();