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

{% block content %}
<div class="page-header d-flex align-items-start justify-content-between">
  <div>
    <h1><i class="bi bi-lightbulb-fill me-2 text-primary-custom"></i>Hasil Rekomendasi</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">Hasil Rekomendasi</li>
      </ol>
    </nav>
  </div>
  <a href="{{ url_for('rekomendasi.buat') }}" class="btn btn-primary">
    <i class="bi bi-plus-circle me-2"></i>Buat Rekomendasi
  </a>
</div>

<div class="card">
  <div class="card-header">
    <i class="bi bi-clock-history me-2"></i>Riwayat Rekomendasi
  </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>Berdasarkan Clustering</th>
            <th>Tahap</th>
            <th>Items</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>
              <a href="{{ url_for('clustering.detail', id=s.clustering_session_id) }}"
                 style="color:var(--primary);text-decoration:none;font-size:.83rem;">
                {{ s.clustering_session.nama_sesi | truncate(45) }}
              </a>
            </td>
            <td><span class="badge bg-secondary">{{ s.clustering_session.tahap }}</span></td>
            <td>
              <span class="badge bg-primary">{{ s.items | selectattr('level','eq','cluster') | list | length }} cluster</span>
              <span class="badge bg-secondary ms-1">{{ s.items | selectattr('level','eq','rw') | list | length }} RW</span>
            </td>
            <td style="font-size:.82rem;">{{ 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('rekomendasi.detail', id=s.id) }}"
                   class="btn btn-sm btn-outline-secondary" title="Lihat Detail">
                  <i class="bi bi-eye"></i>
                </a>
                <form method="POST" action="{{ url_for('rekomendasi.hapus', id=s.id) }}"
                      onsubmit="return confirm('Hapus rekomendasi ini?')">
                  <button type="submit" class="btn btn-sm btn-outline-danger">
                    <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-lightbulb fs-1 d-block mb-2"></i>
      Belum ada rekomendasi yang dibuat.
      <br>
      <a href="{{ url_for('rekomendasi.buat') }}" class="btn btn-primary btn-sm mt-2">
        <i class="bi bi-plus me-1"></i>Buat Rekomendasi Pertama
      </a>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}