{% extends 'base.html' %}
{% block title %}Prediksi Massal — Admin{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1><i class="bi bi-file-earmark-arrow-up me-2" style="color:var(--hijau-utama)"></i>Prediksi Massal</h1>
    <p>Admin memproses dataset komentar secara massal melalui file CSV atau Excel</p>
  </div>
</div>

<div class="row g-3 justify-content-center">
  <div class="col-md-12">
    <div class="card-flat">
      <div class="card-flat-header">
        <h5><i class="bi bi-file-earmark-arrow-up me-2"></i>Prediksi Massal (CSV/Excel)</h5>
      </div>
      <form method="POST" action="{{ url_for('admin.prediksi_bulk') }}" enctype="multipart/form-data">
        <div class="mb-3">
          <label class="form-label">Upload File</label>
          <input type="file" name="file" class="form-control" accept=".csv,.xlsx,.xls" required>
          <div style="font-size:.75rem;color:var(--teks-muted);margin-top:.4rem;">
            File wajib memiliki kolom <code>text</code> yang berisi komentar YouTube terkait MBG.
          </div>
        </div>
        <div class="mb-3">
          <label class="form-label">Model</label>
          <select name="model" class="form-select">
            <option value="indobert">IndoBERT</option>
            <option value="naive_bayes">Naive Bayes</option>
          </select>
        </div>
        <button type="submit" class="btn-hijau w-100">
          <i class="bi bi-cloud-upload"></i>Proses Prediksi
        </button>
      </form>
    </div>

    <div class="card-flat mt-3" style="background:var(--hijau-muda);border-color:var(--hijau-border);">
      <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
        <div style="font-size:.9rem;font-weight:700;color:var(--hijau-utama);">
          <i class="bi bi-clock-history me-1"></i>  Hasil Prediksi Massal
        </div>
        {% if bulk_history and bulk_history|length > 0 %}
          <span class="badge-sentimen badge-positif">{{ bulk_history|length }} file hasil tersedia</span>
        {% else %}
          <span class="badge-sentimen badge-netral">Belum ada hasil</span>
        {% endif %}
      </div>

      {% if bulk_history and bulk_history|length > 0 %}
        <div style="font-size:.78rem;color:var(--teks-sekunder);margin-bottom:.75rem;">
          Daftar berikut berisi file hasil prediksi massal yang pernah diproses admin. File dapat diunduh kembali selama belum dihapus.
        </div>

        <div style="max-height:380px;overflow-y:auto;border:1px solid var(--hijau-border);border-radius:8px;background:#fff;">
          <table class="tbl" style="font-size:.78rem;margin-bottom:0;">
            <thead style="position:sticky;top:0;z-index:2;background:var(--hijau-muda);">
              <tr>
                <th style="width:48px;">#</th>
                <th>Nama File</th>
                <th style="width:110px;">Model</th>
                <th style="width:80px;">Total</th>
                <th style="width:90px;">Positif</th>
                <th style="width:90px;">Negatif</th>
                <th style="width:90px;">Netral</th>
                <th style="width:150px;">Waktu</th>
                <th style="width:170px;">Aksi</th>
              </tr>
            </thead>
            <tbody>
              {% for item in bulk_history %}
              <tr>
                <td class="mono">{{ loop.index }}</td>
                <td>
                  <div class="mono" style="word-break:break-all;color:var(--teks-utama);font-weight:700;">{{ item.original_filename or item.hasil_file }}</div>
                  <div class="mono" style="font-size:.70rem;color:var(--teks-muted);word-break:break-all;">File hasil: {{ item.hasil_file }}</div>
                  <div style="font-size:.72rem;color:var(--teks-muted);">Data global untuk dashboard, riwayat, dan visualisasi user.</div>
                </td>
                <td><span class="badge-model">{{ item.model }}</span></td>
                <td class="mono fw-bold">{{ item.total }}</td>
                <td><span class="badge-sentimen badge-positif">{{ item.positif }}</span></td>
                <td><span class="badge-sentimen badge-negatif">{{ item.negatif }}</span></td>
                <td><span class="badge-sentimen badge-netral">{{ item.netral }}</span></td>
                <td class="mono" style="font-size:.74rem;color:var(--teks-sekunder);">{{ item.waktu }}</td>
                <td>
                  <div class="d-flex flex-wrap gap-1">
                    <a href="{{ url_for('admin.download_bulk', filename=item.hasil_file) }}" class="btn-hijau" style="text-decoration:none;padding:.4rem .65rem;font-size:.75rem;">
                      <i class="bi bi-download"></i>Download
                    </a>
                    <form method="POST" action="{{ url_for('admin.hapus_bulk_result', filename=item.hasil_file) }}" onsubmit="return confirm('Hapus file hasil prediksi ini? Data riwayat/global yang sudah tersimpan tidak ikut terhapus.');">
                      <button type="submit" class="btn-merah" style="padding:.4rem .65rem;font-size:.75rem;">
                        <i class="bi bi-trash"></i>Hapus
                      </button>
                    </form>
                  </div>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>

        <div class="mt-2" style="font-size:.75rem;color:var(--teks-muted);">
          Tombol hapus hanya menghapus file export dari daftar ini. Data prediksi yang sudah masuk ke riwayat/database tetap tersimpan.
        </div>
      {% else %}
        <div style="background:#fff;border:1px solid var(--hijau-border);border-radius:8px;padding:1rem;">
          <div style="font-size:.82rem;font-weight:700;color:var(--teks-utama);margin-bottom:.45rem;">
            Belum ada file hasil prediksi massal.
          </div>
          <div style="font-size:.78rem;color:var(--teks-sekunder);line-height:1.7;">
            Upload file CSV/Excel dengan kolom <code>text</code>, pilih model, lalu klik <b>Proses Prediksi</b>. Setelah proses selesai, hasilnya akan muncul pada tabel riwayat di panel ini dan dapat diunduh kembali.
          </div>
        </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}