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 customActivitySection = document.getElementById("customActivitySection");
  const customActivityInput = document.getElementById("customActivityInput");

  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 = [];

  function isCustomActivity(act) {
    return act && (act.name === "Etwas eigenes" || act.name === "Sonstiges" || act.type === "custom");
  }

  fetch("/api/settings", { cache: "no-store" })
    .then((response) => response.json())
    .then((settings) => {
      const allActivities = settings.activities || [];

      const customAct = allActivities.find((a) => a.name === "Etwas eigenes" || a.name === "Sonstiges") || {
        name: "Etwas eigenes",
        icon: "✏️",
        type: "custom",
      };

      let otherActivities = allActivities.filter((a) => a.name !== "Etwas eigenes" && a.name !== "Sonstiges");
      if (selectedDateType === "short") {
        otherActivities = otherActivities.filter((a) => a.type === "short");
      }

      // "Etwas eigenes" erscheint IMMER an letzter Stelle
      availableActivities = [...otherActivities, customAct];

      // Vorherige Auswahl wiederherstellen, falls vorhanden
      try {
        const stored = JSON.parse(localStorage.getItem("selectedActivities") || "[]");
        if (stored && stored.length > 0) {
          const isStoredCustom = stored.some(
            (a) => a.type === "custom" || (a.name && (a.name.startsWith("Etwas eigenes") || a.name.startsWith("Sonstiges")))
          );
          if (isStoredCustom) {
            const storedCustom = stored.find(
              (a) => a.type === "custom" || (a.name && (a.name.startsWith("Etwas eigenes") || a.name.startsWith("Sonstiges")))
            );
            selectedList = [customAct];
            if (storedCustom) {
              const desc =
                storedCustom.customDescription ||
                (storedCustom.name.includes(":")
                  ? storedCustom.name.split(":").slice(1).join(":").trim()
                  : "");
              if (customActivityInput) {
                customActivityInput.value = desc;
              }
            }
          } else {
            selectedList = stored.filter((s) =>
              availableActivities.some((a) => a.name === s.name)
            );
          }
        }
      } catch (e) {}

      renderActivities();
    })
    .catch(() => {
      activityGrid.textContent = "Aktivitäten konnten nicht geladen werden.";
    });

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

    if (hasCustomSelected) {
      if (customActivitySection) {
        customActivitySection.classList.remove("hidden");
      }
    } else {
      if (customActivitySection) {
        customActivitySection.classList.add("hidden");
      }
    }

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

      const isCustom = isCustomActivity(activity);
      const isSelected = isCustom
        ? hasCustomSelected
        : selectedList.some((a) => a.name === activity.name);

      if (isSelected) {
        card.classList.add("selected");
      }

      const isLongDisabled = !isCustom && 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 isCustom = isCustomActivity(activity);
    const hasCustomSelected = selectedList.some(isCustomActivity);

    if (isCustom) {
      if (hasCustomSelected) {
        selectedList = [];
      } else {
        // Custom-Aktivität darf mit keiner anderen Aktivität kombiniert werden!
        selectedList = [activity];
        setTimeout(() => {
          if (customActivityInput) {
            customActivityInput.focus();
          }
        }, 50);
      }
    } else {
      if (hasCustomSelected) {
        selectedList = [];
      }

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

      if (activity.type === "long") {
        if (isAlreadySelected) {
          selectedList = [];
        } else {
          selectedList = [activity];
        }
      } else {
        if (isAlreadySelected) {
          selectedList = selectedList.filter((a) => a.name !== activity.name);
        } else if (selectedDateType === "short") {
          selectedList = [activity];
        } else {
          if (selectedList.some((a) => a.type === "long")) {
            selectedList = [activity];
          } else if (selectedList.length >= 2) {
            selectedList = [selectedList[0], activity];
          } else {
            selectedList.push(activity);
          }
        }
      }
    }

    renderActivities();
  }

  if (customActivityInput) {
    customActivityInput.addEventListener("input", () => {
      updateNoticeAndContinue();
    });
  }

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

    if (hasCustomSelected) {
      timeNotice.classList.add("hidden");
      const desc = customActivityInput ? customActivityInput.value.trim() : "";
      continueBtn.disabled = desc.length === 0;
    } else {
      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;
    }

    const hasCustomSelected = selectedList.some(isCustomActivity);

    if (hasCustomSelected) {
      const customDesc = customActivityInput ? customActivityInput.value.trim() : "";
      if (!customDesc) {
        return;
      }

      const customAct = selectedList.find(isCustomActivity);

      const savedCustomAct = {
        name: customDesc,
        icon: customAct.icon || "✏️",
        type: "custom",
        customDescription: customDesc,
      };

      localStorage.setItem("selectedActivities", JSON.stringify([savedCustomAct]));
      localStorage.setItem("selectedActivity", customDesc);
    } else {
      localStorage.setItem("selectedActivities", JSON.stringify(selectedList));
      localStorage.setItem("selectedActivity", selectedList.map((a) => a.name).join(" + "));
    }

    window.location.href = "name.html";
  });
})();