/* ============================================================
   BAN YARO — Adoption (Tierheim-Hunde in der Nähe)
   Seiten-Modul: Hunde aus deutschen Tierheimen finden.
   ============================================================ */

window.Page_adoption = (() => {

  // ----------------------------------------------------------
  // MODUL-STATE
  // ----------------------------------------------------------
  let _container  = null;
  let _appState   = null;
  let _lat        = null;
  let _lon        = null;
  let _radius     = 50;
  let _rasseFilter = '';
  let _activeTab  = 'hunde';
  let _data       = null;   // { animals, shelters, has_petfinder }
  let _loading    = false;
  let _communityData = null;   // [] listings from /adoption/community
  let _myListings    = null;   // [] eigene Inserate

  // ----------------------------------------------------------
  // INIT
  // ----------------------------------------------------------
  async function init(container, appState) {
    _container = container;
    _appState  = appState;
    _render();
    // Standort automatisch versuchen
    _tryAutoLocate();
  }

  // ----------------------------------------------------------
  // REFRESH
  // ----------------------------------------------------------
  async function refresh() {
    if (_lat && _lon) {
      await _loadData();
    }
  }

  // ----------------------------------------------------------
  // RENDER — Grundstruktur
  // ----------------------------------------------------------
  function _render() {
    _container.innerHTML = `
      <!-- Filter-Leiste -->
      <div style="display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-3);align-items:center">
        <select id="adp-radius" class="form-control" style="width:auto;min-width:110px">
          <option value="10">10 km</option>
          <option value="25">25 km</option>
          <option value="50" selected>50 km</option>
          <option value="100">100 km</option>
        </select>
        <input id="adp-rasse" class="form-control" type="text"
               placeholder="Rasse filtern…"
               style="flex:1;min-width:120px;max-width:220px"
               value="${UI.escape(_rasseFilter)}">
        <button class="btn btn-secondary" id="adp-btn-locate"
                style="white-space:nowrap">
          ${UI.icon('map-pin')} Mein Standort
        </button>
      </div>

      <!-- PLZ-Fallback (anfangs versteckt) -->
      <div id="adp-plz-row" style="display:none;margin-bottom:var(--space-3)">
        <div style="display:flex;gap:var(--space-2);align-items:center">
          <input id="adp-plz" class="form-control" type="text"
                 inputmode="numeric" maxlength="5"
                 placeholder="PLZ eingeben (z.B. 80331)"
                 style="max-width:180px">
          <button class="btn btn-primary" id="adp-btn-geocode">Suchen</button>
        </div>
        <p style="font-size:var(--text-xs);color:var(--c-text-secondary);margin-top:var(--space-1)">
          Kein Standort verfügbar — PLZ als Ausgangspunkt eingeben.
        </p>
      </div>

      <!-- Tabs -->
      <div style="display:flex;gap:var(--space-1);margin-bottom:var(--space-4);
                  border-bottom:1px solid var(--c-border)">
        <button class="adp-tab adp-tab--active" data-tab="hunde"
                style="padding:var(--space-2) var(--space-3);background:none;border:none;
                       cursor:pointer;font-weight:600;color:var(--c-primary);
                       border-bottom:2px solid var(--c-primary);font-size:var(--text-sm)">
          ${UI.icon('paw-print')} Hunde
        </button>
        <button class="adp-tab" data-tab="tierheime"
                style="padding:var(--space-2) var(--space-3);background:none;border:none;
                       cursor:pointer;color:var(--c-text-secondary);
                       border-bottom:2px solid transparent;font-size:var(--text-sm)">
          ${UI.icon('house-line')} Tierheime
        </button>
        <button class="adp-tab" data-tab="community"
                style="padding:var(--space-2) var(--space-3);background:none;border:none;
                       cursor:pointer;color:var(--c-text-secondary);
                       border-bottom:2px solid transparent;font-size:var(--text-sm)">
          ${UI.icon('heart')} Weitervermittlung
        </button>
      </div>

      <!-- Inhalt -->
      <div id="adp-content">
        ${UI.skeleton(4)}
      </div>
    `;

    // Events
    _container.querySelector('#adp-radius')
      ?.addEventListener('change', e => {
        _radius = parseInt(e.target.value);
        if (_lat && _lon) _loadData();
      });

    _container.querySelector('#adp-rasse')
      ?.addEventListener('input', e => {
        _rasseFilter = e.target.value.trim().toLowerCase();
        _renderContent();
      });

    _container.querySelector('#adp-btn-locate')
      ?.addEventListener('click', _locateUser);

    _container.querySelector('#adp-btn-geocode')
      ?.addEventListener('click', _geocodePLZ);

    _container.querySelector('#adp-plz')
      ?.addEventListener('keydown', e => {
        if (e.key === 'Enter') _geocodePLZ();
      });

    _container.querySelectorAll('.adp-tab').forEach(btn => {
      btn.addEventListener('click', () => {
        _activeTab = btn.dataset.tab;
        _container.querySelectorAll('.adp-tab').forEach(b => {
          const isActive = b.dataset.tab === _activeTab;
          b.style.color          = isActive ? 'var(--c-primary)' : 'var(--c-text-secondary)';
          b.style.fontWeight     = isActive ? '600' : 'normal';
          b.style.borderBottom   = isActive ? '2px solid var(--c-primary)' : '2px solid transparent';
        });
        _renderContent();
      });
    });
  }

  // ----------------------------------------------------------
  // STANDORT AUTOMATISCH ERMITTELN
  // ----------------------------------------------------------
  async function _tryAutoLocate() {
    try {
      const pos = await API.getLocation({ timeout: 6000, maximumAge: 300_000 });
      _lat = pos.lat;
      _lon = pos.lon;
      await _loadData();
    } catch {
      // Standort nicht verfügbar → PLZ-Eingabe zeigen
      document.getElementById('adp-plz-row')?.style.setProperty('display', 'flex', 'important');
      document.getElementById('adp-plz-row').style.display = 'flex';
      _showNoLocation();
    }
  }

  async function _locateUser() {
    const btn = _container.querySelector('#adp-btn-locate');
    if (btn) btn.disabled = true;
    try {
      const pos = await API.getLocation({ timeout: 10000 });
      _lat = pos.lat;
      _lon = pos.lon;
      document.getElementById('adp-plz-row').style.display = 'none';
      await _loadData();
    } catch {
      UI.toast.error('Standort konnte nicht ermittelt werden. Bitte PLZ eingeben.');
      document.getElementById('adp-plz-row').style.display = 'flex';
    } finally {
      if (btn) btn.disabled = false;
    }
  }

  async function _geocodePLZ() {
    const plz = (_container.querySelector('#adp-plz')?.value || '').trim();
    if (!plz) return;
    const btn = _container.querySelector('#adp-btn-geocode');
    if (btn) btn.disabled = true;
    try {
      const geo = await API.get(`/adoption/geocode?plz=${encodeURIComponent(plz)}`);
      if (geo.lat && geo.lon) {
        _lat = geo.lat;
        _lon = geo.lon;
        await _loadData();
      } else {
        UI.toast.error(`PLZ "${plz}" nicht gefunden.`);
      }
    } catch {
      UI.toast.error('Geocoding fehlgeschlagen. Bitte erneut versuchen.');
    } finally {
      if (btn) btn.disabled = false;
    }
  }

  // ----------------------------------------------------------
  // DATEN LADEN
  // ----------------------------------------------------------
  async function _loadData() {
    if (_loading || !_lat || !_lon) return;
    _loading = true;
    const content = _container.querySelector('#adp-content');
    if (content) content.innerHTML = UI.skeleton(4);
    try {
      _data = await API.get(`/adoption/nearby?lat=${_lat}&lon=${_lon}&radius=${_radius}`);
      _renderContent();
    } catch {
      if (content) content.innerHTML = UI.emptyState({
        icon: 'warning',
        title: 'Daten konnten nicht geladen werden',
        text: 'Bitte versuche es erneut.',
      });
    } finally {
      _loading = false;
    }
  }

  async function _loadCommunity() {
    const content = _container.querySelector('#adp-content');
    if (content) content.innerHTML = UI.skeleton(4);
    try {
      const url = _lat && _lon
        ? `/adoption/community?lat=${_lat}&lon=${_lon}`
        : '/adoption/community';
      _communityData = await API.get(url);
      if (_appState?.user) {
        try {
          _myListings = await API.get('/adoption/community/my');
        } catch {
          _myListings = [];
        }
      }
      _renderCommunity(content);
    } catch {
      if (content) content.innerHTML = UI.emptyState({
        icon: 'warning',
        title: 'Weitervermittlungs-Inserate konnten nicht geladen werden',
        text: 'Bitte versuche es erneut.',
      });
    }
  }

  // ----------------------------------------------------------
  // INHALT RENDERN (je nach Tab)
  // ----------------------------------------------------------
  function _renderContent() {
    const content = _container.querySelector('#adp-content');
    if (!content) return;

    if (_activeTab === 'community') {
      _loadCommunity();
      return;
    }

    if (!_data) { _showNoLocation(); return; }

    if (_activeTab === 'hunde') _renderHunde(content);
    else                        _renderTierheime(content);
  }

  function _showNoLocation() {
    const content = _container.querySelector('#adp-content');
    if (!content) return;
    content.innerHTML = `
      <div style="text-align:center;padding:var(--space-8) var(--space-4)">
        <div style="font-size:2.5rem;margin-bottom:var(--space-3)">🐾</div>
        <h3 class="mb-2">Finde Hunde in deiner Nähe</h3>
        <p style="color:var(--c-text-secondary);margin-bottom:var(--space-5);max-width:320px;margin-inline:auto">
          Erlaube den Zugriff auf deinen Standort oder gib eine PLZ ein, um Tierheim-Hunde
          in deiner Umgebung zu finden.
        </p>
        <a href="https://www.tierheimhelden.de/hunde/liste"
           target="_blank" rel="noopener noreferrer"
           class="btn btn-primary">
          ${UI.icon('arrow-square-out')} Alle Hunde auf Tierheimhelden.de
        </a>
      </div>
    `;
  }

  // ------------------------------------------------------------------
  // TAB: HUNDE
  // ------------------------------------------------------------------
  function _renderHunde(content) {
    let animals = (_data?.animals || []);

    // Rasse-Filter
    if (_rasseFilter) {
      animals = animals.filter(a =>
        (a.rasse || '').toLowerCase().includes(_rasseFilter) ||
        (a.name  || '').toLowerCase().includes(_rasseFilter)
      );
    }

    const hasPetFinder = _data?.has_petfinder;
    const infoText = hasPetFinder
      ? `${animals.length} Hunde im Umkreis von ${_radius} km (via PetFinder)`
      : '';

    if (!animals.length) {
      content.innerHTML = `
        <p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin-bottom:var(--space-4)">
          ${_rasseFilter ? `Keine Hunde gefunden für "<strong>${UI.escape(_rasseFilter)}</strong>"` : `Keine Hunde im Umkreis von ${_radius} km gefunden.`}
        </p>
        <div style="display:flex;flex-direction:column;gap:var(--space-3);max-width:380px">
          <a href="https://www.tierheimhelden.de/hunde/liste"
             target="_blank" rel="noopener noreferrer"
             class="btn btn-primary">
            ${UI.icon('arrow-square-out')} Hunde auf Tierheimhelden.de suchen
          </a>
          <a href="https://www.tierschutz.com/tierheimsuche/"
             target="_blank" rel="noopener noreferrer"
             class="btn btn-secondary">
            ${UI.icon('magnifying-glass')} Tierheimsuche auf tierschutz.com
          </a>
        </div>
        <p style="font-size:var(--text-xs);color:var(--c-text-secondary);margin-top:var(--space-4)">
          Tipp: Schau auch im Tab „Tierheime" nach lokalen Tierheimen direkt.
        </p>
      `;
      return;
    }

    content.innerHTML = `
      ${infoText ? `<p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin-bottom:var(--space-3)">${infoText}</p>` : ''}
      <div class="adp-grid"
           style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--space-3)">
        ${animals.map(a => _animalCard(a)).join('')}
      </div>
      <div style="margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--c-border)">
        <p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin-bottom:var(--space-2)">
          Mehr Hunde finden:
        </p>
        <a href="https://www.tierheimhelden.de/hunde/liste"
           target="_blank" rel="noopener noreferrer"
           class="btn btn-secondary text-sm">
          ${UI.icon('arrow-square-out')} Tierheimhelden.de — alle Hunde
        </a>
      </div>
    `;

    // Klick-Events
    content.querySelectorAll('[data-adp-url]').forEach(card => {
      card.addEventListener('click', () => {
        window.open(card.dataset.adpUrl, '_blank', 'noopener,noreferrer');
      });
    });
  }

  function _animalCard(a) {
    const foto = a.foto_url
      ? `<img src="${UI.escape(a.foto_url)}" alt="${UI.escape(a.name)}"
              style="width:100%;height:100%;object-fit:cover"
              data-fb="emoji" data-fb-emoji="🐶" data-fb-size="2rem">`
      : '<div style="display:flex;align-items:center;justify-content:center;height:100%;font-size:2.5rem">🐶</div>';

    const distTxt  = a.distanz_km != null ? `${a.distanz_km} km` : '';
    const alterTxt = a.alter_jahre != null ? `${_formatAlter(a.alter_jahre)}` : '';
    const rasseTxt = a.rasse || '';
    const tierheim = a.tierheim || '';

    return `
      <div data-adp-url="${UI.escape(a.adoptions_url)}" class="by-hover-lift"
           style="border-radius:var(--radius-md);overflow:hidden;
                  background:var(--c-surface-2);cursor:pointer;
                  box-shadow:0 1px 4px rgba(0,0,0,0.08)">
        <div style="height:120px;overflow:hidden;background:var(--c-surface-3)">
          ${foto}
        </div>
        <div style="padding:var(--space-2) var(--space-2) var(--space-3)">
          <div style="font-weight:600;font-size:var(--text-sm);
                      margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
            ${UI.escape(a.name)}
          </div>
          ${rasseTxt ? `<div style="font-size:var(--text-xs);color:var(--c-text-secondary);
                                   white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
            ${UI.escape(rasseTxt)}
          </div>` : ''}
          <div style="display:flex;gap:var(--space-1);flex-wrap:wrap;margin-top:var(--space-1)">
            ${alterTxt ? `<span style="font-size:10px;background:var(--c-surface-3);
                                       border-radius:999px;padding:1px 6px;color:var(--c-text-secondary)">
              ${UI.escape(alterTxt)}
            </span>` : ''}
            ${a.geschlecht ? `<span style="font-size:10px;background:var(--c-surface-3);
                                          border-radius:999px;padding:1px 6px;color:var(--c-text-secondary)">
              ${a.geschlecht === 'männlich' ? '♂' : '♀'}
            </span>` : ''}
            ${distTxt ? `<span style="font-size:10px;background:var(--c-primary-light,#ede9fe);
                                      border-radius:999px;padding:1px 6px;color:var(--c-primary)">
              ${UI.escape(distTxt)}
            </span>` : ''}
          </div>
          ${tierheim ? `<div style="font-size:10px;color:var(--c-text-muted);margin-top:var(--space-1);
                                    white-space:nowrap;overflow:hidden;text-overflow:ellipsis" title="${UI.escape(tierheim)}">
            ${UI.icon('house-line')} ${UI.escape(tierheim)}
          </div>` : ''}
        </div>
      </div>
    `;
  }

  // ------------------------------------------------------------------
  // TAB: TIERHEIME
  // ------------------------------------------------------------------
  function _renderTierheime(content) {
    const shelters = _data?.shelters || [];

    if (!shelters.length) {
      content.innerHTML = `
        <div style="text-align:center;padding:var(--space-6) var(--space-4)">
          <p style="color:var(--c-text-secondary);margin-bottom:var(--space-4)">
            Keine Tierheime im Umkreis von ${_radius} km gefunden.
          </p>
          <a href="https://www.tierheimhelden.de"
             target="_blank" rel="noopener noreferrer"
             class="btn btn-primary">
            ${UI.icon('arrow-square-out')} Tierheimhelden.de
          </a>
        </div>
      `;
      return;
    }

    content.innerHTML = `
      <p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin-bottom:var(--space-3)">
        ${shelters.length} Tierheim${shelters.length !== 1 ? 'e' : ''} im Umkreis von ${_radius} km
      </p>
      <div class="flex-col-gap-2">
        ${shelters.map(s => _shelterRow(s)).join('')}
      </div>
      <div style="margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--c-border)">
        <p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin-bottom:var(--space-2)">
          Noch mehr Tierheime:
        </p>
        <div style="display:flex;gap:var(--space-2);flex-wrap:wrap">
          <a href="https://www.tierheimhelden.de"
             target="_blank" rel="noopener noreferrer"
             class="btn btn-secondary btn-sm text-sm">
            ${UI.icon('arrow-square-out')} Tierheimhelden.de
          </a>
          <a href="https://www.tierschutz.com/tierheimsuche/"
             target="_blank" rel="noopener noreferrer"
             class="btn btn-secondary btn-sm text-sm">
            ${UI.icon('magnifying-glass')} tierschutz.com
          </a>
        </div>
      </div>
    `;
  }

  function _shelterRow(s) {
    return `
      <a href="${UI.escape(s.url)}" target="_blank" rel="noopener noreferrer" class="by-hover-surface3"
         style="display:flex;align-items:center;gap:var(--space-3);
                padding:var(--space-3);border-radius:var(--radius-md);
                background:var(--c-surface-2);text-decoration:none;color:inherit;
                border:1px solid var(--c-border)">
        <div style="width:40px;height:40px;border-radius:50%;
                    background:var(--c-primary-light,#ede9fe);flex-shrink:0;
                    display:flex;align-items:center;justify-content:center;
                    font-size:1.2rem">
          🏠
        </div>
        <div class="flex-1-min">
          <div style="font-weight:600;font-size:var(--text-sm);
                      white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
            ${UI.escape(s.name)}
          </div>
          <div class="text-xs-secondary">
            ${UI.escape(s.plz)} ${UI.escape(s.stadt)}
          </div>
        </div>
        <div style="display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0">
          <span style="font-size:var(--text-xs);font-weight:600;
                       color:var(--c-primary);background:var(--c-primary-light,#ede9fe);
                       border-radius:999px;padding:2px 8px">
            ${s.distanz_km} km
          </span>
          <span style="font-size:10px;color:var(--c-text-muted)">Hunde ansehen ${UI.icon('arrow-right')}</span>
        </div>
      </a>
    `;
  }

  // ------------------------------------------------------------------
  // TAB: WEITERVERMITTLUNG (Community)
  // ------------------------------------------------------------------
  function _renderCommunity(content) {
    if (!content) return;

    const listings = _communityData || [];
    const isLoggedIn = !!_appState?.user;

    const fabHtml = isLoggedIn ? `
      <button id="adp-fab-create"
              style="position:fixed;bottom:calc(var(--nav-height,64px) + var(--space-4));right:var(--space-4);
                     z-index:100;width:56px;height:56px;border-radius:50%;
                     background:var(--c-primary);color:#fff;border:none;cursor:pointer;
                     box-shadow:0 4px 16px rgba(0,0,0,0.2);
                     display:flex;align-items:center;justify-content:center;font-size:1.5rem"
              title="Hund zur Vermittlung anbieten"
              aria-label="Hund zur Vermittlung anbieten">
        ${UI.icon('plus')}
      </button>
    ` : '';

    if (!listings.length) {
      content.innerHTML = `
        <div style="text-align:center;padding:var(--space-8) var(--space-4)">
          <div style="font-size:2.5rem;margin-bottom:var(--space-3)">🐾</div>
          <h3 class="mb-2">Noch keine Hunde zur Weitervermittlung</h3>
          <p style="color:var(--c-text-secondary);margin-bottom:var(--space-5);max-width:320px;margin-inline:auto">
            Hier können Halter Hunde privat zur Weitervermittlung anbieten —
            zum Beispiel bei Umzug, Krankheit oder Allergie.
          </p>
          ${isLoggedIn ? `
            <button class="btn btn-primary" id="adp-empty-create">
              ${UI.icon('plus')} Hund zur Vermittlung anbieten
            </button>
          ` : `
            <p class="text-sm-secondary">
              Bitte anmelden, um ein Inserat zu erstellen.
            </p>
          `}
        </div>
        ${fabHtml}
      `;
      content.querySelector('#adp-empty-create')?.addEventListener('click', _openCreateModal);
      content.querySelector('#adp-fab-create')?.addEventListener('click', _openCreateModal);
      return;
    }

    // Eigene Inserate trennen
    const myIds = new Set((_myListings || []).map(l => l.id));

    content.innerHTML = `
      <p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin-bottom:var(--space-3)">
        ${listings.length} Inserat${listings.length !== 1 ? 'e' : ''} zur Weitervermittlung
      </p>
      <div class="adp-grid"
           style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-3)">
        ${listings.map(l => _communityCard(l)).join('')}
      </div>

      ${isLoggedIn && _myListings && _myListings.length ? `
        <div id="adp-my-listings" style="margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--c-border)">
          <h4 class="mb-3">Meine Inserate</h4>
          <div class="flex-col-gap-2">
            ${_myListings.map(l => _myListingRow(l)).join('')}
          </div>
        </div>
      ` : ''}

      ${fabHtml}
    `;

    // Interest-Button Events
    content.querySelectorAll('[data-adp-interest]').forEach(btn => {
      btn.addEventListener('click', () => {
        const id        = btn.dataset.adpInterest;
        const interested = btn.dataset.adpInterested === 'true';
        _handleInterest(id, interested, btn);
      });
    });

    // FAB
    content.querySelector('#adp-fab-create')?.addEventListener('click', _openCreateModal);

    // Meine Inserate: Status-Dropdown + Löschen
    content.querySelectorAll('[data-adp-status-change]').forEach(sel => {
      sel.addEventListener('change', async () => {
        const id = sel.dataset.adpStatusChange;
        try {
          await API.patch(`/adoption/community/${id}`, { status: sel.value });
          UI.toast.success('Status aktualisiert.');
          _loadCommunity();
        } catch {
          UI.toast.error('Status konnte nicht aktualisiert werden.');
        }
      });
    });

    content.querySelectorAll('[data-adp-delete]').forEach(btn => {
      btn.addEventListener('click', async () => {
        if (!window.confirm('Inserat wirklich löschen?')) return;
        try {
          await API.del(`/adoption/community/${btn.dataset.adpDelete}`);
          UI.toast.success('Inserat gelöscht.');
          _communityData = null;
          _myListings    = null;
          _loadCommunity();
        } catch {
          UI.toast.error('Löschen fehlgeschlagen.');
        }
      });
    });
  }

  function _communityCard(l) {
    const foto = l.foto_url
      ? `<img src="${UI.escape(l.foto_url)}" alt="${UI.escape(l.name)}"
              style="width:100%;height:100%;object-fit:cover"
              data-fb="emoji" data-fb-emoji="🐾" data-fb-size="2.5rem">`
      : '<div style="display:flex;align-items:center;justify-content:center;height:100%;font-size:2.5rem">🐾</div>';

    const isActive    = !l.status || l.status === 'active';
    const statusLabel = l.status === 'reserved' ? 'Reserviert'
                      : l.status === 'adopted'  ? 'Vermittelt'
                      : '';

    const alterLabel = l.alter_kategorie === 'welpe'  ? 'Welpe <6Mo'
                     : l.alter_kategorie === 'jung'   ? 'Jung 6Mo–2J'
                     : l.alter_kategorie === 'adult'  ? 'Adult 2–8J'
                     : l.alter_kategorie === 'senior' ? 'Senior >8J'
                     : '';

    const genderIcon = l.geschlecht === 'maennlich' ? '♂'
                     : l.geschlecht === 'weiblich'  ? '♀'
                     : '';

    const distTxt = l.distanz_km != null ? `${l.distanz_km} km` : '';
    const ort     = [l.plz, l.ort].filter(Boolean).join(' ');

    const interestBtn = l.user_interested
      ? `<button class="btn btn-secondary btn-sm" style="width:100%;font-size:var(--text-xs)"
                 data-adp-interest="${UI.escape(l.id)}" data-adp-interested="true">
           ✓ Bereits gemeldet
         </button>`
      : `<button class="btn btn-primary btn-sm" style="width:100%;font-size:var(--text-xs)"
                 data-adp-interest="${UI.escape(l.id)}" data-adp-interested="false"
                 ${!isActive ? 'disabled' : ''}>
           Interesse bekunden
         </button>`;

    return `
      <div style="border-radius:var(--radius-md);overflow:hidden;
                  background:var(--c-bg-card,var(--c-surface-2));
                  box-shadow:0 1px 4px rgba(0,0,0,0.08);
                  display:flex;flex-direction:column;position:relative">
        <!-- Foto -->
        <div style="height:140px;overflow:hidden;background:var(--c-surface-3);position:relative">
          ${foto}
          ${!isActive ? `
            <div style="position:absolute;inset:0;background:rgba(0,0,0,0.45);
                        display:flex;align-items:center;justify-content:center">
              <span style="color:#fff;font-weight:700;font-size:var(--text-sm);
                           background:rgba(0,0,0,0.6);padding:4px 12px;border-radius:999px">
                ${UI.escape(statusLabel)}
              </span>
            </div>
          ` : ''}
        </div>
        <!-- Body -->
        <div style="padding:var(--space-2) var(--space-2) var(--space-3);flex:1;display:flex;flex-direction:column;gap:var(--space-1)">
          <div style="font-weight:600;font-size:var(--text-sm);
                      white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
            ${UI.escape(l.name)}
          </div>
          ${l.rasse ? `<div style="font-size:var(--text-xs);color:var(--c-text-secondary);
                                   white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
            ${UI.escape(l.rasse)}
          </div>` : ''}
          <!-- Badges -->
          <div style="display:flex;gap:4px;flex-wrap:wrap">
            ${alterLabel ? `<span style="font-size:10px;background:var(--c-surface-3);
                                         border-radius:999px;padding:1px 6px;color:var(--c-text-secondary)">
              ${UI.escape(alterLabel)}
            </span>` : ''}
            ${genderIcon ? `<span style="font-size:10px;background:var(--c-surface-3);
                                          border-radius:999px;padding:1px 6px;color:var(--c-text-secondary)">
              ${genderIcon}
            </span>` : ''}
            ${distTxt ? `<span style="font-size:10px;background:var(--c-primary-light,#ede9fe);
                                      border-radius:999px;padding:1px 6px;color:var(--c-primary)">
              ${UI.escape(distTxt)}
            </span>` : ''}
          </div>
          ${ort ? `<div style="font-size:10px;color:var(--c-text-muted)">${UI.escape(ort)}</div>` : ''}
          ${l.beschreibung ? `<div style="font-size:var(--text-xs);color:var(--c-text-secondary);
                                          overflow:hidden;display:-webkit-box;
                                          -webkit-line-clamp:2;-webkit-box-orient:vertical">
            ${UI.escape(l.beschreibung)}
          </div>` : ''}
          ${l.interesse_count ? `<div style="font-size:10px;color:var(--c-text-muted)">
            ❤️ ${l.interesse_count} Interessent${l.interesse_count !== 1 ? 'en' : ''}
          </div>` : ''}
          <div style="margin-top:auto;padding-top:var(--space-1)">
            ${interestBtn}
          </div>
        </div>
      </div>
    `;
  }

  function _myListingRow(l) {
    const statusOptions = [
      { value: 'active',   label: 'Aktiv' },
      { value: 'reserved', label: 'Reserviert' },
      { value: 'adopted',  label: 'Vermittelt' },
    ];
    return `
      <div style="display:flex;align-items:center;gap:var(--space-2);
                  padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);
                  background:var(--c-surface-2);border:1px solid var(--c-border)">
        <div class="flex-1-min">
          <div style="font-weight:600;font-size:var(--text-sm);
                      white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
            ${UI.escape(l.name)}
          </div>
          <div class="text-xs-secondary">
            ${l.interesse_count || 0} Interessent${(l.interesse_count || 0) !== 1 ? 'en' : ''}
          </div>
        </div>
        <select class="form-control" style="width:auto;font-size:var(--text-xs)"
                data-adp-status-change="${UI.escape(l.id)}">
          ${statusOptions.map(o => `
            <option value="${o.value}" ${l.status === o.value ? 'selected' : ''}>${o.label}</option>
          `).join('')}
        </select>
        <button class="btn btn-danger btn-sm" style="font-size:var(--text-xs);white-space:nowrap"
                data-adp-delete="${UI.escape(l.id)}">
          ${UI.icon('trash')} Löschen
        </button>
      </div>
    `;
  }

  // ------------------------------------------------------------------
  // INTERESSE BEKUNDEN / ZURÜCKZIEHEN
  // ------------------------------------------------------------------
  async function _handleInterest(id, isInterested, btn) {
    if (!_appState?.user) {
      UI.toast.error('Bitte anmelden um Interesse zu bekunden.');
      return;
    }

    if (isInterested) {
      // Interesse zurückziehen
      try {
        btn.disabled = true;
        await API.del(`/adoption/community/${id}/interest`);
        UI.toast.success('Interesse zurückgezogen.');
        _communityData = null;
        _myListings    = null;
        _loadCommunity();
      } catch {
        UI.toast.error('Fehler beim Zurückziehen des Interesses.');
        btn.disabled = false;
      }
      return;
    }

    // Interesse bekunden — Modal mit optionaler Nachricht
    const body = `
      <form id="adp-interest-form" class="flex-col-gap-3">
        <p style="color:var(--c-text-secondary);font-size:var(--text-sm)">
          Du kannst optional eine Nachricht an den Anbieter schicken.
        </p>
        <div class="form-group">
          <label class="form-label">Nachricht (optional)</label>
          <textarea class="form-control" name="nachricht" rows="3"
                    placeholder="Stell dich kurz vor und erzähle, warum dieser Hund zu dir passt…"></textarea>
        </div>
      </form>
    `;
    const footer = `
      <div style="display:flex;gap:var(--space-2);width:100%">
        <button type="submit" form="adp-interest-form" class="btn btn-primary flex-1" id="adp-interest-submit">
          ${UI.icon('heart')} Interesse bekunden
        </button>
        <button type="button" class="btn btn-secondary" data-modal-close>Abbrechen</button>
      </div>
    `;

    UI.modal.open({ title: 'Interesse bekunden', body, footer });

    document.getElementById('adp-interest-form')?.addEventListener('submit', async e => {
      e.preventDefault();
      const submitBtn = document.getElementById('adp-interest-submit');
      const fd        = new FormData(e.target);
      const payload   = { nachricht: fd.get('nachricht') || null };
      if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = '…'; }
      try {
        await API.post(`/adoption/community/${id}/interest`, payload);
        UI.modal.close();
        UI.toast.success('Interesse gemeldet!');
        _communityData = null;
        _myListings    = null;
        _loadCommunity();
      } catch {
        UI.toast.error('Fehler beim Melden des Interesses.');
        if (submitBtn) { submitBtn.disabled = false; submitBtn.innerHTML = `${UI.icon('heart')} Interesse bekunden`; }
      }
    });
  }

  // ------------------------------------------------------------------
  // INSERAT ERSTELLEN — Modal
  // ------------------------------------------------------------------
  function _openCreateModal() {
    if (!_appState?.user) {
      UI.toast.error('Bitte anmelden um ein Inserat zu erstellen.');
      return;
    }

    const body = `
      <form id="adp-create-form" class="flex-col-gap-3">
        <div class="form-group">
          <label class="form-label">Name <span class="text-danger">*</span></label>
          <input class="form-control" name="name" required placeholder="z.B. Bello">
        </div>
        <div class="form-group">
          <label class="form-label">Rasse (optional)</label>
          <input class="form-control" name="rasse" placeholder="z.B. Labrador Mischling">
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)">
          <div class="form-group">
            <label class="form-label">Alter</label>
            <select class="form-control" name="alter_kategorie">
              <option value="">Unbekannt</option>
              <option value="welpe">Welpe &lt;6Mo</option>
              <option value="jung">Jung 6Mo–2J</option>
              <option value="adult">Adult 2–8J</option>
              <option value="senior">Senior &gt;8J</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">Geschlecht</label>
            <select class="form-control" name="geschlecht">
              <option value="">Unbekannt</option>
              <option value="maennlich">Männlich</option>
              <option value="weiblich">Weiblich</option>
            </select>
          </div>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)">
          <div class="form-group">
            <label class="form-label">PLZ</label>
            <input class="form-control" name="plz" inputmode="numeric" maxlength="5"
                   placeholder="z.B. 80331" value="${UI.escape(_lat ? '' : '')}">
          </div>
          <div class="form-group">
            <label class="form-label">Ort</label>
            <input class="form-control" name="ort" placeholder="z.B. München">
          </div>
        </div>
        <div class="form-group">
          <label class="form-label">Beschreibung <span class="text-danger">*</span></label>
          <textarea class="form-control" name="beschreibung" rows="4" required minlength="80"
                    placeholder="Erzähle, warum du deinen Hund abgeben musst, und was ihn besonders macht…"></textarea>
          <div style="font-size:10px;color:var(--c-text-muted);margin-top:2px">Mindestens 80 Zeichen</div>
        </div>
        <div class="form-group">
          <label class="form-label">Hintergrund (optional)</label>
          <textarea class="form-control" name="hintergrund" rows="2"
                    placeholder="Warum suchst du ein neues Zuhause? (Krankheit, Umzug, Allergie…)"></textarea>
        </div>
        <div class="form-group">
          <label class="form-label">Foto (optional)</label>
          <input class="form-control" type="file" name="foto" accept="image/*" id="adp-create-foto">
        </div>
      </form>
    `;

    const footer = `
      <div style="display:flex;flex-direction:column;gap:var(--space-2);width:100%">
        <button type="submit" form="adp-create-form" class="btn btn-primary w-full" id="adp-create-submit">
          ${UI.icon('plus')} Inserat erstellen
        </button>
        <button type="button" class="btn btn-secondary" data-modal-close>Abbrechen</button>
      </div>
    `;

    UI.modal.open({ title: 'Hund zur Vermittlung anbieten', body, footer });

    document.getElementById('adp-create-form')?.addEventListener('submit', async e => {
      e.preventDefault();
      const submitBtn = document.getElementById('adp-create-submit');
      const fd        = new FormData(e.target);

      // Mindestlänge Beschreibung manuell prüfen (minlength gilt nur für text)
      const beschreibung = (fd.get('beschreibung') || '').trim();
      if (beschreibung.length < 80) {
        UI.toast.error('Beschreibung muss mindestens 80 Zeichen lang sein.');
        return;
      }

      // FormData für multipart aufbauen
      const postData = new FormData();
      postData.append('name',            fd.get('name') || '');
      postData.append('rasse',           fd.get('rasse') || '');
      postData.append('alter_kategorie', fd.get('alter_kategorie') || '');
      postData.append('geschlecht',      fd.get('geschlecht') || '');
      postData.append('plz',             fd.get('plz') || '');
      postData.append('ort',             fd.get('ort') || '');
      postData.append('beschreibung',    beschreibung);
      postData.append('hintergrund',     fd.get('hintergrund') || '');
      if (_lat) postData.append('lat', _lat);
      if (_lon) postData.append('lon', _lon);
      const fotoFile = document.getElementById('adp-create-foto')?.files?.[0];
      if (fotoFile) postData.append('foto', fotoFile);

      if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = '…'; }
      try {
        await API.upload('/adoption/community', postData);
        UI.modal.close();
        UI.toast.success('Inserat erstellt!');
        _communityData = null;
        _myListings    = null;
        _loadCommunity();
      } catch (err) {
        UI.toast.error(err.message || 'Inserat konnte nicht erstellt werden.');
        if (submitBtn) {
          submitBtn.disabled = false;
          submitBtn.innerHTML = `${UI.icon('plus')} Inserat erstellen`;
        }
      }
    });
  }

  // ----------------------------------------------------------
  // HILFSFUNKTIONEN
  // ----------------------------------------------------------
  function _formatAlter(jahre) {
    if (jahre < 0.5)  return 'Welpe';
    if (jahre < 1)    return 'Jungtier';
    if (jahre < 2)    return `${Math.round(jahre)} Jahr`;
    if (jahre < 10)   return `${Math.round(jahre)} Jahre`;
    return 'Senior';
  }

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

})();