// Namensauswahl: lädt Namen aus appsettings.json, Kartenauswahl + Abschluss

(function () {
  const nameList = document.getElementById("nameList");
  const summary = document.getElementById("summary");
  const continueBtn = document.getElementById("continueBtn");

  const selectedActivity = localStorage.getItem("selectedActivity");
  const selectedDate = localStorage.getItem("selectedDate");

  // Ohne Aktivität und Datum ergibt diese Seite keinen Sinn.
  if (!selectedActivity) {
    window.location.href = "activity.html";
    return;
  }
  if (!selectedDate) {
    window.location.href = "datetime.html";
    return;
  }

  const dateLabel = new Date(`${selectedDate}T00:00:00`).toLocaleDateString("de-DE", {
    weekday: "long",
    day: "numeric",
    month: "long",
    year: "numeric",
  });
  summary.textContent = `${selectedActivity} am ${dateLabel} – verrate mir, wer du bist.`;

  let selectedName = null;

  fetch("appsettings.json")
    .then((response) => response.json())
    .then((settings) => renderNames(settings.names || []))
    .catch(() => {
      nameList.textContent = "Namen konnten nicht geladen werden.";
    });

  function renderNames(names) {
    const options = names.length > 0 ? names : ["Du weißt, wer ich bin"];

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

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

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

      card.append(icon, label);
      card.addEventListener("click", () => {
        nameList.querySelectorAll(".name-card").forEach((c) => c.classList.remove("selected"));
        card.classList.add("selected");
        selectedName = name;
        continueBtn.disabled = false;
      });

      nameList.appendChild(card);
    });
  }

  continueBtn.addEventListener("click", () => {
    if (!selectedName) {
      return;
    }
    // Ablage für die spätere Anbindung an Datenbank/Storage
    localStorage.setItem("selectedName", selectedName);
    window.location.href = "checkout.html";
  });
})();