{% extends 'base.html' %}
{% block title %}Dashboard Admin{% 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>Ringkasan sistem analisis sentimen MBG</p>
  </div>
</div>

<!-- Stat Cards -->
<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-bar-chart"></i></div>
      <div>
        <div class="stat-val mono">{{ total_kata }}</div>
        <div class="stat-lbl">Total Kata</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card">
      <div class="stat-icon biru"><i class="bi bi-people"></i></div>
      <div>
        <div class="stat-val mono">{{ total_users }}</div>
        <div class="stat-lbl">Total User</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card">
      <div class="stat-icon kuning"><i class="bi bi-search"></i></div>
      <div>
        <div class="stat-val mono">{{ total_prediksi }}</div>
        <div class="stat-lbl">Total Prediksi</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="stat-card">
      <div class="stat-icon hijau"><i class="bi bi-cpu"></i></div>
      <div>
        <div class="stat-val mono">{{ models|length }}</div>
        <div class="stat-lbl">Model Aktif</div>
      </div>
    </div>
  </div>
</div>

<div class="row g-3 mb-4">
  <!-- Distribusi Prediksi -->
  <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 Hasil Prediksi</h5>
      </div>
      <div style="position:relative;height:220px;">
        <canvas id="chartPred"></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.1rem;">{{ count }}</div>
          <div><span class="badge-sentimen badge-{{ label.lower() }}">{{ label }}</span></div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>

  <!-- Top 10 Word Count -->
  <div class="col-md-4">
    <div class="card-flat h-100">
      <div class="card-flat-header">
        <h5><i class="bi bi-bar-chart me-2"></i>Top 10 Kata (Dataset)</h5>
        <a href="{{ url_for('admin.wordcount') }}" style="font-size:.75rem;color:var(--hijau-utama);text-decoration:none;">
          Lihat semua →
        </a>
      </div>
      {% if top_words %}
      <div style="display:flex;flex-direction:column;gap:.45rem;">
        {% for w in top_words %}
        <div style="display:flex;align-items:center;gap:.6rem;">
          <span style="font-size:.78rem;font-weight:600;min-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
            {{ w.kata }}
          </span>
          <div style="flex:1;background:var(--garis);border-radius:3px;height:6px;overflow:hidden;">
            <div style="height:100%;border-radius:3px;background:
              {% if w.sentimen_dominan == 'Positif' %}var(--hijau-terang)
              {% elif w.sentimen_dominan == 'Negatif' %}var(--merah)
              {% else %}var(--abu){% endif %};
              width:{{ (w.frekuensi / top_words[0].frekuensi * 100)|int }}%;">
            </div>
          </div>
          <span class="mono" style="font-size:.72rem;color:var(--teks-muted);min-width:30px;text-align:right;">
            {{ w.frekuensi }}
          </span>
        </div>
        {% endfor %}
      </div>
      {% else %}
      <div class="empty-state">
        <i class="bi bi-bar-chart"></i>
        <p>Belum ada data.<br><a href="{{ url_for('admin.wordcount') }}">Generate sekarang</a></p>
      </div>
      {% endif %}
    </div>
  </div>

  <!-- Model Info -->
  <div class="col-md-3">
    <div class="card-flat h-100">
      <div class="card-flat-header">
        <h5><i class="bi bi-cpu me-2"></i>Akurasi Model</h5>
      </div>
      {% for m in models %}
      <div class="mb-3">
        <div class="d-flex justify-content-between align-items-center mb-1">
          <span style="font-size:.82rem;font-weight:600;">{{ m.nama_model }}</span>
          <span class="mono" style="font-size:.85rem;color:var(--hijau-utama);font-weight:700;">
            {{ '%.2f'|format(m.accuracy) }}%
          </span>
        </div>
        <div class="prob-bar">
          <div class="prob-bar-fill hijau" style="width:{{ m.accuracy }}%"></div>
        </div>
        <div class="d-flex gap-2 mt-1" style="font-size:.72rem;color:var(--teks-muted);">
          <span>P: {{ '%.2f'|format(m.precision) }}%</span>
          <span>R: {{ '%.2f'|format(m.recall) }}%</span>
          <span>F1: {{ '%.2f'|format(m.f1_score) }}%</span>
        </div>
      </div>
      {% else %}
      <div class="empty-state">
        <i class="bi bi-cpu"></i>
        <p>Belum ada data model.<br><a href="{{ url_for('admin.model') }}">Tambah sekarang</a></p>
      </div>
      {% endfor %}
    </div>
  </div>
</div>

<!-- Grafik Prediksi per Hari -->
<div class="card-flat">
  <div class="card-flat-header">
    <h5><i class="bi bi-graph-up me-2"></i>Prediksi 7 Hari Terakhir</h5>
  </div>
  <div style="position:relative;height:200px;">
    <canvas id="chartTren"></canvas>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  const C = { hijau:'#2D9653', merah:'#D64045', abu:'#6B7C72', kuning:'#F5C842' };
  const colorMap = { 'Positif': C.hijau, 'Negatif': C.merah, 'Netral': C.abu };

  // Prediksi dist (pie)
  const distPred = {{ dist_pred | tojson }};
  new Chart(document.getElementById('chartPred'), {
    type: 'doughnut',
    data: {
      labels: distPred.map(d => d[0]),
      datasets: [{ data: distPred.map(d => d[1]), backgroundColor: distPred.map(d => colorMap[d[0]]), borderWidth: 2, borderColor: '#fff' }]
    },
    options: { responsive:true, maintainAspectRatio:false, plugins:{ legend:{ position:'bottom', labels:{ font:{size:11}, padding:12 } } } }
  });

  // Tren
  const trenData = {{ pred_per_hari | tojson }};
  new Chart(document.getElementById('chartTren'), {
    type: 'line',
    data: {
      labels: trenData.map(d => d.tanggal),
      datasets: [{
        label: 'Prediksi',
        data: trenData.map(d => d.total),
        borderColor: C.hijau,
        backgroundColor: 'rgba(45,150,83,0.08)',
        fill: true,
        tension: 0.4,
        pointBackgroundColor: C.hijau,
        pointRadius: 4,
      }]
    },
    options: { responsive:true, maintainAspectRatio:false, plugins:{ legend:{ display:false } }, scales:{ y:{ beginAtZero:true, grid:{ color:'#E2EDE7' }, ticks:{ font:{size:10} } }, x:{ grid:{ display:false }, ticks:{ font:{size:10} } } } }
  });
</script>
{% endblock %}