{% extends 'base.html' %}
{% block title %}Riwayat Prediksi{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1><i class="bi bi-clock-history me-2" style="color:var(--hijau-utama)"></i>Riwayat Prediksi</h1>
    <p>Semua prediksi dari seluruh pengguna</p>
  </div>
  <div class="d-flex gap-2">
    <a href="{{ url_for('admin.export_riwayat') }}" class="btn-outline-hijau">
      <i class="bi bi-download"></i>Export CSV
    </a>
    <form method="POST" action="{{ url_for('admin.hapus_semua_riwayat') }}"
          onsubmit="return confirm('Hapus SEMUA riwayat dari seluruh user? Tindakan ini tidak dapat dibatalkan.')">
      <button type="submit" class="btn-merah">
        <i class="bi bi-trash"></i>Hapus Semua
      </button>
    </form>
  </div>
</div>

<!-- Filter -->
<div class="card-flat mb-3">
  <form method="GET" class="d-flex gap-2 flex-wrap align-items-end">
    <div style="min-width:160px;">
      <label class="form-label">Label</label>
      <select name="label" class="form-select">
        <option value="">Semua</option>
        <option value="Positif" {% if label == 'Positif' %}selected{% endif %}>Positif</option>
        <option value="Negatif" {% if label == 'Negatif' %}selected{% endif %}>Negatif</option>
        <option value="Netral"  {% if label == 'Netral'  %}selected{% endif %}>Netral</option>
      </select>
    </div>
    <div style="min-width:160px;">
      <label class="form-label">Model</label>
      <select name="model" class="form-select">
        <option value="">Semua</option>
        <option value="indobert"    {% if model_f == 'indobert'    %}selected{% endif %}>IndoBERT</option>
        <option value="naive_bayes" {% if model_f == 'naive_bayes' %}selected{% endif %}>Naive Bayes</option>
      </select>
    </div>
    <div style="min-width:260px;flex:1;">
      <label class="form-label">Cari Komentar</label>
      <input type="text" name="q" class="form-control" value="{{ q or '' }}"
             placeholder="Cari kata/kalimat komentar...">
    </div>
    <div style="min-width:180px;">
      <label class="form-label">User</label>
      <select name="user_id" class="form-select">
        <option value="">Semua User</option>
        {% for u in users %}
        <option value="{{ u.id }}" {% if user_f == u.id|string %}selected{% endif %}>{{ u.nama }}</option>
        {% endfor %}
      </select>
    </div>
    <button type="submit" class="btn-hijau" style="height:38px;"><i class="bi bi-search"></i>Cari / Filter</button>
    <a href="{{ url_for('admin.riwayat') }}" class="btn-outline-hijau" style="height:38px;">Reset</a>
  </form>
</div>

<div class="card-flat">
  <div class="table-responsive">
    <table class="tbl">
      <thead>
        <tr>
          <th>#</th><th>User</th><th>Komentar</th><th>Label</th>
          <th>Confidence</th><th>Model</th><th>Waktu</th><th>Aksi</th>
        </tr>
      </thead>
      <tbody>
        {% for p in data.items %}
        <tr>
          <td class="mono text-muted" style="font-size:.75rem;">{{ (data.page - 1) * data.per_page + loop.index }}</td>
          <td style="font-size:.82rem;">{{ p.user.nama }}</td>
          <td>
            <div style="max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="{{ p.komentar }}">
              {{ p.komentar }}
            </div>
          </td>
          <td><span class="badge-sentimen badge-{{ p.label_hasil.lower() }}">{{ p.label_hasil }}</span></td>
          <td class="mono" style="font-size:.82rem;">{{ p.confidence }}%</td>
          <td>
            <span style="font-size:.75rem;background:#F4F5F7;color:#4B5563;padding:.2rem .5rem;border-radius:4px;">
              {{ 'IndoBERT' if p.model_dipakai == 'indobert' else 'Naive Bayes' }}
            </span>
          </td>
          <td style="font-size:.75rem;color:var(--teks-muted);">
            {{ p.created_at | wib }}
          </td>
          <td>
            <form method="POST" action="{{ url_for('admin.hapus_riwayat', id=p.id) }}"
                  onsubmit="return confirm('Hapus riwayat ini?')">
              <button type="submit" class="btn-merah" style="font-size:.75rem;padding:.3rem .6rem;">
                <i class="bi bi-trash"></i>
              </button>
            </form>
          </td>
        </tr>
        {% else %}
        <tr><td colspan="8"><div class="empty-state"><i class="bi bi-clock"></i><p>Belum ada riwayat prediksi yang sesuai dengan filter/pencarian.</p></div></td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% if data.pages > 1 %}
  <div class="d-flex justify-content-end mt-3 pt-3" style="border-top:1px solid var(--garis);">
    <nav>
      <ul class="pagination pagination-sm mb-0">
        {% if data.has_prev %}<li class="page-item"><a class="page-link" href="?page={{ data.prev_num }}&label={{ label }}&model={{ model_f }}&user_id={{ user_f }}&q={{ q }}">‹</a></li>{% endif %}
        {% for p in data.iter_pages(left_edge=1,right_edge=1,left_current=2,right_current=2) %}
          {% if p %}<li class="page-item {% if p == data.page %}active{% endif %}"><a class="page-link" href="?page={{ p }}&label={{ label }}&model={{ model_f }}&user_id={{ user_f }}&q={{ q }}">{{ p }}</a></li>
          {% else %}<li class="page-item disabled"><span class="page-link">…</span></li>{% endif %}
        {% endfor %}
        {% if data.has_next %}<li class="page-item"><a class="page-link" href="?page={{ data.next_num }}&label={{ label }}&model={{ model_f }}&user_id={{ user_f }}&q={{ q }}">›</a></li>{% endif %}
      </ul>
    </nav>
  </div>
  {% endif %}
</div>
{% endblock %}