/* ============================================================
   BAN YARO — Zuchtkartei
   Züchter verwalten ihre Hunde inkl. Gesundheitstests,
   Gentests und Titel.
   ============================================================ */

window.Page_zuchthunde = (() => {

  let _container = null;
  let _appState  = null;
  let _hunde     = [];        // geladene Hunde
  let _query     = '';        // Suchtext
  let _openSections = {};     // { <hundId>: 'health'|'genetic'|'titles'|null }
  let _breederId    = null;   // ID des Züchter-Profils
  let _breederInfo  = null;  // { zwingername, logo_url }

  // ----------------------------------------------------------
  // Hilfsfunktionen
  // ----------------------------------------------------------
  function _esc(s) {
    return UI.escape ? UI.escape(s || '') : (s || '').replace(/[&<>"']/g, c =>
      ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
  }

  function _fmtDate(iso) {
    if (!iso) return '—';
    const d = new Date(iso + 'T12:00:00');
    return d.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
  }

  function _genderIcon(g) {
    if (g === 'maennlich') return UI.icon('gender-male');
    if (g === 'weiblich')  return UI.icon('gender-female');
    return UI.icon('dog');
  }

  // ----------------------------------------------------------
  // Badge-Farben
  // ----------------------------------------------------------
  function _healthBadge(testTyp, ergebnis) {
    const e = (ergebnis || '').trim().toUpperCase();
    let color = '#6B7280'; // neutral grau

    if (testTyp === 'HD') {
      if      (['A1','A2','A'].includes(e))       color = '#22C55E'; // grün
      else if (['B1','B2','B'].includes(e))       color = '#86EFAC'; // hellgrün
      else if (e === 'C')                         color = '#EAB308'; // gelb
      else if (e === 'D')                         color = '#F97316'; // orange
      else if (e === 'E')                         color = '#EF4444'; // rot
    } else if (testTyp === 'ED') {
      if      (e === '0' || e === 'ED 0')         color = '#22C55E';
      else if (e === '1' || e === 'ED 1')         color = '#EAB308';
      else if (e === '2' || e === 'ED 2')         color = '#F97316';
      else if (e === '3' || e === 'ED 3')         color = '#EF4444';
    }

    return `<span class="zh-badge" style="background:${color}">${_esc(ergebnis || '—')}</span>`;
  }

  function _geneticBadge(ergebnis) {
    const e = (ergebnis || '').toLowerCase().trim();
    let color = '#6B7280';
    if (e === 'clear')    color = '#22C55E';
    if (e === 'carrier')  color = '#EAB308';
    if (e === 'affected') color = '#EF4444';
    return `<span class="zh-badge" style="background:${color}">${_esc(ergebnis || '—')}</span>`;
  }

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

    const u = _appState.user;
    if (!u || (u.rolle !== 'breeder' && u.rolle !== 'admin')) {
      _container.innerHTML = `
        <div style="text-align:center;padding:var(--space-10) var(--space-4)">
          <div style="font-size:3rem;margin-bottom:var(--space-3)">${UI.icon('lock')}</div>
          <h3 style="margin:0 0 var(--space-2)">Kein Zugriff</h3>
          <p style="color:var(--c-text-secondary);margin:0">Diese Seite ist nur für verifizierte Züchter.</p>
        </div>`;
      return;
    }

    _render();
    await _load();
  }

  function refresh() {
    const u = _appState?.user;
    if (!u || (u.rolle !== 'breeder' && u.rolle !== 'admin')) return;
    _load();
  }

  function onDogChange() {}

  // ----------------------------------------------------------
  // Grundstruktur
  // ----------------------------------------------------------
  function _privateHeader() {
    const zwinger = _breederInfo?.zwingername || 'Mein Zwinger';
    const logoUrl = _breederInfo?.logo_url   || null;
    const logoHtml = logoUrl
      ? `<img src="${_esc(logoUrl)}" alt="Logo"
              style="width:48px;height:48px;border-radius:50%;object-fit:cover;
                     border:2px solid rgba(196,132,58,.5);flex-shrink:0"
              onerror="this.style.display='none'">`
      : `<div style="width:48px;height:48px;border-radius:50%;background:rgba(196,132,58,.15);
                     border:2px solid rgba(196,132,58,.4);display:flex;align-items:center;
                     justify-content:center;flex-shrink:0">
           <svg style="width:24px;height:24px;color:var(--c-primary)" viewBox="0 0 256 256">
             <use href="/icons/phosphor.svg#paw-print"></use>
           </svg>
         </div>`;
    return `
      <div id="breeder-private-header" style="background:linear-gradient(135deg,#1a1208,#2d1f0e);
                  border-bottom:1px solid rgba(196,132,58,.25);
                  padding:var(--space-3) var(--space-4);
                  display:flex;align-items:center;gap:var(--space-3)">
        ${logoHtml}
        <div style="flex:1;min-width:0">
          <h2 style="margin:0 0 2px;font-size:var(--text-lg);font-weight:700;
                     color:rgba(255,255,255,.95);white-space:nowrap;overflow:hidden;
                     text-overflow:ellipsis;line-height:1.2">${_esc(zwinger)}</h2>
          <div style="display:flex;align-items:center;gap:var(--space-2)">
            <svg style="width:11px;height:11px;color:var(--c-primary);flex-shrink:0" viewBox="0 0 256 256">
              <use href="/icons/phosphor.svg#lock-key"></use>
            </svg>
            <span style="font-size:var(--text-xs);color:rgba(196,132,58,.7)">Privater Bereich · Nur du siehst das</span>
          </div>
        </div>
      </div>`;
  }

  function _render() {
    _container.innerHTML = `
      <div class="zh-layout">
        ${_privateHeader()}
        <div class="by-toolbar" style="flex-wrap:wrap">
          <h2 style="margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold);flex-shrink:0;white-space:nowrap">
            ${UI.icon('dog')} Zuchtkartei
          </h2>
          <button class="btn btn-primary btn-sm" id="zh-new-btn" style="flex-shrink:0">
            ${UI.icon('plus')} Hund anlegen
          </button>
          <button class="btn btn-secondary btn-sm" id="zh-trial-btn" style="flex-shrink:0;white-space:nowrap">
            ${UI.icon('heart-fill')} Probeverpaarung
          </button>
          <button class="btn btn-ghost btn-sm" id="zh-photos-btn" style="flex-shrink:0;white-space:nowrap"
                  title="Fotos & Logo für das Züchter-Profil verwalten">
            ${UI.icon('images')} Profilfotos
          </button>
          <a href="/api/breeder/export" download class="btn btn-ghost btn-sm" id="zh-export-btn"
             style="flex-shrink:0" title="Alle Daten herunterladen (HTML + ODS)">
            ${UI.icon('download-simple')} Export
          </a>
          ${_appState?.user?.ki_zucht_jahresbericht !== 0 ? `
          <a class="btn btn-ghost btn-sm" id="zh-jahresbericht-btn" style="flex-shrink:0;white-space:nowrap">
            ${UI.icon('chart-bar')} Jahresbericht
          </a>
          <a class="btn btn-ghost btn-sm" id="zh-jahresbericht-archiv-btn" style="flex-shrink:0" title="Frühere Berichte">
            ${UI.icon('archive')}
          </a>` : ''}
        </div>
        <div style="padding:0 0 var(--space-3)">
          <input class="form-control" id="zh-search" type="search"
                 placeholder="Suche nach Name oder Rufname…"
                 style="max-width:320px">
        </div>
        <div id="zh-list">
          <p style="color:var(--c-text-secondary);text-align:center;padding:var(--space-8)">Lädt…</p>
        </div>
      </div>`;

    document.getElementById('zh-new-btn')?.addEventListener('click', () => _showHundForm(null));
    document.getElementById('zh-trial-btn')?.addEventListener('click', () => _showTrialMatingModal());
    document.getElementById('zh-jahresbericht-btn')?.addEventListener('click', () => _showJahresbericht());
    document.getElementById('zh-jahresbericht-archiv-btn')?.addEventListener('click', () => _showJahresberichtArchiv());
    document.getElementById('zh-photos-btn')?.addEventListener('click', () => {
      if (!_breederId) { UI.toast.warning('Züchter-Profil noch nicht geladen.'); return; }
      _showBreederPhotosModal(_breederId);
    });

    document.getElementById('zh-search')?.addEventListener('input', e => {
      _query = e.target.value.toLowerCase().trim();
      _renderList();
    });
  }

  // ----------------------------------------------------------
  // Hunde laden
  // ----------------------------------------------------------
  async function _load() {
    try {
      [_hunde] = await Promise.all([
        API.zuchthunde.list(),
        API.breeder.status().then(s => {
          _breederId   = s?.profile?.id   || null;
          _breederInfo = s?.profile ? { zwingername: s.profile.zwingername, logo_url: s.profile.logo_url } : null;
        }).catch(() => {}),
      ]);
      _renderList();
    } catch (err) {
      const el = document.getElementById('zh-list');
      if (el) el.innerHTML = `
        <p style="color:var(--c-danger);text-align:center;padding:var(--space-8)">
          ${_esc(err.message || 'Fehler beim Laden.')}
        </p>`;
    }
  }

  // ----------------------------------------------------------
  // Liste rendern (inkl. Suche)
  // ----------------------------------------------------------
  function _renderList() {
    const el = document.getElementById('zh-list');
    if (!el) return;

    const filtered = _query
      ? _hunde.filter(h =>
          (h.name        || '').toLowerCase().includes(_query) ||
          (h.rufname     || '').toLowerCase().includes(_query))
      : _hunde;

    if (!filtered.length) {
      el.innerHTML = _query
        ? `<p style="color:var(--c-text-secondary);text-align:center;padding:var(--space-6)">Keine Treffer für „${_esc(_query)}".</p>`
        : `
          <div style="text-align:center;padding:var(--space-10) var(--space-4)">
            <div style="font-size:3rem;margin-bottom:var(--space-3)">${UI.icon('dog')}</div>
            <p style="color:var(--c-text-secondary)">Noch keine Hunde angelegt.</p>
            <button class="btn btn-primary" style="margin-top:var(--space-4)" id="zh-first-btn">
              ${UI.icon('plus')} Ersten Hund anlegen
            </button>
          </div>`;
      document.getElementById('zh-first-btn')?.addEventListener('click', () => _showHundForm(null));
      return;
    }

    el.innerHTML = filtered.map(h => _hundCardHTML(h)).join('');

    // Events verdrahten
    el.querySelectorAll('.zh-edit-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        const h = _hunde.find(x => x.id === parseInt(btn.dataset.id));
        if (h) _showHundForm(h);
      });
    });

    el.querySelectorAll('.zh-delete-btn').forEach(btn => {
      btn.addEventListener('click', () => _deleteHund(parseInt(btn.dataset.id)));
    });

    el.querySelectorAll('.zh-pedigree-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        const id = parseInt(btn.dataset.id);
        if (App?.navigate) App.navigate('zucht-profil', true, { id });
      });
    });

    el.querySelectorAll('.zh-link-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        const id = parseInt(btn.dataset.id);
        const url = window.location.origin + '#zucht-profil&id=' + id;
        navigator.clipboard.writeText(url).then(() => {
          UI.toast.success('Link kopiert!');
        }).catch(() => {
          UI.toast.error('Kopieren nicht möglich.');
        });
      });
    });

    el.querySelectorAll('.zh-section-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        const id      = parseInt(btn.dataset.id);
        const section = btn.dataset.section;
        _toggleSection(id, section);
      });
    });

    el.querySelectorAll('.zh-ki-desc-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        const id = parseInt(btn.dataset.id);
        _showKiDesc(id);
      });
    });

    // Offene Sektionen wiederherstellen
    Object.entries(_openSections).forEach(([id, sec]) => {
      if (sec) _openSection(parseInt(id), sec);
    });
  }

  // ----------------------------------------------------------
  // Hund-Card HTML
  // ----------------------------------------------------------
  function _hundCardHTML(h) {
    const nameLabel   = h.name ? _esc(h.name) : '<em style="color:var(--c-text-muted)">Unbenannt</em>';
    const rufname     = h.rufname ? ` (${_esc(h.rufname)})` : '';
    const geburtstag  = h.geburtsdatum ? _fmtDate(h.geburtsdatum) : null;

    const vaterLabel  = h.vater_name   ? `Vater: ${_esc(h.vater_name)}`  : null;
    const mutterLabel = h.mutter_name  ? `Mutter: ${_esc(h.mutter_name)}` : null;
    const eltern      = [vaterLabel, mutterLabel].filter(Boolean).join(' &nbsp;·&nbsp; ');

    const pubLabel = h.is_public
      ? `<span style="color:var(--c-success);font-size:var(--text-xs)">${UI.icon('eye')} Öffentlich</span>`
      : '';

    return `
      <div class="zh-card" id="zh-card-${h.id}">
        <div class="zh-card-header">
          <div style="flex:1;min-width:0">
            <div class="zh-card-title">
              ${_genderIcon(h.geschlecht)}
              ${nameLabel}${_esc(rufname)}
              ${pubLabel}
            </div>
            <div class="zh-card-meta">
              ${h.rasse           ? `${UI.icon('paw-print')} ${_esc(h.rasse)}&nbsp;&nbsp;` : ''}
              ${geburtstag        ? `${UI.icon('calendar-dots')} ${geburtstag}&nbsp;&nbsp;` : ''}
              ${h.chip_nr         ? `${UI.icon('barcode')} ${_esc(h.chip_nr)}&nbsp;&nbsp;` : ''}
              ${h.zuchtbuchnummer ? `${UI.icon('book-open')} ${_esc(h.zuchtbuchnummer)}&nbsp;&nbsp;` : ''}
            </div>
            ${eltern ? `<div class="zh-card-meta" style="font-size:var(--text-xs);color:var(--c-text-secondary)">${eltern}</div>` : ''}
          </div>
          <div class="zh-card-actions">
            <button class="btn btn-ghost btn-sm zh-pedigree-btn" data-id="${h.id}"
                    title="Stammbaum">
              ${UI.icon('tree-structure')} Stammbaum
            </button>
            ${_appState.user?.ki_zucht_beschreibung !== 0 ? `
            <button class="btn btn-ghost btn-sm zh-ki-desc-btn" data-id="${h.id}">
              ${UI.icon('sparkle')} Beschreibung
            </button>` : ''}
            <button class="btn btn-ghost btn-sm zh-link-btn" data-id="${h.id}"
                    title="Profil-Link kopieren">
              ${UI.icon('link-simple')}
            </button>
            <button class="btn btn-ghost btn-sm zh-edit-btn" data-id="${h.id}"
                    title="Bearbeiten">
              ${UI.icon('pencil-simple')}
            </button>
            <button class="btn btn-ghost btn-sm zh-delete-btn" data-id="${h.id}"
                    title="Löschen" style="color:var(--c-danger)">
              ${UI.icon('trash')}
            </button>
          </div>
        </div>

        <div class="by-tabs" style="padding:var(--space-2) var(--space-3) var(--space-3);flex-wrap:wrap;overflow-x:visible">
          <button class="by-tab zh-section-btn" data-id="${h.id}" data-section="health">
            ${UI.icon('heart')} Gesundheit
          </button>
          <button class="by-tab zh-section-btn" data-id="${h.id}" data-section="genetic">
            ${UI.icon('dna')} Genetik
          </button>
          <button class="by-tab zh-section-btn" data-id="${h.id}" data-section="titles">
            ${UI.icon('trophy')} Titel
          </button>
        </div>

        <div class="zh-section-wrap" id="zh-section-${h.id}" style="display:none"></div>
      </div>`;
  }

  // ----------------------------------------------------------
  // Sektion aufklappen / zuklappen
  // ----------------------------------------------------------
  function _toggleSection(hundId, section) {
    const current = _openSections[hundId];
    if (current === section) {
      // zuklappen
      _closeSection(hundId);
    } else {
      _openSection(hundId, section);
    }
  }

  function _closeSection(hundId) {
    const wrap = document.getElementById(`zh-section-${hundId}`);
    if (wrap) wrap.style.display = 'none';
    _openSections[hundId] = null;
    _updateSectionButtons(hundId, null);
  }

  function _openSection(hundId, section) {
    _openSections[hundId] = section;
    _updateSectionButtons(hundId, section);
    const wrap = document.getElementById(`zh-section-${hundId}`);
    if (!wrap) return;
    wrap.style.display = '';
    wrap.innerHTML = `<p style="color:var(--c-text-muted);font-size:var(--text-sm);padding:var(--space-2)">Lädt…</p>`;
    if (section === 'health')  _loadHealthSection(hundId, wrap);
    if (section === 'genetic') _loadGeneticSection(hundId, wrap);
    if (section === 'titles')  _loadTitlesSection(hundId, wrap);
  }

  function _updateSectionButtons(hundId, activeSection) {
    const card = document.getElementById(`zh-card-${hundId}`);
    if (!card) return;
    card.querySelectorAll('.zh-section-btn').forEach(btn => {
      btn.classList.toggle('active', btn.dataset.section === activeSection);
    });
  }

  // ----------------------------------------------------------
  // Gesundheits-Sektion
  // ----------------------------------------------------------
  async function _loadHealthSection(hundId, wrap) {
    try {
      const tests = await API.zuchthunde.healthTests(hundId);
      _renderHealthSection(hundId, wrap, tests);
    } catch (err) {
      wrap.innerHTML = `<p style="color:var(--c-danger);font-size:var(--text-sm);padding:var(--space-2)">${_esc(err.message || 'Fehler.')}</p>`;
    }
  }

  function _renderHealthSection(hundId, wrap, tests) {
    const rows = tests.length
      ? tests.map(t => `
          <div class="zh-detail-row">
            <div class="zh-detail-info">
              <span class="zh-detail-label">${_esc(t.test_typ || 'Sonstiges')}</span>
              ${t.test_name ? `<span style="color:var(--c-text-secondary);font-size:var(--text-xs)">${_esc(t.test_name)}</span>` : ''}
              ${_healthBadge(t.test_typ || '', t.ergebnis)}
              ${t.untersuch_am ? `<span style="color:var(--c-text-muted);font-size:var(--text-xs)">${_fmtDate(t.untersuch_am)}</span>` : ''}
              ${t.labor ? `<span style="color:var(--c-text-muted);font-size:var(--text-xs)">${_esc(t.labor)}</span>` : ''}
            </div>
            <button class="btn btn-ghost btn-xs zh-health-del-btn" data-tid="${t.id}" title="Löschen"
                    style="color:var(--c-danger)">${UI.icon('trash')}</button>
          </div>`).join('')
      : `<p style="color:var(--c-text-muted);font-size:var(--text-sm)">Noch keine Gesundheitstests eingetragen.</p>`;

    wrap.innerHTML = `
      <div class="zh-section-inner">
        <div class="zh-section-header">
          <span style="font-weight:var(--weight-semibold);font-size:var(--text-sm)">
            ${UI.icon('heart')} Gesundheitstests
          </span>
          <button class="btn btn-secondary btn-xs zh-health-add-btn" data-id="${hundId}">
            ${UI.icon('plus')} Test
          </button>
        </div>
        <div class="zh-detail-list">${rows}</div>
      </div>`;

    wrap.querySelector('.zh-health-add-btn')?.addEventListener('click', () => _showHealthTestForm(hundId));

    wrap.querySelectorAll('.zh-health-del-btn').forEach(btn => {
      btn.addEventListener('click', async () => {
        const tid = parseInt(btn.dataset.tid);
        if (!window.confirm('Gesundheitstest wirklich löschen?')) return;
        try {
          await API.zuchthunde.deleteHealthTest(tid);
          UI.toast.success('Test gelöscht.');
          await _reloadHealthSection(hundId);
        } catch (err) {
          UI.toast.error(err.message || 'Fehler beim Löschen.');
        }
      });
    });
  }

  async function _reloadHealthSection(hundId) {
    const wrap = document.getElementById(`zh-section-${hundId}`);
    if (!wrap || _openSections[hundId] !== 'health') return;
    await _loadHealthSection(hundId, wrap);
  }

  // ----------------------------------------------------------
  // Genetik-Sektion
  // ----------------------------------------------------------
  async function _loadGeneticSection(hundId, wrap) {
    try {
      const tests = await API.zuchthunde.geneticTests(hundId);
      _renderGeneticSection(hundId, wrap, tests);
    } catch (err) {
      wrap.innerHTML = `<p style="color:var(--c-danger);font-size:var(--text-sm);padding:var(--space-2)">${_esc(err.message || 'Fehler.')}</p>`;
    }
  }

  function _renderGeneticSection(hundId, wrap, tests) {
    const rows = tests.length
      ? tests.map(t => `
          <div class="zh-detail-row">
            <div class="zh-detail-info">
              <span class="zh-detail-label">${_esc(t.marker_name || '—')}</span>
              ${_geneticBadge(t.ergebnis_klasse)}
              ${t.getestet_am ? `<span style="color:var(--c-text-muted);font-size:var(--text-xs)">${_fmtDate(t.getestet_am)}</span>` : ''}
              ${t.labor ? `<span style="color:var(--c-text-muted);font-size:var(--text-xs)">${_esc(t.labor)}</span>` : ''}
            </div>
            <button class="btn btn-ghost btn-xs zh-genetic-del-btn" data-tid="${t.id}" title="Löschen"
                    style="color:var(--c-danger)">${UI.icon('trash')}</button>
          </div>`).join('')
      : `<p style="color:var(--c-text-muted);font-size:var(--text-sm)">Noch keine Gentests eingetragen.</p>`;

    wrap.innerHTML = `
      <div class="zh-section-inner">
        <div class="zh-section-header">
          <span style="font-weight:var(--weight-semibold);font-size:var(--text-sm)">
            ${UI.icon('dna')} Gentests
          </span>
          <button class="btn btn-secondary btn-xs zh-genetic-add-btn" data-id="${hundId}">
            ${UI.icon('plus')} Gentest
          </button>
        </div>
        <div class="zh-detail-list">${rows}</div>
      </div>`;

    wrap.querySelector('.zh-genetic-add-btn')?.addEventListener('click', () => _showGeneticTestForm(hundId));

    wrap.querySelectorAll('.zh-genetic-del-btn').forEach(btn => {
      btn.addEventListener('click', async () => {
        const tid = parseInt(btn.dataset.tid);
        if (!window.confirm('Gentest wirklich löschen?')) return;
        try {
          await API.zuchthunde.deleteGeneticTest(tid);
          UI.toast.success('Gentest gelöscht.');
          await _reloadGeneticSection(hundId);
        } catch (err) {
          UI.toast.error(err.message || 'Fehler beim Löschen.');
        }
      });
    });
  }

  async function _reloadGeneticSection(hundId) {
    const wrap = document.getElementById(`zh-section-${hundId}`);
    if (!wrap || _openSections[hundId] !== 'genetic') return;
    await _loadGeneticSection(hundId, wrap);
  }

  // ----------------------------------------------------------
  // Titel-Sektion
  // ----------------------------------------------------------
  async function _loadTitlesSection(hundId, wrap) {
    try {
      const titles = await API.zuchthunde.titles(hundId);
      _renderTitlesSection(hundId, wrap, titles);
    } catch (err) {
      wrap.innerHTML = `<p style="color:var(--c-danger);font-size:var(--text-sm);padding:var(--space-2)">${_esc(err.message || 'Fehler.')}</p>`;
    }
  }

  function _renderTitlesSection(hundId, wrap, titles) {
    const rows = titles.length
      ? titles.map(t => `
          <div class="zh-detail-row">
            <div class="zh-detail-info">
              <span class="zh-detail-label">${_esc(t.titel_name || '—')}</span>
              ${t.titel_typ ? `<span class="zh-badge" style="background:#6B7280">${_esc(t.titel_typ)}</span>` : ''}
              ${t.verliehen_am ? `<span style="color:var(--c-text-muted);font-size:var(--text-xs)">${_fmtDate(t.verliehen_am)}</span>` : ''}
              ${t.ort     ? `<span style="color:var(--c-text-muted);font-size:var(--text-xs)">${_esc(t.ort)}</span>`     : ''}
              ${t.richter ? `<span style="color:var(--c-text-muted);font-size:var(--text-xs)">${_esc(t.richter)}</span>` : ''}
              ${t.formwert ? `<span class="zh-badge" style="background:#3B82F6">${_esc(t.formwert)}</span>` : ''}
            </div>
            <button class="btn btn-ghost btn-xs zh-title-del-btn" data-tid="${t.id}" title="Löschen"
                    style="color:var(--c-danger)">${UI.icon('trash')}</button>
          </div>`).join('')
      : `<p style="color:var(--c-text-muted);font-size:var(--text-sm)">Noch keine Titel eingetragen.</p>`;

    wrap.innerHTML = `
      <div class="zh-section-inner">
        <div class="zh-section-header">
          <span style="font-weight:var(--weight-semibold);font-size:var(--text-sm)">
            ${UI.icon('trophy')} Titel
          </span>
          <button class="btn btn-secondary btn-xs zh-title-add-btn" data-id="${hundId}">
            ${UI.icon('plus')} Titel
          </button>
        </div>
        <div class="zh-detail-list">${rows}</div>
      </div>`;

    wrap.querySelector('.zh-title-add-btn')?.addEventListener('click', () => _showTitleForm(hundId));

    wrap.querySelectorAll('.zh-title-del-btn').forEach(btn => {
      btn.addEventListener('click', async () => {
        const tid = parseInt(btn.dataset.tid);
        if (!window.confirm('Titel wirklich löschen?')) return;
        try {
          await API.zuchthunde.deleteTitle(tid);
          UI.toast.success('Titel gelöscht.');
          await _reloadTitlesSection(hundId);
        } catch (err) {
          UI.toast.error(err.message || 'Fehler beim Löschen.');
        }
      });
    });
  }

  async function _reloadTitlesSection(hundId) {
    const wrap = document.getElementById(`zh-section-${hundId}`);
    if (!wrap || _openSections[hundId] !== 'titles') return;
    await _loadTitlesSection(hundId, wrap);
  }

  // ----------------------------------------------------------
  // Hund anlegen / bearbeiten
  // ----------------------------------------------------------
  function _showHundForm(hund) {
    const isEdit = !!hund;
    const v = hund || {};

    // Für Vater/Mutter-Dropdown: alle männlichen / weiblichen Hunde (außer sich selbst)
    const maennliche = _hunde.filter(h => h.geschlecht === 'maennlich' && h.id !== (hund?.id));
    const weibliche  = _hunde.filter(h => h.geschlecht === 'weiblich'  && h.id !== (hund?.id));

    const vaterOptions = [
      `<option value="">— kein Vater —</option>`,
      ...maennliche.map(h =>
        `<option value="${h.id}" ${v.vater_id === h.id ? 'selected' : ''}>${_esc(h.name)}${h.rufname ? ` (${_esc(h.rufname)})` : ''}</option>`),
    ].join('');

    const mutterOptions = [
      `<option value="">— keine Mutter —</option>`,
      ...weibliche.map(h =>
        `<option value="${h.id}" ${v.mutter_id === h.id ? 'selected' : ''}>${_esc(h.name)}${h.rufname ? ` (${_esc(h.rufname)})` : ''}</option>`),
    ].join('');

    const body = `
      <form id="zh-hund-form" autocomplete="off">

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
          <div class="form-group">
            <label class="form-label">Vollständiger Name <span style="color:var(--c-danger)">*</span></label>
            <input class="form-control" type="text" name="name" required
                   value="${_esc(v.name || '')}" placeholder="z. B. Banyaro's Black Diamond">
          </div>
          <div class="form-group">
            <label class="form-label">Rufname</label>
            <input class="form-control" type="text" name="rufname"
                   value="${_esc(v.rufname || '')}" placeholder="z. B. Diamond">
          </div>
        </div>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
          <div class="form-group">
            <label class="form-label">Geschlecht</label>
            <select class="form-control" name="geschlecht">
              <option value=""          ${!v.geschlecht                ? 'selected' : ''}>—</option>
              <option value="maennlich" ${v.geschlecht === 'maennlich' ? 'selected' : ''}>Männlich</option>
              <option value="weiblich"  ${v.geschlecht === 'weiblich'  ? 'selected' : ''}>Weiblich</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">Geburtsdatum</label>
            <input class="form-control" type="date" name="geburtsdatum"
                   value="${_esc(v.geburtsdatum || '')}">
          </div>
        </div>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
          <div class="form-group">
            <label class="form-label">Sterbedatum</label>
            <input class="form-control" type="date" name="sterbedatum"
                   value="${_esc(v.sterbedatum || '')}">
          </div>
          <div class="form-group">
            <label class="form-label">Farbe / Fell</label>
            <input class="form-control" type="text" name="farbe"
                   value="${_esc(v.farbe || '')}" placeholder="z. B. schwarz-braun">
          </div>
        </div>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
          <div class="form-group">
            <label class="form-label">Chip-Nr.</label>
            <input class="form-control" type="text" name="chip_nr"
                   value="${_esc(v.chip_nr || '')}" placeholder="15-stellig">
          </div>
          <div class="form-group">
            <label class="form-label">Tätowiernummer</label>
            <input class="form-control" type="text" name="taetowier_nr"
                   value="${_esc(v.taetowier_nr || '')}">
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">Zuchtbuchnummer</label>
          <input class="form-control" type="text" name="zuchtbuchnummer"
                 value="${_esc(v.zuchtbuchnummer || '')}" placeholder="z. B. SZ 123456">
        </div>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
          <div class="form-group">
            <label class="form-label">Vater</label>
            <select class="form-control" name="vater_id">${vaterOptions}</select>
          </div>
          <div class="form-group">
            <label class="form-label">Mutter</label>
            <select class="form-control" name="mutter_id">${mutterOptions}</select>
          </div>
        </div>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
          <div class="form-group">
            <label class="form-label">Züchter-Name</label>
            <input class="form-control" type="text" name="zuechter_name"
                   value="${_esc(v.zuechter_name || '')}" placeholder="Bei Fremdzüchter">
          </div>
          <div class="form-group">
            <label class="form-label">Eigentümer-Name</label>
            <input class="form-control" type="text" name="eigentuemer_name"
                   value="${_esc(v.eigentuemer_name || '')}">
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">Notiz <span style="color:var(--c-text-secondary)">(intern)</span></label>
          <textarea class="form-control" name="notiz" rows="2"
                    placeholder="Interne Anmerkungen…">${_esc(v.notiz || '')}</textarea>
        </div>

        <div class="form-group">
          <label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer">
            <input type="checkbox" name="is_public" value="1" ${v.is_public ? 'checked' : ''}>
            Öffentlich sichtbar (im Züchterprofil)
          </label>
        </div>

      </form>`;

    const footer = `
      <button type="button" class="btn btn-secondary flex-1" id="zhf-cancel">Abbrechen</button>
      <button type="submit" form="zh-hund-form" class="btn btn-primary flex-1" id="zhf-submit">
        ${isEdit ? `${UI.icon('floppy-disk')} Speichern` : `${UI.icon('plus')} Anlegen`}
      </button>`;

    UI.modal.open({
      title: isEdit ? `${UI.icon('pencil-simple')} Hund bearbeiten` : `${UI.icon('dog')} Hund anlegen`,
      body,
      footer,
    });

    document.getElementById('zhf-cancel')?.addEventListener('click', UI.modal.close);

    document.getElementById('zh-hund-form')?.addEventListener('submit', async e => {
      e.preventDefault();
      const btn = document.getElementById('zhf-submit');
      const fd  = new FormData(e.target);

      const payload = {
        name:             fd.get('name')?.trim()             || '',
        rufname:          fd.get('rufname')?.trim()          || null,
        geschlecht:       fd.get('geschlecht')               || null,
        geburtsdatum:     fd.get('geburtsdatum')             || null,
        sterbedatum:      fd.get('sterbedatum')              || null,
        chip_nr:          fd.get('chip_nr')?.trim()          || null,
        taetowier_nr:     fd.get('taetowier_nr')?.trim()     || null,
        zuchtbuchnummer:  fd.get('zuchtbuchnummer')?.trim()  || null,
        farbe:            fd.get('farbe')?.trim()            || null,
        vater_id:         fd.get('vater_id')     ? parseInt(fd.get('vater_id'))  : null,
        mutter_id:        fd.get('mutter_id')    ? parseInt(fd.get('mutter_id')) : null,
        zuechter_name:    fd.get('zuechter_name')?.trim()    || null,
        eigentuemer_name: fd.get('eigentuemer_name')?.trim() || null,
        notiz:            fd.get('notiz')?.trim()            || null,
        is_public:        fd.get('is_public') === '1' ? 1 : 0,
      };

      await UI.asyncButton(btn, async () => {
        if (isEdit) {
          const updated = await API.zuchthunde.update(hund.id, payload);
          const idx = _hunde.findIndex(x => x.id === hund.id);
          if (idx !== -1) _hunde[idx] = { ..._hunde[idx], ...updated };
          UI.toast.success('Hund aktualisiert.');
        } else {
          const created = await API.zuchthunde.create(payload);
          _hunde.unshift(created);
          UI.toast.success('Hund angelegt.');
        }
        UI.modal.close();
        _renderList();
      });
    });
  }

  // ----------------------------------------------------------
  // Hund löschen
  // ----------------------------------------------------------
  async function _deleteHund(id) {
    const h = _hunde.find(x => x.id === id);
    const label = h?.name || `Hund #${id}`;
    if (!window.confirm(`„${label}" wirklich löschen? Alle Tests und Titel werden ebenfalls gelöscht.`)) return;
    try {
      await API.zuchthunde.remove(id);
      _hunde = _hunde.filter(x => x.id !== id);
      delete _openSections[id];
      _renderList();
      UI.toast.success('Hund gelöscht.');
    } catch (err) {
      UI.toast.error(err.message || 'Fehler beim Löschen.');
    }
  }

  // ----------------------------------------------------------
  // Gesundheitstest hinzufügen
  // ----------------------------------------------------------
  function _showHealthTestForm(hundId) {
    const today = new Date().toISOString().slice(0, 10);

    const body = `
      <form id="zh-health-form" autocomplete="off">

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
          <div class="form-group">
            <label class="form-label">Test-Typ <span style="color:var(--c-danger)">*</span></label>
            <select class="form-control" name="test_typ" id="zh-health-typ" required>
              <option value="HD">HD (Hüftgelenksdysplasie)</option>
              <option value="ED">ED (Ellbogendysplasie)</option>
              <option value="OCD">OCD</option>
              <option value="Augen">Augen</option>
              <option value="Herz">Herz</option>
              <option value="Patella">Patella</option>
              <option value="ZTP">ZTP (Wesenstest)</option>
              <option value="Sonstiges">Sonstiges</option>
            </select>
          </div>
          <div class="form-group" id="zh-health-name-wrap">
            <label class="form-label">Test-Name <span style="color:var(--c-text-secondary)">(bei Sonstiges)</span></label>
            <input class="form-control" type="text" name="test_name" placeholder="Bezeichnung des Tests">
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">Ergebnis <span style="color:var(--c-danger)">*</span></label>
          <input class="form-control" type="text" name="ergebnis" required
                 id="zh-health-ergebnis" placeholder="z. B. A1, A2, B1 …">
          <small class="form-hint" id="zh-health-hint" style="color:var(--c-text-secondary);font-size:var(--text-xs)">
            HD: A1/A2 = frei, B1/B2 = noch zugelassen, C = Grenzfall, D/E = nicht zugelassen
          </small>
        </div>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
          <div class="form-group">
            <label class="form-label">Untersuchungsdatum</label>
            <input class="form-control" type="date" name="untersuch_am" value="${today}">
          </div>
          <div class="form-group">
            <label class="form-label">Gültig bis</label>
            <input class="form-control" type="date" name="gueltig_bis">
          </div>
        </div>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
          <div class="form-group">
            <label class="form-label">Untersucher / Tierarzt</label>
            <input class="form-control" type="text" name="untersucher" placeholder="Dr. Müller">
          </div>
          <div class="form-group">
            <label class="form-label">Labor / Institut</label>
            <input class="form-control" type="text" name="labor">
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">Zertifikat-Nr.</label>
          <input class="form-control" type="text" name="zertifikat_nr">
        </div>

      </form>`;

    const footer = `
      <button type="button" class="btn btn-secondary flex-1" id="zhh-cancel">Abbrechen</button>
      <button type="submit" form="zh-health-form" class="btn btn-primary flex-1" id="zhh-submit">
        ${UI.icon('floppy-disk')} Speichern
      </button>`;

    UI.modal.open({
      title: `${UI.icon('heart')} Gesundheitstest hinzufügen`,
      body,
      footer,
    });

    document.getElementById('zhh-cancel')?.addEventListener('click', UI.modal.close);

    // Hinweis je nach Test-Typ aktualisieren
    const typSelect = document.getElementById('zh-health-typ');
    const hintEl    = document.getElementById('zh-health-hint');
    const hints = {
      HD:        'HD: A1/A2 = frei, B1/B2 = noch zugelassen, C = Grenzfall, D/E = nicht zugelassen',
      ED:        'ED: 0 = frei, 1 = leicht, 2 = mittel, 3 = schwer',
      OCD:       'OCD: positiv / negativ',
      Augen:     'z. B. CAER-Ergebnis, frei / betroffen / Träger',
      Herz:      'z. B. frei (Auskultation), SAS-Grad 1/2/3',
      Patella:   'Patella: 0 = frei, 1/2/3 = Luxation Grad 1–3',
      ZTP:       'z. B. bestanden / nicht bestanden',
      Sonstiges: 'Ergebnis frei eingeben',
    };
    typSelect?.addEventListener('change', () => {
      if (hintEl) hintEl.textContent = hints[typSelect.value] || '';
    });

    document.getElementById('zh-health-form')?.addEventListener('submit', async e => {
      e.preventDefault();
      const btn = document.getElementById('zhh-submit');
      const fd  = new FormData(e.target);

      const payload = {
        test_typ:      fd.get('test_typ')                || 'Sonstiges',
        test_name:     fd.get('test_name')?.trim()       || null,
        ergebnis:      fd.get('ergebnis')?.trim()        || '',
        untersuch_am:  fd.get('untersuch_am')            || null,
        gueltig_bis:   fd.get('gueltig_bis')             || null,
        untersucher:   fd.get('untersucher')?.trim()     || null,
        labor:         fd.get('labor')?.trim()           || null,
        zertifikat_nr: fd.get('zertifikat_nr')?.trim()   || null,
      };

      await UI.asyncButton(btn, async () => {
        await API.zuchthunde.addHealthTest(hundId, payload);
        UI.toast.success('Gesundheitstest gespeichert.');
        UI.modal.close();
        _openSections[hundId] = 'health';
        await _reloadHealthSection(hundId);
      });
    });
  }

  // ----------------------------------------------------------
  // Gentest hinzufügen
  // ----------------------------------------------------------
  function _showGeneticTestForm(hundId) {
    const today = new Date().toISOString().slice(0, 10);

    const body = `
      <form id="zh-genetic-form" autocomplete="off">

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
          <div class="form-group">
            <label class="form-label">Marker / Gen <span style="color:var(--c-danger)">*</span></label>
            <select class="form-control" name="marker_name" required>
              <option value="MDR1">MDR1 (Multi-Drug Resistance)</option>
              <option value="PRA-prcd">PRA-prcd (Progressive Retinaatrophie)</option>
              <option value="DM">DM (Degenerative Myelopathie)</option>
              <option value="vWD">vWD (von-Willebrand-Krankheit)</option>
              <option value="HUU">HUU (Harnsäure-Urolithiasis)</option>
              <option value="Fell Locus A">Fell Locus A</option>
              <option value="Fell Locus B">Fell Locus B</option>
              <option value="Fell Locus E">Fell Locus E</option>
              <option value="Sonstiges">Sonstiges</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">Ergebnis <span style="color:var(--c-danger)">*</span></label>
            <select class="form-control" name="ergebnis_klasse" required>
              <option value="clear">clear (frei)</option>
              <option value="carrier">carrier (Träger)</option>
              <option value="affected">affected (betroffen)</option>
            </select>
          </div>
        </div>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
          <div class="form-group">
            <label class="form-label">Testdatum</label>
            <input class="form-control" type="date" name="getestet_am" value="${today}">
          </div>
          <div class="form-group">
            <label class="form-label">Labor</label>
            <input class="form-control" type="text" name="labor" placeholder="z. B. Laboklin, Embark">
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">Zertifikat-Nr.</label>
          <input class="form-control" type="text" name="zertifikat_nr">
        </div>

      </form>`;

    const footer = `
      <button type="button" class="btn btn-secondary flex-1" id="zhg-cancel">Abbrechen</button>
      <button type="submit" form="zh-genetic-form" class="btn btn-primary flex-1" id="zhg-submit">
        ${UI.icon('floppy-disk')} Speichern
      </button>`;

    UI.modal.open({
      title: `${UI.icon('dna')} Gentest hinzufügen`,
      body,
      footer,
    });

    document.getElementById('zhg-cancel')?.addEventListener('click', UI.modal.close);

    document.getElementById('zh-genetic-form')?.addEventListener('submit', async e => {
      e.preventDefault();
      const btn = document.getElementById('zhg-submit');
      const fd  = new FormData(e.target);

      const payload = {
        marker_name:    fd.get('marker_name')            || 'Sonstiges',
        ergebnis_klasse: fd.get('ergebnis_klasse')       || 'clear',
        getestet_am:    fd.get('getestet_am')            || null,
        labor:          fd.get('labor')?.trim()          || null,
        zertifikat_nr:  fd.get('zertifikat_nr')?.trim()  || null,
      };

      await UI.asyncButton(btn, async () => {
        await API.zuchthunde.addGeneticTest(hundId, payload);
        UI.toast.success('Gentest gespeichert.');
        UI.modal.close();
        _openSections[hundId] = 'genetic';
        await _reloadGeneticSection(hundId);
      });
    });
  }

  // ----------------------------------------------------------
  // Titel hinzufügen
  // ----------------------------------------------------------
  function _showTitleForm(hundId) {
    const today = new Date().toISOString().slice(0, 10);

    const body = `
      <form id="zh-title-form" autocomplete="off">

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
          <div class="form-group">
            <label class="form-label">Titel-Typ <span style="color:var(--c-danger)">*</span></label>
            <select class="form-control" name="titel_typ" required>
              <option value="Ausstellung">Ausstellung</option>
              <option value="Arbeit">Arbeit</option>
              <option value="Sport">Sport</option>
              <option value="Zucht">Zucht</option>
              <option value="Champion">Champion</option>
              <option value="Sonstiges">Sonstiges</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">Titel-Name <span style="color:var(--c-danger)">*</span></label>
            <input class="form-control" type="text" name="titel_name" required
                   placeholder="z. B. CAC, CACIB, BOB, IPO 1, BH">
          </div>
        </div>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
          <div class="form-group">
            <label class="form-label">Datum</label>
            <input class="form-control" type="date" name="verliehen_am" value="${today}">
          </div>
          <div class="form-group">
            <label class="form-label">Formwert</label>
            <select class="form-control" name="formwert">
              <option value="">—</option>
              <option value="V">V (Vorzüglich)</option>
              <option value="SG">SG (Sehr gut)</option>
              <option value="G">G (Gut)</option>
              <option value="A">A (Ausreichend)</option>
            </select>
          </div>
        </div>

        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
          <div class="form-group">
            <label class="form-label">Ort</label>
            <input class="form-control" type="text" name="ort" placeholder="Stadt / Veranstaltungsort">
          </div>
          <div class="form-group">
            <label class="form-label">Richter</label>
            <input class="form-control" type="text" name="richter">
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">Ausstellung / Veranstaltung</label>
          <input class="form-control" type="text" name="ausstellung" placeholder="z. B. Bundesiegerausstellung 2025">
        </div>

      </form>`;

    const footer = `
      <button type="button" class="btn btn-secondary flex-1" id="zht-cancel">Abbrechen</button>
      <button type="submit" form="zh-title-form" class="btn btn-primary flex-1" id="zht-submit">
        ${UI.icon('floppy-disk')} Speichern
      </button>`;

    UI.modal.open({
      title: `${UI.icon('trophy')} Titel hinzufügen`,
      body,
      footer,
    });

    document.getElementById('zht-cancel')?.addEventListener('click', UI.modal.close);

    document.getElementById('zh-title-form')?.addEventListener('submit', async e => {
      e.preventDefault();
      const btn = document.getElementById('zht-submit');
      const fd  = new FormData(e.target);

      const payload = {
        titel_typ:    fd.get('titel_typ')               || 'Sonstiges',
        titel_name:   fd.get('titel_name')?.trim()      || '',
        verliehen_am: fd.get('verliehen_am')            || null,
        ort:          fd.get('ort')?.trim()             || null,
        richter:      fd.get('richter')?.trim()         || null,
        ausstellung:  fd.get('ausstellung')?.trim()     || null,
        formwert:     fd.get('formwert')                || null,
      };

      await UI.asyncButton(btn, async () => {
        await API.zuchthunde.addTitle(hundId, payload);
        UI.toast.success('Titel gespeichert.');
        UI.modal.close();
        _openSections[hundId] = 'titles';
        await _reloadTitlesSection(hundId);
      });
    });
  }

  // ----------------------------------------------------------
  // Probeverpaarung
  // ----------------------------------------------------------
  function _showTrialMatingModal() {
    const vaeterOptions = [
      `<option value="">-- Aus eigenen Hunden --</option>`,
      ..._hunde
        .filter(h => h.geschlecht !== 'weiblich')
        .map(h => `<option value="${h.id}">${_esc(h.name)}${h.rufname ? ` (${_esc(h.rufname)})` : ''}</option>`),
    ].join('');

    const muetterOptions = [
      `<option value="">-- Aus eigenen Hunden --</option>`,
      ..._hunde
        .filter(h => h.geschlecht !== 'maennlich')
        .map(h => `<option value="${h.id}">${_esc(h.name)}${h.rufname ? ` (${_esc(h.rufname)})` : ''}</option>`),
    ].join('');

    const body = `
      <form id="trial-form" style="display:flex;flex-direction:column;gap:var(--space-4)">
        <div class="form-group">
          <label class="form-label">Vater</label>
          <select class="form-control" name="vater_id">${vaeterOptions}</select>
        </div>
        <div class="form-group">
          <label class="form-label">Mutter</label>
          <select class="form-control" name="mutter_id">${muetterOptions}</select>
        </div>
        <p style="font-size:var(--text-xs);color:var(--c-text-secondary);margin:0">
          Wähle Vater und Mutter aus deinen eigenen Hunden, um den Inzuchtkoeffizienten der möglichen Nachkommen zu berechnen.
        </p>
      </form>`;

    const footer = `
      <button type="button" class="btn btn-secondary flex-1" id="zhtrial-cancel">Abbrechen</button>
      <button type="button" class="btn btn-primary flex-1" id="zhtrial-calc">
        ${UI.icon('calculator')} Berechnen
      </button>`;

    UI.modal.open({
      title: `${UI.icon('dna')} Probeverpaarung`,
      body,
      footer,
    });

    document.getElementById('zhtrial-cancel')?.addEventListener('click', UI.modal.close);

    document.getElementById('zhtrial-calc')?.addEventListener('click', async () => {
      const form    = document.getElementById('trial-form');
      const vaterId  = form?.querySelector('[name="vater_id"]')?.value  || null;
      const mutterId = form?.querySelector('[name="mutter_id"]')?.value || null;

      if (!vaterId || !mutterId) {
        UI.toast.error('Bitte Vater und Mutter auswählen.');
        return;
      }

      const btn = document.getElementById('zhtrial-calc');
      await UI.asyncButton(btn, async () => {
        await _runTrialMating(vaterId, mutterId);
      });
    });
  }

  async function _runTrialMating(vaterId, mutterId) {
    const result = await API.zuchthunde.trialMating(vaterId, mutterId);
    _showTrialResult(result);
  }

  function _showTrialResult(result) {
    const ik = parseFloat(result.ik_prozent || 0);

    let ampelColor, ampelLabel;
    if (ik < 2.5) {
      ampelColor = '#22C55E';
      ampelLabel = 'Optimal';
    } else if (ik < 6.25) {
      ampelColor = '#86EFAC';
      ampelLabel = 'Akzeptabel';
    } else if (ik < 12.5) {
      ampelColor = '#F97316';
      ampelLabel = 'Erhöht';
    } else {
      ampelColor = '#EF4444';
      ampelLabel = 'Kritisch';
    }

    const vorfahrenRows = (result.gemeinsame_vorfahren || []).length
      ? (result.gemeinsame_vorfahren || []).map(v => {
          const genInfo = [];
          if (v.gen_vater != null) genInfo.push(`Gen. ${v.gen_vater} Vater`);
          if (v.gen_mutter != null) genInfo.push(`Gen. ${v.gen_mutter} Mutter`);
          const genStr = genInfo.length ? ` <span style="color:var(--c-text-secondary);font-size:var(--text-xs)">(${genInfo.join(' / ')})</span>` : '';
          return `<li style="padding:var(--space-1) 0">${_esc(v.name || '—')}${genStr}</li>`;
        }).join('')
      : `<li style="color:var(--c-text-muted)">Keine gemeinsamen Vorfahren gefunden.</li>`;

    const welfare = result.welfare;
    let welfareHTML = '';
    if (welfare) {
      const wColor = { ok: '#16a34a', info: '#3b82f6', warning: '#f59e0b', critical: '#dc2626' }[welfare.level] || '#6b7280';
      const wTitle = { ok: 'Alles prima', info: 'Hinweis', warning: 'Bitte beachten', critical: 'Kritischer Hinweis' }[welfare.level];
      const wIcon  = { ok: 'check-circle', info: 'info', warning: 'warning', critical: 'warning-circle' }[welfare.level];

      const wIssueHTML = (welfare.issues || []).map(i => `
        <div style="display:flex;gap:8px;padding:6px 0;border-bottom:1px solid rgba(0,0,0,.06)">
          <span style="color:${wColor};flex-shrink:0">${UI.icon('warning')}</span>
          <span style="font-size:var(--text-sm)">${_esc(i.text)}</span>
        </div>`).join('');

      const wOkHTML = (welfare.ok_points || []).map(p => `
        <div style="display:flex;gap:8px;padding:4px 0">
          <span style="color:#16a34a;flex-shrink:0">${UI.icon('check')}</span>
          <span style="font-size:var(--text-sm);color:var(--c-text-secondary)">${_esc(p)}</span>
        </div>`).join('');

      welfareHTML = `
        <div>
          <div style="font-weight:var(--weight-semibold);font-size:var(--text-sm);margin-bottom:var(--space-2);
                      color:${wColor}">
            ${UI.icon(wIcon)} Tierschutz-Check: ${wTitle}
          </div>
          <div style="background:${wColor}18;border:1.5px solid ${wColor}40;border-radius:var(--radius-md);
                      padding:var(--space-3)">
            ${wIssueHTML || ''}
            ${wOkHTML}
          </div>
        </div>`;
    }

    const body = `
      <div style="display:flex;flex-direction:column;gap:var(--space-4)">
        <div style="display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);
                    background:var(--c-surface-subtle,var(--c-bg));border-radius:var(--radius-md);
                    border:1px solid var(--c-border)">
          <div style="width:14px;height:14px;border-radius:50%;background:${ampelColor};flex-shrink:0"></div>
          <div>
            <div style="font-size:var(--text-lg);font-weight:var(--weight-bold)">
              ${ik.toFixed(2)} %
            </div>
            <div style="font-size:var(--text-sm);color:${ampelColor};font-weight:var(--weight-semibold)">
              ${_esc(result.ik_rating || ampelLabel)}
            </div>
          </div>
        </div>
        ${welfareHTML}
        <div>
          <div style="font-weight:var(--weight-semibold);font-size:var(--text-sm);margin-bottom:var(--space-2)">
            Gemeinsame Vorfahren
          </div>
          <ul style="margin:0;padding-left:var(--space-5);font-size:var(--text-sm)">
            ${vorfahrenRows}
          </ul>
        </div>
      </div>`;

    const kiPaarungBtn = _appState?.user?.ki_zucht_paarung !== 0
      ? `<button type="button" class="btn btn-secondary btn-sm" id="trial-ki-btn">
           ${UI.icon('sparkle')} KI-Analyse anfordern
         </button>`
      : '';

    const footer = `
      <div style="display:flex;flex-direction:column;gap:var(--space-2);width:100%">
        ${kiPaarungBtn}
        <div style="display:flex;gap:var(--space-2)">
          <button type="button" class="btn btn-secondary flex-1" id="zhresult-back">
            ${UI.icon('arrow-left')} Zurück
          </button>
          <button type="button" class="btn btn-primary flex-1" id="zhresult-close">Schließen</button>
        </div>
      </div>`;

    UI.modal.open({
      title: `${UI.icon('dna')} Ergebnis Probeverpaarung`,
      body,
      footer,
    });

    document.getElementById('zhresult-close')?.addEventListener('click', UI.modal.close);
    document.getElementById('zhresult-back')?.addEventListener('click', () => _showTrialMatingModal());
    document.getElementById('trial-ki-btn')?.addEventListener('click', () => _showKiPaarung(result));
  }

  // ----------------------------------------------------------
  // KI: Hund-Beschreibung
  // ----------------------------------------------------------
  async function _showKiDesc(hundId) {
    UI.modal.open({
      title: `${UI.icon('sparkle')} KI-Hunde-Beschreibung`,
      body: `<p style="color:var(--c-text-secondary);text-align:center;padding:var(--space-6)">KI erstellt Beschreibung…</p>`,
      footer: '',
    });

    let text = '';
    try {
      const result = await API.zuchtKi.hundBeschreibung(hundId);
      text = result.text || result.content || result.beschreibung || JSON.stringify(result);
    } catch (err) {
      UI.modal.open({
        title: `${UI.icon('sparkle')} KI-Hunde-Beschreibung`,
        body: `<p style="color:var(--c-danger)">${_esc(err.message || 'Fehler beim Generieren.')}</p>`,
        footer: `<button class="btn btn-secondary" data-modal-close>Schließen</button>`,
      });
      return;
    }

    UI.modal.open({
      title: `${UI.icon('sparkle')} KI-Hunde-Beschreibung`,
      body: `<div style="white-space:pre-wrap;font-size:var(--text-sm);line-height:1.6">${_esc(text)}</div>`,
      footer: `
        <button class="btn btn-secondary flex-1" id="ki-desc-copy">
          ${UI.icon('clipboard-text')} Kopieren
        </button>
        <button class="btn btn-primary flex-1" data-modal-close>Schließen</button>`,
    });

    document.getElementById('ki-desc-copy')?.addEventListener('click', async () => {
      try {
        await navigator.clipboard.writeText(text);
        UI.toast.success('Text kopiert.');
      } catch {
        UI.toast.error('Kopieren nicht möglich.');
      }
    });
  }

  // ----------------------------------------------------------
  // KI: Jahresbericht generieren
  // ----------------------------------------------------------
  async function _showJahresbericht() {
    // Zuerst prüfen ob bereits ein Bericht existiert
    let vorhandeneBerichte = [];
    try { vorhandeneBerichte = await API.zuchtKi.jahresberichtList(); } catch {}

    if (vorhandeneBerichte.length) {
      const letzter    = vorhandeneBerichte[0];
      const letzterTs  = new Date(letzter.created_at);
      const tageAlt    = Math.floor((Date.now() - letzterTs) / 86400000);
      const SCHWELLE   = 30; // Tage

      if (tageAlt < SCHWELLE) {
        const datumStr = letzterTs.toLocaleDateString('de', {
          day: '2-digit', month: '2-digit', year: 'numeric'
        });
        // Wahlmöglichkeit anbieten
        UI.modal.open({
          title: `${UI.icon('chart-bar')} KI-Jahresbericht`,
          body: `
            <div style="text-align:center;padding:var(--space-4) 0">
              <div style="font-size:2rem;margin-bottom:var(--space-3)">${UI.icon('warning')}</div>
              <p style="margin:0 0 var(--space-2);font-size:var(--text-sm)">
                Du hast bereits einen Bericht vom <strong>${datumStr}</strong>.
              </p>
              <p style="margin:0;font-size:var(--text-sm);color:var(--c-text-secondary)">
                Ein neuer Bericht kostet ein KI-Guthaben. Was möchtest du tun?
              </p>
            </div>`,
          footer: `
            <button class="btn btn-secondary btn-sm" id="ki-bericht-abbrechen">
              Schließen
            </button>
            <button class="btn btn-ghost btn-sm" id="ki-bericht-letzten-anzeigen">
              ${UI.icon('eye')} Letzten anzeigen (${datumStr})
            </button>
            <button class="btn btn-primary btn-sm" id="ki-bericht-neu-erstellen">
              ${UI.icon('sparkle')} Neuen erstellen
            </button>`,
        });

        document.getElementById('ki-bericht-abbrechen')?.addEventListener('click', () => UI.modal.close());
        document.getElementById('ki-bericht-letzten-anzeigen')?.addEventListener('click', async () => {
          try {
            const r = await API.zuchtKi.jahresberichtGet(letzter.id);
            _renderBerichtModal(r.text, r.jahr, r.id);
          } catch { UI.toast.error('Bericht konnte nicht geladen werden.'); }
        });
        document.getElementById('ki-bericht-neu-erstellen')?.addEventListener('click', () => _generiereJahresbericht());
        return;
      }
    }

    _generiereJahresbericht();
  }

  async function _generiereJahresbericht() {
    UI.modal.open({
      title: `${UI.icon('chart-bar')} KI-Jahresbericht`,
      body: `<p style="color:var(--c-text-secondary);text-align:center;padding:var(--space-6)">KI analysiert deine Zuchtkartei…</p>`,
      footer: '',
    });

    let text = '', savedId = null, jahr = new Date().getFullYear();
    try {
      const result = await API.zuchtKi.jahresbericht();
      text    = result.text || result.content || result.bericht || JSON.stringify(result);
      savedId = result.saved_id;
      jahr    = result.jahr || jahr;
    } catch (err) {
      UI.modal.open({
        title: `${UI.icon('chart-bar')} KI-Jahresbericht`,
        body: `<p style="color:var(--c-danger)">${_esc(err.message || 'Fehler beim Generieren.')}</p>`,
        footer: `<button class="btn btn-secondary" data-modal-close>Schließen</button>`,
      });
      return;
    }

    _renderBerichtModal(text, jahr, savedId);
  }

  function _renderBerichtModal(text, jahr, savedId) {
    UI.modal.open({
      title: `${UI.icon('chart-bar')} KI-Jahresbericht ${jahr}`,
      body: `
        ${savedId ? `<p style="font-size:var(--text-xs);color:var(--c-success);margin:0 0 var(--space-3);display:flex;align-items:center;gap:4px">
          ${UI.icon('check-circle')} Automatisch gespeichert</p>` : ''}
        <div style="white-space:pre-wrap;font-size:var(--text-sm);line-height:1.6">${_esc(text)}</div>`,
      footer: `
        <button class="btn btn-ghost btn-sm" id="ki-bericht-copy">
          ${UI.icon('clipboard-text')} Kopieren
        </button>
        <button class="btn btn-ghost btn-sm" id="ki-bericht-download">
          ${UI.icon('download-simple')} Herunterladen
        </button>
        <button class="btn btn-primary" id="ki-bericht-close">Schließen</button>`,
    });

    document.getElementById('ki-bericht-close')?.addEventListener('click', () => UI.modal.close());
    document.getElementById('ki-bericht-copy')?.addEventListener('click', async () => {
      try { await navigator.clipboard.writeText(text); UI.toast.success('Bericht kopiert.'); }
      catch { UI.toast.error('Kopieren nicht möglich.'); }
    });

    document.getElementById('ki-bericht-download')?.addEventListener('click', () => {
      const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
      const url  = URL.createObjectURL(blob);
      const a    = document.createElement('a');
      a.href = url; a.download = `ban-yaro-jahresbericht-${jahr}.txt`;
      a.click(); URL.revokeObjectURL(url);
    });
  }

  // KI: Archiv früherer Berichte
  // ----------------------------------------------------------
  async function _showJahresberichtArchiv() {
    UI.modal.open({
      title: `${UI.icon('archive')} Gespeicherte Jahresberichte`,
      body: `<p style="color:var(--c-text-secondary);text-align:center;padding:var(--space-4)">Lädt…</p>`,
      footer: `<button class="btn btn-secondary" data-modal-close>Schließen</button>`,
    });

    let berichte = [];
    try { berichte = await API.zuchtKi.jahresberichtList(); }
    catch { UI.toast.error('Berichte konnten nicht geladen werden.'); return; }

    if (!berichte.length) {
      UI.modal.open({
        title: `${UI.icon('archive')} Gespeicherte Jahresberichte`,
        body: `<p style="color:var(--c-text-muted);text-align:center;padding:var(--space-6)">Noch keine Berichte gespeichert.</p>`,
        footer: `<button class="btn btn-secondary" data-modal-close>Schließen</button>`,
      });
      return;
    }

    const listHtml = berichte.map(b => `
      <div style="display:flex;align-items:center;justify-content:space-between;
                  padding:var(--space-3) 0;border-bottom:1px solid var(--c-border-light)">
        <div>
          <div style="font-weight:var(--weight-semibold);font-size:var(--text-sm)">
            Jahresbericht ${b.jahr}
          </div>
          <div style="font-size:var(--text-xs);color:var(--c-text-muted)">
            ${new Date(b.created_at).toLocaleDateString('de', {day:'2-digit',month:'2-digit',year:'numeric',hour:'2-digit',minute:'2-digit'})}
          </div>
        </div>
        <button class="btn btn-ghost btn-sm" data-bericht-id="${b.id}" data-bericht-jahr="${b.jahr}">
          ${UI.icon('eye')} Lesen
        </button>
      </div>`).join('');

    UI.modal.open({
      title: `${UI.icon('archive')} Gespeicherte Jahresberichte`,
      body: `<div style="padding:0 var(--space-1)">${listHtml}</div>`,
      footer: `<button class="btn btn-secondary" data-modal-close>Schließen</button>`,
    });

    document.querySelectorAll('[data-bericht-id]').forEach(btn => {
      btn.addEventListener('click', async () => {
        const id   = Number(btn.dataset.berichtId);
        const jahr = Number(btn.dataset.berichtJahr);
        try {
          const r = await API.zuchtKi.jahresberichtGet(id);
          _renderBerichtModal(r.text, r.jahr || jahr, r.id);
        } catch { UI.toast.error('Bericht konnte nicht geladen werden.'); }
      });
    });
  }

  // ----------------------------------------------------------
  // KI: Paarungsanalyse
  // ----------------------------------------------------------
  async function _showKiPaarung(trialResult) {
    UI.modal.open({
      title: `${UI.icon('sparkle')} KI-Paarungsanalyse`,
      body: `<p style="color:var(--c-text-secondary);text-align:center;padding:var(--space-6)">KI analysiert die Verpaarung…</p>`,
      footer: '',
    });

    let result;
    try {
      result = await API.zuchtKi.paarungAnalyse(
        trialResult.vater_id,
        trialResult.mutter_id,
        trialResult.ik_prozent,
        trialResult.welfare?.level
      );
    } catch (err) {
      UI.modal.open({
        title: `${UI.icon('sparkle')} KI-Paarungsanalyse`,
        body: `<p style="color:var(--c-danger)">${_esc(err.message || 'Fehler beim Generieren.')}</p>`,
        footer: `<button class="btn btn-secondary" data-modal-close>Schließen</button>`,
      });
      return;
    }

    const empfehlung = result.empfehlung || result.recommendation || '';
    const text = result.text || result.content || result.analyse || JSON.stringify(result);

    const empfehlungColor = {
      empfohlen:        '#16a34a',
      bedingt:          '#f59e0b',
      nicht_empfohlen:  '#dc2626',
    }[empfehlung] || '#6b7280';

    const empfehlungLabel = {
      empfohlen:        'Empfohlen',
      bedingt:          'Bedingt empfohlen',
      nicht_empfohlen:  'Nicht empfohlen',
    }[empfehlung] || empfehlung;

    UI.modal.open({
      title: `${UI.icon('sparkle')} KI-Paarungsanalyse`,
      body: `
        <div style="display:flex;flex-direction:column;gap:var(--space-4)">
          ${empfehlung ? `
          <div style="padding:var(--space-3);border-radius:var(--radius-md);
                      background:${empfehlungColor}18;border:1.5px solid ${empfehlungColor}40;
                      font-weight:var(--weight-semibold);color:${empfehlungColor}">
            ${UI.icon('check-circle')} ${_esc(empfehlungLabel)}
          </div>` : ''}
          <div style="white-space:pre-wrap;font-size:var(--text-sm);line-height:1.6">${_esc(text)}</div>
        </div>`,
      footer: `
        <button class="btn btn-secondary flex-1" id="ki-paarung-copy">
          ${UI.icon('clipboard-text')} Kopieren
        </button>
        <button class="btn btn-primary flex-1" data-modal-close>Schließen</button>`,
    });

    document.getElementById('ki-paarung-copy')?.addEventListener('click', async () => {
      try {
        await navigator.clipboard.writeText(text);
        UI.toast.success('Analyse kopiert.');
      } catch {
        UI.toast.error('Kopieren nicht möglich.');
      }
    });
  }

  // ----------------------------------------------------------
  // CSS (einmalig injizieren)
  // ----------------------------------------------------------
  (function _injectStyles() {
    if (document.getElementById('zh-styles')) return;
    const s = document.createElement('style');
    s.id = 'zh-styles';
    s.textContent = `
      .zh-layout { padding: var(--space-4) 0; }

      .zh-card {
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        border-radius: var(--radius-lg);
        margin-bottom: var(--space-3);
        overflow: hidden;
      }

      .zh-card-header {
        display: flex;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
      }

      .zh-card-title {
        font-size: var(--text-base);
        font-weight: var(--weight-semibold);
        display: flex;
        align-items: center;
        gap: var(--space-2);
        flex-wrap: wrap;
        margin-bottom: var(--space-1);
      }

      .zh-card-meta {
        font-size: var(--text-sm);
        color: var(--c-text-secondary);
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-1);
        margin-top: 2px;
      }

      .zh-card-actions {
        display: flex;
        align-items: center;
        gap: var(--space-1);
        flex-shrink: 0;
      }

      .zh-section-buttons {
        display: flex;
        gap: var(--space-1);
        padding: 0 var(--space-4) var(--space-2);
        flex-wrap: wrap;
        border-top: 1px solid var(--c-border);
        padding-top: var(--space-2);
      }

      .zh-section-wrap {
        border-top: 1px solid var(--c-border);
        background: var(--c-surface-subtle, var(--c-bg));
      }

      .zh-section-inner {
        padding: var(--space-3) var(--space-4);
      }

      .zh-section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--space-3);
      }

      .zh-detail-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
      }

      .zh-detail-row {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2);
        border-radius: var(--radius-md);
        background: var(--c-surface);
        border: 1px solid var(--c-border);
      }

      .zh-detail-info {
        flex: 1;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-2);
      }

      .zh-detail-label {
        font-size: var(--text-sm);
        font-weight: var(--weight-medium);
      }

      .zh-badge {
        display: inline-block;
        padding: 1px 7px;
        border-radius: 99px;
        font-size: var(--text-xs);
        font-weight: var(--weight-semibold);
        color: #fff;
        white-space: nowrap;
      }
    `;
    document.head.appendChild(s);
  })();

  // ----------------------------------------------------------
  // Profilfotos & Logo verwalten
  // ----------------------------------------------------------
  async function _showBreederPhotosModal(breederId) {
    const galleryId = 'bp-gallery';
    const visLabels = {
      public:  { text: 'Öffentlich', color: '#16a34a' },
      inquiry: { text: 'Anfrage',    color: '#f59e0b' },
      private: { text: 'Privat',     color: '#6b7280' },
    };
    const visOrder = ['public', 'inquiry', 'private'];

    UI.modal.open({
      title: `${UI.icon('images')} Züchter-Profilfotos & Logo`,
      body: `
        <p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin:0 0 var(--space-3)">
          Diese Fotos erscheinen im öffentlichen Züchterprofil. Das primäre Foto wird als <strong>Logo</strong> im Hero angezeigt.
        </p>
        <div id="${galleryId}" style="margin-bottom:var(--space-4)">
          <p style="color:var(--c-text-muted);font-size:var(--text-sm)">Lädt…</p>
        </div>
        <hr style="margin:var(--space-3) 0;border:none;border-top:1px solid var(--c-border)">
        <form id="bp-upload-form" style="display:flex;flex-direction:column;gap:var(--space-2)">
          <label style="font-size:var(--text-sm);font-weight:600">${UI.icon('upload-simple')} Foto hochladen</label>
          <input class="form-control" type="file" name="file" accept="image/*" required>
          <input class="form-control" type="text" name="caption" placeholder="Bildunterschrift (optional)">
        </form>`,
      footer: `<button type="submit" form="bp-upload-form" class="btn btn-primary" id="bp-upload-btn">
                 ${UI.icon('upload-simple')} Hochladen
               </button>`,
    });

    async function _loadGallery() {
      const el = document.getElementById(galleryId);
      if (!el) return;
      try {
        const photos = await API.breederPhotos.list('breeder', breederId);
        if (!photos.length) {
          el.innerHTML = `<p style="color:var(--c-text-muted);font-size:var(--text-sm)">Noch keine Fotos — lade das erste hoch.</p>`;
          return;
        }
        el.innerHTML = `
          <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:var(--space-2)">
            ${photos.map(ph => {
              const thumb = ph.thumbnail_url || ph.url || '';
              const vis   = visLabels[ph.visibility] || visLabels.private;
              const isPrimary = ph.is_primary;
              return `
                <div style="position:relative;border-radius:var(--radius-md);overflow:hidden;
                            border:${isPrimary ? '2px solid var(--c-primary)' : '1px solid var(--c-border)'};aspect-ratio:1"
                     data-photo-id="${ph.id}">
                  <a href="${_esc(ph.url || '')}" target="_blank" rel="noopener noreferrer">
                    <img src="${_esc(thumb)}" alt="${_esc(ph.caption || '')}"
                         loading="lazy" style="width:100%;height:100%;object-fit:cover;display:block"
                         onerror="this.parentElement.parentElement.style.opacity='.4'">
                  </a>
                  ${isPrimary ? `<span style="position:absolute;top:3px;left:3px;background:var(--c-primary);color:white;
                    font-size:9px;font-weight:700;border-radius:999px;padding:1px 5px">Logo</span>` : ''}
                  <!-- Sichtbarkeit -->
                  <button class="bp-vis-btn" data-photo-id="${ph.id}" data-vis="${_esc(ph.visibility)}"
                          style="position:absolute;bottom:0;left:0;right:0;background:${vis.color};color:#fff;
                                 border:none;cursor:pointer;font-size:9px;padding:2px 4px;font-weight:700">
                    ${vis.text}
                  </button>
                  <!-- Als Logo setzen -->
                  ${!isPrimary ? `<button class="bp-primary-btn" data-photo-id="${ph.id}" title="Als Logo setzen"
                          style="position:absolute;top:2px;right:24px;background:rgba(0,0,0,.5);color:#fff;
                                 border:none;border-radius:50%;cursor:pointer;width:20px;height:20px;
                                 display:flex;align-items:center;justify-content:center;font-size:10px">
                    ${UI.icon('star')}
                  </button>` : ''}
                  <!-- Löschen -->
                  <button class="bp-del-btn" data-photo-id="${ph.id}" title="Löschen"
                          style="position:absolute;top:2px;right:2px;background:rgba(0,0,0,.5);color:#fff;
                                 border:none;border-radius:50%;cursor:pointer;width:20px;height:20px;
                                 display:flex;align-items:center;justify-content:center;font-size:10px">
                    ${UI.icon('x')}
                  </button>
                </div>`;
            }).join('')}
          </div>`;

        el.querySelectorAll('.bp-vis-btn').forEach(btn => {
          btn.addEventListener('click', async () => {
            const next = visOrder[(visOrder.indexOf(btn.dataset.vis) + 1) % visOrder.length];
            try { await API.breederPhotos.updateVisibility(parseInt(btn.dataset.photoId), next); _loadGallery(); }
            catch (err) { UI.toast.error(err.message); }
          });
        });
        el.querySelectorAll('.bp-primary-btn').forEach(btn => {
          btn.addEventListener('click', async () => {
            try { await API.breederPhotos.setPrimary(parseInt(btn.dataset.photoId)); _loadGallery(); UI.toast.success('Als Logo gesetzt.'); }
            catch (err) { UI.toast.error(err.message); }
          });
        });
        el.querySelectorAll('.bp-del-btn').forEach(btn => {
          btn.addEventListener('click', async () => {
            if (!window.confirm('Foto löschen?')) return;
            try { await API.breederPhotos.remove(parseInt(btn.dataset.photoId)); _loadGallery(); }
            catch (err) { UI.toast.error(err.message); }
          });
        });
      } catch (err) {
        const el = document.getElementById(galleryId);
        if (el) el.innerHTML = `<p style="color:var(--c-danger)">${_esc(err.message || 'Fehler')}</p>`;
      }
    }

    _loadGallery();

    document.getElementById('bp-upload-form')?.addEventListener('submit', async e => {
      e.preventDefault();
      const btn = document.getElementById('bp-upload-btn');
      const fileInput = e.target.querySelector('[name="file"]');
      const caption   = e.target.querySelector('[name="caption"]')?.value?.trim() || '';
      if (!fileInput?.files?.length) { UI.toast.error('Bitte Datei auswählen.'); return; }
      const fd = new FormData();
      fd.append('entity_type', 'breeder');
      fd.append('entity_id',   String(breederId));
      fd.append('visibility',  'public');
      fd.append('caption',     caption);
      fd.append('file',        fileInput.files[0]);
      await UI.asyncButton(btn, async () => {
        await API.breederPhotos.upload(fd);
        UI.toast.success('Foto hochgeladen.');
        e.target.reset();
        await _loadGallery();
      });
    });
  }

  return { init, refresh, onDogChange };

})();