{% extends 'base.html' %}
{% block title %}Detail Analisis — {{ sesi.nama_sesi }}{% endblock %}
{% block topbar_title %}Detail Analisis{% endblock %}

{% block extra_css %}
<style>
  .info-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; }
  .info-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem;
  }
  .info-item .lbl { font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em;font-weight:700; }
  .info-item .val { font-size:1rem;font-weight:700;margin-top:.25rem;color:var(--text); }
  .centroid-table th { font-size:.72rem; }
  .centroid-table td { font-family: var(--font-mono); font-size:.8rem; }
  .priority-bar {
    height: 8px;
    border-radius: 4px;
    background: var(--surface-3);
    overflow: hidden;
    margin-top: .25rem;
  }
  .priority-bar-fill { height: 100%; border-radius: 4px; transition: width .5s ease; }

  /* Peta */
  #clusterMap { height: 480px; border-radius: 10px; z-index: 1; }
  .leaflet-popup-content-wrapper {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.4) !important;
  }
  .leaflet-popup-tip { background: #1e293b !important; }
  .leaflet-popup-content { font-size: .82rem; line-height: 1.6; }
  .popup-rw-title { font-weight: 700; font-size: .95rem; margin-bottom: .4rem; }
  .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: .78rem;
    color: #f1f5f9;
    line-height: 1.8;
  }
  .legend-dot {
    width: 12px; height: 12px; border-radius: 50%;
    display: inline-block; margin-right: 6px; vertical-align: middle;
  }
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
{% endblock %}

{% block content %}
<div class="page-header d-flex align-items-start justify-content-between">
  <div>
    <h1><i class="bi bi-diagram-3-fill me-2 text-primary-custom"></i>Detail Analisis</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') }}">Analisis Clustering</a></li>
        <li class="breadcrumb-item active">Detail</li>
      </ol>
    </nav>
  </div>
  <div class="d-flex gap-2">
    <a href="{{ url_for('clustering.index') }}" class="btn btn-outline-secondary btn-sm">
      <i class="bi bi-arrow-left me-1"></i>Kembali
    </a>
    <form method="POST" action="{{ url_for('clustering.hapus', id=sesi.id) }}"
          onsubmit="return confirm('Hapus sesi ini?')">
      <button type="submit" class="btn btn-outline-danger btn-sm">
        <i class="bi bi-trash me-1"></i>Hapus
      </button>
    </form>
  </div>
</div>

<!-- Nama Sesi -->
<div class="mb-3">
  <h5 class="fw-bold">{{ sesi.nama_sesi }}</h5>
  <span class="badge bg-secondary me-1">{{ sesi.tahap }}</span>
  <span class="badge badge-{{ 'kmeans' if sesi.metode == 'kmeans' else 'hier' }} me-1">
    {{ 'K-Means' if sesi.metode == 'kmeans' else 'Hierarchical' }}
  </span>
  <span class="badge bg-secondary">
    {{ 'Z-Score' if sesi.normalisasi == 'zscore' else 'Min-Max' }}
  </span>
  <span class="text-muted ms-2" style="font-size:.78rem;">
    {{ sesi.created_at.strftime('%d %B %Y %H:%M') }} — {{ sesi.creator.nama if sesi.creator else '-' }}
  </span>
</div>

<!-- Info Grid -->
<div class="info-grid mb-4">
  <div class="info-item">
    <div class="lbl">Jumlah Data Diproses</div>
    <div class="val font-mono">{{ sesi.jumlah_data or '-' }}</div>
  </div>
  <div class="info-item">
    <div class="lbl">Metode Normalisasi</div>
    <div class="val">{{ 'Z-Score' if sesi.normalisasi == 'zscore' else 'Min-Max Scaling' }}</div>
  </div>
  <div class="info-item">
    <div class="lbl">Jumlah Cluster</div>
    <div class="val font-mono">{{ sesi.n_cluster }}</div>
  </div>
  <div class="info-item">
    <div class="lbl">Silhouette Score</div>
    <div class="val font-mono" style="color:{% if sesi.silhouette_score and sesi.silhouette_score > 0.5 %}#10b981{% elif sesi.silhouette_score and sesi.silhouette_score > 0.25 %}#f59e0b{% else %}#ef4444{% endif %};">
      {{ '%.4f' % sesi.silhouette_score if sesi.silhouette_score else '-' }}
    </div>
  </div>
  {% if sesi.metode == 'hierarchical' and sesi.linkage_method %}
  <div class="info-item">
    <div class="lbl">Metode Linkage</div>
    <div class="val">{{ sesi.linkage_method.title() }}</div>
  </div>
  {% endif %}
  <div class="info-item">
    <div class="lbl">Fitur Digunakan</div>
    <div class="val" style="font-size:.75rem;font-weight:500;">
      {% if sesi.fitur %}
        {{ sesi.fitur | join(', ') | replace('_enc','') | replace('_',' ') | title }}
      {% else %}-{% endif %}
    </div>
  </div>
</div>

<div class="row g-3 mb-4">
  <!-- Kesimpulan -->
  <div class="col-md-6">
    <div class="card h-100">
      <div class="card-header"><i class="bi bi-file-text me-2"></i>Kesimpulan</div>
      <div class="card-body" style="font-size:.875rem;line-height:1.7;">
        {{ sesi.kesimpulan or 'Tidak tersedia.' }}
      </div>
    </div>
  </div>
  <!-- Rekomendasi -->
  <div class="col-md-6">
    <div class="card h-100">
      <div class="card-header"><i class="bi bi-award me-2"></i>Rekomendasi Prioritas</div>
      <div class="card-body" style="font-size:.875rem;line-height:1.7;">
        {% if sesi.rekomendasi %}
          {% for line in sesi.rekomendasi.split('\n') %}
            {% if line.startswith('•') %}
              {% set clean_line = line | replace('• ', '') %}
              {# Ambil teks sebelum "(Prioritas..." #}
              {% set teks = clean_line.split('(Prioritas')[0].strip() %}
              <div class="mb-2 d-flex align-items-start gap-2">
                {% if 'Prioritas Tinggi' in line %}
                  <span class="badge badge-tinggi flex-shrink-0 mt-1">Tinggi</span>
                {% elif 'Prioritas Sedang' in line %}
                  <span class="badge badge-sedang flex-shrink-0 mt-1">Sedang</span>
                {% elif 'Prioritas Rendah' in line %}
                  <span class="badge badge-rendah flex-shrink-0 mt-1">Rendah</span>
                {% endif %}
                <span>{{ teks }}</span>
              </div>
            {% elif line %}
              <p class="fw-semibold mb-2">{{ line }}</p>
            {% endif %}
          {% endfor %}
        {% else %}
          Tidak tersedia.
        {% endif %}
      </div>
    </div>
  </div>
</div>

<!-- K-Means Centroids -->
{% if sesi.metode == 'kmeans' and sesi.centroids %}
<div class="card mb-4">
  <div class="card-header"><i class="bi bi-crosshair me-2"></i>Centroid K-Means (Ruang Ternormalisasi)</div>
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table centroid-table mb-0">
        <thead>
          <tr>
            <th>Cluster</th>
            {% if sesi.fitur %}
              {% for f in sesi.fitur %}
              <th>{{ f | replace('_enc','') | replace('_',' ') | title }}</th>
              {% endfor %}
            {% endif %}
          </tr>
        </thead>
        <tbody>
          {% for c in sesi.centroids %}
          <tr>
            <td><span class="badge bg-primary">Cluster {{ loop.index }}</span></td>
            {% for val in c %}
            <td>{{ '%.4f' % val }}</td>
            {% endfor %}
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endif %}

<!-- Dendrogram -->
{% if sesi.metode == 'hierarchical' and sesi.dendrogram_img %}
<div class="card mb-4">
  <div class="card-header"><i class="bi bi-git me-2"></i>Dendrogram Hierarchical Clustering</div>
  <div class="card-body text-center">
    <img src="data:image/png;base64,{{ sesi.dendrogram_img }}"
         class="img-fluid" style="max-height:400px;border-radius:8px;"
         alt="Dendrogram">
  </div>
</div>
{% endif %}

<!-- Hasil per Cluster -->
<div class="card mb-4">
  <div class="card-header d-flex align-items-center justify-content-between">
    <span><i class="bi bi-collection me-2"></i>Hasil Cluster</span>
    <div id="clusterChartContainer"></div>
  </div>
  <div class="card-body">
    <!-- Distribusi Visual -->
    <div class="row g-3 mb-4" id="clusterSummary">
      {% for cl, group in cluster_groups.items() %}
      {% set prio = group.prioritas %}
      <div class="col-md-4">
        <div class="card"
             style="border-color:{% if prio == 'Prioritas Tinggi' %}rgba(239,68,68,.4){% elif prio == 'Prioritas Sedang' %}rgba(245,158,11,.4){% else %}rgba(16,185,129,.4){% endif %}">
          <div class="card-body">
            <div class="d-flex align-items-center justify-content-between mb-2">
              <h6 class="fw-bold mb-0">Cluster {{ cl + 1 }}</h6>
              <span class="badge badge-{{ 'tinggi' if prio == 'Prioritas Tinggi' else ('sedang' if prio == 'Prioritas Sedang' else 'rendah') }}">
                {{ prio }}
              </span>
            </div>
            <div class="stat-value" style="font-size:2rem;">{{ group.count }}</div>
            <div class="text-muted" style="font-size:.78rem;">anggota</div>
            <div class="priority-bar mt-2">
              <div class="priority-bar-fill"
                   style="width:{{ (group.count / results | length * 100) | int }}%;
                          background:{% if prio == 'Prioritas Tinggi' %}#ef4444{% elif prio == 'Prioritas Sedang' %}#f59e0b{% else %}#10b981{% endif %};">
              </div>
            </div>
            <div class="text-muted mt-1" style="font-size:.72rem;">
              {{ (group.count / results | length * 100) | round(1) }}% dari total
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>

    <!-- Tabel detail per cluster -->
    {% for cl, group in cluster_groups.items() %}
    <div class="mb-4">
      <h6 class="fw-bold mb-2">
        <span class="badge bg-primary me-2">Cluster {{ cl + 1 }}</span>
        <span class="badge badge-{{ 'tinggi' if group.prioritas == 'Prioritas Tinggi' else ('sedang' if group.prioritas == 'Prioritas Sedang' else 'rendah') }}">
          {{ group.prioritas }}
        </span>
        <span class="text-muted ms-2" style="font-size:.78rem;font-weight:400;">
          {{ group.count }} anggota
        </span>
      </h6>
      <div class="table-responsive">
        <table class="table table-sm table-hover mb-0">
          <thead>
            <tr>
              <th>#</th>
              <th>Nama</th>
              <th>RT/RW</th>
              <th>Kelurahan</th>
              <th>Kecamatan</th>
              <th>Pendidikan</th>
              <th>Status Pekerjaan</th>
              <th>Status Rumah</th>
              <th>Disabilitas</th>
            </tr>
          </thead>
          <tbody>
            {% for r in group.members %}
            <tr>
              <td class="text-muted font-mono" style="font-size:.72rem;">{{ loop.index }}</td>
              <td>
                <a href="{{ url_for('penduduk.detail', id=r.penduduk_id) }}"
                   style="color:var(--text);text-decoration:none;font-weight:500;">
                  {{ r.penduduk.nama }}
                </a>
              </td>
              <td class="font-mono text-muted">{{ r.penduduk.rt }}/{{ r.penduduk.rw }}</td>
              <td>{{ r.penduduk.kelurahan or '-' }}</td>
              <td>{{ r.penduduk.kecamatan or '-' }}</td>
              <td><span class="badge bg-secondary">{{ r.penduduk.pendidikan or '-' }}</span></td>
              <td style="font-size:.82rem;">{{ r.penduduk.status_pekerjaan or '-' }}</td>
              <td style="font-size:.82rem;">{{ r.penduduk.status_rumah or '-' }}</td>
              <td>
                {% if r.penduduk.jenis_disabilitas and r.penduduk.jenis_disabilitas != 'Tidak Ada' %}
                  <span class="badge" style="background:rgba(239,68,68,.15);color:#f87171;">
                    {{ r.penduduk.jenis_disabilitas }}
                  </span>
                {% else %}
                  <span class="text-muted">-</span>
                {% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    {% endfor %}
  </div>
</div>

<!-- ── PETA DISTRIBUSI ────────────────────────────────────────────── -->
{% if has_map %}
<div class="card mb-4">
  <div class="card-header d-flex align-items-center justify-content-between">
    <span><i class="bi bi-map me-2"></i>Peta Distribusi Prioritas per RW</span>
    <a href="{{ url_for('clustering.peta', id=sesi.id) }}" target="_blank"
       class="btn btn-sm btn-outline-secondary">
      <i class="bi bi-fullscreen me-1"></i>Layar Penuh
    </a>
  </div>
  <div class="card-body p-2">
    <div id="clusterMap"></div>
  </div>
</div>
{% else %}
<div class="card mb-4">
  <div class="card-body text-center py-4">
    <i class="bi bi-map text-muted" style="font-size:2rem;"></i>
    <p class="text-muted mt-2 mb-3" style="font-size:.875rem;">
      Data peta belum tersedia untuk sesi ini.
    </p>
    <form method="POST" action="{{ url_for('clustering.regeocode', id=sesi.id) }}">
      <button type="submit" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-geo-alt me-1"></i>Generate Peta Sekarang
      </button>
    </form>
  </div>
</div>
{% endif %}

{% endblock %}

{% block extra_js %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
{% if has_map %}
(function () {
  // Inisialisasi peta Leaflet
  const map = L.map('clusterMap', { zoomControl: true });

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

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

  // Ambil data dari API
  fetch('{{ url_for("clustering.api_map_data", id=sesi.id) }}')
    .then(r => r.json())
    .then(data => {
      const markers = data.markers;
      if (!markers || markers.length === 0) {
        document.getElementById('clusterMap').innerHTML =
          '<div class="text-center py-5 text-muted">Tidak ada data koordinat.</div>';
        return;
      }

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

      markers.forEach(m => {
        const warna  = WARNA[m.prioritas_dominan] || '#6b7280';
        // Radius proporsional terhadap jumlah warga di RW (min 14, max 40)
        const radius = 14 + Math.round((m.total / maxTotal) * 26);

        // Pie-style circle marker dengan border
        const marker = L.circleMarker([m.lat, m.lng], {
          radius      : radius,
          fillColor   : warna,
          color       : '#fff',
          weight      : 2,
          opacity     : 0.9,
          fillOpacity : 0.82,
        }).addTo(map);

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

        // Bar distribusi di popup
        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);

        const popup = `
          <div class="popup-rw-title">
            <span style="color:${warna};">●</span> RW ${m.rw}
          </div>
          <div style="color:#94a3b8;font-size:.73rem;">${m.kelurahan}, ${m.kecamatan}</div>
          <hr style="border-color:#334155;margin:.4rem 0;">
          <div>Total warga: <strong>${m.total}</strong></div>
          <div style="margin-top:.4rem;">
            <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:.5rem;color:#64748b;font-size:.7rem;">
            Dominan: <strong style="color:${warna};">${m.prioritas_dominan}</strong>
          </div>`;

        marker.bindPopup(popup, { maxWidth: 260 });

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

      // Fit peta ke semua marker
      if (bounds.length > 0) map.fitBounds(bounds, { padding: [30, 30] });

      // 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:.3rem;">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:.4rem 0;">
          <div style="color:#94a3b8;font-size:.72rem;">Ukuran ∝ jumlah warga di RW</div>`;
        return div;
      };
      legend.addTo(map);
    })
    .catch(err => {
      console.error('Gagal load data peta:', err);
    });
})();
{% endif %}
</script>
<style>
  /* Label RW di dalam marker */
  .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);
  }
</style>
{% endblock %}