{% extends 'base.html' %}
{% block title %}Riwayat Analisis{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1><i class="bi bi-clock-history me-2" style="color:var(--hijau-utama)"></i>Riwayat Analisis</h1>
    <p>Daftar analisis sentimen milik user dan data global dari admin</p>
  </div>
  <div class="d-flex gap-2">
    <a href="{{ url_for('user.export_riwayat') }}" class="btn-outline-hijau">
      <i class="bi bi-download"></i>Export CSV
    </a>
    <form method="POST" action="{{ url_for('user.hapus_semua_riwayat') }}"
          onsubmit="return confirm('Hapus semua riwayat manual milik akun kamu? Data global admin tidak ikut dihapus.')">
      <button type="submit" class="btn-merah">
        <i class="bi bi-trash"></i>Hapus Riwayat Saya
      </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">Filter 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: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>
    <button type="submit" class="btn-hijau" style="height:38px;"><i class="bi bi-search"></i>Cari / Filter</button>
    <a href="{{ url_for('user.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>Komentar</th><th>Label</th><th>Confidence</th><th>Sumber</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>
            <div style="max-width:380px;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>
            {% if p.user_id == current_user.id %}
            <span style="font-size:.72rem;background:#F4F5F7;color:#4B5563;padding:.2rem .5rem;border-radius:4px;">
              Milik Saya
            </span>
            {% else %}
            <span style="font-size:.72rem;background:var(--hijau-muda);color:var(--hijau-utama);padding:.2rem .5rem;border-radius:4px;">
              Data Admin
            </span>
            {% endif %}
          </td>
          <td style="font-size:.75rem;color:var(--teks-muted);">{{ p.created_at | wib }}</td>
          <td>
            {% if p.user_id == current_user.id %}
            <form method="POST" action="{{ url_for('user.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>
            {% else %}
            <span style="font-size:.72rem;color:var(--teks-muted);">Global</span>
            {% endif %}
          </td>
        </tr>
        {% else %}
        <tr><td colspan="7">
          <div class="empty-state">
            <i class="bi bi-clock-history"></i>
            <p>Belum ada riwayat yang sesuai dengan filter/pencarian. <a href="{{ url_for('user.prediksi') }}">Mulai analisis →</a></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 }}&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 }}&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 }}&q={{ q }}">›</a></li>{% endif %}
      </ul>
    </nav>
  </div>
  {% endif %}
</div>
{% endblock %}