/* =====================================================================
   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]));
  }

  /* Erstes sichtbares Zeichen des Namens fürs Avatar-Medaillon. [...name]
     statt name[0], damit auch Namen, die mit einem Emoji beginnen, nicht
     mitten in einem Zeichen abgeschnitten werden (ein Emoji besteht in
     JavaScript aus mehreren "Zeichen" — name[0] lieferte sonst nur ein
     kaputtes Halb-Zeichen). */
  function erstesZeichen(name) {
    const zeichen = [...String(name || "").trim()];
    return zeichen.length ? zeichen[0].toUpperCase() : "?";
  }

  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-avatar" aria-hidden="true">${escapeHtml(erstesZeichen(t.name))}</span>
                <span class="stimmen-karte-namen">
                  <span class="stimmen-karte-name">${escapeHtml(t.name)}</span>
                  ${t.tiktokUsername ? `<span class="stimmen-karte-tiktok">@${escapeHtml(t.tiktokUsername)}</span>` : ""}
                </span>
              </div>
            </div>`
          )
          .join("");
        root.hidden = false;
      })
      .catch(() => {
        /* Abschnitt bleibt einfach unsichtbar -- kein Fehler nötig. */
      });
  }
  ladeEchteStimmen();
})();