{% extends 'base.html' %}
{% block title %}Dashboard{% endblock %}
{% block topbar_title %}Dashboard{% endblock %}

{% block content %}
<div class="page-header">
  <h1><i class="bi bi-speedometer2 me-2 text-primary-custom"></i>Dashboard</h1>
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item active">Beranda</li>
    </ol>
  </nav>
</div>

<!-- Stats Row -->
<div class="row g-3 mb-4">
  <div class="col-sm-6 col-lg-3">
    <div class="stat-card">
      <div class="stat-icon" style="background:rgba(59,130,246,.15);">
        <i class="bi bi-people-fill" style="color:#3b82f6;"></i>
      </div>
      <div>
        <div class="stat-value">{{ total_penduduk | default(0) }}</div>
        <div class="stat-label">Total Data Penduduk</div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-3">
    <div class="stat-card">
      <div class="stat-icon" style="background:rgba(16,185,129,.15);">
        <i class="bi bi-diagram-3-fill" style="color:#10b981;"></i>
      </div>
      <div>
        <div class="stat-value">{{ total_sesi | default(0) }}</div>
        <div class="stat-label">Sesi Analisis</div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-3">
    <div class="stat-card">
      <div class="stat-icon" style="background:rgba(245,158,11,.15);">
        <i class="bi bi-people" style="color:#f59e0b;"></i>
      </div>
      <div>
        <div class="stat-value">{{ total_user | default(0) }}</div>
        <div class="stat-label">Pengguna Aktif</div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-3">
    <div class="stat-card">
      <div class="stat-icon" style="background:rgba(139,92,246,.15);">
        <i class="bi bi-bar-chart-fill" style="color:#a78bfa;"></i>
      </div>
      <div>
        <div class="stat-value">{{ tahap_counts | length }}</div>
        <div class="stat-label">Tahapan Data</div>
      </div>
    </div>
  </div>
</div>

<!-- Main Content Row -->
<div class="row g-3">
  <!-- Sesi Terbaru -->
  <div class="col-lg-8">
    <div class="card">
      <div class="card-header d-flex align-items-center justify-content-between">
        <span><i class="bi bi-clock-history me-2"></i>Sesi Analisis Terbaru</span>
        <a href="{{ url_for('clustering.buat') }}" class="btn btn-primary btn-sm">
          <i class="bi bi-plus me-1"></i>Analisis Baru
        </a>
      </div>
      <div class="card-body p-0">
        {% if sesi_terbaru %}
        <div class="table-responsive">
          <table class="table table-hover mb-0">
            <thead>
              <tr>
                <th>Nama Sesi</th>
                <th>Tahap</th>
                <th>Metode</th>
                <th>Cluster</th>
                <th>Silhouette</th>
                <th>Tanggal</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {% for sesi in sesi_terbaru %}
              <tr>
                <td class="fw-600">{{ sesi.nama_sesi | truncate(40) }}</td>
                <td><span class="badge bg-secondary">{{ sesi.tahap }}</span></td>
                <td>
                  <span class="badge badge-{{ 'kmeans' if sesi.metode == 'kmeans' else 'hier' }}">
                    {{ 'K-Means' if sesi.metode == 'kmeans' else 'Hierarchical' }}
                  </span>
                </td>
                <td class="font-mono">{{ sesi.n_cluster }}</td>
                <td>
                  {% if sesi.silhouette_score %}
                    <span style="color:{% if sesi.silhouette_score > 0.5 %}#10b981{% elif sesi.silhouette_score > 0.25 %}#f59e0b{% else %}#ef4444{% endif %};">
                      {{ '%.4f' % sesi.silhouette_score }}
                    </span>
                  {% else %}-{% endif %}
                </td>
                <td class="text-muted" style="font-size:.78rem;">
                  {{ sesi.created_at.strftime('%d %b %Y') }}
                </td>
                <td>
                  <a href="{{ url_for('clustering.detail', id=sesi.id) }}"
                     class="btn btn-sm btn-outline-secondary">
                    <i class="bi bi-eye"></i>
                  </a>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        {% else %}
        <div class="text-center py-5 text-muted">
          <i class="bi bi-inbox fs-1 d-block mb-2"></i>
          Belum ada sesi analisis.
          <br>
          <a href="{{ url_for('clustering.buat') }}" class="btn btn-primary btn-sm mt-2">
            Mulai Analisis
          </a>
        </div>
        {% endif %}
      </div>
    </div>
  </div>

  <!-- Info Panel -->
  <div class="col-lg-4">
    <!-- Data per Tahap -->
    <div class="card mb-3">
      <div class="card-header">
        <i class="bi bi-layers me-2"></i>Data per Tahap
      </div>
      <div class="card-body p-0">
        {% if tahap_counts %}
          {% for tahap, count in tahap_counts %}
          <div class="d-flex align-items-center justify-content-between px-3 py-2"
               style="border-bottom: 1px solid var(--border);">
            <span style="font-size:.83rem;">{{ tahap }}</span>
            <span class="badge bg-primary">{{ count }}</span>
          </div>
          {% endfor %}
        {% else %}
          <div class="text-center py-3 text-muted" style="font-size:.83rem;">
            Belum ada data
          </div>
        {% endif %}
      </div>
    </div>

    <!-- Distribusi Metode -->
    <div class="card">
      <div class="card-header">
        <i class="bi bi-pie-chart me-2"></i>Metode Clustering
      </div>
      <div class="card-body">
        {% if cluster_dist %}
          {% for metode, count in cluster_dist %}
          <div class="d-flex align-items-center gap-2 mb-2">
            <span class="badge badge-{{ 'kmeans' if metode == 'kmeans' else 'hier' }}">
              {{ 'K-Means' if metode == 'kmeans' else 'Hierarchical' }}
            </span>
            <div class="flex-1" style="flex:1;">
              <div style="background:var(--surface-3);border-radius:4px;height:6px;">
                <div style="background:var(--primary);border-radius:4px;height:6px;width:{{ (count / (cluster_dist | sum(attribute=1)) * 100) | int }}%;"></div>
              </div>
            </div>
            <span class="font-mono" style="font-size:.78rem;">{{ count }}</span>
          </div>
          {% endfor %}
        {% else %}
          <p class="text-muted mb-0" style="font-size:.83rem;">Belum ada data</p>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}