/* ============================================================
   BAN YARO — Orte (Hundefreundliche Orte)
   Karte + Liste, Eigene Orte anlegen/bearbeiten
   ============================================================ */

window.Page_places = (() => {

  let _container = null;
  let _appState  = null;
  let _map       = null;
  let _markers   = [];
  let _data      = [];
  let _activeTyp = null;   // null = alle
  let _search    = '';
  let _userPos   = null;

  // ----------------------------------------------------------
  // Typen-Konfiguration
  // ----------------------------------------------------------
  const TYPEN = {
    restaurant:  { icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#fork-knife"></use></svg>',      label: 'Restaurant & Café',   color: '#F97316' },
    freilauf:    { icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#dog"></use></svg>',             label: 'Freilauffläche',       color: '#22C55E' },
    shop:        { icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#shopping-cart"></use></svg>',   label: 'Shop',                 color: '#3B82F6' },
    kotbeutel:   { icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#bag"></use></svg>',             label: 'Kotbeutel-Station',   color: '#84A98C' },
    tierarzt:    { icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#first-aid"></use></svg>',       label: 'Tierarzt',             color: '#EF4444' },
    hundeschule: { icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#graduation-cap"></use></svg>',  label: 'Hundeschule',          color: '#8B5CF6' },
  };

  // _esc ersetzt durch UI.escape()

  // ----------------------------------------------------------
  // INIT
  // ----------------------------------------------------------
  async function init(container, appState) {
    _container = container;
    _appState  = appState;
    _render();
    _loadData();
    try { _userPos = await API.getLocation(); } catch {}
  }

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

  // ----------------------------------------------------------
  // RENDER — Grundstruktur
  // ----------------------------------------------------------
  function _render() {
    _container.innerHTML = `
      <div class="places-layout">

        <!-- Toolbar -->
        <div class="places-toolbar">
          <div class="places-filter" id="places-filter">
            <button class="places-filter-btn active" data-typ=""><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-trifold"></use></svg> Alle</button>
            ${Object.entries(TYPEN).map(([k, t]) =>
              `<button class="places-filter-btn" data-typ="${k}">${t.icon} ${t.label}</button>`
            ).join('')}
          </div>
          <button class="btn btn-primary btn-sm" id="places-add-btn" style="white-space:nowrap">
            <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#plus"></use></svg> Ort hinzufügen
          </button>
        </div>

        <!-- Suche -->
        <div class="diary-search-wrap" style="margin:var(--space-2) var(--space-3) 0" id="places-search-wrap">
          <svg class="ph-icon diary-search-icon" aria-hidden="true"><use href="/icons/phosphor.svg#magnifying-glass"></use></svg>
          <input type="search" class="diary-search-input" id="places-search"
                 placeholder="Orte durchsuchen…" autocomplete="off">
        </div>

        <!-- Karte -->
        <div id="places-map" class="places-map"></div>

        <!-- Liste -->
        <div id="places-list" class="places-list">
          <div class="places-list-inner">
            <p style="color:var(--c-text-secondary);text-align:center;padding:var(--space-6)">
              Lädt…
            </p>
          </div>
        </div>

      </div>
    `;

    // Events
    document.getElementById('places-filter').addEventListener('click', e => {
      const btn = e.target.closest('.places-filter-btn');
      if (!btn) return;
      document.querySelectorAll('.places-filter-btn').forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      _activeTyp = btn.dataset.typ || null;
      _applyFilter();
    });

    document.getElementById('places-add-btn').addEventListener('click', () => {
      if (!_appState.user) {
        UI.toast.warning('Bitte zuerst anmelden.');
        App.navigate('settings');
        return;
      }
      _showForm(null);
    });

    // Suche mit Debounce
    let _searchTimer = null;
    document.getElementById('places-search')?.addEventListener('input', e => {
      clearTimeout(_searchTimer);
      _searchTimer = setTimeout(() => {
        _search = e.target.value.trim().toLowerCase();
        _applyFilter();
      }, 300);
    });

    UI.loadLeaflet().then(_initMap);
  }

  // ----------------------------------------------------------
  // Karte initialisieren
  // ----------------------------------------------------------
  function _initMap() {
    const el = document.getElementById('places-map');
    if (!el || !window.L || _map) return;

    const center = _userPos ? [_userPos.lat, _userPos.lon] : [51.1657, 10.4515];
    const zoom   = _userPos ? 13 : 6;

    _map = L.map('places-map', { zoomControl: true, attributionControl: false })
             .setView(center, zoom);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 })
     .addTo(_map);

    // GPS-Locate-Button
    L.Control.Locate = L.Control.extend({
      onAdd() {
        const btn = L.DomUtil.create('button', 'places-locate-btn');
        btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,16a96,96,0,1,0,96,96A96.11,96.11,0,0,0,128,16Zm0,176a80,80,0,1,1,80-80A80.09,80.09,0,0,1,128,192Zm0-120a40,40,0,1,0,40,40A40,40,0,0,0,128,72Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,136Z"/></svg>';
        btn.title     = 'Meinen Standort';
        btn.onclick   = async () => {
          try {
            const pos = await API.getLocation({ enableHighAccuracy: true });
            _userPos  = pos;
            _map.setView([pos.lat, pos.lon], 14);
          } catch { UI.toast.error('Standort konnte nicht ermittelt werden.'); }
        };
        return btn;
      },
      onRemove() {},
    });
    new L.Control.Locate({ position: 'bottomright' }).addTo(_map);

    _renderMarkers();
  }

  // ----------------------------------------------------------
  // Daten laden
  // ----------------------------------------------------------
  async function _loadData() {
    try {
      _data = await API.places.list();
      _renderList();
      _renderMarkers();
    } catch (err) {
      UI.toast.error(err.message || 'Fehler beim Laden der Orte.');
    }
  }

  // ----------------------------------------------------------
  // Filter anwenden
  // ----------------------------------------------------------
  function _filtered() {
    let list = _activeTyp ? _data.filter(p => p.typ === _activeTyp) : _data;
    if (_search) {
      const q = _search;
      list = list.filter(p =>
        (p.name   || '').toLowerCase().includes(q) ||
        (p.adresse|| '').toLowerCase().includes(q) ||
        (p.typ    || '').toLowerCase().includes(q)
      );
    }
    return list;
  }

  function _applyFilter() {
    _renderList();
    _renderMarkers();
  }

  // ----------------------------------------------------------
  // Marker rendern
  // ----------------------------------------------------------
  function _renderMarkers() {
    if (!_map || !window.L) return;
    _markers.forEach(m => m.remove());
    _markers = [];

    _filtered().forEach(place => {
      const t = TYPEN[place.typ] || { icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-pin"></use></svg>', color: '#6B7280' };
      const marker = UI.leafletMarker({ lat: place.lat, lon: place.lon, color: t.color, icon: t.icon, size: 34 })
        .addTo(_map)
        .on('click', () => _openDetail(place));
      _markers.push(marker);
    });
  }

  // ----------------------------------------------------------
  // Liste rendern
  // ----------------------------------------------------------
  function _renderList() {
    const list   = document.getElementById('places-list');
    if (!list) return;
    const items  = _filtered();

    if (!items.length) {
      const msg = _search
        ? `Keine Orte gefunden für „${UI.escape(_search)}".`
        : (_activeTyp ? 'Keine Orte in dieser Kategorie.' : 'Noch keine Orte eingetragen.');
      list.innerHTML = `
        <div class="places-list-inner">
          <p style="color:var(--c-text-secondary);text-align:center;padding:var(--space-6)">${msg}</p>
        </div>`;
      return;
    }

    list.innerHTML = `
      <div class="places-list-inner">
        ${items.map(p => _cardHTML(p)).join('')}
      </div>`;

    list.querySelectorAll('.places-card').forEach(card => {
      const id    = parseInt(card.dataset.id);
      const place = _data.find(p => p.id === id);
      if (place) card.addEventListener('click', () => _openDetail(place));
    });
  }

  function _cardHTML(p) {
    const t     = TYPEN[p.typ] || { icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-pin"></use></svg>', label: p.typ, color: '#6B7280' };
    const flags = [
      p.hund_rein         === true  ? `${UI.icon('dog')} Hund rein`    : null,
      p.leine_pflicht     === true  ? `${UI.icon('tag')} Leinenpflicht` : null,
      p.wasser_fuer_hunde === true  ? `${UI.icon('drop')} Wasser`       : null,
    ].filter(Boolean);

    return `
      <div class="places-card" data-id="${p.id}" style="--typ-color:${t.color}">
        <div class="places-card-icon">${t.icon}</div>
        <div class="places-card-body">
          <div class="places-card-name">${UI.escape(p.name)}</div>
          <div class="places-card-meta">
            <span class="places-card-typ" style="color:${t.color}">${t.label}</span>
            ${p.adresse ? `· <span>${UI.escape(p.adresse)}</span>` : ''}
          </div>
          ${flags.length ? `<div class="places-card-flags">${flags.map(f => `<span class="places-flag">${f}</span>`).join('')}</div>` : ''}
        </div>
        <div class="places-card-arrow">${UI.icon('arrow-right')}</div>
      </div>`;
  }

  // ----------------------------------------------------------
  // Detail-Modal
  // ----------------------------------------------------------
  function _openDetail(place) {
    const t     = TYPEN[place.typ] || { icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-pin"></use></svg>', label: place.typ, color: '#6B7280' };
    const isOwn = _appState.user?.id === place.user_id;

    const flags = [
      place.hund_rein         === true  ? `${UI.icon('dog')} Hund erlaubt`    : (place.hund_rein === false  ? `${UI.icon('x')} Kein Hund`      : null),
      place.leine_pflicht     === true  ? `${UI.icon('tag')} Leinenpflicht`   : (place.leine_pflicht === false ? `${UI.icon('check')} Leine optional` : null),
      place.wasser_fuer_hunde === true  ? `${UI.icon('drop')} Wasser vorhanden`: null,
    ].filter(Boolean);

    const body = `
      <div style="display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)">
        <div style="font-size:2.5rem">${t.icon}</div>
        <div>
          <div style="font-size:1.1rem;font-weight:600">${UI.escape(place.name)}</div>
          <div style="color:${t.color};font-size:0.9rem">${t.label}</div>
        </div>
      </div>
      ${place.adresse ? `<p style="color:var(--c-text-secondary);margin-bottom:var(--space-2)">${UI.icon('map-pin')} ${UI.escape(place.adresse)}</p>` : ''}
      ${place.telefon ? `<p style="margin-bottom:var(--space-2)"><a href="tel:${UI.escape(place.telefon)}" style="color:var(--c-primary)">${UI.icon('phone')} ${UI.escape(place.telefon)}</a></p>` : ''}
      ${place.website ? `<p style="margin-bottom:var(--space-2)"><a href="${UI.escape(place.website)}" target="_blank" style="color:var(--c-primary)">${UI.icon('arrow-square-out')} ${UI.escape(place.website)}</a></p>` : ''}
      ${flags.length ? `<div style="display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)">${flags.map(f => `<span class="places-flag places-flag--detail">${f}</span>`).join('')}</div>` : ''}
      <div id="place-rating-${place.id}"></div>
      <p style="color:var(--c-text-muted);font-size:0.8rem;margin-top:var(--space-4)">
        Eingetragen von ${UI.escape(place.user_name || 'Unbekannt')}
      </p>
    `;

    const footer = isOwn ? `
      <button type="button" class="btn btn-secondary" style="width:100%" id="place-detail-edit">Bearbeiten</button>
      <button type="button" class="btn btn-ghost" style="width:100%;margin-top:var(--space-2)" id="place-detail-close">Schließen</button>
    ` : `
      <button type="button" class="btn btn-primary flex-1" id="place-detail-close">Schließen</button>
    `;

    UI.modal.open({ title: `${t.icon} ${UI.escape(place.name)}`, body, footer });

    UI.ratingStars({
      containerId: `place-rating-${place.id}`,
      targetType:  'place',
      targetId:    place.id,
      isLoggedIn:  !!_appState.user,
    });

    document.getElementById('place-detail-close')?.addEventListener('click', UI.modal.close);

    document.getElementById('place-detail-edit')?.addEventListener('click', () => {
      UI.modal.close();
      _showForm(place);
    });


    // Auf Karte zentrieren
    if (_map) _map.setView([place.lat, place.lon], 15);
  }

  // ----------------------------------------------------------
  // Formular — Ort anlegen / bearbeiten
  // ----------------------------------------------------------
  function _showForm(place) {
    const isEdit = !!place;

    const typOpts = Object.entries(TYPEN)
      .map(([k, t]) => `<option value="${k}" ${place?.typ === k ? 'selected' : ''}>${t.label}</option>`)
      .join('');

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

        <div class="form-group">
          <label class="form-label">Name *</label>
          <input class="form-control" type="text" name="name"
                 value="${UI.escape(place?.name || '')}" placeholder="z. B. Café Hund & Herrchen" required>
        </div>

        <div class="form-group">
          <label class="form-label">Kategorie *</label>
          <select class="form-control" name="typ">${typOpts}</select>
        </div>

        <div class="form-group">
          <label class="form-label">GPS-Position *</label>
          <div id="pf-location-picker"></div>
        </div>

        <div class="form-group">
          <label class="form-label">Adresse <span style="color:var(--c-text-secondary)">(optional)</span></label>
          <input class="form-control" type="text" name="adresse"
                 value="${UI.escape(place?.adresse || '')}" placeholder="Musterstraße 1, 12345 Musterstadt">
        </div>

        <div class="form-group">
          <label class="form-label">Website <span style="color:var(--c-text-secondary)">(optional)</span></label>
          <input class="form-control" type="url" name="website"
                 value="${UI.escape(place?.website || '')}" placeholder="https://…">
        </div>

        <div class="form-group">
          <label class="form-label">Telefon <span style="color:var(--c-text-secondary)">(optional)</span></label>
          <input class="form-control" type="tel" name="telefon"
                 value="${UI.escape(place?.telefon || '')}" placeholder="+49 89 123456">
        </div>

        <div class="form-group" style="display:flex;flex-direction:column;gap:var(--space-2)">
          <label class="form-label">Hundefreundlichkeit</label>
          <label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer">
            <input type="checkbox" name="hund_rein" ${place?.hund_rein ? 'checked' : ''}>
            <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#dog"></use></svg> Hund darf rein
          </label>
          <label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer">
            <input type="checkbox" name="leine_pflicht" ${place?.leine_pflicht ? 'checked' : ''}>
            <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#tag"></use></svg> Leinenpflicht beachten
          </label>
          <label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer">
            <input type="checkbox" name="wasser_fuer_hunde" ${place?.wasser_fuer_hunde ? 'checked' : ''}>
            <svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#drop"></use></svg> Wasser für Hunde vorhanden
          </label>
        </div>

      </form>
    `;

    const footer = `
      <div style="display:flex;flex-direction:column;gap:var(--space-2);width:100%">
        <button type="submit" form="place-form" class="btn btn-primary" style="width:100%">
          ${isEdit ? 'Speichern' : 'Ort hinzufügen'}
        </button>
        <div style="display:flex;gap:var(--space-2)">
          ${isEdit ? `<button type="button" class="btn btn-danger" id="place-form-delete">Löschen</button>` : ''}
          <button type="button" class="btn btn-secondary flex-1" id="place-form-cancel">Abbrechen</button>
        </div>
      </div>
    `;

    UI.modal.open({ title: isEdit ? `${UI.escape(place.name)} bearbeiten` : '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-pin"></use></svg> Neuer Ort', body, footer });

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

    document.getElementById('place-form-delete')?.addEventListener('click', async () => {
      const ok = await UI.modal.confirm({
        title: 'Ort löschen?', message: `„${place.name}" wird dauerhaft entfernt.`, confirmText: 'Löschen', danger: true,
      });
      if (!ok) return;
      try {
        await API.places.delete(place.id);
        _data = _data.filter(p => p.id !== place.id);
        UI.modal.close();
        _renderList();
        _renderMarkers();
        UI.toast.success('Ort gelöscht.');
      } catch (err) { UI.toast.error(err.message || 'Fehler.'); }
    });

    // Location-Picker initialisieren
    const _picker = UI.locationPicker({ containerId: 'pf-location-picker' });
    if (place?.lat && place?.lon) {
      _picker.setValue(place.lat, place.lon, null);
    }

    document.getElementById('place-form')?.addEventListener('submit', async e => {
      e.preventDefault();
      const btn = document.querySelector('[form="place-form"][type="submit"]') || e.target.querySelector('[type="submit"]');
      const fd  = UI.formData(e.target);
      const loc = _picker.getValue();

      if (!loc.lat || !loc.lon) {
        UI.toast.warning('Bitte GPS-Position ermitteln.');
        return;
      }

      await UI.asyncButton(btn, async () => {
        const payload = {
          name:              fd.name?.trim(),
          typ:               fd.typ,
          lat:               loc.lat,
          lon:               loc.lon,
          adresse:           fd.adresse  || null,
          website:           fd.website  || null,
          telefon:           fd.telefon  || null,
          hund_rein:         'hund_rein'         in fd,
          leine_pflicht:     'leine_pflicht'     in fd,
          wasser_fuer_hunde: 'wasser_fuer_hunde' in fd,
        };

        if (isEdit) {
          const updated = await API.places.update(place.id, payload);
          const idx = _data.findIndex(p => p.id === place.id);
          if (idx !== -1) _data[idx] = updated;
          UI.toast.success('Gespeichert.');
        } else {
          const created = await API.places.create(payload);
          _data.unshift(created);
          UI.toast.success('Ort hinzugefügt!');
        }

        UI.modal.close();
        _renderList();
        _renderMarkers();
      });
    });
  }

  return { init, refresh, onDogChange };

})();