/* =====================================================================
   Die kurze Erklärung auf jeder Seite (14.09.2026)

   Filipe: „ich will in jeder seite auch eine kleine detaillierte aber
   schnelle erklärung kurz und knapps noch zu jeder seite."

   ---------------------------------------------------------------------
   WARUM SIE OFFEN DASTEHT UND NICHT HINTER EINEM KLICK

   „Schnell" war seine Bedingung. Eine Erklärung, die man erst
   aufklappen muss, ist genau dann nicht da, wenn man sie braucht —
   nämlich beim ersten Mal, wenn man noch nicht weiß, dass es sie gibt.
   Drei kurze Zeilen kosten weniger Platz als ein Aufklapper kostet:
   Aufmerksamkeit.

   ---------------------------------------------------------------------
   WO SIE HINGEHÄNGT WIRD

   Nach der Kopfzeile, wenn es eine gibt — sonst als erstes Element im
   Inhalt. Fünf Seiten haben keine `.kopf-zeile` (Chat, Kalender,
   Start, Team, Teamlage); ohne den zweiten Fall hätten ausgerechnet
   die am häufigsten benutzten Seiten keine Erklärung bekommen, und
   zwar lautlos.

   ---------------------------------------------------------------------
   SIE BAUT NICHTS UM, WENN NICHTS DA IST

   Kein Text zur Seite, keine Antwort, nicht angemeldet: dann entsteht
   auch kein Kasten. Ein leerer Rahmen mit drei Überschriften wäre
   schlechter als gar keiner — er sieht aus wie ein Fehler.
   ===================================================================== */
(() => {
  const datei = (location.pathname.split('/').pop() || '').toLowerCase();
  if (!/^[a-z0-9-]+\.html$/.test(datei)) return;   // Anmeldeseiten u. ä.

  const el = (t, k, text) => {
    const n = document.createElement(t);
    if (k) n.className = k;
    if (text !== undefined) n.textContent = text;
    return n;
  };

  /** Eine Zeile: Schild links, Satz rechts. */
  function zeile(schild, satz) {
    const z = el('div', 'erkl__zeile');
    z.append(el('span', 'erkl__schild', schild));
    z.append(el('span', 'erkl__satz', satz));
    return z;
  }

  function zeichne(d) {
    const kasten = el('section', 'erkl');
    /* Ein Bereich mit Namen: Ein Vorleseprogramm sagt dadurch an, was
       das hier ist, statt drei Wortpaare vorzulesen. */
    kasten.setAttribute('aria-label', 'Kurze Erklärung zu dieser Seite');

    kasten.append(zeile('Wofür', d.wofuer));
    kasten.append(zeile('Du tust', d.tun));
    if (d.merke) {
      const z = zeile('Merke', d.merke);
      z.dataset.merke = 'ja';
      kasten.append(z);
    }
    if (Array.isArray(d.sichtbar) && d.sichtbar.length) {
      /* DIESE ZEILE IST GERECHNET, NICHT GESCHRIEBEN -- sie kommt aus
         derselben Rechtetafel wie die Schranke selbst. Deshalb darf
         sie hier so bestimmt dastehen. */
      kasten.append(zeile('Sieht', d.sichtbar.join(' · ')));
    }

    const kopf = document.querySelector('main .kopf-zeile');
    if (kopf) { kopf.insertAdjacentElement('afterend', kasten); return; }
    const inhalt = document.querySelector('main');
    if (inhalt) inhalt.insertBefore(kasten, inhalt.firstElementChild);
  }

  (async () => {
    try {
      const a = await fetch('/workspace/api/erklaerung?seite=' + encodeURIComponent(datei),
        { credentials: 'same-origin' });
      if (!a.ok) return;                       // 401/404: dann eben nicht
      const d = await a.json();
      if (d?.hat_text) zeichne(d);
    } catch { /* ohne Erklärung ist die Seite vollständig benutzbar */ }
  })();
})();