{% extends 'base.html' %}
{% block title %}Visualisasi{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1><i class="bi bi-pie-chart me-2" style="color:var(--hijau-utama)"></i>Visualisasi</h1>
    <p>Grafik sentimen dan kata-kata yang paling sering muncul</p>
  </div>
</div>

<div class="row g-3 mb-3">
  <div class="col-md-5">
    <div class="card-flat h-100">
      <div class="card-flat-header">
        <h5><i class="bi bi-pie-chart me-2"></i>Distribusi Sentimen</h5>
      </div>
      {% if dist_pred %}
      <div style="position:relative;height:240px;">
        <canvas id="chartPie"></canvas>
      </div>
      <div class="mt-3 d-flex gap-3 justify-content-center flex-wrap">
        {% for label, count in dist_pred %}
        <div class="text-center">
          <div class="mono fw-bold" style="font-size:1.2rem;">{{ count }}</div>
          <span class="badge-sentimen badge-{{ label.lower() }}">{{ label }}</span>
        </div>
        {% endfor %}
      </div>
      {% else %}
      <div class="empty-state"><i class="bi bi-pie-chart"></i><p>Belum ada data prediksi.</p></div>
      {% endif %}
    </div>
  </div>

  <div class="col-md-7">
    <div class="card-flat h-100">
      <div class="card-flat-header">
        <h5><i class="bi bi-bar-chart me-2"></i>Top 20 Kata Terbanyak (Dataset)</h5>
      </div>
      {% if top_words %}
      <div style="position:relative;height:280px;">
        <canvas id="chartWords"></canvas>
      </div>
      {% else %}
      <div class="empty-state"><i class="bi bi-bar-chart"></i><p>Data word count belum tersedia.</p></div>
      {% endif %}
    </div>
  </div>
</div>

<!-- Tabel Top Words -->
{% if top_words %}
<div class="card-flat">
  <div class="card-flat-header">
    <h5><i class="bi bi-table me-2"></i>Tabel Word Count (Dataset)</h5>
  </div>
  <div class="table-responsive">
    <table class="tbl">
      <thead>
        <tr><th>#</th><th>Kata</th><th>Frekuensi</th><th>Sentimen Dominan</th><th>Distribusi</th></tr>
      </thead>
      <tbody>
        {% for w in top_words %}
        <tr>
          <td class="mono text-muted" style="font-size:.75rem;">{{ loop.index }}</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 style="min-width:140px;">
            <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>
            <div style="font-size:.67rem;color:var(--teks-muted);margin-top:.2rem;">
              +{{ w.pct_positif }}% / -{{ w.pct_negatif }}% / ~{{ w.pct_netral }}%
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
  const C = { Positif:'#2D9653', Negatif:'#D64045', Netral:'#6B7C72' };
  {% if dist_pred %}
  const dist = {{ dist_pred | tojson }};
  new Chart(document.getElementById('chartPie'), {
    type: 'doughnut',
    data: {
      labels: dist.map(d => d[0]),
      datasets: [{ data: dist.map(d => d[1]), backgroundColor: dist.map(d => C[d[0]]), borderWidth:2, borderColor:'#fff' }]
    },
    options: { responsive:true, maintainAspectRatio:false, plugins:{ legend:{ position:'bottom', labels:{ font:{size:11}, padding:12 } } } }
  });
  {% endif %}

  {% if top_words %}
  const words = {{ top_words | map(attribute='kata') | list | tojson }};
  const freqs  = {{ top_words | map(attribute='frekuensi') | list | tojson }};
  const doms   = {{ top_words | map(attribute='sentimen_dominan') | list | tojson }};
  new Chart(document.getElementById('chartWords'), {
    type: 'bar',
    data: {
      labels: words,
      datasets: [{
        data: freqs,
        backgroundColor: doms.map(d => C[d] + 'CC'),
        borderColor: doms.map(d => C[d]),
        borderWidth: 1,
        borderRadius: 4,
        borderSkipped: false,
      }]
    },
    options: {
      indexAxis: 'y',
      responsive:true, maintainAspectRatio:false,
      plugins:{ legend:{ display:false } },
      scales:{
        x:{ beginAtZero:true, grid:{ color:'#E2EDE7' }, ticks:{ font:{size:9} } },
        y:{ grid:{ display:false }, ticks:{ font:{size:10} } }
      }
    }
  });
  {% endif %}
</script>
{% endblock %}