{% extends 'base.html' %}
{% block title %}Analisis Clustering{% endblock %}
{% block topbar_title %}Analisis Clustering{% 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>Analisis Clustering</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 active">Analisis Clustering</li>
      </ol>
    </nav>
  </div>
  <a href="{{ url_for('clustering.buat') }}" class="btn btn-primary">
    <i class="bi bi-plus-circle me-2"></i>Analisis Baru
  </a>
</div>

<div class="card">
  <div class="card-header">
    <i class="bi bi-clock-history me-2"></i>Riwayat Sesi Analisis
  </div>
  <div class="card-body p-0">
    {% if sessions %}
    <div class="table-responsive">
      <table class="table table-hover mb-0">
        <thead>
          <tr>
            <th>#</th>
            <th>Nama Sesi</th>
            <th>Tahap</th>
            <th>Metode</th>
            <th>Normalisasi</th>
            <th>Cluster</th>
            <th>Data</th>
            <th>Silhouette Score</th>
            <th>Dibuat Oleh</th>
            <th>Tanggal</th>
            <th>Aksi</th>
          </tr>
        </thead>
        <tbody>
          {% for s in sessions %}
          <tr>
            <td class="text-muted font-mono" style="font-size:.75rem;">{{ loop.index }}</td>
            <td class="fw-semibold">{{ s.nama_sesi }}</td>
            <td><span class="badge bg-secondary">{{ s.tahap }}</span></td>
            <td>
              <span class="badge badge-{{ 'kmeans' if s.metode == 'kmeans' else 'hier' }}">
                {{ 'K-Means' if s.metode == 'kmeans' else 'Hierarchical' }}
              </span>
            </td>
            <td>
              <span class="badge bg-secondary">
                {{ 'Z-Score' if s.normalisasi == 'zscore' else 'Min-Max' }}
              </span>
            </td>
            <td class="font-mono text-center">{{ s.n_cluster }}</td>
            <td class="font-mono text-center">{{ s.jumlah_data or '-' }}</td>
            <td>
              {% if s.silhouette_score %}
                {% set sc = s.silhouette_score %}
                <span class="fw-bold font-mono"
                  style="color:{% if sc > 0.5 %}#10b981{% elif sc > 0.25 %}#f59e0b{% else %}#ef4444{% endif %};">
                  {{ '%.4f' % sc }}
                </span>
                <span style="font-size:.7rem;color:var(--text-muted);">
                  ({% if sc > 0.7 %}Sangat Baik{% elif sc > 0.5 %}Baik{% elif sc > 0.25 %}Cukup{% else %}Lemah{% endif %})
                </span>
              {% else %}-{% endif %}
            </td>
            <td style="font-size:.8rem;">{{ s.creator.nama if s.creator else '-' }}</td>
            <td style="font-size:.78rem;color:var(--text-muted);">
              {{ s.created_at.strftime('%d %b %Y %H:%M') }}
            </td>
            <td>
              <div class="d-flex gap-1">
                <a href="{{ url_for('clustering.detail', id=s.id) }}"
                   class="btn btn-sm btn-outline-secondary" title="Detail Analisis">
                  <i class="bi bi-eye"></i>
                </a>
                <form method="POST" action="{{ url_for('clustering.hapus', id=s.id) }}"
                      onsubmit="return confirm('Hapus sesi ini? Semua hasil cluster akan ikut terhapus.')">
                  <button type="submit" class="btn btn-sm btn-outline-danger" title="Hapus">
                    <i class="bi bi-trash"></i>
                  </button>
                </form>
              </div>
            </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 clustering.
      <br>
      <a href="{{ url_for('clustering.buat') }}" class="btn btn-primary btn-sm mt-2">
        <i class="bi bi-plus me-1"></i>Mulai Analisis
      </a>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}