/* ======================================================
   dienste.js – ZENTRALE Logik für Dienstplan & Termine
   ------------------------------------------------------
   Liest dienstplan/dienstplan.csv (einzige Datenquelle) und
   befüllt – je nachdem, was auf der Seite vorhanden ist:

     #nextDienst       nächster Dienst (Kurzform, Startseite)
     #nextEvent        nächste Veranstaltung (Kurzform)
     #dienstplan-liste komplette Terminliste (Dienstplan-Seite)

   Das Markup nutzt design-neutrale Klassen (termin-*),
   die von der jeweiligen Varianten-CSS gestylt werden.
   ====================================================== */

(function () {
  const csvPfad = (window.FFW_BASE || "") + "dienstplan/dienstplan.csv";

  fetch(csvPfad)
    .then(res => res.text())
    .then(text => {
      const today = new Date().setHours(0, 0, 0, 0);

      const termine = text.trim().split(/\r?\n/).slice(1).map(line => {
        const [d, tag, zeit, ort, art, beschr] = line.split(line.includes(";") ? ";" : ",");
        const [y, m, day] = d.trim().split("-");
        return {
          datum: new Date(y, m - 1, day),
          tag: tag.trim(),
          zeit: zeit.trim(),
          ort: ort.trim(),
          art: art.trim(),
          beschr: beschr.trim()
        };
      })
      .filter(t => t.datum >= today)
      .sort((a, b) => a.datum - b.datum);

      const istFest = t => /fest|feier/i.test(t.art);
      const datumFormatiert = t => t.datum.toLocaleDateString("de-DE");

      /* ---------- Kurzform: nächster Dienst / Veranstaltung ---------- */
      const renderKurz = (id, filterFn) => {
        const el = document.getElementById(id);
        if (!el) return;
        const t = termine.find(filterFn);

        el.innerHTML = t
          ? `<p class="termin-datum">${t.tag}., ${datumFormatiert(t)} | ${t.zeit} Uhr</p>
             <p class="termin-art">${t.art}</p>
             <p class="termin-beschr">${t.beschr} (${t.ort})</p>`
          : `<p class="termin-beschr">Keine weiteren Termine geplant</p>`;
      };

      renderKurz("nextDienst", t => !istFest(t));
      renderKurz("nextEvent", istFest);

      /* ---------- Komplette Terminliste (Dienstplan-Seite) ---------- */
      const liste = document.getElementById("dienstplan-liste");
      if (liste) {
        if (!termine.length) {
          liste.innerHTML = `<p class="termin-beschr">Aktuell sind keine Termine geplant.</p>`;
          return;
        }

        const naechster = termine[0];
        const zeilen = termine.map(t => `
          <tr class="${t === naechster ? "termin-is-next" : ""}">
            <td data-label="Datum">${t.tag}., ${datumFormatiert(t)}</td>
            <td data-label="Uhrzeit">${t.zeit} Uhr</td>
            <td data-label="Art"><span class="termin-badge termin-badge-${t.art.toLowerCase()}">${t.art}</span></td>
            <td data-label="Beschreibung">${t.beschr}</td>
            <td data-label="Ort">${t.ort}</td>
          </tr>`).join("");

        liste.innerHTML = `
          <table class="termin-tabelle">
            <thead>
              <tr><th>Datum</th><th>Uhrzeit</th><th>Art</th><th>Beschreibung</th><th>Ort</th></tr>
            </thead>
            <tbody>${zeilen}</tbody>
          </table>`;
      }
    })
    .catch(err => console.error("Fehler beim Laden des Dienstplans:", err));
})();