{% extends 'base.html' %}
{% block title %}Analisis Sentimen{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1><i class="bi bi-search me-2" style="color:var(--hijau-utama)"></i>Analisis Sentimen</h1>
    <p>Masukkan komentar YouTube tentang MBG untuk dianalisis</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-chat-text me-2"></i>Input Komentar</h5>
        <span style="font-size:.72rem;color:var(--teks-muted);background:var(--hijau-muda);padding:.2rem .5rem;border-radius:4px;">
          <i class="bi bi-cpu me-1"></i>Model: {{ model_nama }}
        </span>
      </div>
      <form method="POST">
        <div class="mb-3">
          <label class="form-label">Teks Komentar</label>
          <textarea name="komentar" class="form-control" rows="5"
            placeholder="Contoh: Program makan bergizi gratis ini sangat bagus untuk anak-anak sekolah..."></textarea>
          <div style="font-size:.72rem;color:var(--teks-muted);margin-top:.35rem;">
            Tulis komentar dalam Bahasa Indonesia. Analisis menggunakan model {{ model_nama }} yang telah dilatih pada data MBG.
          </div>
        </div>
        <button type="submit" class="btn-hijau">
          <i class="bi bi-play-fill"></i>Analisis Sentimen
        </button>
      </form>
    </div>

    {% if hasil %}
    <div class="card-flat mt-3">
      <div class="card-flat-header">
        <h5><i class="bi bi-check-circle me-2"></i>Hasil Analisis</h5>
      </div>
      <div class="hasil-box">
        <div class="hasil-box-header">Komentar yang Dianalisis</div>
        <div class="hasil-box-body" style="padding:.9rem 1.25rem;">
          <div style="font-size:.88rem;line-height:1.6;color:var(--teks-utama);background:var(--bg-halaman);border-left:3px solid var(--hijau-terang);padding:.6rem .9rem;border-radius:0 6px 6px 0;">
            "{{ komentar }}"
          </div>
        </div>
      </div>
      <div class="hasil-box mt-2">
        <div class="hasil-box-header">Sentimen Komentar</div>
        <div class="hasil-box-body">
          <div class="d-flex align-items-center gap-3 mb-4">
            <div class="label-besar {% if hasil.label == 'Positif' %}text-success{% elif hasil.label == 'Negatif' %}text-danger{% else %}text-secondary{% endif %}">
              {% if hasil.label == 'Positif' %}😊{% elif hasil.label == 'Negatif' %}😞{% else %}😐{% endif %}
              {{ hasil.label }}
            </div>
            <div>
              <div style="font-size:.78rem;color:var(--teks-sekunder)">Tingkat Keyakinan Model</div>
              <div class="mono fw-bold" style="font-size:1.3rem;color:var(--hijau-utama)">{{ hasil.confidence }}%</div>
            </div>
          </div>

          <div style="font-size:.82rem;font-weight:600;color:var(--teks-utama);margin-bottom:.75rem;">Probabilitas Per Kelas</div>

          {% for lbl, val, cls in [('Positif', hasil.prob_positif, 'hijau'), ('Negatif', hasil.prob_negatif, 'merah'), ('Netral', hasil.prob_netral, 'abu')] %}
          <div class="mb-3">
            <div class="d-flex justify-content-between mb-1">
              <span class="badge-sentimen badge-{{ lbl.lower() }}">{{ lbl }}</span>
              <span class="mono fw-bold" style="font-size:.85rem;">{{ val }}%</span>
            </div>
            <div class="prob-bar">
              <div class="prob-bar-fill {{ cls }}" style="width:{{ val }}%"></div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}