/* ============================================================
   BAN YARO — Hunde-Wiki
   Rassen-Datenbank, Gesundheit, Recht, Quiz
   ============================================================ */

window.Page_wiki = (() => {

  // ----------------------------------------------------------
  // MODUL-STATE
  // ----------------------------------------------------------
  let _container = null;
  let _appState  = null;
  let _tab       = 'rassen';
  let _rassen    = [];
  let _gruppen   = [];
  let _totalBreeds = 0;
  let _currentOffset = 0;
  const PAGE_SIZE = 30;
  let _currentSearch = '';
  let _currentGruppe = '';
  let _quizAnswers = {};
  let _quizStep  = 0;

  // ----------------------------------------------------------
  // HARDCODED: Gesundheits-Inhalte
  // ----------------------------------------------------------
  const GESUNDHEIT = [
    {
      titel: 'Zecken & FSME',
      icon: 'skull',
      text: 'Zecken sind von März bis November aktiv (Spitze April–Juni, September–Oktober). Täglich nach Gassi auf Zecken untersuchen — besonders Ohren, Achseln, Leiste.\n\nZecke entfernen: Zeckenzange ansetzen, nicht drehen, gerade herausziehen. KEINE Öle/Vaseline.\n\nFSME: Impfung für Menschen empfohlen in Risikogebieten (RKI-Karte: rki.de/fsme). Hunde können Borreliose bekommen — Impfung empfohlen.',
    },
    {
      titel: 'Vergiftungen — Sofortmaßnahmen',
      icon: 'skull',
      text: 'Verdacht auf Vergiftung: Sofort Tierarzt oder Tiergiftzentrale (Berlin: 030 19240, München: 089 19240, Wien: 01 4064343).\n\nNICHT versuchen den Hund zum Erbrechen zu bringen ohne tierärztlichen Rat.\n\nHäufige Giftquellen: Schokolade, Trauben/Rosinen, Zwiebeln, Xylitol (Süßungsmittel), Ibuprofen.',
    },
    {
      titel: 'Hitzschlag',
      icon: 'warning',
      text: 'Symptome: Starkes Hecheln, Speichelfluss, taumeln, Kollaps.\n\nSofortmaßnahme: In den Schatten, mit lauwarmem (nicht kaltem!) Wasser abkühlen, sofort zum Tierarzt.\n\nHunde NIEMALS im Auto lassen.',
    },
    {
      titel: 'Erste Hilfe Grundlagen',
      icon: 'first-aid',
      text: 'Bewusstloser Hund: Atemwege frei? Atemkontrolle.\n\nHerzdruckmassage: 100–120/min, 1/3 Brusttiefe.\n\nBeatmung: Maul zu, in Nase blasen.\n\nBlutung: Druckverband.\n\nKnochenbruch: Immobilisieren, tragen.',
    },
  ];

  // ----------------------------------------------------------
  // HARDCODED: Recht & Regeln
  // ----------------------------------------------------------
  const RECHT = [
    { land: 'Bayern',            leine: 'Anleinpflicht im Wald und in Ortschaften', rasse: 'Keine allgemeine Rasseliste (Gefährlichkeitsfeststellung individuell)', steuer: '~100€/Jahr (variiert nach Gemeinde)' },
    { land: 'Baden-Württemberg', leine: 'Leinenpflicht in Ortschaften und Parks', rasse: 'American Pitbull Terrier, American Staffordshire Terrier u.a.', steuer: '~100–150€/Jahr' },
    { land: 'Berlin',            leine: 'Allgemeine Leinenpflicht in öffentlichen Anlagen', rasse: 'Pitbull, Staffordshire, Rottweiler (bedingt)', steuer: '~120€/Jahr (ab 2. Hund: 180€)' },
    { land: 'Brandenburg',       leine: 'Leinenpflicht in Ortschaften und Wäldern April–Juli', rasse: 'Pitbull, American Staffordshire u.a.', steuer: '~60–100€/Jahr' },
    { land: 'Hamburg',           leine: 'Allgemeine Leinenpflicht', rasse: 'Pitbull, Rottweiler, Staffordshire u.a.', steuer: '~90€/Jahr (Kampfhund: 900€)' },
    { land: 'Hessen',            leine: 'Anleinpflicht in Ortschaften', rasse: 'Pitbull u.a. (Liste)', steuer: '~75–120€/Jahr' },
    { land: 'NRW',               leine: 'Leinenpflicht in bebauten Gebieten', rasse: 'Pitbull, American Staffordshire, Staffordshire Bull Terrier u.a.', steuer: '~100–160€/Jahr' },
    { land: 'Niedersachsen',     leine: 'Anleinpflicht in Ortschaften', rasse: 'Pitbull u.a.', steuer: '~60–100€/Jahr' },
    { land: 'Sachsen',           leine: 'Leinenpflicht in Ortschaften und öffentl. Anlagen', rasse: 'Keine staatliche Liste (kommunal)', steuer: '~50–100€/Jahr' },
    { land: 'Thüringen',         leine: 'Anleinpflicht in Wäldern und Ortschaften', rasse: 'Pitbull u.a.', steuer: '~60–100€/Jahr' },
  ];

  // ----------------------------------------------------------
  // QUIZ: Fragen
  // ----------------------------------------------------------
  const QUIZ_FRAGEN = [
    { key: 'groesse',    frage: 'Welche Größe passt zu dir?',        optionen: [{val:'klein', label:'Klein (unter 10 kg)'}, {val:'mittel', label:'Mittel (10–30 kg)'}, {val:'gross', label:'Groß (über 30 kg)'}] },
    { key: 'aktivitaet', frage: 'Wie aktiv bist du?',                optionen: [{val:'niedrig', label:'Eher gemütlich'}, {val:'mittel', label:'Regelmäßige Spaziergänge'}, {val:'hoch', label:'Sehr sportlich'}] },
    { key: 'erfahrung',  frage: 'Wie viel Hundeerfahrung hast du?',  optionen: [{val:'anfaenger', label:'Ersthundehalter'}, {val:'fortgeschritten', label:'Erfahren'}, {val:'experte', label:'Profi'}] },
    { key: 'kinder',     frage: 'Lebst du mit Kindern zusammen?',    optionen: [{val:'true', label:'Ja'}, {val:'false', label:'Nein'}] },
    { key: 'wohnung',    frage: 'Wo wohnst du?',                     optionen: [{val:'true', label:'Wohnung (ohne Garten)'}, {val:'false', label:'Haus mit Garten'}] },
  ];

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

  // ----------------------------------------------------------
  // REFRESH
  // ----------------------------------------------------------
  async function refresh() {
    // Wiki ist nicht hunde-spezifisch, kein Reload nötig
  }

  // ----------------------------------------------------------
  // RENDER
  // ----------------------------------------------------------
  async function _render() {
    const isMod = _appState.user && (_appState.user.is_moderator || _appState.user.rolle === 'admin');

    _container.innerHTML = `
      <div class="by-tabs" id="wiki-tab-bar">
        <button class="by-tab${_tab === 'rassen'    ? ' active' : ''}" data-tab="rassen">${UI.icon('dog')} Rassen</button>
        <button class="by-tab${_tab === 'gesundheit'? ' active' : ''}" data-tab="gesundheit">${UI.icon('syringe')} Gesundheit</button>
        <button class="by-tab${_tab === 'recht'     ? ' active' : ''}" data-tab="recht">${UI.icon('handshake')} Recht</button>
        <button class="by-tab${_tab === 'quiz'      ? ' active' : ''}" data-tab="quiz">${UI.icon('star')} Quiz</button>
        ${isMod ? `<button class="by-tab${_tab === 'fotos' ? ' active' : ''}" data-tab="fotos" id="wiki-fotos-tab">${UI.icon('camera')} Fotos <span id="wiki-fotos-badge" style="display:none" class="badge badge-sm">0</span></button>` : ''}
      </div>
      <div id="wiki-content"></div>
    `;

    _container.querySelector('#wiki-tab-bar').addEventListener('click', e => {
      const btn = e.target.closest('[data-tab]');
      if (!btn) return;
      _tab = btn.dataset.tab;
      _container.querySelectorAll('.by-tab').forEach(b => b.classList.toggle('active', b.dataset.tab === _tab));
      _renderTab();
    });

    await _renderTab();
  }

  async function _renderTab() {
    const content = _container.querySelector('#wiki-content');
    if (!content) return;
    if      (_tab === 'rassen')     await _renderRassen(content);
    else if (_tab === 'gesundheit') _renderGesundheit(content);
    else if (_tab === 'recht')      _renderRecht(content);
    else if (_tab === 'quiz')       _renderQuiz(content);
    else if (_tab === 'fotos')      await _renderFotoSubmissions(content);
  }

  // ----------------------------------------------------------
  // TAB: Foto-Einreichungen (Mod/Admin)
  // ----------------------------------------------------------
  async function _renderFotoSubmissions(el) {
    el.innerHTML = `<div style="padding:var(--space-4)">${UI.skeleton(3)}</div>`;
    let subs;
    try {
      subs = await _apiFetch('/api/wiki/foto-submissions');
    } catch (e) {
      el.innerHTML = `<div class="empty-state"><p>${_esc(e.message)}</p></div>`;
      return;
    }

    // Badge updaten
    const badge = document.getElementById('wiki-fotos-badge');
    if (badge) { badge.textContent = subs.length; badge.style.display = subs.length ? '' : 'none'; }

    if (!subs.length) {
      el.innerHTML = `
        <div class="empty-state" style="padding:var(--space-10)">
          ${UI.icon('check')}
          <p style="margin-top:var(--space-3);color:var(--c-text-muted)">Keine ausstehenden Foto-Einreichungen.</p>
        </div>`;
      return;
    }

    el.innerHTML = `
      <div style="padding:var(--space-4)">
        <h3 style="font-size:var(--text-base);font-weight:var(--weight-semibold);margin-bottom:var(--space-4)">
          Ausstehende Fotos (${subs.length})
        </h3>
        <div id="wiki-subs-list">
          ${subs.map(s => `
            <div class="card" style="margin-bottom:var(--space-3);padding:var(--space-3)" id="wiki-sub-${s.id}">
              <div style="display:flex;gap:var(--space-3);align-items:flex-start">
                <img src="${_esc(s.foto_url)}" alt=""
                     style="width:100px;height:80px;object-fit:cover;border-radius:var(--radius-md);flex-shrink:0;background:var(--c-surface-2)">
                <div style="flex:1;min-width:0">
                  <div style="font-weight:var(--weight-semibold)">${_esc(s.rasse_name)}</div>
                  <div style="font-size:var(--text-xs);color:var(--c-text-muted)">
                    von ${_esc(s.user_name)} · ${_formatDate(s.created_at)}
                  </div>
                  ${s.aktuell_foto
                    ? `<div style="font-size:var(--text-xs);color:var(--c-text-secondary);margin-top:4px">
                         Aktuelles Foto: <img src="${_esc(s.aktuell_foto)}" style="height:20px;vertical-align:middle;border-radius:2px">
                       </div>`
                    : `<div style="font-size:var(--text-xs);color:var(--c-warning);margin-top:4px">Kein Foto vorhanden</div>`
                  }
                </div>
              </div>
              <div style="display:flex;gap:var(--space-2);margin-top:var(--space-3)">
                <button class="btn btn-primary btn-sm flex-1"
                        onclick="Page_wiki._approveSubmission(${s.id})">
                  ${UI.icon('check')} Freischalten
                </button>
                <button class="btn btn-ghost btn-sm flex-1"
                        onclick="Page_wiki._rejectSubmission(${s.id})">
                  ${UI.icon('x')} Ablehnen
                </button>
              </div>
            </div>
          `).join('')}
        </div>
      </div>
    `;
  }

  async function _approveSubmission(id) {
    try {
      await _apiPatch(`/api/wiki/foto-submissions/${id}`, { action: 'approve' });
      document.getElementById(`wiki-sub-${id}`)?.remove();
      UI.toast('Foto freigeschaltet!', 'success');
      const badge = document.getElementById('wiki-fotos-badge');
      if (badge) {
        const n = Math.max(0, parseInt(badge.textContent || '0') - 1);
        badge.textContent = n; badge.style.display = n ? '' : 'none';
      }
    } catch (e) { UI.toast(e.message, 'danger'); }
  }

  async function _rejectSubmission(id) {
    const reason = prompt('Ablehnungsgrund (optional):') ?? null;
    if (reason === null) return; // Abbrechen
    try {
      await _apiPatch(`/api/wiki/foto-submissions/${id}`, { action: 'reject', reject_reason: reason });
      document.getElementById(`wiki-sub-${id}`)?.remove();
      UI.toast('Einreichung abgelehnt.', 'info');
    } catch (e) { UI.toast(e.message, 'danger'); }
  }

  // ----------------------------------------------------------
  // TAB: Rassen
  // ----------------------------------------------------------
  async function _renderRassen(el) {
    // Check seeding state first
    let stats;
    try {
      stats = await _apiFetch('/api/wiki/stats');
    } catch {
      el.innerHTML = UI.emptyState({ icon: UI.icon('warning'), title: 'Fehler', text: 'Wiki konnte nicht geladen werden.' });
      return;
    }

    if (!stats.seeded) {
      el.innerHTML = `
        <div class="wiki-loading-state">
          <div class="wiki-loading-spinner"></div>
          <p class="wiki-loading-text">Rassen-Datenbank wird geladen… ${UI.icon('dog')}</p>
          <p class="wiki-loading-hint">Beim ersten Start werden ~170 Rassen von TheDogAPI abgerufen.</p>
        </div>
      `;
      return;
    }

    // Reset state when re-rendering the tab fresh
    _rassen = [];
    _currentOffset = 0;
    _currentSearch = '';
    _currentGruppe = '';

    el.innerHTML = `
      <div class="wiki-filter-bar">
        <input class="form-control wiki-search-input" type="search" id="wiki-rassen-search" placeholder="Rasse suchen…">
        <select class="form-control wiki-gruppe-select" id="wiki-gruppe-select">
          <option value="">Alle Gruppen</option>
        </select>
      </div>
      <div style="padding:0 0 var(--space-3)">
        <button class="btn btn-secondary w-full" id="wiki-rasse-erkennen-btn"
                style="font-size:var(--text-sm)">
          <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#magnifying-glass"></use></svg>
          Welche Rasse ist das? — Foto analysieren
        </button>
        <input type="file" accept="image/jpeg,image/png,image/webp"
               id="wiki-rasse-foto-input" style="display:none">
      </div>
      <div class="wiki-breed-grid" id="wiki-breed-grid"></div>
      <div id="wiki-mehr-wrap" style="text-align:center;padding:var(--space-4) 0;display:none">
        <button class="btn btn-secondary" id="wiki-mehr-btn">Mehr laden</button>
      </div>
    `;

    // Load initial batch (also populates gruppen)
    await _loadBreeds(el, true);

    // Rassen-Erkennung per KI
    _bindWikiRasseErkennung(el);

    // Search handler with debounce
    let _searchTimer;
    el.querySelector('#wiki-rassen-search').addEventListener('input', e => {
      clearTimeout(_searchTimer);
      _searchTimer = setTimeout(() => {
        _currentSearch = e.target.value;
        _rassen = [];
        _currentOffset = 0;
        _loadBreeds(el, true);
      }, 300);
    });

    // Gruppe filter handler
    el.querySelector('#wiki-gruppe-select').addEventListener('change', e => {
      _currentGruppe = e.target.value;
      _rassen = [];
      _currentOffset = 0;
      _loadBreeds(el, true);
    });

    // "Mehr laden" button
    el.querySelector('#wiki-mehr-btn').addEventListener('click', () => {
      _loadBreeds(el, false);
    });
  }

  async function _loadBreeds(el, reset) {
    const grid = el.querySelector('#wiki-breed-grid');
    const mehrWrap = el.querySelector('#wiki-mehr-wrap');
    const mehrBtn  = el.querySelector('#wiki-mehr-btn');
    if (!grid) return;

    if (reset) {
      grid.innerHTML = `<div class="wiki-breeds-loading">Lade Rassen…</div>`;
    }

    const params = new URLSearchParams({
      search: _currentSearch,
      gruppe: _currentGruppe,
      limit:  PAGE_SIZE,
      offset: _currentOffset,
    });

    let data;
    try {
      data = await _apiFetch(`/api/wiki/rassen?${params}`);
    } catch {
      grid.innerHTML = `<p style="color:var(--c-danger);padding:var(--space-4)">Rassen konnten nicht geladen werden.</p>`;
      return;
    }

    // Populate Gruppen dropdown (only on first load)
    if (reset && data.gruppen && data.gruppen.length) {
      _gruppen = data.gruppen;
      const sel = el.querySelector('#wiki-gruppe-select');
      if (sel) {
        // Preserve current selection
        const cur = _currentGruppe;
        sel.innerHTML = `<option value="">Alle Gruppen</option>` +
          _gruppen.map(g => `<option value="${_esc(g)}"${g === cur ? ' selected' : ''}>${_esc(g)}</option>`).join('');
      }
    }

    if (reset) {
      _rassen = data.breeds;
      _totalBreeds = data.total;
      grid.innerHTML = '';
    } else {
      _rassen = _rassen.concat(data.breeds);
      _currentOffset += data.breeds.length;
    }

    if (reset) {
      _currentOffset = data.breeds.length;
    }

    if (reset && _rassen.length === 0) {
      grid.innerHTML = `<p style="color:var(--c-text-secondary);padding:var(--space-4)">Keine Rassen gefunden.</p>`;
      if (mehrWrap) mehrWrap.style.display = 'none';
      return;
    }

    // Render cards
    const newCards = data.breeds.map(r => _breedCardHtml(r)).join('');
    if (reset) {
      grid.innerHTML = newCards;
    } else {
      grid.insertAdjacentHTML('beforeend', newCards);
    }

    // Attach click handlers to newly added cards
    grid.querySelectorAll('.wiki-breed-card:not([data-bound])').forEach(card => {
      card.dataset.bound = '1';
      card.addEventListener('click', () => _openBreedDetail(card.dataset.slug));
    });

    // Show/hide "Mehr laden"
    if (mehrWrap) {
      const shown = _rassen.length;
      mehrWrap.style.display = shown < _totalBreeds ? 'block' : 'none';
      if (mehrBtn) mehrBtn.textContent = `Mehr laden (${_totalBreeds - shown} weitere)`;
    }
  }

  const _DOG_SILHOUETTE = `<svg class="ph-icon" aria-hidden="true" style="width:2.5rem;height:2.5rem"><use href="/icons/phosphor.svg#dog"></use></svg>`;

  function _breedCardHtml(r) {
    const fotoUrl   = r.foto_url || r.user_foto || '';
    const photoHtml = fotoUrl
      ? `<img class="wiki-breed-photo" src="${_esc(fotoUrl)}" loading="lazy" alt="${_esc(r.name)}" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">`
      : '';
    const fallbackHtml = `<div class="wiki-breed-photo-fallback" style="${fotoUrl ? 'display:none' : ''}">${_DOG_SILHOUETTE}</div>`;

    return `
      <div class="wiki-breed-card" data-slug="${_esc(r.slug)}">
        <div class="wiki-breed-photo-wrap">
          ${photoHtml}
          ${fallbackHtml}
        </div>
        <div class="wiki-breed-card-body">
          <div class="wiki-breed-card-name">${_esc(r.name)}</div>
          <div class="wiki-breed-card-gruppe">${_esc(r.gruppe || '—')}</div>
          <div class="wiki-breed-badges">
            <span class="wiki-badge-groesse wiki-badge-groesse--${_esc(r.groesse)}">${_groesseLabel(r.groesse)}</span>
            <span class="wiki-badge-aktivitaet wiki-badge-aktivitaet--${_esc(r.aktivitaet)}">${_aktivLabel(r.aktivitaet)}</span>
            <span class="wiki-badge-erfahrung wiki-badge-erfahrung--${_esc(r.erfahrung)}">${_erfahrungLabel(r.erfahrung)}</span>
          </div>
        </div>
      </div>
    `;
  }

  // ----------------------------------------------------------
  // API-Funktionen: Interesse / Stats / Züchter
  // ----------------------------------------------------------
  async function _fetchStats(slug) {
    const r = await fetch(`/api/wiki/rassen/${encodeURIComponent(slug)}/stats`, { credentials: 'include' });
    return r.ok ? r.json() : null;
  }

  async function _setInteresse(slug, typ) {
    const r = await fetch(`/api/wiki/rassen/${encodeURIComponent(slug)}/interesse`, {
      method: 'POST', credentials: 'include',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ typ }),
    });
    return r.ok ? r.json() : null;
  }

  async function _deleteInteresse(slug) {
    const r = await fetch(`/api/wiki/rassen/${encodeURIComponent(slug)}/interesse`, {
      method: 'DELETE', credentials: 'include',
    });
    return r.ok ? r.json() : null;
  }

  async function _fetchZuchter(slug) {
    const r = await fetch(`/api/wiki/rassen/${encodeURIComponent(slug)}/zuchter`);
    return r.ok ? r.json() : [];
  }

  async function _submitZuchter(data) {
    const r = await fetch('/api/wiki/zuchter', {
      method: 'POST', credentials: 'include',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
    return r.ok;
  }

  // ----------------------------------------------------------
  // Render-Helfer: Steckbrief-Grid
  // ----------------------------------------------------------
  function _renderSteckbriefGrid(rasse) {
    const gewicht = (rasse.gewicht_min_kg && rasse.gewicht_max_kg)
      ? `${rasse.gewicht_min_kg}&ndash;${rasse.gewicht_max_kg} kg`
      : (rasse.gewicht_max_kg ? `bis ${rasse.gewicht_max_kg} kg` : '&mdash;');

    const kinderLabel = rasse.kinder_geeignet === true
      ? `<span style="color:var(--c-success)">&#10003; Ja</span>`
      : rasse.kinder_geeignet === false
        ? `<span style="color:var(--c-warning)">&#9889; Bedingt</span>`
        : '&mdash;';

    const wohnungLabel = rasse.wohnung_geeignet
      ? `<span style="color:var(--c-success)">&#10003; Ja</span>`
      : `<span style="color:var(--c-text-secondary)">&#10007; Besser Garten</span>`;

    const rows = [
      ['Größe',        _groesseLabel(rasse.groesse) || '&mdash;'],
      ['Gewicht',      gewicht],
      ['Lebensdauer',  _esc(rasse.lebensdauer) || '&mdash;'],
      ['Aktivität',    _aktivLabel(rasse.aktivitaet) || '&mdash;'],
      ['Eignung',      _erfahrungLabel(rasse.erfahrung) || '&mdash;'],
      ['Kinder',       kinderLabel],
      ['Wohnung',      wohnungLabel],
      ['FCI-Gruppe',   _esc(rasse.gruppe) || '&mdash;'],
    ];

    return `
      <div class="wiki-steckbrief-grid">
        ${rows.map(([label, val]) => `
          <div class="wiki-steckbrief-item">
            <span class="wiki-steckbrief-label">${label}</span>
            <span class="wiki-steckbrief-value">${val}</span>
          </div>
        `).join('')}
      </div>
    `;
  }

  // ----------------------------------------------------------
  // Render-Helfer: Interesse-Section (Social)
  // ----------------------------------------------------------
  function _renderInteresseSection(stats, slug) {
    const hatCount  = stats?.dogs_count  ?? '–';
    const willCount = stats?.will_count  ?? '–';
    const interest  = stats?.user_interest ?? null;
    const isLoggedIn = !!_appState.user;

    const hatActive  = interest === 'hat';
    const willActive = interest === 'will';

    const hatStyle  = hatActive  ? `background:var(--c-primary);color:#fff;border-color:var(--c-primary)` : '';
    const willStyle = willActive ? `background:var(--c-primary);color:#fff;border-color:var(--c-primary)` : '';

    return `
      <div class="wiki-detail-section wiki-interesse-section" id="wiki-interesse-section">
        <div class="wiki-detail-label">In der Community</div>
        <div class="wiki-interesse-counts" style="display:flex;gap:var(--space-4);margin-bottom:var(--space-3);font-size:var(--text-sm);color:var(--c-text-secondary)">
          <span id="wiki-hat-count">&#128021; <strong>${hatCount}</strong> haben diesen Hund</span>
          <span id="wiki-will-count">&#10084;&#65039; <strong>${willCount}</strong> m&ouml;chten ihn</span>
        </div>
        <div style="display:flex;gap:var(--space-2)">
          <button class="btn btn-sm wiki-interesse-btn" id="wiki-btn-hat"
                  style="flex:1;${hatStyle}"
                  data-slug="${_esc(slug)}" data-typ="hat">
            ${isLoggedIn ? '' : '&#128274; '}Ich hab einen
          </button>
          <button class="btn btn-sm wiki-interesse-btn" id="wiki-btn-will"
                  style="flex:1;${willStyle}"
                  data-slug="${_esc(slug)}" data-typ="will">
            ${isLoggedIn ? '' : '&#128274; '}Ich will einen
          </button>
        </div>
      </div>
    `;
  }

  function _bindInteresseButtons(slug) {
    document.querySelectorAll('.wiki-interesse-btn').forEach(btn => {
      btn.addEventListener('click', async () => {
        if (!_appState.user) {
          UI.toast('Bitte melde dich an, um diese Funktion zu nutzen.', 'info');
          return;
        }
        const typ = btn.dataset.typ;
        const hatBtn  = document.getElementById('wiki-btn-hat');
        const willBtn = document.getElementById('wiki-btn-will');

        // Determine current state
        const isActive = btn.style.background.includes('var(--c-primary)') || btn.style.backgroundColor;
        const currentActive = (hatBtn?.style.background || '').includes('var(--c-primary)') ? 'hat'
          : (willBtn?.style.background || '').includes('var(--c-primary)') ? 'will' : null;

        // Optimistic disable
        btn.disabled = true;
        try {
          if (currentActive === typ) {
            await _deleteInteresse(slug);
          } else {
            await _setInteresse(slug, typ);
          }
          // Reload stats and re-render counts + button states
          const stats = await _fetchStats(slug);
          if (stats) {
            const hatCount  = stats.dogs_count ?? '–';
            const willCount = stats.will_count ?? '–';
            const interest  = stats.user_interest ?? null;

            const hatEl  = document.getElementById('wiki-hat-count');
            const willEl = document.getElementById('wiki-will-count');
            if (hatEl)  hatEl.innerHTML  = `&#128021; <strong>${hatCount}</strong> haben diesen Hund`;
            if (willEl) willEl.innerHTML = `&#10084;&#65039; <strong>${willCount}</strong> m&ouml;chten ihn`;

            const activeStyle = `background:var(--c-primary);color:#fff;border-color:var(--c-primary)`;
            if (hatBtn)  { hatBtn.removeAttribute('style');  if (interest === 'hat')  hatBtn.style.cssText  = activeStyle; }
            if (willBtn) { willBtn.removeAttribute('style'); if (interest === 'will') willBtn.style.cssText = activeStyle; }
          }
        } catch {
          UI.toast.error('Aktion fehlgeschlagen.');
        }
        btn.disabled = false;
      });
    });
  }

  // ----------------------------------------------------------
  // Render-Helfer: Züchter-Sektion
  // ----------------------------------------------------------
  function _renderZuchterSection(zuchter, slug) {
    const DE_BUNDESLAENDER = [
      'Baden-Württemberg','Bayern','Berlin','Brandenburg','Bremen','Hamburg',
      'Hessen','Mecklenburg-Vorpommern','Niedersachsen','Nordrhein-Westfalen',
      'Rheinland-Pfalz','Saarland','Sachsen','Sachsen-Anhalt',
      'Schleswig-Holstein','Thüringen',
    ];

    const listHtml = zuchter.length === 0
      ? `<p style="color:var(--c-text-secondary);font-size:var(--text-sm)">Noch keine Züchter eingetragen.</p>`
      : zuchter.map(z => `
          <div class="wiki-zuchter-card" style="padding:var(--space-3);border-radius:var(--radius-md);background:var(--c-surface-2);margin-bottom:var(--space-2)">
            <div style="font-weight:var(--weight-semibold)">${_esc(z.name)}
              ${z.zwingername ? `<em style="font-weight:normal;color:var(--c-text-secondary)"> &bdquo;${_esc(z.zwingername)}&ldquo;</em>` : ''}
              ${z.vdh_mitglied ? `<span class="badge badge-sm" style="margin-left:var(--space-1);background:var(--c-primary);color:#fff">VDH</span>` : ''}
            </div>
            ${(z.ort || z.bundesland) ? `<div style="font-size:var(--text-sm);color:var(--c-text-secondary)">${[z.ort, z.bundesland].filter(Boolean).map(_esc).join(', ')}</div>` : ''}
            ${z.beschreibung ? `<p style="font-size:var(--text-sm);margin-top:var(--space-1)">${_esc(z.beschreibung)}</p>` : ''}
            ${z.website ? `<a href="${_esc(z.website)}" target="_blank" rel="noopener" style="font-size:var(--text-sm);color:var(--c-primary)">${_esc(z.website)}</a>` : ''}
          </div>
        `).join('');

    const formHtml = _appState.user ? `
      <div id="wiki-zuchter-form-wrap" style="display:none;margin-top:var(--space-3)">
        <form id="wiki-zuchter-form" autocomplete="off">
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)">
            <div class="form-group" style="grid-column:1/-1">
              <label class="form-label">Name *</label>
              <input class="form-control" name="name" required maxlength="100">
            </div>
            <div class="form-group">
              <label class="form-label">Zwingername</label>
              <input class="form-control" name="zwingername" maxlength="100">
            </div>
            <div class="form-group">
              <label class="form-label">Ort</label>
              <input class="form-control" name="ort" maxlength="80">
            </div>
            <div class="form-group">
              <label class="form-label">PLZ</label>
              <input class="form-control" name="plz" maxlength="10">
            </div>
            <div class="form-group">
              <label class="form-label">Bundesland</label>
              <select class="form-control" name="bundesland">
                <option value="">— bitte wählen —</option>
                ${DE_BUNDESLAENDER.map(bl => `<option value="${_esc(bl)}">${_esc(bl)}</option>`).join('')}
              </select>
            </div>
            <div class="form-group" style="grid-column:1/-1">
              <label class="form-label">Website</label>
              <input class="form-control" name="website" type="url" maxlength="200" placeholder="https://…">
            </div>
            <div class="form-group" style="grid-column:1/-1">
              <label class="form-label">Telefon</label>
              <input class="form-control" name="telefon" type="tel" maxlength="30">
            </div>
            <div class="form-group" style="grid-column:1/-1">
              <label class="form-label">Kurzbeschreibung</label>
              <textarea class="form-control" name="beschreibung" rows="3" maxlength="500"></textarea>
            </div>
            <div class="form-group" style="grid-column:1/-1;display:flex;align-items:center;gap:var(--space-2)">
              <input type="checkbox" id="wiki-zuchter-vdh" name="vdh_mitglied" value="1" style="width:auto">
              <label for="wiki-zuchter-vdh" style="margin:0;font-size:var(--text-sm)">VDH-Mitglied</label>
            </div>
          </div>
          <div id="wiki-zuchter-success" style="display:none;color:var(--c-success);padding:var(--space-3);text-align:center;font-size:var(--text-sm)">
            Vielen Dank! Dein Eintrag wird geprüft.
          </div>
          <div style="display:flex;gap:var(--space-2);margin-top:var(--space-2)">
            <button type="button" class="btn btn-ghost flex-1" id="wiki-zuchter-cancel">Abbrechen</button>
            <button type="submit" class="btn btn-primary flex-1" id="wiki-zuchter-submit">Eintragen</button>
          </div>
        </form>
      </div>
      <button class="btn btn-secondary btn-sm" id="wiki-zuchter-add-btn" style="margin-top:var(--space-3)">
        + Züchter eintragen
      </button>
    ` : '';

    return `
      <div class="wiki-detail-section" id="wiki-zuchter-section">
        <div class="wiki-detail-label">Züchter</div>
        <div id="wiki-zuchter-list">${listHtml}</div>
        ${formHtml}
      </div>
    `;
  }

  function _bindZuchterForm(slug) {
    const addBtn    = document.getElementById('wiki-zuchter-add-btn');
    const cancelBtn = document.getElementById('wiki-zuchter-cancel');
    const formWrap  = document.getElementById('wiki-zuchter-form-wrap');
    const form      = document.getElementById('wiki-zuchter-form');

    addBtn?.addEventListener('click', () => {
      formWrap.style.display = '';
      addBtn.style.display = 'none';
    });

    cancelBtn?.addEventListener('click', () => {
      formWrap.style.display = 'none';
      addBtn.style.display = '';
    });

    form?.addEventListener('submit', async e => {
      e.preventDefault();
      const submitBtn = document.getElementById('wiki-zuchter-submit');
      const fd = new FormData(form);
      const data = {
        rasse_slug:   slug,
        name:         fd.get('name'),
        zwingername:  fd.get('zwingername') || null,
        ort:          fd.get('ort') || null,
        plz:          fd.get('plz') || null,
        bundesland:   fd.get('bundesland') || null,
        vdh_mitglied: fd.get('vdh_mitglied') === '1',
        website:      fd.get('website') || null,
        telefon:      fd.get('telefon') || null,
        beschreibung: fd.get('beschreibung') || null,
      };

      submitBtn.disabled = true;
      submitBtn.textContent = 'Wird gesendet…';

      const ok = await _submitZuchter(data);
      if (ok) {
        form.reset();
        document.getElementById('wiki-zuchter-success').style.display = '';
        // Hide submit row
        submitBtn.closest('div[style*="flex"]').style.display = 'none';
      } else {
        UI.toast.error('Fehler beim Einsenden. Bitte versuche es erneut.');
        submitBtn.disabled = false;
        submitBtn.textContent = 'Eintragen';
      }
    });
  }

  async function _openBreedDetail(slug) {
    let rasse;
    try {
      rasse = await _apiFetch(`/api/wiki/rassen/${slug}`);
    } catch {
      UI.toast.error('Rasse konnte nicht geladen werden.');
      return;
    }

    // Temperament chips
    const chips = rasse.temperament
      ? rasse.temperament.split(',').map(t => `<span class="wiki-trait-chip">${_esc(t.trim())}</span>`).join('')
      : '';

    const _dogSvgLg = _DOG_SILHOUETTE.replace('width="48" height="48"', 'width="56" height="56"');
    const photoHtml = rasse.foto_url
      ? `<div class="wiki-detail-hero-photo-wrap">
           <img class="wiki-detail-photo" src="${_esc(rasse.foto_url)}" alt="${_esc(rasse.name)}"
                onerror="this.parentElement.style.display='none';this.parentElement.nextElementSibling.style.display='flex'">
         </div>
         <div class="wiki-detail-photo-placeholder" style="display:none">${_dogSvgLg}<span>Kein Foto verfügbar</span></div>`
      : `<div class="wiki-detail-photo-placeholder">${_dogSvgLg}<span>Kein Foto verfügbar</span></div>`;

    const berichteHtml = _renderBerichteHtml(rasse.berichte || [], slug);

    const userFotosHtml = (rasse.user_fotos || []).length
      ? `<div style="margin-top:var(--space-3)">
           <div style="font-size:var(--text-xs);color:var(--c-text-muted);
                       font-weight:700;text-transform:uppercase;letter-spacing:.05em;
                       margin-bottom:var(--space-2)"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#camera"></use></svg> Community-Fotos</div>
           <div style="display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:4px">
             ${rasse.user_fotos.map(f => `
               <div style="flex-shrink:0">
                 <img src="${_esc(f.foto_url)}" alt="${_esc(f.user_name)}"
                      style="height:80px;width:80px;object-fit:cover;
                             border-radius:var(--radius-md);cursor:pointer"
                      onclick="document.querySelector('.wiki-detail-photo')?.setAttribute('src','${_esc(f.foto_url)}')">
                 <div style="font-size:9px;color:var(--c-text-muted);text-align:center;
                             margin-top:2px;max-width:80px;overflow:hidden;text-overflow:ellipsis;
                             white-space:nowrap">von ${_esc(f.user_name)}</div>
               </div>
             `).join('')}
           </div>
         </div>`
      : '';

    const body = `
      ${/* 1. Hero */ ''}
      <div class="wiki-detail-hero" style="text-align:center;margin-bottom:var(--space-4)">
        ${photoHtml}
        ${userFotosHtml}
        <h1 style="font-size:var(--text-xl);font-weight:var(--weight-bold);margin:var(--space-2) 0 var(--space-1)">${_esc(rasse.name)}</h1>
        ${rasse.herkunft ? `<div style="font-size:var(--text-sm);color:var(--c-text-secondary)">${UI.icon('map-pin')} ${_esc(rasse.herkunft)}</div>` : ''}
        ${rasse.gruppe   ? `<div style="font-size:var(--text-sm);color:var(--c-text-muted);margin-top:2px">${_esc(rasse.gruppe)}</div>` : ''}
      </div>

      ${/* 2. Charakter-Badges */ chips ? `
      <div class="wiki-detail-section">
        <div class="wiki-detail-label">Charakter</div>
        <div class="wiki-trait-chips">${chips}</div>
      </div>` : ''}

      ${/* 3. Beschreibung */ rasse.beschreibung ? `
      <div class="wiki-detail-section">
        <div class="wiki-detail-label">Beschreibung</div>
        <p style="line-height:1.6;color:var(--c-text)">${_esc(rasse.beschreibung)}</p>
      </div>` : (rasse.bred_for ? `
      <div class="wiki-detail-section">
        <div class="wiki-detail-label">Ursprüngliche Aufgabe</div>
        <p style="line-height:1.6;color:var(--c-text)">${_esc(rasse.bred_for)}</p>
      </div>` : '')}

      ${/* 4. Steckbrief */ _renderSteckbriefGrid(rasse)}

      ${/* 5. Vorkommen */ rasse.vorkommen_de ? `
      <div class="wiki-detail-section">
        <div class="wiki-detail-label">Vorkommen in Deutschland</div>
        <p style="line-height:1.6;color:var(--c-text)">${_esc(rasse.vorkommen_de)}</p>
      </div>` : ''}

      ${/* 6. Interesse — wird async befüllt */ `
      <div id="wiki-interesse-placeholder">
        <div class="wiki-detail-section" style="opacity:0.5">
          <div class="wiki-detail-label">In der Community</div>
          <div style="height:60px;background:var(--c-surface-2);border-radius:var(--radius-md)"></div>
        </div>
      </div>`}

      ${/* 7. Züchter — wird async befüllt */ `
      <div id="wiki-zuchter-placeholder">
        <div class="wiki-detail-section" style="opacity:0.5">
          <div class="wiki-detail-label">Züchter</div>
          <div style="height:40px;background:var(--c-surface-2);border-radius:var(--radius-md)"></div>
        </div>
      </div>`}

      ${/* 8. Community-Berichte */ `
      <div class="wiki-detail-section" id="wiki-berichte-section">
        <div class="wiki-detail-label">Community-Berichte</div>
        ${berichteHtml}
      </div>
      ${_appState.user
        ? `<button class="btn btn-secondary w-full" id="wiki-bericht-add-btn" style="margin-top:var(--space-3)">+ Eigenen Bericht hinzufügen</button>`
        : `<p style="color:var(--c-text-secondary);font-size:var(--text-sm);margin-top:var(--space-3)">
             <a href="#settings" style="color:var(--c-primary)">Anmelden</a>, um einen Bericht zu schreiben.
           </p>`
      }
      ${_appState.user ? `
        <div style="margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--c-border-light)">
          <button class="btn btn-ghost w-full" id="wiki-foto-submit-btn" style="font-size:var(--text-sm)">
            ${UI.icon('camera')} ${rasse.foto_url ? 'Besseres Foto vorschlagen' : 'Foto hinzufügen'}
          </button>
        </div>` : ''}`}
    `;

    UI.modal.open({ title: _esc(rasse.name), body });

    // Async: load stats + züchter in parallel
    Promise.all([_fetchStats(slug), _fetchZuchter(slug)]).then(([stats, zuchter]) => {
      const interessePlaceholder = document.getElementById('wiki-interesse-placeholder');
      if (interessePlaceholder) {
        interessePlaceholder.outerHTML = _renderInteresseSection(stats, slug);
        _bindInteresseButtons(slug);
      }

      const zuchterPlaceholder = document.getElementById('wiki-zuchter-placeholder');
      if (zuchterPlaceholder) {
        zuchterPlaceholder.outerHTML = _renderZuchterSection(zuchter || [], slug);
        _bindZuchterForm(slug);
      }
    }).catch(() => {
      // Silently remove placeholders on error
      document.getElementById('wiki-interesse-placeholder')?.remove();
      document.getElementById('wiki-zuchter-placeholder')?.remove();
    });

    document.getElementById('wiki-bericht-add-btn')?.addEventListener('click', () => {
      UI.modal.close();
      setTimeout(() => _showBerichtForm(slug, rasse.name), 350);
    });

    document.getElementById('wiki-foto-submit-btn')?.addEventListener('click', () => {
      UI.modal.close();
      setTimeout(() => _showFotoSubmitForm(slug, rasse.name), 350);
    });
  }

  // ----------------------------------------------------------
  // Foto vorschlagen
  // ----------------------------------------------------------
  function _showFotoSubmitForm(slug, rasseName) {
    const body = `
      <p style="color:var(--c-text-secondary);font-size:var(--text-sm);margin-bottom:var(--space-4)">
        Dein Foto wird nach einer kurzen Prüfung freigeschaltet und als Hauptbild im Wiki verwendet.
      </p>
      <form id="wiki-foto-form" autocomplete="off">
        <div class="form-group">
          <label class="form-label">Foto von <strong>${_esc(rasseName)}</strong></label>
          <input class="form-control" type="file" id="wiki-foto-input"
                 accept="image/jpeg,image/png,image/webp" required>
          <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:4px">
            JPG, PNG oder WebP · max. 8 MB · möglichst hochauflösend
          </div>
        </div>
        <div id="wiki-foto-preview" style="margin-top:var(--space-3);display:none">
          <img id="wiki-foto-preview-img" style="max-width:100%;max-height:200px;border-radius:var(--radius-md);object-fit:contain">
        </div>
        <div style="margin-top:var(--space-4);padding:var(--space-3);
                    background:var(--c-surface-2);border-radius:var(--radius-md);
                    border-left:3px solid var(--c-warning)">
          <label style="display:flex;gap:var(--space-3);align-items:flex-start;cursor:pointer">
            <input type="checkbox" id="wiki-foto-rights" style="margin-top:3px;flex-shrink:0">
            <span style="font-size:var(--text-sm);line-height:1.5">
              Ich bestätige, dass ich die <strong>uneingeschränkten Bildrechte</strong> an diesem Foto besitze
              und banyaro.app das dauerhaft gültige, kostenlose Recht einräume, es zu veröffentlichen und zu
              verwenden. Fotos aus dem Internet oder von Dritten dürfen nicht eingereicht werden.
            </span>
          </label>
        </div>
      </form>
    `;
    const footer = `
      <button type="button" class="btn btn-secondary flex-1" id="wiki-foto-cancel">Abbrechen</button>
      <button type="submit" form="wiki-foto-form" class="btn btn-primary flex-1" id="wiki-foto-submit" disabled>
        ${UI.icon('paper-plane-tilt')} Einreichen
      </button>
    `;

    UI.modal.open({ title: 'Foto vorschlagen', body, footer });
    document.getElementById('wiki-foto-cancel')?.addEventListener('click', UI.modal.close);

    document.getElementById('wiki-foto-rights')?.addEventListener('change', e => {
      document.getElementById('wiki-foto-submit').disabled = !e.target.checked;
    });

    document.getElementById('wiki-foto-input')?.addEventListener('change', e => {
      const file = e.target.files?.[0];
      if (!file) return;
      const preview = document.getElementById('wiki-foto-preview');
      const img     = document.getElementById('wiki-foto-preview-img');
      const url     = URL.createObjectURL(file);
      img.src = url;
      preview.style.display = '';
    });

    document.getElementById('wiki-foto-form')?.addEventListener('submit', async e => {
      e.preventDefault();
      const input = document.getElementById('wiki-foto-input');
      const file  = input?.files?.[0];
      if (!file) return;
      if (!document.getElementById('wiki-foto-rights')?.checked) {
        UI.toast('Bitte Bildrechte bestätigen.', 'danger');
        return;
      }

      const btn = document.getElementById('wiki-foto-submit');
      btn.disabled = true;
      btn.textContent = 'Wird hochgeladen…';

      try {
        const fd = new FormData();
        fd.append('file', file);
        fd.append('rights_confirmed', '1');
        const token = localStorage.getItem('by_token');
        const resp  = await fetch(`/api/wiki/rassen/${encodeURIComponent(slug)}/foto`, {
          method: 'POST',
          credentials: 'include',
          headers: token ? { 'Authorization': `Bearer ${token}` } : {},
          body: fd,
        });
        if (!resp.ok) {
          const err = await resp.json().catch(() => ({}));
          throw new Error(err.detail || 'Upload fehlgeschlagen');
        }
        UI.modal.close();
        UI.toast('Danke! Dein Foto wird geprüft und dann veröffentlicht.', 'success');
      } catch (err) {
        UI.toast(err.message, 'danger');
        btn.disabled = false;
        btn.innerHTML = `${UI.icon('paper-plane-tilt')} Einreichen`;
      }
    });
  }

  function _renderBerichteHtml(berichte, slug) {
    if (!berichte || berichte.length === 0) {
      return `<p style="color:var(--c-text-secondary);font-size:var(--text-sm)">Noch keine Community-Berichte für diese Rasse.</p>`;
    }
    return berichte.map(b => `
      <div class="wiki-bericht-item" data-id="${b.id}">
        <div class="wiki-bericht-header">
          <span class="wiki-bericht-autor">${_esc(b.autor)}</span>
          <span class="wiki-bericht-date">${_formatDate(b.created_at)}</span>
          ${_appState.user && _appState.user.name === b.autor
            ? `<button class="btn btn-danger btn-xs wiki-bericht-del" data-id="${b.id}" data-slug="${_esc(slug)}" style="margin-left:auto;padding:2px 8px;font-size:0.7rem">Löschen</button>`
            : ''}
        </div>
        <div class="wiki-bericht-titel">${_esc(b.titel)}</div>
        <p class="wiki-bericht-text">${_esc(b.text)}</p>
      </div>
    `).join('');
  }

  function _showBerichtForm(slug, rasseName) {
    const body = `
      <form id="wiki-bericht-form" autocomplete="off">
        <div class="form-group">
          <label class="form-label">Rasse</label>
          <input class="form-control" type="text" value="${_esc(rasseName)}" disabled>
        </div>
        <div class="form-group">
          <label class="form-label">Titel</label>
          <input class="form-control" type="text" name="titel" maxlength="120" placeholder="z.B. Mein Erfahrungsbericht" required>
        </div>
        <div class="form-group">
          <label class="form-label">Bericht</label>
          <textarea class="form-control" name="text" rows="6" placeholder="Deine Erfahrungen mit dieser Rasse…" required></textarea>
        </div>
      </form>
    `;
    const footer = `
      <button type="button" class="btn btn-secondary flex-1" id="wiki-bericht-cancel">Abbrechen</button>
      <button type="submit" form="wiki-bericht-form" class="btn btn-primary flex-1">Veröffentlichen</button>
    `;

    UI.modal.open({ title: 'Bericht schreiben', body, footer });
    document.getElementById('wiki-bericht-cancel')?.addEventListener('click', UI.modal.close);

    const form = document.getElementById('wiki-bericht-form');
    setTimeout(() => form?.querySelector('[name="titel"]')?.focus(), 150);

    form.addEventListener('submit', async e => {
      e.preventDefault();
      const submitBtn = document.querySelector('[form="wiki-bericht-form"][type="submit"]');
      const fd = UI.formData(form);

      await UI.asyncButton(submitBtn, async () => {
        try {
          await _apiPost('/api/wiki/berichte', { rasse: slug, titel: fd.titel, text: fd.text });
          UI.modal.close();
          UI.toast.success('Bericht veröffentlicht!');
        } catch (err) {
          UI.toast.error(err.message || 'Fehler beim Veröffentlichen.');
        }
      });
    });
  }

  // ----------------------------------------------------------
  // TAB: Gesundheit
  // ----------------------------------------------------------
  function _renderGesundheit(el) {
    const items = GESUNDHEIT.map((s, i) => `
      <div class="wiki-section" data-idx="${i}">
        <div class="wiki-section-header">
          <span class="wiki-section-icon">${UI.icon(s.icon)}</span>
          <span class="wiki-section-titel">${_esc(s.titel)}</span>
          <span class="wiki-section-arrow">${UI.icon('caret-down')}</span>
        </div>
        <div class="wiki-section-body" style="display:none">
          <p style="white-space:pre-wrap;line-height:1.6;color:var(--c-text)">${_esc(s.text)}</p>
        </div>
      </div>
    `).join('');

    el.innerHTML = `<div class="wiki-accordion">${items}</div>`;

    el.querySelectorAll('.wiki-section').forEach(sec => {
      sec.querySelector('.wiki-section-header').addEventListener('click', () => {
        const body  = sec.querySelector('.wiki-section-body');
        const arrow = sec.querySelector('.wiki-section-arrow');
        const open  = body.style.display !== 'none';
        body.style.display  = open ? 'none' : 'block';
        arrow.innerHTML     = open ? UI.icon('caret-down') : UI.icon('caret-up');
        sec.classList.toggle('open', !open);
      });
    });
  }

  // ----------------------------------------------------------
  // TAB: Recht & Regeln
  // ----------------------------------------------------------
  function _renderRecht(el) {
    const items = RECHT.map((r, i) => `
      <div class="wiki-section" data-idx="${i}">
        <div class="wiki-section-header">
          <span class="wiki-section-icon">${UI.icon('map-pin')}</span>
          <span class="wiki-section-titel">${_esc(r.land)}</span>
          <span class="wiki-section-arrow">${UI.icon('caret-down')}</span>
        </div>
        <div class="wiki-section-body" style="display:none">
          <div class="wiki-recht-row"><span class="wiki-recht-label">Leinenpflicht</span><span>${_esc(r.leine)}</span></div>
          <div class="wiki-recht-row"><span class="wiki-recht-label">Rasseliste</span><span>${_esc(r.rasse)}</span></div>
          <div class="wiki-recht-row"><span class="wiki-recht-label">Hundesteuer</span><span>${_esc(r.steuer)}</span></div>
        </div>
      </div>
    `).join('');

    el.innerHTML = `
      <div class="wiki-accordion">${items}</div>
      <p class="wiki-disclaimer">Angaben ohne Gewähr — Regelungen ändern sich. Bitte beim zuständigen Ordnungsamt prüfen.</p>
    `;

    el.querySelectorAll('.wiki-section').forEach(sec => {
      sec.querySelector('.wiki-section-header').addEventListener('click', () => {
        const body  = sec.querySelector('.wiki-section-body');
        const arrow = sec.querySelector('.wiki-section-arrow');
        const open  = body.style.display !== 'none';
        body.style.display  = open ? 'none' : 'block';
        arrow.innerHTML     = open ? UI.icon('caret-down') : UI.icon('caret-up');
        sec.classList.toggle('open', !open);
      });
    });
  }

  // ----------------------------------------------------------
  // TAB: Quiz
  // ----------------------------------------------------------
  function _renderQuiz(el) {
    _quizAnswers = {};
    _quizStep    = 0;
    _renderQuizStep(el);
  }

  function _renderQuizStep(el) {
    if (_quizStep >= QUIZ_FRAGEN.length) {
      _loadQuizResult(el);
      return;
    }

    const frage    = QUIZ_FRAGEN[_quizStep];
    const progress = Math.round((_quizStep / QUIZ_FRAGEN.length) * 100);

    const optionsHtml = frage.optionen.map(o => `
      <button class="wiki-quiz-option${_quizAnswers[frage.key] === o.val ? ' selected' : ''}"
              data-key="${_esc(frage.key)}" data-val="${_esc(o.val)}">
        ${_esc(o.label)}
      </button>
    `).join('');

    el.innerHTML = `
      <div class="wiki-quiz-wrap">
        <div class="wiki-quiz-progress-bar">
          <div class="wiki-quiz-progress" style="width:${progress}%"></div>
        </div>
        <p class="wiki-quiz-step-info">Frage ${_quizStep + 1} von ${QUIZ_FRAGEN.length}</p>
        <p class="wiki-quiz-frage">${_esc(frage.frage)}</p>
        <div class="wiki-quiz-options">${optionsHtml}</div>
        <div class="wiki-quiz-nav">
          ${_quizStep > 0
            ? `<button class="btn btn-secondary" id="quiz-back">Zurück</button>`
            : '<span></span>'}
        </div>
      </div>
    `;

    el.querySelectorAll('.wiki-quiz-option').forEach(btn => {
      btn.addEventListener('click', () => {
        _quizAnswers[btn.dataset.key] = btn.dataset.val;
        _quizStep++;
        _renderQuizStep(el);
      });
    });

    el.querySelector('#quiz-back')?.addEventListener('click', () => {
      _quizStep--;
      const prevKey = QUIZ_FRAGEN[_quizStep].key;
      delete _quizAnswers[prevKey];
      _renderQuizStep(el);
    });
  }

  async function _loadQuizResult(el) {
    el.innerHTML = `<div style="text-align:center;padding:var(--space-8)">Berechne Ergebnis…</div>`;

    const params = new URLSearchParams(_quizAnswers).toString();
    let data;
    try {
      data = await _apiFetch(`/api/wiki/quiz/result?${params}`);
    } catch {
      el.innerHTML = UI.emptyState({ icon: UI.icon('warning'), title: 'Fehler', text: 'Ergebnis konnte nicht geladen werden.' });
      return;
    }

    const cardsHtml = data.results.map(r => {
      const photoHtml = r.foto_url
        ? `<img class="wiki-quiz-result-photo" src="${_esc(r.foto_url)}" loading="lazy" alt="${_esc(r.name)}" onerror="this.style.display='none'">`
        : `<div class="wiki-quiz-result-photo-fallback">${UI.icon('dog')}</div>`;
      return `
        <div class="wiki-quiz-result-card">
          <div class="wiki-quiz-result-photo-wrap">${photoHtml}</div>
          <div class="wiki-quiz-result-card-body">
            <div class="wiki-quiz-result-name">${_esc(r.name)}</div>
            <div class="wiki-quiz-result-gruppe">${_esc(r.gruppe || '')}</div>
            <div class="wiki-breed-badges" style="margin:var(--space-2) 0">
              <span class="wiki-badge-groesse wiki-badge-groesse--${_esc(r.groesse)}">${_groesseLabel(r.groesse)}</span>
              <span class="wiki-badge-aktivitaet wiki-badge-aktivitaet--${_esc(r.aktivitaet)}">${_aktivLabel(r.aktivitaet)}</span>
            </div>
            ${r.temperament ? `<p class="wiki-quiz-result-char">${_esc(r.temperament.split(',').slice(0,4).join(', '))}</p>` : ''}
            <div class="wiki-fit-row" style="font-size:var(--text-xs);margin-top:var(--space-1)">
              <span>${UI.icon('house-line')} ${r.wohnung_geeignet ? 'Wohnung' : 'Haus'}</span>
              <span>${UI.icon('users')} ${r.kinder_geeignet ? 'Kinderfreundlich' : 'Erfahrung nötig'}</span>
            </div>
            <button class="btn btn-secondary btn-sm wiki-quiz-mehr" data-slug="${_esc(r.slug)}" style="margin-top:var(--space-2)">Mehr erfahren</button>
          </div>
        </div>
      `;
    }).join('');

    el.innerHTML = `
      <div class="wiki-quiz-wrap">
        <div class="wiki-quiz-progress-bar">
          <div class="wiki-quiz-progress" style="width:100%"></div>
        </div>
        <h3 style="margin:var(--space-4) 0 var(--space-2);text-align:center">Deine Top 3 Rassen</h3>
        <div class="wiki-quiz-results">${cardsHtml}</div>
        <button class="btn btn-secondary w-full" id="quiz-restart" style="margin-top:var(--space-4)">Quiz neu starten</button>
      </div>
    `;

    el.querySelectorAll('.wiki-quiz-mehr').forEach(btn => {
      btn.addEventListener('click', () => {
        _tab = 'rassen';
        _container.querySelectorAll('.by-tab').forEach(b => b.classList.toggle('active', b.dataset.tab === 'rassen'));
        _openBreedDetail(btn.dataset.slug);
      });
    });

    el.querySelector('#quiz-restart')?.addEventListener('click', () => {
      _renderQuiz(el);
    });
  }

  // ----------------------------------------------------------
  // HELPER: API-Fetch
  // ----------------------------------------------------------
  async function _apiFetch(url) {
    const resp = await fetch(url, { credentials: 'include' });
    if (!resp.ok) {
      const err = await resp.json().catch(() => ({}));
      throw new Error(err.detail || `HTTP ${resp.status}`);
    }
    return resp.json();
  }

  async function _apiPatch(url, body) {
    const token = localStorage.getItem('by_token');
    const resp  = await fetch(url, {
      method:  'PATCH',
      headers: { 'Content-Type': 'application/json', ...(token ? { 'Authorization': `Bearer ${token}` } : {}) },
      credentials: 'include',
      body: JSON.stringify(body),
    });
    if (!resp.ok) {
      const err = await resp.json().catch(() => ({}));
      throw new Error(err.detail || `HTTP ${resp.status}`);
    }
    return resp.json();
  }

  async function _apiPost(url, body) {
    const resp = await fetch(url, {
      method:  'POST',
      headers: { 'Content-Type': 'application/json' },
      credentials: 'include',
      body: JSON.stringify(body),
    });
    if (!resp.ok) {
      const err = await resp.json().catch(() => ({}));
      throw new Error(err.detail || `HTTP ${resp.status}`);
    }
    return resp.json();
  }

  // ----------------------------------------------------------
  // HELPER: Labels
  // ----------------------------------------------------------
  function _groesseLabel(g) {
    return { klein: 'Klein', mittel: 'Mittel', gross: 'Groß', sehr_gross: 'Sehr groß' }[g] || g;
  }

  function _aktivLabel(a) {
    return { niedrig: 'Ruhig', mittel: 'Aktiv', hoch: 'Sportlich', sehr_hoch: 'Sehr aktiv' }[a] || a;
  }

  function _erfahrungLabel(e) {
    return { anfaenger: 'Anfänger', fortgeschritten: 'Erfahren', experte: 'Experte' }[e] || e;
  }

  function _formatDate(iso) {
    if (!iso) return '';
    try {
      return new Date(iso).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
    } catch { return iso; }
  }

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

  // ----------------------------------------------------------
  // RASSEN-ERKENNUNG PER KI (Wiki-Tab)
  // ----------------------------------------------------------
  function _bindWikiRasseErkennung(el) {
    const btn       = el.querySelector('#wiki-rasse-erkennen-btn');
    const fileInput = el.querySelector('#wiki-rasse-foto-input');
    if (!btn || !fileInput) return;

    btn.addEventListener('click', () => {
      if (!_appState.user) {
        UI.toast('Bitte melde dich an, um diese Funktion zu nutzen.', 'info');
        return;
      }
      fileInput.value = '';
      fileInput.click();
    });

    fileInput.addEventListener('change', async () => {
      const file = fileInput.files[0];
      if (!file) return;

      if (file.size > 5 * 1024 * 1024) {
        UI.toast('Bild zu groß (max. 5 MB).', 'danger');
        return;
      }

      const origHtml = btn.innerHTML;
      btn.disabled = true;
      btn.innerHTML = `<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#spinner"></use></svg> KI analysiert das Bild…`;

      try {
        const fd = new FormData();
        fd.append('file', file);
        const token = localStorage.getItem('by_token');
        const resp = await fetch('/api/ki/rasse-erkennung', {
          method: 'POST',
          credentials: 'include',
          headers: token ? { 'Authorization': `Bearer ${token}` } : {},
          body: fd,
        });
        const data = await resp.json();
        if (!resp.ok) throw new Error(data.detail || 'Fehler bei der Erkennung.');

        btn.disabled = false;
        btn.innerHTML = origHtml;
        _showWikiRasseErgebnis(data);
      } catch (e) {
        btn.disabled = false;
        btn.innerHTML = origHtml;
        UI.toast(e.message || 'Fehler bei der Rassen-Erkennung.', 'danger');
      }
    });
  }

  function _showWikiRasseErgebnis(data) {
    if (!data.ist_hund) {
      UI.modal.open({
        title: 'Kein Hund erkannt',
        body: `<div style="text-align:center;padding:var(--space-6) var(--space-2)">
          <div style="font-size:3rem;margin-bottom:var(--space-3)">🐾</div>
          <p style="color:var(--c-text-secondary)">
            Auf diesem Foto konnte kein Hund erkannt werden.<br>
            Bitte lade ein deutlicheres Foto hoch.
          </p>
          ${data.hinweis ? `<p style="font-size:var(--text-sm);color:var(--c-text-muted);margin-top:var(--space-3)">${_esc(data.hinweis)}</p>` : ''}
        </div>`,
        footer: `<button class="btn btn-secondary" onclick="UI.modal.close()">Schließen</button>`,
      });
      return;
    }

    const rassen = data.rassen || [];
    const cardsHtml = rassen.map((r, i) => {
      const isTop = i === 0;
      return `
        <div class="rasse-result-card${isTop ? ' rasse-result-card--top' : ''}">
          <div style="display:flex;align-items:center;justify-content:space-between">
            <div class="rasse-result-name">${isTop ? '🐕 ' : ''}${_esc(r.name)}</div>
            <span class="rasse-result-pct${isTop ? '' : ' rasse-result-pct--dim'}">${r.sicherheit}%</span>
          </div>
          <div class="rasse-result-bar-wrap">
            <div class="rasse-result-bar${isTop ? '' : ' rasse-result-bar--dim'}"
                 style="width:${r.sicherheit}%"></div>
          </div>
          ${r.beschreibung ? `<div class="rasse-result-desc">${_esc(r.beschreibung)}</div>` : ''}
          ${r.wiki_slug ? `
          <div style="margin-top:var(--space-3)">
            <button class="btn btn-${isTop ? 'primary' : 'secondary'} btn-sm w-full"
                    data-action="wiki" data-slug="${_esc(r.wiki_slug)}">
              Im Wiki nachschlagen
            </button>
          </div>` : ''}
        </div>
      `;
    }).join('');

    UI.modal.open({
      title: 'Erkannte Rasse',
      body: `
        <div style="padding-bottom:var(--space-2)">
          ${data.hinweis ? `<div style="background:var(--c-surface-2);border-radius:var(--radius-md);
              padding:var(--space-3);margin-bottom:var(--space-3);font-size:var(--text-sm);
              color:var(--c-text-secondary)">ℹ️ ${_esc(data.hinweis)}</div>` : ''}
          ${cardsHtml}
          <p style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:var(--space-2);
                    text-align:center">
            Noch ${data.verbleibende_anfragen} Erkennung${data.verbleibende_anfragen !== 1 ? 'en' : ''} heute verfügbar
          </p>
        </div>
      `,
      footer: `<button class="btn btn-secondary" id="wiki-rasse-modal-schliessen">Schließen</button>`,
    });

    document.getElementById('wiki-rasse-modal-schliessen')
      ?.addEventListener('click', UI.modal.close);

    document.querySelectorAll('[data-action="wiki"]').forEach(btn => {
      btn.addEventListener('click', () => {
        UI.modal.close();
        setTimeout(() => _openBreedDetail(btn.dataset.slug), 300);
      });
    });
  }

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

})();
