{% extends 'base.html' %}
{% block title %}Dashboard{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1><i class="bi bi-grid-1x2 me-2" style="color:var(--hijau-utama)"></i>Dashboard</h1>
    <p>Selamat datang, {{ current_user.nama.split()[0] }} 👋</p>
  </div>
  <a href="{{ url_for('user.prediksi') }}" class="btn-hijau">
    <i class="bi bi-search"></i>Analisis Komentar
  </a>
</div>

<div class="row g-3 mb-4">
  <div class="col-6 col-md-3">
    <div class="stat-card">
      <div class="stat-icon hijau"><i class="bi bi-search"></i></div>
      <div>
        <div class="stat-val mono">{{ total_prediksi }}</div>
        <div class="stat-lbl">Total Analisis</div>
      </div>
    </div>
  </div>
  {% for label, count in dist_pred %}
  <div class="col-6 col-md-3">
    <div class="stat-card">
      <div class="stat-icon {% if label == 'Positif' %}hijau{% elif label == 'Negatif' %}merah{% else %}abu{% endif %}">
        <i class="bi bi-{% if label == 'Positif' %}emoji-smile{% elif label == 'Negatif' %}emoji-frown{% else %}emoji-neutral{% endif %}"></i>
      </div>
      <div>
        <div class="stat-val mono">{{ count }}</div>
        <div class="stat-lbl">{{ label }}</div>
      </div>
    </div>
  </div>
  {% endfor %}
</div>

<div class="row g-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:220px;">
        <canvas id="chartSaya"></canvas>
      </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-clock-history me-2"></i>Analisis Terbaru</h5>
        <a href="{{ url_for('user.riwayat') }}" style="font-size:.78rem;color:var(--hijau-utama);text-decoration:none;">Lihat semua →</a>
      </div>
      {% for p in riwayat_terakhir %}
      <div style="padding:.65rem 0;border-bottom:1px solid var(--garis);display:flex;gap:.75rem;align-items:flex-start;">
        <span class="badge-sentimen badge-{{ p.label_hasil.lower() }}" style="flex-shrink:0;margin-top:.1rem;">{{ p.label_hasil }}</span>
        <div style="flex:1;min-width:0;">
          <div style="font-size:.83rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ p.komentar }}</div>
          <div style="font-size:.72rem;color:var(--teks-muted);margin-top:.2rem;">
            {{ p.created_at | wib }} · {{ p.confidence }}% confidence
          </div>
        </div>
      </div>
      {% else %}
      <div class="empty-state"><i class="bi bi-clock"></i><p>Belum ada riwayat analisis.</p></div>
      {% endfor %}
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
{% if dist_pred %}
<script>
  const dist = {{ dist_pred | tojson }};
  const C = { Positif:'#2D9653', Negatif:'#D64045', Netral:'#6B7C72' };
  new Chart(document.getElementById('chartSaya'), {
    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 } } } }
  });
</script>
{% endif %}
{% endblock %}