{% extends 'base.html' %}
{% block title %}Buat Rekomendasi{% endblock %}
{% block topbar_title %}Buat Rekomendasi Baru{% endblock %}

{% block content %}
<div class="page-header">
  <h1><i class="bi bi-lightbulb me-2 text-primary-custom"></i>Buat Rekomendasi 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('rekomendasi.index') }}">Rekomendasi</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 Rekomendasi
      </div>
      <div class="card-body">
        <form method="POST" id="rekForm">

          <div class="mb-3">
            <label class="form-label">Nama Sesi Rekomendasi</label>
            <input type="text" name="nama_sesi" class="form-control"
                   placeholder="Kosongkan untuk generate otomatis">
          </div>

          <div class="mb-4">
            <label class="form-label">Pilih Sesi Clustering <span class="text-danger">*</span></label>
            {% if clustering_sessions %}
            <select name="clustering_session_id" class="form-select" id="clusterSelect" required>
              <option value="">— Pilih sesi clustering —</option>
              {% for s in clustering_sessions %}
              <option value="{{ s.id }}">
                {{ s.nama_sesi }} ({{ s.tahap }}, {{ s.metode | upper }}, {{ s.n_cluster }} cluster, {{ s.jumlah_data }} data)
              </option>
              {% endfor %}
            </select>
            {% else %}
            <div class="alert alert-warning py-2">
              <i class="bi bi-exclamation-triangle me-2"></i>
              Belum ada sesi clustering.
              <a href="{{ url_for('clustering.buat') }}">Jalankan clustering terlebih dahulu.</a>
            </div>
            {% endif %}
          </div>

          <!-- Preview info sesi terpilih -->
          <div id="sessionPreview" style="display:none;" class="mb-4">
            <div class="card" style="background:var(--surface);">
              <div class="card-body py-3">
                <div class="row g-2 text-center" id="previewStats"></div>
              </div>
            </div>
          </div>

          <div class="alert alert-info py-2" style="font-size:.82rem;">
            <i class="bi bi-info-circle me-2"></i>
            Sistem akan menganalisis profil tiap <strong>cluster</strong> dan tiap <strong>RW</strong>
            secara otomatis — mendeteksi kondisi dominan dan menghasilkan rekomendasi tindakan.
            Proses berlangsung di server, tidak memerlukan koneksi internet.
          </div>

          <div class="d-flex gap-2 justify-content-end">
            <a href="{{ url_for('rekomendasi.index') }}" class="btn btn-outline-secondary">Batal</a>
            <button type="submit" class="btn btn-primary" id="submitBtn"
                    {% if not clustering_sessions %}disabled{% endif %}>
              <i class="bi bi-lightning me-2"></i>Generate Rekomendasi
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- Penjelasan -->
  <div class="col-lg-5">
    <div class="card mb-3">
      <div class="card-header"><i class="bi bi-info-circle me-2"></i>Yang Dianalisis</div>
      <div class="card-body" style="font-size:.83rem;">
        <p class="text-muted mb-2">Sistem mendeteksi kondisi dominan berdasarkan:</p>
        <div class="d-flex align-items-start gap-2 mb-2">
          <i class="bi bi-book text-warning mt-1"></i>
          <div><strong>Pendidikan</strong> — proporsi berpendidikan ≤ SMP atau tidak sekolah</div>
        </div>
        <div class="d-flex align-items-start gap-2 mb-2">
          <i class="bi bi-briefcase-x text-warning mt-1"></i>
          <div><strong>Pekerjaan</strong> — proporsi tidak bekerja atau ibu rumah tangga</div>
        </div>
        <div class="d-flex align-items-start gap-2 mb-2">
          <i class="bi bi-house-exclamation text-warning mt-1"></i>
          <div><strong>Hunian</strong> — proporsi menumpang atau sewa/kontrak</div>
        </div>
        <div class="d-flex align-items-start gap-2 mb-2">
          <i class="bi bi-person-wheelchair text-info mt-1"></i>
          <div><strong>Disabilitas</strong> — proporsi penyandang disabilitas</div>
        </div>
        <div class="d-flex align-items-start gap-2">
          <i class="bi bi-graph-up-arrow text-success mt-1"></i>
          <div><strong>Potensi</strong> — proporsi bekerja aktif / berpendidikan tinggi</div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-header"><i class="bi bi-rulers me-2"></i>Threshold Deteksi</div>
      <div class="card-body p-0">
        <table class="table table-sm mb-0" style="font-size:.78rem;">
          <thead>
            <tr><th>Kondisi</th><th>Threshold</th></tr>
          </thead>
          <tbody>
            <tr><td>Pendidikan rendah</td><td><code>&gt;40%</code> anggota ≤ SMP</td></tr>
            <tr><td>Tidak sekolah</td><td><code>&gt;15%</code> anggota</td></tr>
            <tr><td>Tidak bekerja/IRT</td><td><code>&gt;35%</code> anggota</td></tr>
            <tr><td>IRT dominan</td><td><code>&gt;30%</code> anggota</td></tr>
            <tr><td>Hunian rentan</td><td><code>&gt;40%</code> sewa/menumpang</td></tr>
            <tr><td>Menumpang</td><td><code>&gt;20%</code> anggota</td></tr>
            <tr><td>Disabilitas</td><td><code>&gt;10%</code> anggota</td></tr>
            <tr><td>Potensi ekonomi</td><td><code>&gt;50%</code> bekerja aktif</td></tr>
            <tr><td>Potensi SDM</td><td><code>&gt;30%</code> pendidikan ≥ D3</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  // Preview info sesi clustering yang dipilih
  const clusterSelect = document.getElementById('clusterSelect');
  const preview       = document.getElementById('sessionPreview');
  const previewStats  = document.getElementById('previewStats');
  const submitBtn     = document.getElementById('submitBtn');

  const sessions = {
    {% for s in clustering_sessions %}
    {{ s.id }}: {
      metode: '{{ "K-Means" if s.metode == "kmeans" else "Hierarchical" }}',
      normalisasi: '{{ "Z-Score" if s.normalisasi == "zscore" else "Min-Max" }}',
      n_cluster: {{ s.n_cluster }},
      jumlah_data: {{ s.jumlah_data or 0 }},
      tahap: '{{ s.tahap }}',
      silhouette: '{{ "%.4f" % s.silhouette_score if s.silhouette_score else "-" }}',
    },
    {% endfor %}
  };

  clusterSelect && clusterSelect.addEventListener('change', function () {
    const id = parseInt(this.value);
    if (!id || !sessions[id]) {
      preview.style.display = 'none';
      return;
    }
    const s = sessions[id];
    previewStats.innerHTML = `
      <div class="col-4">
        <div style="font-size:1.3rem;font-weight:800;color:var(--primary);">${s.jumlah_data}</div>
        <div style="font-size:.72rem;color:var(--text-muted);">Data</div>
      </div>
      <div class="col-4">
        <div style="font-size:1.3rem;font-weight:800;color:var(--accent);">${s.n_cluster}</div>
        <div style="font-size:.72rem;color:var(--text-muted);">Cluster</div>
      </div>
      <div class="col-4">
        <div style="font-size:1.3rem;font-weight:800;color:#10b981;">${s.silhouette}</div>
        <div style="font-size:.72rem;color:var(--text-muted);">Silhouette</div>
      </div>
      <div class="col-12 mt-2" style="font-size:.78rem;color:var(--text-muted);">
        ${s.metode} &nbsp;·&nbsp; ${s.normalisasi} &nbsp;·&nbsp; ${s.tahap}
      </div>`;
    preview.style.display = 'block';
  });

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