{% extends 'base.html' %}
{% block title %}Manajemen Model
<script>
function bacaEval() {
  const path = document.getElementById('path_folder').value.trim();
  if (!path) {
    alert('Isi path folder dulu!');
    return;
  }

  const btn = document.getElementById('btn-baca-eval');
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Membaca...';

  fetch('{{ url_for("admin.baca_eval") }}', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({path_folder: path})
  })
  .then(r => r.json())
  .then(data => {
    if (data.error) {
      alert('Gagal: ' + data.error + '\n\nIsi manual ya.');
    } else {
      document.getElementById('inp-accuracy').value  = data.accuracy;
      document.getElementById('inp-precision').value = data.precision;
      document.getElementById('inp-recall').value    = data.recall;
      document.getElementById('inp-f1').value        = data.f1_score;
      alert('✅ Metrics berhasil dibaca otomatis!');
    }
  })
  .catch(() => alert('Gagal membaca. Isi manual ya.'))
  .finally(() => {
    btn.disabled = false;
    btn.innerHTML = '<i class="bi bi-magic"></i> Auto-Baca';
  });
}
</script>
{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1><i class="bi bi-cpu me-2" style="color:var(--hijau-utama)"></i>Manajemen Model</h1>
    <p>Informasi dan metrik evaluasi model yang digunakan</p>
  </div>
  <button class="btn-hijau" data-bs-toggle="modal" data-bs-target="#modalModel">
    <i class="bi bi-plus-lg"></i>Update Model
  </button>
</div>

<div class="row g-3 mb-4">
  {% for m in models %}
  <div class="col-md-6">
    <div class="card-flat">
      <div class="card-flat-header">
        <h5>
          <i class="bi bi-cpu me-2"></i>{{ m.nama_model }}
          {% if m.is_default %}
          <span style="font-size:.7rem;background:var(--aksen-kuning);color:var(--hijau-utama);padding:.15rem .5rem;border-radius:10px;margin-left:.5rem;font-weight:700;">DEFAULT</span>
          {% endif %}
        </h5>
        <span style="font-size:.75rem;color:var(--teks-muted);">{{ m.tipe }}</span>
      </div>

      <div class="row g-3 mb-3">
        <div class="col-6">
          <div style="font-size:.75rem;color:var(--teks-sekunder);margin-bottom:.2rem;">Accuracy</div>
          <div class="mono fw-bold" style="font-size:1.5rem;color:var(--hijau-utama);">{{ '%.2f'|format(m.accuracy) }}%</div>
          <div class="prob-bar mt-1"><div class="prob-bar-fill hijau" style="width:{{ m.accuracy }}%"></div></div>
        </div>
        <div class="col-6">
          <div style="font-size:.75rem;color:var(--teks-sekunder);margin-bottom:.2rem;">F1-Score</div>
          <div class="mono fw-bold" style="font-size:1.5rem;color:var(--hijau-utama);">{{ '%.2f'|format(m.f1_score) }}%</div>
          <div class="prob-bar mt-1"><div class="prob-bar-fill hijau" style="width:{{ m.f1_score }}%"></div></div>
        </div>
      </div>

      <div class="row g-2">
        <div class="col-6">
          <div style="background:var(--hijau-muda);border-radius:6px;padding:.65rem;text-align:center;">
            <div style="font-size:.72rem;color:var(--teks-sekunder);">Precision</div>
            <div class="mono fw-bold" style="color:var(--hijau-utama);">{{ '%.2f'|format(m.precision) }}%</div>
          </div>
        </div>
        <div class="col-6">
          <div style="background:var(--hijau-muda);border-radius:6px;padding:.65rem;text-align:center;">
            <div style="font-size:.72rem;color:var(--teks-sekunder);">Recall</div>
            <div class="mono fw-bold" style="color:var(--hijau-utama);">{{ '%.2f'|format(m.recall) }}%</div>
          </div>
        </div>
      </div>

      {% if m.path_folder %}
      <div style="margin-top:.75rem;font-size:.75rem;color:var(--teks-muted);">
        <i class="bi bi-folder me-1"></i>{{ m.path_folder }}
      </div>
      {% endif %}

      <div class="mt-3 pt-3" style="border-top:1px solid var(--garis);">
        {% if m.is_default %}
        <span style="font-size:.78rem;color:var(--hijau-utama);font-weight:600;">
          <i class="bi bi-check-circle-fill me-1"></i>Sedang digunakan sebagai default
        </span>
        {% else %}
        <form method="POST" action="{{ url_for('admin.set_default_model', id=m.id) }}">
          <button type="submit" class="btn-outline-hijau" style="font-size:.78rem;padding:.35rem .8rem;">
            <i class="bi bi-star"></i>Jadikan Default
          </button>
        </form>
        {% endif %}
      </div>
    </div>
  </div>
  {% else %}
  <div class="col-12">
    <div class="card-flat">
      <div class="empty-state">
        <i class="bi bi-cpu"></i>
        <p>Belum ada data model. Tambahkan informasi model dari hasil training Colab.</p>
      </div>
    </div>
  </div>
  {% endfor %}
</div>

<!-- Perbandingan Tabel -->
{% if models|length >= 2 %}
<div class="card-flat">
  <div class="card-flat-header">
    <h5><i class="bi bi-table me-2"></i>Tabel Perbandingan Model</h5>
  </div>
  <div class="table-responsive">
    <table class="tbl">
      <thead>
        <tr><th>Model</th><th>Accuracy</th><th>Precision</th><th>Recall</th><th>F1-Score</th><th>Unggul</th></tr>
      </thead>
      <tbody>
        {% for m in models %}
        <tr>
          <td style="font-weight:600;">{{ m.nama_model }}</td>
          <td class="mono">{{ '%.2f'|format(m.accuracy) }}%</td>
          <td class="mono">{{ '%.2f'|format(m.precision) }}%</td>
          <td class="mono">{{ '%.2f'|format(m.recall) }}%</td>
          <td class="mono">{{ '%.2f'|format(m.f1_score) }}%</td>
          <td>
            {% if m.accuracy == models|map(attribute='accuracy')|max %}
            <span class="badge-sentimen badge-positif"><i class="bi bi-trophy"></i>Terbaik</span>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}

<!-- Modal -->
<div class="modal fade" id="modalModel" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content" style="border-radius:10px;border:1px solid var(--garis);">
      <div class="modal-header" style="border-bottom:1px solid var(--garis);">
        <h5 class="modal-title" style="font-size:.95rem;font-weight:700;">Load Model dari Folder</h5>
        <button type="button" class="btn-close btn-sm" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form method="POST" action="{{ url_for('admin.load_folder') }}">
          
          <div class="mb-3">
            <label class="form-label fw-bold">Pilih Folder Model</label>
            {% if folder_list %}
              <div class="list-group" style="max-height:250px;overflow-y:auto;">
                {% for folder in folder_list %}
                <label class="list-group-item list-group-item-action d-flex align-items-center gap-3" style="cursor:pointer;">
                  <input type="radio" name="path_folder" value="{{ folder.path }}" required>
                  <div>
                    <div class="fw-bold">{{ folder.nama }}</div>
                    <small class="text-muted">
                      {{ folder.path }} &nbsp;·&nbsp;
                      <span class="badge {% if folder.tipe == 'indobert' %}bg-primary{% else %}bg-success{% endif %}">
                        {{ folder.tipe }}
                      </span>
                      {% if folder.has_eval %}
                        <span class="badge bg-success">✓ eval_results.json</span>
                      {% else %}
                        <span class="badge bg-warning text-dark">⚠ tidak ada eval_results.json</span>
                      {% endif %}
                    </small>
                  </div>
                </label>
                {% endfor %}
              </div>
            {% else %}
              <div class="alert alert-warning py-2">
                Tidak ada folder model ditemukan di folder <code>models/</code>.
                Paste folder model hasil training ke <code>C:\mbg_app\models\</code> dulu.
              </div>
            {% endif %}
          </div>

          <div class="mb-3 d-flex align-items-center gap-2">
            <input type="checkbox" name="is_default" id="is_default" class="form-check-input" style="width:16px;height:16px;">
            <label for="is_default" class="form-label mb-0">Jadikan model default (dipakai user)</label>
          </div>

          <button type="submit" class="btn-hijau w-100" {% if not folder_list %}disabled{% endif %}>
            <i class="bi bi-folder-check"></i> Load Model
          </button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}