/* ============================================================
   BAN YARO — Züchter-Bereich
   Hub für Züchter: Profil-Status, Wurfverwaltung, Zuchtkartei.
   (Läufigkeit bleibt bewusst als eigener Chip in der HUND-Welt.)
   ============================================================ */

window.Page_breeder_dashboard = (() => {

  let _container = null;
  let _appState  = null;

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

  function refresh() { _load(); }
  function onDogChange() {}

  function _render() {
    _container.innerHTML = `
      <div style="max-width:640px;margin:0 auto;padding:var(--space-4)">
        <div style="margin-bottom:var(--space-5)">
          <h1 style="font-size:var(--text-xl);font-weight:800;margin:0 0 var(--space-1)">
            ${UI.icon('certificate')} Züchter-Bereich
          </h1>
          <p style="color:var(--c-text-secondary);font-size:var(--text-sm);margin:0">
            Dein Zwinger, deine Würfe, deine Zuchthunde.
          </p>
        </div>
        <div id="bd-content">
          <div style="text-align:center;padding:var(--space-8);color:var(--c-text-muted)">Lade…</div>
        </div>
      </div>
    `;
  }

  async function _load() {
    const el = _container.querySelector('#bd-content');
    try {
      const [status, litters, hunde] = await Promise.all([
        API.breeder.status().catch(() => null),
        API.litters.myList().catch(() => []),
        API.zuchthunde.list().catch(() => []),
      ]);
      el.innerHTML = _renderHub(status, litters || [], hunde || []);
      _bindEvents(el);
    } catch (e) {
      el.innerHTML = `<p class="text-danger">${UI.escape(e.message || 'Fehler beim Laden.')}</p>`;
    }
  }

  function _renderHub(status, litters, hunde) {
    const profile = status?.profile;
    const isBreeder = status?.rolle === 'breeder' || status?.rolle === 'admin';
    if (!isBreeder) {
      return `
        <div class="card" style="padding:var(--space-5);text-align:center">
          <p class="text-sm-secondary" style="margin:0">
            Der Züchter-Bereich ist für verifizierte Züchter.
            Den Antrag findest du in den <a href="#settings" class="text-primary">Einstellungen</a>.
          </p>
        </div>`;
    }

    return `
      <!-- Zwinger / Profil -->
      <div class="card" style="padding:var(--space-4);margin-bottom:var(--space-3)">
        <div style="display:flex;align-items:center;gap:var(--space-3)">
          <div class="flex-1-min">
            <div style="font-size:var(--text-xs);font-weight:700;text-transform:uppercase;
                        letter-spacing:.06em;color:var(--c-text-muted);margin-bottom:var(--space-1)">Mein Zwinger</div>
            <div style="font-weight:700">${UI.escape(profile?.zwingername || 'Noch kein Profil angelegt')}</div>
            ${profile?.rasse_text ? `<div class="text-xs-muted">${UI.escape(profile.rasse_text)}</div>` : ''}
            <span class="badge" style="background:#dcfce7;color:#16a34a;margin-top:var(--space-1)">
              ${UI.icon('check-circle')} ${status?.rolle === 'admin' ? 'Admin — alle Züchter-Features' : 'Verifizierter Züchter'}
            </span>
          </div>
          ${profile
            ? `<button class="btn btn-sm btn-secondary" data-bd-nav="breeder-editor">
                 ${UI.icon('pencil-simple')} Profil
               </button>`
            : status?.rolle === 'admin'
            ? `<button class="btn btn-sm btn-primary" id="bd-admin-create">
                 ${UI.icon('plus')} Profil anlegen
               </button>` : ''}
        </div>
      </div>

      ${profile ? `
      <!-- KI-Züchter-Assistenz (aus den Einstellungen hierher umgezogen) -->
      <div class="card" style="padding:var(--space-4);margin-bottom:var(--space-3)">
        <div style="font-size:var(--text-xs);font-weight:700;text-transform:uppercase;
                    letter-spacing:.06em;color:var(--c-text-muted);margin-bottom:var(--space-2)">KI-Züchter-Assistenz</div>
        ${_kiToggleRow('ki_zucht_wurfankuendigung', 'Wurfankündigungen schreiben')}
        ${_kiToggleRow('ki_zucht_genetik', 'Genetik-Erklärung für Käufer')}
        ${_kiToggleRow('ki_zucht_paarung', 'Paarungsanalyse')}
        ${_kiToggleRow('ki_zucht_beschreibung', 'Hunde-Beschreibungen')}
        ${_kiToggleRow('ki_zucht_jahresbericht', 'Jahresauswertung')}
        <div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:var(--space-2)">
          ${UI.icon('info')} Der Tierschutz-Check läuft immer automatisch und ist nicht abschaltbar.
        </div>
      </div>` : ''}

      <!-- Wurfverwaltung -->
      <div class="card" style="padding:var(--space-4);margin-bottom:var(--space-3)">
        <div style="display:flex;align-items:center;gap:var(--space-3)">
          <div style="width:44px;height:44px;border-radius:var(--radius-md);background:rgba(16,185,129,.12);
                      display:flex;align-items:center;justify-content:center;flex-shrink:0">
            <svg class="ph-icon" style="width:22px;height:22px;color:#10B981"><use href="/icons/phosphor.svg#notebook"></use></svg>
          </div>
          <div class="flex-1-min">
            <div style="font-weight:700">Wurfverwaltung</div>
            <div class="text-xs-muted">${litters.length} ${litters.length === 1 ? 'Wurf' : 'Würfe'} · Welpen, Gewichte, Kaufverträge</div>
          </div>
          <button class="btn btn-sm btn-secondary" data-bd-nav="litters">Öffnen</button>
        </div>
      </div>

      <!-- Zuchtkartei -->
      <div class="card" style="padding:var(--space-4);margin-bottom:var(--space-3)">
        <div style="display:flex;align-items:center;gap:var(--space-3)">
          <div style="width:44px;height:44px;border-radius:var(--radius-md);background:rgba(139,92,246,.12);
                      display:flex;align-items:center;justify-content:center;flex-shrink:0">
            <svg class="ph-icon" style="width:22px;height:22px;color:#8B5CF6"><use href="/icons/phosphor.svg#tree-structure"></use></svg>
          </div>
          <div class="flex-1-min">
            <div style="font-weight:700">Zuchtkartei</div>
            <div class="text-xs-muted">${hunde.length} ${hunde.length === 1 ? 'Zuchthund' : 'Zuchthunde'} · Stammbaum, Genetik, Titel</div>
          </div>
          <button class="btn btn-sm btn-secondary" data-bd-nav="zuchthunde">Öffnen</button>
        </div>
      </div>

      <!-- Läufigkeit & Trächtigkeit -->
      <div class="card" style="padding:var(--space-4);margin-bottom:var(--space-3)">
        <div style="display:flex;align-items:center;gap:var(--space-3)">
          <div style="width:44px;height:44px;border-radius:var(--radius-md);background:rgba(236,72,153,.12);
                      display:flex;align-items:center;justify-content:center;flex-shrink:0">
            <svg class="ph-icon" style="width:22px;height:22px;color:#EC4899"><use href="/icons/phosphor.svg#thermometer"></use></svg>
          </div>
          <div class="flex-1-min">
            <div style="font-weight:700">Läufigkeit &amp; Trächtigkeit</div>
            <div class="text-xs-muted">Zyklen, Progesterontests, Deckdaten, Meilensteine</div>
          </div>
          <button class="btn btn-sm btn-secondary" data-bd-nav="laeufi">Öffnen</button>
        </div>
      </div>
    `;
  }

  // KI-Toggle-Zeile (aus settings.js umgezogen — Zustand kommt aus _appState.user)
  function _kiToggleRow(key, label) {
    const user = _appState?.user || {};
    const active = user[key] !== 0;
    return `
      <div style="display:flex;justify-content:space-between;align-items:center;
                  padding:var(--space-2) 0;font-size:var(--text-sm)">
        <span>${UI.escape(label)}</span>
        <button class="by-toggle bd-ki-toggle" data-key="${UI.escape(key)}"
                data-active="${active ? '1' : '0'}"
                style="position:relative;display:inline-block;width:44px;height:24px;
                       border:none;border-radius:12px;cursor:pointer;flex-shrink:0;
                       background:${active ? 'var(--c-primary)' : 'var(--c-border)'};
                       transition:background .2s">
          <span class="by-toggle-thumb"
                style="position:absolute;top:2px;left:${active ? '22px' : '2px'};
                       width:20px;height:20px;border-radius:50%;
                       background:#fff;transition:left .2s;
                       box-shadow:0 1px 3px rgba(0,0,0,.3)"></span>
        </button>
      </div>`;
  }

  function _bindEvents(el) {
    el.querySelectorAll('[data-bd-nav]').forEach(btn => {
      btn.addEventListener('click', () => App.navigate(btn.dataset.bdNav));
    });

    // Admin ohne Profil: Züchterprofil anlegen
    el.querySelector('#bd-admin-create')?.addEventListener('click', async e => {
      const btn = e.currentTarget;
      btn.disabled = true;
      btn.textContent = 'Wird angelegt…';
      try {
        await API.breeder.adminCreateProfile();
        UI.toast.success('Admin-Züchterprofil angelegt.');
        await _load();
      } catch (err) {
        UI.toast.error(err.message || 'Fehler beim Anlegen.');
        btn.disabled = false;
        btn.innerHTML = `${UI.icon('plus')} Profil anlegen`;
      }
    });

    // KI-Toggles — optimistisches Update mit Revert bei Fehler
    el.querySelectorAll('.bd-ki-toggle').forEach(btn => {
      btn.addEventListener('click', async () => {
        const key    = btn.dataset.key;
        const active = btn.dataset.active === '1';
        const newVal = active ? 0 : 1;
        const thumb  = btn.querySelector('.by-toggle-thumb');

        btn.dataset.active = newVal ? '1' : '0';
        btn.style.background = newVal ? 'var(--c-primary)' : 'var(--c-border)';
        if (thumb) thumb.style.left = newVal ? '22px' : '2px';

        try {
          await API.patch('/profile', { [key]: newVal });
          if (_appState?.user) _appState.user[key] = newVal;
          UI.toast.success(newVal ? 'KI-Feature aktiviert.' : 'KI-Feature deaktiviert.');
        } catch (err) {
          btn.dataset.active = active ? '1' : '0';
          btn.style.background = active ? 'var(--c-primary)' : 'var(--c-border)';
          if (thumb) thumb.style.left = active ? '22px' : '2px';
          UI.toast.error(err?.message || 'Einstellung konnte nicht gespeichert werden.');
        }
      });
    });
  }

  return { init, refresh, onDogChange };

})();