/* =====================================================================
   stimmen.js — NUR für stimmen.html (20.08.2026, Nutzer-Wunsch: "eine
   richtig geile kachel ... wo die leute mit namen und tiktok namen mir
   eine nachricht schreiben können die ich in die verwaltung kriege").
   Formular schickt eine Einreichung ab (landet als Entwurf, siehe
   server-internal/routes/testimonials.js), zweiter Teil lädt die bereits
   freigegebenen Stimmen und zeigt sie an — bleibt komplett unsichtbar,
   solange keine einzige freigegeben wurde. ===================================================================== */
(function () {
  const API_BASE_URL = "https://postfach.dogfather-universe.com";

  const formular = document.getElementById("stimmen-formular");
  if (formular) {
    const erfolgEl = document.getElementById("stimmen-erfolg");
    const fehlerEl = document.getElementById("stimmen-fehler");
    formular.addEventListener("submit", async (e) => {
      e.preventDefault();
      erfolgEl.classList.remove("zeige");
      fehlerEl.classList.remove("zeige");

      const name = document.getElementById("st-name").value.trim();
      const tiktokUsername = document.getElementById("st-tiktok").value.trim();
      const nachricht = document.getElementById("st-nachricht").value.trim();

      const absendenBtn = formular.querySelector("button[type=submit]");
      absendenBtn.disabled = true;
      try {
        const res = await fetch(`${API_BASE_URL}/testimonials/submit`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ name, tiktokUsername, nachricht }),
        });
        const data = await res.json();
        if (!data.ok) {
          fehlerEl.textContent = data.error || "Einreichen hat leider nicht geklappt. Bitte versuch es nochmal.";
          fehlerEl.classList.add("zeige");
          return;
        }
        formular.hidden = true;
        erfolgEl.classList.add("zeige");
      } catch {
        fehlerEl.textContent = "Verbindung zum Server fehlgeschlagen. Bitte versuch es nochmal.";
        fehlerEl.classList.add("zeige");
      } finally {
        absendenBtn.disabled = false;
      }
    });
  }

  function escapeHtml(text) {
    return String(text ?? "").replace(/[&<>"']/g, (z) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[z]));
  }

  function ladeEchteStimmen() {
    fetch(`${API_BASE_URL}/testimonials`, { cache: "no-store" })
      .then((res) => res.json())
      .then((data) => {
        const liste = data && data.ok ? data.testimonials : [];
        if (!liste.length) return; // Abschnitt bleibt hidden, kein Platzhalter mehr
        const root = document.getElementById("stimmen-echte-root");
        const grid = document.getElementById("stimmen-echte-grid");
        grid.innerHTML = liste
          .map(
            (t) => `<div class="stimmen-karte">
              <p class="stimmen-karte-text">${escapeHtml(t.nachricht)}</p>
              <div class="stimmen-karte-fuss">
                <span class="stimmen-karte-name">${escapeHtml(t.name)}</span>
                ${t.tiktokUsername ? `<span class="stimmen-karte-tiktok">@${escapeHtml(t.tiktokUsername)}</span>` : ""}
              </div>
            </div>`
          )
          .join("");
        root.hidden = false;
      })
      .catch(() => {
        /* Abschnitt bleibt einfach unsichtbar -- kein Fehler nötig. */
      });
  }
  ladeEchteStimmen();
})();