{% extends 'base.html' %}
{% block title %}Word Count{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1><i class="bi bi-bar-chart me-2" style="color:var(--hijau-utama)"></i>Word Count</h1>
    <p>Frekuensi kata dalam dataset komentar MBG</p>
  </div>
  <form method="POST" action="{{ url_for('admin.rebuild_wordcount') }}">
    <button type="submit" class="btn-outline-hijau">
      <i class="bi bi-arrow-clockwise"></i>Perbarui Data
    </button>
  </form>
</div>

<!-- Filter -->
<div class="card-flat mb-3">
  <form method="GET" class="d-flex gap-2 flex-wrap align-items-end">
    <div style="flex:1;min-width:180px;">
      <label class="form-label">Cari Kata</label>
      <input type="text" name="search" class="form-control" placeholder="Ketik kata..." value="{{ search }}">
    </div>
    <div style="min-width:160px;">
      <label class="form-label">Sentimen Dominan</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>
    <button type="submit" class="btn-hijau" style="height:38px;"><i class="bi bi-funnel"></i>Filter</button>
    <a href="{{ url_for('admin.wordcount') }}" 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>Kata</th>
          <th>Frekuensi</th>
          <th>Sentimen Dominan</th>
          <th>% Positif</th>
          <th>% Negatif</th>
          <th>% Netral</th>
          <th>Distribusi</th>
        </tr>
      </thead>
      <tbody>
        {% for w in data.items %}
        <tr>
          <td class="mono text-muted" style="font-size:.75rem;">{{ loop.index + (data.page - 1) * 30 }}</td>
          <td style="font-weight:600;">{{ w.kata }}</td>
          <td class="mono">{{ w.frekuensi }}</td>
          <td><span class="badge-sentimen badge-{{ w.sentimen_dominan.lower() }}">{{ w.sentimen_dominan }}</span></td>
          <td class="mono" style="color:var(--hijau-utama)">{{ w.pct_positif }}%</td>
          <td class="mono" style="color:var(--merah)">{{ w.pct_negatif }}%</td>
          <td class="mono" style="color:var(--abu)">{{ w.pct_netral }}%</td>
          <td style="min-width:120px;">
            <div style="display:flex;height:8px;border-radius:4px;overflow:hidden;gap:1px;">
              <div style="background:var(--hijau-terang);width:{{ w.pct_positif }}%;"></div>
              <div style="background:var(--merah);width:{{ w.pct_negatif }}%;"></div>
              <div style="background:var(--abu);width:{{ w.pct_netral }}%;"></div>
            </div>
          </td>
        </tr>
        {% else %}
        <tr><td colspan="8">
          <div class="empty-state">
            <i class="bi bi-bar-chart-line"></i>
            <p>Belum ada data word count. Klik "Perbarui Data" untuk generate.</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 }}&search={{ search }}&label={{ label }}">‹</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 }}&search={{ search }}&label={{ label }}">{{ 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 }}&search={{ search }}&label={{ label }}">›</a></li>{% endif %}
      </ul>
    </nav>
  </div>
  {% endif %}
</div>
{% endblock %}