{% extends 'base.html' %}
{% block title %}Buat Analisis Clustering{% endblock %}
{% block topbar_title %}Buat Analisis Clustering{% endblock %}

{% block content %}
<div class="page-header">
  <h1><i class="bi bi-plus-circle me-2 text-primary-custom"></i>Analisis Clustering Baru</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">Buat Baru</li>
    </ol>
  </nav>
</div>

<div class="row g-3">
  <div class="col-lg-7">
    <div class="card">
      <div class="card-header">
        <i class="bi bi-sliders me-2"></i>Konfigurasi Analisis
      </div>
      <div class="card-body">
        <form method="POST" id="clusteringForm">
          <div class="mb-3">
            <label class="form-label">Nama Sesi Analisis</label>
            <input type="text" name="nama_sesi" class="form-control"
                   placeholder="Contoh: Analisis Tahap 1 2026 - K-Means 3 Cluster">
            <div class="form-text text-muted">Kosongkan untuk generate otomatis.</div>
          </div>

          <div class="mb-3">
            <label class="form-label">Pilih Tahap Data <span class="text-danger">*</span></label>
            <select name="tahap" class="form-select" id="tahapSelect" required>
              <option value="">Pilih Tahap</option>
              {% for tahap, count in tahap_list %}
              <option value="{{ tahap }}">{{ tahap }} ({{ count }} data)</option>
              {% endfor %}
            </select>
            {% if not tahap_list %}
            <div class="alert alert-warning mt-2 py-2">
              <i class="bi bi-exclamation-triangle me-2"></i>
              Belum ada data penduduk.
              <a href="{{ url_for('penduduk.tambah') }}">Tambahkan data terlebih dahulu.</a>
            </div>
            {% endif %}
          </div>

          <div class="row g-3 mb-3">
            <div class="col-md-6">
              <label class="form-label">Metode Clustering <span class="text-danger">*</span></label>
              <select name="metode" class="form-select" id="metodeSelect" required>
                <option value="kmeans">K-Means Clustering</option>
                <option value="hierarchical">Hierarchical Clustering</option>
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label">Metode Normalisasi <span class="text-danger">*</span></label>
              <select name="normalisasi" class="form-select" required>
                <option value="zscore">Z-Score Standardization</option>
                <option value="minmax">Min-Max Scaling</option>
              </select>
            </div>
          </div>

          <div class="row g-3 mb-3">
            <div class="col-md-6">
              <label class="form-label">Jumlah Cluster (k) <span class="text-danger">*</span></label>
              <input type="number" name="n_clusters" class="form-control"
                     value="3" min="2" max="10" required>
              <div class="form-text text-muted">Nilai antara 2–10. Disarankan: 3.</div>
            </div>
            <div class="col-md-6" id="linkageGroup">
              <label class="form-label">Metode Linkage (Hierarchical)</label>
              <select name="linkage_method" class="form-select">
                <option value="ward">Ward (default, terbaik)</option>
                <option value="complete">Complete Linkage</option>
                <option value="average">Average Linkage</option>
                <option value="single">Single Linkage</option>
              </select>
            </div>
          </div>

          <div class="divider"></div>

          <!-- Info fitur -->
          <div class="alert alert-info py-2" style="font-size:.82rem;">
            <i class="bi bi-info-circle me-2"></i>
            <strong>Fitur yang digunakan:</strong> Jenis Kelamin, Pendidikan, Status Rumah, Status Pekerjaan, Disabilitas.
            Proses: <em>Data Cleaning → Transformasi Kategorikal → Normalisasi → Clustering → Evaluasi (Silhouette Score)</em>.
          </div>

          <!-- Opsi Peta -->
          <div class="form-check mb-3">
            <input class="form-check-input" type="checkbox" name="enable_map" id="enableMap" checked>
            <label class="form-check-label" for="enableMap" style="font-size:.83rem;">
              <i class="bi bi-map me-1"></i>
              Buat peta distribusi prioritas per RW
              <span class="text-muted">(memerlukan koneksi internet, +beberapa detik)</span>
            </label>
          </div>

          <div class="d-flex gap-2 justify-content-end mt-3">
            <a href="{{ url_for('clustering.index') }}" class="btn btn-outline-secondary">Batal</a>
            <button type="submit" class="btn btn-primary" id="submitBtn">
              <i class="bi bi-play-circle me-2"></i>Jalankan Analisis
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- Info panel -->
  <div class="col-lg-5">
    <div class="card mb-3">
      <div class="card-header"><i class="bi bi-info-circle me-2"></i>Panduan Metode</div>
      <div class="card-body" style="font-size:.83rem;">
        <h6 class="fw-bold mb-2" style="color:var(--primary);">K-Means Clustering</h6>
        <p class="text-muted">Membagi data menjadi k cluster berdasarkan kedekatan ke centroid. Cocok untuk data besar dan ingin cluster yang jelas terpisah.</p>
        <h6 class="fw-bold mb-2" style="color:#a78bfa;">Hierarchical Clustering</h6>
        <p class="text-muted mb-3">Membangun hierarki cluster dari bawah ke atas (agglomerative). Menghasilkan dendrogram yang memperlihatkan struktur pengelompokan secara visual.</p>

        <h6 class="fw-bold mb-2">Normalisasi</h6>
        <ul class="text-muted ps-3 mb-0">
          <li><strong>Z-Score:</strong> Standarisasi dengan mean 0 dan std 1. Baik untuk data dengan distribusi normal.</li>
          <li><strong>Min-Max:</strong> Skala 0–1. Baik saat rentang nilai penting.</li>
        </ul>
      </div>
    </div>

    <div class="card">
      <div class="card-header"><i class="bi bi-bar-chart me-2"></i>Interpretasi Silhouette Score</div>
      <div class="card-body" style="font-size:.82rem;">
        <div class="d-flex align-items-center gap-2 mb-2">
          <span style="width:10px;height:10px;border-radius:50%;background:#10b981;display:inline-block;"></span>
          <span><strong>0.71–1.00</strong> → Struktur cluster sangat kuat</span>
        </div>
        <div class="d-flex align-items-center gap-2 mb-2">
          <span style="width:10px;height:10px;border-radius:50%;background:#3b82f6;display:inline-block;"></span>
          <span><strong>0.51–0.70</strong> → Struktur cluster baik</span>
        </div>
        <div class="d-flex align-items-center gap-2 mb-2">
          <span style="width:10px;height:10px;border-radius:50%;background:#f59e0b;display:inline-block;"></span>
          <span><strong>0.26–0.50</strong> → Struktur cluster cukup</span>
        </div>
        <div class="d-flex align-items-center gap-2">
          <span style="width:10px;height:10px;border-radius:50%;background:#ef4444;display:inline-block;"></span>
          <span><strong>≤ 0.25</strong> → Struktur cluster lemah</span>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  const metodeSelect = document.getElementById('metodeSelect');
  const linkageGroup = document.getElementById('linkageGroup');
  const form = document.getElementById('clusteringForm');
  const submitBtn = document.getElementById('submitBtn');

  function toggleLinkage() {
    linkageGroup.style.display = metodeSelect.value === 'hierarchical' ? 'block' : 'none';
  }
  metodeSelect.addEventListener('change', toggleLinkage);
  toggleLinkage();

  form.addEventListener('submit', () => {
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Memproses...';
  });
</script>
{% endblock %}