/* ============================================================
   BAN YARO — Hunde-Knigge
   Seiten-Modul: Begegnungen, Community-Voting, KI-Rat, Haftpflicht.
   ============================================================ */

window.Page_knigge = (() => {

  // ----------------------------------------------------------
  // MODUL-STATE
  // ----------------------------------------------------------
  let _container = null;
  let _appState  = null;

  // Voting-State: { szenario_id: { counts: {}, user_answer: null } }
  const _voteState = {};

  // ----------------------------------------------------------
  // HARDCODED INHALTE
  // ----------------------------------------------------------
  const BEGEGNUNGEN = [
    {
      icon:  '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#dog"></use></svg>',
      titel: 'Fremder Hund',
      tipps: 'Kurze Leine, ruhig bleiben, Hunde schnüffeln lassen wenn beide entspannt. Eskalation: weglenken, Richtung wechseln.',
    },
    {
      icon:  '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#users"></use></svg>',
      titel: 'Kinder',
      tipps: 'Hund nie unbeaufsichtigt mit Kindern. Kind fragen ob es streicheln darf. Hund dahinter positionieren, nicht zwischen Kind und Weg.',
    },
    {
      icon:  '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#person-simple-bike"></use></svg>',
      titel: 'Radfahrer',
      tipps: 'Hund an die Seite nehmen. Fahrrad = potentielle Bedrohung für manche Hunde. Frühzeitig weglenken.',
    },
    {
      icon:  '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#person-simple-run"></use></svg>',
      titel: 'Jogger',
      tipps: 'Kurze Leine, Abstand halten, Hund nicht anspringen lassen.',
    },
    {
      icon:  '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#car"></use></svg>',
      titel: 'ÖPNV',
      tipps: 'Maulkorbpflicht gilt im ÖPNV (Deutschland-weit). Kleine Hunde in Transportbox kostenlos, große Hunde brauchen Fahrschein. Regeln je Stadt unterschiedlich.',
    },
    {
      icon:  '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#shopping-cart"></use></svg>',
      titel: 'Supermarkt / Geschäfte',
      tipps: 'Grundsätzlich Hausrecht des Betreibers. "Hunde willkommen"-Schild = explizite Einladung. Im Zweifel fragen. Außen anbinden nur kurz und beaufsichtigt.',
    },
  ];

  const SZENARIEN = [
    {
      id:    'begegnung_leine',
      frage: 'Dein Hund ist gut sozialisiert und läuft frei. Ein angeleinten Hund kommt entgegen. Was tust du?',
      antworten: [
        { key: 'a', text: 'Hund weiterlaufen lassen — er ist ja friedlich' },
        { key: 'b', text: 'Hund anleinen und Abstand halten' },
        { key: 'c', text: 'Besitzer fragen ob ein Treffen ok ist' },
      ],
      richtig:    'b',
      erklaerung: 'Freilaufende Hunde auf angeleine Hunde zulaufen zu lassen ist unhöflich und kann den angeleinten Hund in Stress versetzen ("Leinenfrust"). Immer erst anleinen und Abstand halten.',
    },
    {
      id:    'gassi_kot',
      frage: 'Dein Hund macht sein Geschäft im Park abseits des Weges im Gebüsch. Was machst du?',
      antworten: [
        { key: 'a', text: 'Liegenlassen — im Gebüsch stört es niemanden' },
        { key: 'b', text: 'Aufsammeln, auch wenn es versteckt liegt' },
        { key: 'c', text: 'Nur aufsammeln wenn jemand zuschaut' },
      ],
      richtig:    'b',
      erklaerung: 'Kot grundsätzlich immer aufsammeln — auch im Gebüsch. Kinder spielen überall, und Parasiten (z.B. Spulwurm) können für Menschen gefährlich sein.',
    },
    {
      id:    'restaurant_hund',
      frage: 'Im Restaurant-Außenbereich sitzt du mit deinem Hund. Ein anderer Gast bittet dich deinen Hund wegzunehmen weil er Angst hat. Was tust du?',
      antworten: [
        { key: 'a', text: 'Ablehnen — Außenbereich ist hundefreundlich' },
        { key: 'b', text: 'Hund wegsetzen oder selbst weiter hinten platzieren' },
        { key: 'c', text: 'Personal entscheiden lassen' },
      ],
      richtig:    'c',
      erklaerung: 'Das Personal / der Betreiber entscheidet über das Hausrecht. Gut wäre es, selbst Kompromissbereitschaft zu zeigen und den Hund etwas wegzurücken — das deeskaliert und signalisiert Rücksicht.',
    },
    {
      id:    'anleine_pflicht',
      frage: 'Im Park gibt es keine Schilder. Muss dein Hund an die Leine?',
      antworten: [
        { key: 'a', text: 'Nein — kein Schild bedeutet keine Pflicht' },
        { key: 'b', text: 'Kommt auf die Gemeindeordnung an' },
        { key: 'c', text: 'Ja — immer Leinenpflicht in öffentlichen Parks' },
      ],
      richtig:    'b',
      erklaerung: 'Leinenpflicht ist Ländersache und variiert stark. Viele Bundesländer haben eine allgemeine Anleinpflicht in Ortschaften oder Parks. Im Zweifel Hund anleinen oder Gemeindewebsite prüfen.',
    },
  ];

  // ----------------------------------------------------------
  // INIT
  // ----------------------------------------------------------
  async function init(container, appState) {
    _container = container;
    _appState  = appState;
    _render();
    _loadAllVotes();
  }

  function refresh() {
    // statische Seite — kein Reload nötig
  }

  // ----------------------------------------------------------
  // HAUPT-RENDER
  // ----------------------------------------------------------
  function _render() {
    _container.innerHTML = `
      <div class="page-container">
        ${_renderBegegnungen()}
        ${_renderVoting()}
        ${_renderKiRat()}
        ${_renderHaftpflicht()}
      </div>
    `;
    _bindAccordion();
    _bindVoting();
    _bindKiRat();
  }

  // ----------------------------------------------------------
  // SECTION 1: BEGEGNUNGEN — Accordion-Karten
  // ----------------------------------------------------------
  function _renderBegegnungen() {
    const cards = BEGEGNUNGEN.map((b, i) => `
      <div class="knigge-accordion" id="acc-${i}">
        <button class="knigge-accordion-head" data-acc="${i}" aria-expanded="false">
          <span>${b.icon} <strong>${_esc(b.titel)}</strong></span>
          <span class="knigge-accordion-arrow">${UI.icon('caret-down')}</span>
        </button>
        <div class="knigge-accordion-body" id="acc-body-${i}" hidden>
          <p style="color:var(--c-text);line-height:1.6">${_esc(b.tipps)}</p>
        </div>
      </div>
    `).join('');

    return `
      <h2 style="font-size:var(--text-lg);font-weight:700;margin:var(--space-6) 0 var(--space-3)">
        ${UI.icon('paw-print')} Begegnungen
      </h2>
      <div class="card" style="padding:0;overflow:hidden">
        ${cards}
      </div>
    `;
  }

  function _bindAccordion() {
    _container.querySelectorAll('.knigge-accordion-head').forEach(btn => {
      btn.addEventListener('click', () => {
        const i    = btn.dataset.acc;
        const body = document.getElementById(`acc-body-${i}`);
        const arrow = btn.querySelector('.knigge-accordion-arrow');
        const open  = !body.hidden;
        body.hidden = open;
        btn.setAttribute('aria-expanded', String(!open));
        arrow.innerHTML = open ? UI.icon('caret-down') : UI.icon('caret-up');
      });
    });
  }

  // ----------------------------------------------------------
  // SECTION 2: COMMUNITY VOTING
  // ----------------------------------------------------------
  function _renderVoting() {
    const cards = SZENARIEN.map(s => `
      <div class="card" style="margin-bottom:var(--space-4)" id="sz-${s.id}">
        <p style="font-weight:var(--weight-semibold);margin:0;padding:var(--space-5) var(--space-5) var(--space-3);line-height:1.5">
          ${_esc(s.frage)}
        </p>
        <div class="knigge-vote-options" id="opts-${s.id}" style="padding:0 var(--space-5) var(--space-5)">
          ${s.antworten.map(a => `
            <button class="knigge-vote-btn btn btn-secondary"
                    data-sz="${s.id}" data-key="${a.key}"
                    style="width:100%;margin-bottom:var(--space-2);justify-content:flex-start;text-align:left">
              ${_esc(a.text)}
            </button>
          `).join('')}
        </div>
        <div class="knigge-vote-result hidden" id="res-${s.id}"></div>
      </div>
    `).join('');

    return `
      <h2 style="font-size:var(--text-lg);font-weight:700;margin:var(--space-6) 0 var(--space-3)">
        ${UI.icon('star')} Was wäre richtig?
      </h2>
      ${cards}
    `;
  }

  function _bindVoting() {
    _container.querySelectorAll('.knigge-vote-btn').forEach(btn => {
      btn.addEventListener('click', async () => {
        const szId = btn.dataset.sz;
        const key  = btn.dataset.key;
        if (!_appState.user) {
          UI.toast.warning('Bitte melde dich an um abzustimmen.');
          return;
        }
        try {
          const result = await API.knigge.vote(szId, key);
          _voteState[szId] = { counts: result.counts, user_answer: result.user_answer };
          _renderVoteResult(szId);
        } catch (err) {
          UI.toast.error(err.message || 'Fehler beim Abstimmen.');
        }
      });
    });
  }

  async function _loadAllVotes() {
    for (const s of SZENARIEN) {
      try {
        const result = await API.knigge.votes(s.id);
        _voteState[s.id] = { counts: result.counts, user_answer: result.user_answer };
        if (result.user_answer) {
          _renderVoteResult(s.id);
        }
      } catch {
        // ignorieren — Votes werden on-demand geladen
      }
    }
  }

  function _renderVoteResult(szId) {
    const szenario = SZENARIEN.find(s => s.id === szId);
    if (!szenario) return;
    const state = _voteState[szId];
    if (!state) return;

    const optsEl = document.getElementById(`opts-${szId}`);
    const resEl  = document.getElementById(`res-${szId}`);
    if (!optsEl || !resEl) return;

    // Optionen ausblenden
    optsEl.classList.add('hidden');
    resEl.classList.remove('hidden');

    const counts     = state.counts || {};
    const userAnswer = state.user_answer;
    const total      = Object.values(counts).reduce((s, c) => s + c, 0) || 1;
    const isCorrect  = userAnswer === szenario.richtig;

    const bars = szenario.antworten.map(a => {
      const cnt  = counts[a.key] || 0;
      const pct  = Math.round((cnt / total) * 100);
      const isU  = a.key === userAnswer;
      const isR  = a.key === szenario.richtig;
      const color = isR
        ? 'var(--c-success, #22c55e)'
        : (isU && !isR ? 'var(--c-danger, #ef4444)' : 'var(--c-border)');
      return `
        <div style="margin-bottom:var(--space-3)">
          <div style="display:flex;justify-content:space-between;margin-bottom:4px;font-size:var(--text-sm)">
            <span style="color:${isU ? 'var(--c-text)' : 'var(--c-text-secondary)'};font-weight:${isU ? 'var(--weight-semibold)' : 'normal'}">
              ${isU ? UI.icon('arrow-right') + ' ' : ''}${_esc(a.text)}${isR ? ' ' + UI.icon('check') : ''}
            </span>
            <span style="color:var(--c-text-secondary)">${pct}% (${cnt})</span>
          </div>
          <div style="background:var(--c-surface-2);border-radius:4px;height:8px;overflow:hidden">
            <div style="width:${pct}%;background:${color};height:8px;border-radius:4px;transition:width 0.4s"></div>
          </div>
        </div>
      `;
    }).join('');

    const badge = isCorrect
      ? `<span style="color:var(--c-success);font-weight:var(--weight-semibold)">${UI.icon('check')} Richtig!</span>`
      : `<span style="color:var(--c-danger);font-weight:var(--weight-semibold)">${UI.icon('x')} Nicht ganz — </span>`;

    resEl.innerHTML = `
      <div style="margin-bottom:var(--space-4);padding:0 var(--space-5)">${bars}</div>
      <div style="background:var(--c-surface-2);border-radius:var(--radius-md);padding:var(--space-3) var(--space-5);font-size:var(--text-sm);line-height:1.5">
        ${badge}
        <span style="color:var(--c-text-secondary)">${_esc(szenario.erklaerung)}</span>
      </div>
    `;
  }

  // ----------------------------------------------------------
  // SECTION 3: KI-SITUATIONSBERATER
  // ----------------------------------------------------------
  function _renderKiRat() {
    return `
      <h2 style="font-size:var(--text-lg);font-weight:700;margin:var(--space-6) 0 var(--space-3)">
        ${UI.icon('robot')} KI-Situationsberater
      </h2>
      <div class="card">
        <div style="padding:var(--space-5)">
        <textarea id="ki-situation-input" class="form-control"
                  rows="3"
                  placeholder="Beschreibe deine Situation…"
                  style="margin-bottom:var(--space-3)"></textarea>
        <button class="btn btn-primary" id="ki-rat-btn" style="width:100%">
          Rat holen ${UI.icon('robot')}
        </button>
        <div id="ki-rat-result" style="margin-top:var(--space-4);display:none"></div>
        </div>
      </div>
    `;
  }

  function _bindKiRat() {
    const btn    = _container.querySelector('#ki-rat-btn');
    const input  = _container.querySelector('#ki-situation-input');
    const result = _container.querySelector('#ki-rat-result');

    btn?.addEventListener('click', async () => {
      const situation = input?.value?.trim();
      if (!situation) {
        UI.toast.warning('Bitte beschreibe zuerst deine Situation.');
        return;
      }
      if (!_appState.user) {
        UI.toast.warning('Bitte melde dich an um den KI-Rat zu nutzen.');
        return;
      }

      UI.setLoading(btn, true);
      result.style.display = 'none';

      try {
        const data = await API.knigge.kiRat(situation);
        result.innerHTML = `
          <div style="background:var(--c-surface-2);border-radius:var(--radius-md);
                      padding:var(--space-4);line-height:1.6;color:var(--c-text)">
            <div style="font-size:var(--text-sm);font-weight:var(--weight-semibold);
                        color:var(--c-text-secondary);margin-bottom:var(--space-2)">${UI.icon('robot')} KI-Rat</div>
            ${_esc(data.rat)}
          </div>
        `;
        result.style.display = 'block';
      } catch (err) {
        const is402 = err.status === 402 || err.status === 503;
        result.innerHTML = `
          <div style="background:var(--c-surface-2);border-radius:var(--radius-md);
                      padding:var(--space-4);color:var(--c-text-secondary);font-size:var(--text-sm)">
            ${is402
              ? 'Für KI-Rat wird Ban Yaro Plus oder ein laufender KI-Server benötigt.'
              : _esc(err.message || 'Fehler beim KI-Abruf.')}
          </div>
        `;
        result.style.display = 'block';
      } finally {
        UI.setLoading(btn, false);
      }
    });
  }

  // ----------------------------------------------------------
  // SECTION 4: HAFTPFLICHT-HINWEISE
  // ----------------------------------------------------------
  function _renderHaftpflicht() {
    return `
      <h2 style="font-size:var(--text-lg);font-weight:700;margin:var(--space-6) 0 var(--space-3)">
        ${UI.icon('shield')} Haftpflicht-Hinweise
      </h2>
      <div class="card" style="margin-bottom:var(--space-8)">
        <div style="padding:var(--space-5)">
        <ul style="list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-3)">
          <li style="display:flex;gap:var(--space-3);align-items:flex-start">
            <span style="font-size:1.2rem;flex-shrink:0">${UI.icon('scales')}</span>
            <span style="color:var(--c-text);line-height:1.5">
              Hundehalter haften unbegrenzt für Schäden die ihr Hund verursacht
              (§ 833 BGB) — auch ohne Verschulden.
            </span>
          </li>
          <li style="display:flex;gap:var(--space-3);align-items:flex-start">
            <span style="font-size:1.2rem;flex-shrink:0">${UI.icon('map-trifold')}</span>
            <span style="color:var(--c-text);line-height:1.5">
              Eine Hundehaftpflichtversicherung ist in einigen Bundesländern
              (Bayern, Hamburg, Berlin u.a.) Pflicht.
            </span>
          </li>
          <li style="display:flex;gap:var(--space-3);align-items:flex-start">
            <span style="font-size:1.2rem;flex-shrink:0">${UI.icon('info')}</span>
            <span style="color:var(--c-text);line-height:1.5">
              Empfehlung: Absicherung ab ~50 €/Jahr.
            </span>
          </li>
        </ul>
        <p style="margin-top:var(--space-4);font-size:var(--text-xs);color:var(--c-text-muted)">
          Dies ist keine Rechtsberatung.
        </p>
        </div>
      </div>
    `;
  }

  // ----------------------------------------------------------
  // HELPER
  // ----------------------------------------------------------
  function _esc(str) {
    if (!str) return '';
    return String(str)
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;');
  }

  // ----------------------------------------------------------
  // PUBLIC
  // ----------------------------------------------------------
  return { init, refresh };

})();
