/**
 * Glossar-Experimente — Gruppe „pyramide".
 *
 * Registrierung: window.GlossarExperiments[key_slug] = function (root) { … }
 * Der Renderer (glossar.php) hängt einen leeren Container ein und ruft die
 * Funktion mit diesem Container als einzigem Argument auf.
 *
 * Nur bestehende .ge-*-Klassen, kein neues CSS. Vanilla JS, keine Libraries.
 */

(function () {
  'use strict';

  const NS = 'http://www.w3.org/2000/svg';
  const svgEl = (tag, attrs, parent) => {
    const el = document.createElementNS(NS, tag);
    if (attrs) for (const k in attrs) el.setAttribute(k, attrs[k]);
    if (parent) parent.appendChild(el);
    return el;
  };

  // =====================================================================
  // Experiment: Ernährungspyramide — früher (US 1992) vs. heute (DACH 2024)
  // =====================================================================
  function foodPyramid(root) {
    // Ansichten: Stufen jeweils von OBEN (Spitze) nach UNTEN (Basis).
    // dark:true → weiße Schrift auf dunkler Stufe.
    const VIEWS = {
      us: {
        btn: 'Alte US-Pyramide (1992)',
        title: '🇺🇸 Die alte US-Pyramide (1992)',
        intro: 'So empfahlen die USA früher zu essen. Fällt dir auf, was ganz unten die größte Gruppe ist?',
        note: 'Quelle: USDA „Food Guide Pyramid" (1992). 2005 durch MyPyramid, 2011 durch MyPlate ersetzt.',
        levels: [
          { lines: ['Fette, Öle & Süßes', 'sparsam'], color: '#d98c4a', dark: true,
            hint: 'Ganz oben, klein: Fette und Süßes nur sparsam — aber alle Fette wurden hier in einen Topf geworfen.' },
          { lines: ['Milch · Fleisch, Fisch, Ei, Nüsse', 'je 2 – 3 Portionen'], color: '#b57f9e', dark: true,
            hint: 'Milchprodukte und Eiweiß-Lebensmittel: je 2 – 3 Portionen pro Tag.' },
          { lines: ['Gemüse 3 – 5 · Obst 2 – 4', 'Portionen'], color: '#5a8a5e', dark: true,
            hint: 'Gemüse und Obst — aber weiter oben als heute, also als weniger wichtig dargestellt.' },
          { lines: ['Brot, Getreide, Reis, Nudeln', '6 – 11 Portionen'], color: '#e8c547', dark: false,
            hint: 'Die größte Gruppe ganz unten: 6 – 11 Portionen Kohlenhydrate pro Tag! Weißmehl zählte dabei genauso wie Vollkorn.' }
        ]
      },
      dach: {
        btn: 'Heute (D-A-CH)',
        title: '🥦 Heutige Empfehlung (D-A-CH)',
        intro: 'So empfehlen Österreich, die Schweiz und Deutschland heute zu essen. Unten steht jetzt Wasser.',
        note: 'Quellen: Österreichische Ernährungspyramide 2024 (BMSGPK · Gesundheit Österreich · AGES) · Schweizer Lebensmittelpyramide (SGE) · Deutschland: DGE-Empfehlungen 2024 — über ¾ pflanzlich, unter ¼ tierisch.',
        levels: [
          { lines: ['Süßes, Fettes & Fast Food', 'selten'], color: '#c85c4a', dark: true,
            hint: 'Ganz oben, ganz klein: Süßes, Fettiges und Fast Food nur selten und in kleinen Mengen.' },
          { lines: ['Fette & Öle', 'sparsam, pflanzlich'], color: '#d98c4a', dark: true,
            hint: 'Öle und Fette sparsam — am besten pflanzliche Öle wie Rapsöl oder Olivenöl.' },
          { lines: ['Fleisch, Fisch & Ei', 'sparsam'], color: '#b56b6b', dark: true,
            hint: 'Fleisch, Fisch und Ei nur sparsam: höchstens rund 300 g Fleisch pro Woche.' },
          { lines: ['Milchprodukte', '2 – 3 Portionen / Tag'], color: '#a9c0d0', dark: false,
            hint: 'Milch, Joghurt und Käse: 2 – 3 Portionen pro Tag.' },
          { lines: ['Getreide & Erdäpfel', '4 Portionen · am besten Vollkorn'], color: '#e8c547', dark: false,
            hint: 'Getreide, Brot und Erdäpfel: 4 Portionen pro Tag — Vollkorn ist besser als Weißmehl. Neu: auch Hülsenfrüchte wie Linsen und Bohnen.' },
          { lines: ['Gemüse & Obst', '5 Portionen / Tag'], color: '#5a8a5e', dark: true,
            hint: 'Viel Gemüse und Obst: 5 Portionen pro Tag — davon 3-mal Gemüse und 2-mal Obst.' },
          { lines: ['Wasser & ungesüßte Getränke', 'rund 1,5 Liter / Tag'], color: '#4a9cc4', dark: true,
            hint: 'Die neue Basis: viel trinken — Wasser oder ungesüßter Tee, rund 1,5 Liter pro Tag.' }
        ]
      }
    };

    root.innerHTML = `
      <div class="ge-wrap">
        <div class="ge-head">
          <h3 id="fp-title">🥦 Ernährungspyramide</h3>
          <p id="fp-intro">Vergleiche, wie sich die Empfehlung fürs Essen verändert hat. Tippe auf eine Stufe, um mehr zu erfahren.</p>
        </div>
        <div class="ge-controls" role="tablist">
          <button class="ge-btn ge-btn-primary" data-view="us">Alte US-Pyramide (1992)</button>
          <button class="ge-btn" data-view="dach">Heute (D-A-CH)</button>
          <button class="ge-btn" data-view="fehler">Was war der Denkfehler?</button>
        </div>
        <svg id="fp-svg" viewBox="0 0 620 380" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Ernährungspyramide"></svg>
        <div id="fp-fehler" style="display:none; font-size:.85rem; line-height:1.55; color:var(--ggs-text);">
          <p><strong>Der Denkfehler der alten US-Pyramide:</strong></p>
          <p>Ganz unten, als größte Gruppe, standen Brot, Reis und Nudeln mit bis zu 6 – 11 Portionen pro Tag. Das sind sehr viele Kohlenhydrate. Dabei wurde <strong>Weißmehl und Zucker genauso behandelt wie Vollkorn</strong> — obwohl Vollkorn viel gesünder ist.</p>
          <p>Außerdem galten <strong>alle Fette pauschal als „schlecht"</strong> und sollten sparsam gegessen werden — auch gesunde pflanzliche Öle. Kritiker:innen bemängelten zudem den <strong>Einfluss der Lebensmittel-Industrie</strong> auf diese Empfehlung.</p>
          <p>Heute weiß man es besser: Die Basis sind <strong>Wasser, Gemüse und Obst</strong>, Getreide am besten als Vollkorn — und der Speiseplan ist <strong>überwiegend pflanzlich</strong> (rund ¾ pflanzlich, ¼ tierisch).</p>
        </div>
        <div class="ge-gh-result">
          <div class="ge-gh-pill" id="fp-detail">Tippe auf eine Stufe der Pyramide.</div>
        </div>
        <p class="ge-note" id="fp-note"></p>
      </div>
    `;

    const svg    = root.querySelector('#fp-svg');
    const titleEl = root.querySelector('#fp-title');
    const introEl = root.querySelector('#fp-intro');
    const noteEl  = root.querySelector('#fp-note');
    const detail  = root.querySelector('#fp-detail');
    const fehler  = root.querySelector('#fp-fehler');
    if (!svg || !titleEl || !noteEl || !detail || !fehler) return;

    // Pyramiden-Geometrie
    const TOP_Y = 18, BOT_Y = 350, CX = 310, HALF_BASE = 258;
    const halfAt = (y) => HALF_BASE * (y - TOP_Y) / (BOT_Y - TOP_Y);

    function drawPyramid(view) {
      svg.innerHTML = '';
      const levels = view.levels;
      // Gewichte: untere Stufen etwas höher (mehr Platz für Text), Spitze schmal.
      const weights = levels.map((_, i) => 1 + i * 0.18);
      const wSum = weights.reduce((a, b) => a + b, 0);
      const totalH = BOT_Y - TOP_Y;
      let y = TOP_Y;
      levels.forEach((lv, i) => {
        const h = (weights[i] / wSum) * totalH;
        const yTop = y, yBot = y + h;
        y = yBot;
        const lT = CX - halfAt(yTop), rT = CX + halfAt(yTop);
        const lB = CX - halfAt(yBot), rB = CX + halfAt(yBot);
        const g = svgEl('g', { class: 'fp-level', style: 'cursor:pointer' }, svg);
        svgEl('polygon', {
          points: `${lT},${yTop} ${rT},${yTop} ${rB},${yBot} ${lB},${yBot}`,
          fill: lv.color, stroke: '#ffffff', 'stroke-width': '3', 'stroke-linejoin': 'round'
        }, g);
        // Beschriftung mittig
        const midY = (yTop + yBot) / 2;
        const fill = lv.dark ? '#ffffff' : '#1f3a2a';
        const lines = lv.lines;
        const startY = midY - (lines.length - 1) * 8 + 4;
        const txt = svgEl('text', {
          x: CX, y: startY, 'text-anchor': 'middle',
          'font-size': i === 0 ? '11' : '13', 'font-weight': '700',
          fill, 'pointer-events': 'none'
        }, g);
        lines.forEach((ln, li) => {
          const ts = svgEl('tspan', { x: CX, dy: li === 0 ? 0 : 16, 'font-weight': li === 0 ? '800' : '600', 'font-size': li === 0 ? (i === 0 ? '11' : '13') : '11' }, txt);
          ts.textContent = ln;
        });
        g.addEventListener('click', () => {
          detail.textContent = lv.hint;
          svg.querySelectorAll('polygon').forEach(p => p.setAttribute('stroke', '#ffffff'));
          const poly = g.querySelector('polygon');
          if (poly) poly.setAttribute('stroke', '#1f3a2a');
        });
      });
    }

    function setView(key) {
      root.querySelectorAll('[data-view]').forEach(b =>
        b.classList.toggle('ge-btn-primary', b.dataset.view === key));

      if (key === 'fehler') {
        svg.style.display = 'none';
        fehler.style.display = '';
        titleEl.textContent = '🤔 Was war der Denkfehler?';
        introEl.textContent = 'Warum passt die alte US-Pyramide nicht mehr zu dem, was wir heute wissen?';
        detail.textContent = 'Lies den Text oben — und vergleiche dann die beiden Pyramiden.';
        noteEl.textContent = 'Quellen: USDA Food Guide Pyramid (1992) · Österreichische Ernährungspyramide 2024 · DGE-Empfehlungen 2024.';
        return;
      }

      const view = VIEWS[key];
      svg.style.display = '';
      fehler.style.display = 'none';
      titleEl.textContent = view.title;
      introEl.textContent = view.intro;
      noteEl.textContent = view.note;
      detail.textContent = 'Tippe auf eine Stufe der Pyramide.';
      drawPyramid(view);
    }

    root.querySelectorAll('[data-view]').forEach(b =>
      b.addEventListener('click', () => setView(b.dataset.view)));

    setView('us');
  }

  // Registry — Key entspricht key_slug aus DB.
  window.GlossarExperiments = Object.assign(window.GlossarExperiments || {}, {
    'ernaehrungspyramide': foodPyramid
  });
})();