{% extends 'base.html' %}
{% block title %}Peta — {{ sesi.nama_sesi }}{% endblock %}
{% block topbar_title %}Peta Distribusi Prioritas{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<style>
  #mapFull {
    height: calc(100vh - 120px);
    border-radius: 12px;
    z-index: 1;
  }
  .leaflet-popup-content-wrapper {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    border: 1px solid #334155 !important;
  }
  .leaflet-popup-tip { background: #1e293b !important; }
  .leaflet-popup-content { font-size: .83rem; line-height: 1.6; min-width: 220px; }
  .popup-bar { height: 6px; border-radius: 3px; margin-top: 2px; }
  .map-legend {
    background: rgba(30,41,59,.95);
    border: 1px solid #334155;
    border-radius: 10px;
    padding: .75rem 1rem;
    font-size: .8rem;
    color: #f1f5f9;
    line-height: 1.9;
  }
  .legend-dot {
    width: 13px; height: 13px; border-radius: 50%;
    display: inline-block; margin-right: 6px; vertical-align: middle;
  }
  .rw-label {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,.8);
  }
  .map-info-bar {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .6rem 1rem;
    font-size: .82rem;
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
  }
</style>
{% endblock %}

{% block content %}
<div class="page-header d-flex align-items-start justify-content-between">
  <div>
    <h1><i class="bi bi-map me-2 text-primary-custom"></i>Peta Distribusi Prioritas per RW</h1>
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ url_for('dashboard.index') }}">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="{{ url_for('clustering.index') }}">Clustering</a></li>
        <li class="breadcrumb-item"><a href="{{ url_for('clustering.detail', id=sesi.id) }}">Detail</a></li>
        <li class="breadcrumb-item active">Peta</li>
      </ol>
    </nav>
  </div>
  <a href="{{ url_for('clustering.detail', id=sesi.id) }}" class="btn btn-outline-secondary btn-sm">
    <i class="bi bi-arrow-left me-1"></i>Kembali
  </a>
</div>

<!-- Info bar -->
<div class="map-info-bar">
  <span><i class="bi bi-diagram-3 me-1" style="color:var(--primary);"></i>
    <strong>{{ sesi.nama_sesi }}</strong>
  </span>
  <span class="text-muted">|</span>
  <span>Tahap: <strong>{{ sesi.tahap }}</strong></span>
  <span class="text-muted">|</span>
  <span>Metode: <strong>{{ 'K-Means' if sesi.metode == 'kmeans' else 'Hierarchical' }}</strong></span>
  <span class="text-muted">|</span>
  <span>{{ sesi.n_cluster }} Cluster</span>
  <span class="text-muted ms-auto" style="font-size:.75rem;">
    Klik marker untuk detail RW
  </span>
</div>

<!-- Peta -->
<div id="mapFull"></div>

<!-- Loading overlay -->
<div id="mapLoading" style="
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:rgba(15,23,42,.85);border-radius:12px;padding:1.5rem 2rem;
  text-align:center;color:#f1f5f9;z-index:9999;
  display:flex;align-items:center;gap:.75rem;">
  <span class="spinner-border spinner-border-sm" style="color:var(--primary);"></span>
  <span>Memuat data peta…</span>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
(function () {
  const map = L.map('mapFull');

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>',
    maxZoom: 19,
  }).addTo(map);

  // Default view Jakarta
  map.setView([-6.2088, 106.8456], 13);

  const WARNA = {
    'Prioritas Tinggi': '#ef4444',
    'Prioritas Sedang': '#f59e0b',
    'Prioritas Rendah': '#10b981',
  };

  fetch('{{ url_for("clustering.api_map_data", id=sesi.id) }}')
    .then(r => r.json())
    .then(data => {
      document.getElementById('mapLoading').style.display = 'none';

      const markers = data.markers;
      if (!markers || markers.length === 0) {
        alert('Tidak ada data koordinat tersedia.');
        return;
      }

      const maxTotal = Math.max(...markers.map(m => m.total));
      const bounds   = [];

      markers.forEach(m => {
        const warna  = WARNA[m.prioritas_dominan] || '#6b7280';
        const radius = 16 + Math.round((m.total / maxTotal) * 30);

        const marker = L.circleMarker([m.lat, m.lng], {
          radius, fillColor: warna, color: '#fff',
          weight: 2.5, opacity: 1, fillOpacity: 0.85,
        }).addTo(map);

        bounds.push([m.lat, m.lng]);

        const total = m.total || 1;
        const pctT  = Math.round(m.prioritas_tinggi / total * 100);
        const pctS  = Math.round(m.prioritas_sedang / total * 100);
        const pctR  = Math.round(m.prioritas_rendah / total * 100);

        marker.bindPopup(`
          <div style="font-weight:700;font-size:1rem;color:${warna};">RW ${m.rw}</div>
          <div style="color:#94a3b8;font-size:.75rem;margin-bottom:.5rem;">${m.kelurahan}, ${m.kecamatan}</div>
          <div style="margin-bottom:.5rem;"><strong>Total: ${m.total} warga</strong></div>
          <div>
            <div style="display:flex;justify-content:space-between;">
              <span style="color:#ef4444;">● Prioritas Tinggi</span><span>${m.prioritas_tinggi} (${pctT}%)</span>
            </div>
            <div class="popup-bar" style="background:#ef4444;width:${pctT}%;"></div>
            <div style="display:flex;justify-content:space-between;margin-top:.3rem;">
              <span style="color:#f59e0b;">● Prioritas Sedang</span><span>${m.prioritas_sedang} (${pctS}%)</span>
            </div>
            <div class="popup-bar" style="background:#f59e0b;width:${pctS}%;"></div>
            <div style="display:flex;justify-content:space-between;margin-top:.3rem;">
              <span style="color:#10b981;">● Prioritas Rendah</span><span>${m.prioritas_rendah} (${pctR}%)</span>
            </div>
            <div class="popup-bar" style="background:#10b981;width:${pctR}%;"></div>
          </div>
          <div style="margin-top:.6rem;padding:.4rem .6rem;border-radius:6px;
               background:rgba(${warna==='#ef4444'?'239,68,68':warna==='#f59e0b'?'245,158,11':'16,185,129'},.15);
               font-size:.78rem;text-align:center;">
            Dominan: <strong style="color:${warna};">${m.prioritas_dominan}</strong>
          </div>`, { maxWidth: 280 });

        marker.bindTooltip(`RW ${m.rw}`, {
          permanent: true, direction: 'center',
          className: 'rw-label', offset: [0, 0],
        });
      });

      if (bounds.length > 0) map.fitBounds(bounds, { padding: [40, 40] });

      // Legend
      const legend = L.control({ position: 'bottomright' });
      legend.onAdd = () => {
        const div = L.DomUtil.create('div', 'map-legend');
        div.innerHTML = `
          <strong style="display:block;margin-bottom:.35rem;font-size:.85rem;">
            Prioritas Dominan RW
          </strong>
          <div><span class="legend-dot" style="background:#ef4444;"></span>Prioritas Tinggi</div>
          <div><span class="legend-dot" style="background:#f59e0b;"></span>Prioritas Sedang</div>
          <div><span class="legend-dot" style="background:#10b981;"></span>Prioritas Rendah</div>
          <hr style="border-color:#334155;margin:.5rem 0;">
          <div style="color:#94a3b8;font-size:.72rem;">
            Ukuran marker ∝ jumlah warga<br>
            ${data.total_rw} RW terpetakan
          </div>`;
        return div;
      };
      legend.addTo(map);

      // Info total per prioritas
      const totalT = markers.reduce((a,m) => a + m.prioritas_tinggi, 0);
      const totalS = markers.reduce((a,m) => a + m.prioritas_sedang, 0);
      const totalR = markers.reduce((a,m) => a + m.prioritas_rendah, 0);

      const infoCtrl = L.control({ position: 'topleft' });
      infoCtrl.onAdd = () => {
        const div = L.DomUtil.create('div', 'map-legend');
        div.innerHTML = `
          <strong style="display:block;margin-bottom:.35rem;font-size:.85rem;">
            Ringkasan Wilayah
          </strong>
          <div><span style="color:#ef4444;font-weight:700;">${totalT}</span> warga Prioritas Tinggi</div>
          <div><span style="color:#f59e0b;font-weight:700;">${totalS}</span> warga Prioritas Sedang</div>
          <div><span style="color:#10b981;font-weight:700;">${totalR}</span> warga Prioritas Rendah</div>`;
        return div;
      };
      infoCtrl.addTo(map);
    })
    .catch(err => {
      document.getElementById('mapLoading').style.display = 'none';
      console.error(err);
    });
})();
</script>
{% endblock %}