{% extends "base.html" %}
{% load static %}

{% block title %}{{ page_title }}{% endblock %}

{% block content %}
{% include "core/_nav.html" %}

<main>
  <section class="hero-section mvp-hero position-relative overflow-hidden">
    <div class="shape shape-one" aria-hidden="true"></div>
    <div class="shape shape-two" aria-hidden="true"></div>
    <div class="container position-relative">
      <div class="row align-items-center g-5 py-5">
        <div class="col-lg-7">
          <p class="eyebrow mb-3">Mesin Pemecah Masalah Universal & Decision Intelligence Platform</p>
          <h1 class="display-heading mb-4">💡 OPTEMA AI</h1>
          <h2 class="hero-subtitle mb-3">Optimal, Effective, Efficient Management Assistant</h2>
          <p class="hero-copy mb-4">MVP single-user tanpa login: masukkan masalah pemerintah/publik, bisnis, keuangan, karier, logistik, teknologi, atau pendidikan; atur urgensi, lalu dapatkan simulasi Problem Detection, Root Cause, Decision Scoring, dan Action Plan yang tersimpan otomatis.</p>
          <div class="d-flex flex-wrap gap-3">
            <a href="#analisis" class="btn btn-optema btn-lg">Jalankan Analisis AI</a>
            <a href="{% url 'case_list' %}" class="btn btn-outline-optema btn-lg">Lihat Riwayat Case</a>
          </div>
          <div class="trust-strip mt-4" aria-label="Modul MVP">
            <span>Problem Detection</span>
            <span>Root Cause</span>
            <span>Decision Score</span>
          </div>
        </div>
        <div class="col-lg-5">
          <div class="decision-panel glass-card">
            <div class="panel-topline d-flex justify-content-between align-items-center mb-4">
              <span class="status-dot"><i></i> Simulasi MVP</span>
              <span class="score-pill">Prioritas 95/100</span>
            </div>
            <div class="mini-chart mb-4" aria-label="Preview root cause score">
              <div class="bar-95"><span>Keterbatasan Dana</span><b>96%</b></div>
              <div class="bar-88"><span>Target 3 Tahun</span><b>92%</b></div>
              <div class="bar-85"><span>Biaya Hidup</span><b>88%</b></div>
              <div class="bar-70"><span>Bahasa & Admission</span><b>76%</b></div>
            </div>
            <div class="solution-preview">
              <p class="small-label">Solusi Teratas</p>
              <h2>Prioritaskan Jepang + Beasiswa</h2>
              <p>Decision Score 83.8 · Sukses Rate 84%</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section-pad" id="analisis">
    <div class="container">
      <div class="section-kicker">MVP Workspace</div>
      <h2 class="section-title mb-4">Input kiri, output analisis kanan — seperti prototype Streamlit.</h2>

      {% if messages %}
        <div class="mb-4">
          {% for message in messages %}
            <div class="alert alert-{{ message.tags|default:'info' }}" role="alert">{{ message }}</div>
          {% endfor %}
        </div>
      {% endif %}

      <div class="row g-4 align-items-start mvp-workspace">
        <div class="col-lg-4">
          <div class="form-shell input-panel sticky-lg-top">
            <div class="panel-heading">
              <span class="panel-icon">📥</span>
              <div>
                <h2>Input Masalah</h2>
                <p>Masukkan masalah, target, atau hambatan Anda. Contoh: BUMN rugi karena biaya tinggi, omzet toko turun, atau kuliah Singapura/Jepang dengan budget terbatas.</p>
              </div>
            </div>
            <form method="post" novalidate>
              {% csrf_token %}
              {{ form.non_field_errors }}
              <div class="mb-4">
                <label class="form-label" for="{{ form.description.id_for_label }}">{{ form.description.label }}</label>
                {{ form.description }}
                {% for error in form.description.errors %}<div class="invalid-feedback d-block">{{ error }}</div>{% endfor %}
              </div>
              <div class="mb-4">
                <div class="d-flex justify-content-between align-items-center gap-3">
                  <label class="form-label mb-0" for="{{ form.urgency.id_for_label }}">{{ form.urgency.label }}</label>
                  <output class="urgency-value" id="urgency-output">{{ form.urgency.value|default:3 }}</output>
                </div>
                {{ form.urgency }}
                <div class="range-labels"><span>1</span><span>3</span><span>5</span></div>
                {% for error in form.urgency.errors %}<div class="invalid-feedback d-block">{{ error }}</div>{% endfor %}
              </div>
              <button type="submit" class="btn btn-optema btn-lg w-100">Jalankan Analisis AI</button>
              <p class="form-note mb-0 mt-3">Hasil akan disimpan otomatis ke Riwayat Case.</p>
            </form>
          </div>
        </div>

        <div class="col-lg-8">
          <div class="analysis-card output-panel">
            <div class="output-success mb-4">✅ Analisis Berhasil Disimulasikan!</div>

            <section class="output-section">
              <h2>1. Problem Detection</h2>
              <div class="metric-grid">
                <div class="metric-card"><span>Prioritas Skor</span><strong>95/100</strong></div>
                <div class="metric-card"><span>Dampak / Constraint</span><strong>Budget ketat</strong></div>
              </div>
            </section>

            <section class="output-section">
              <h2>2. Root Cause (Akar Masalah)</h2>
              <div class="cause-list compact-cause-list">
                <article>
                  <div class="d-flex justify-content-between gap-3"><strong>Keterbatasan Dana</strong><span>96%</span></div>
                  <div class="progress"><div class="progress-bar score-width-95"></div></div>
                </article>
                <article>
                  <div class="d-flex justify-content-between gap-3"><strong>Target Lulus 3 Tahun</strong><span>92%</span></div>
                  <div class="progress"><div class="progress-bar score-width-88"></div></div>
                </article>
                <article>
                  <div class="d-flex justify-content-between gap-3"><strong>Biaya Hidup Negara</strong><span>88%</span></div>
                  <div class="progress"><div class="progress-bar score-width-85"></div></div>
                </article>
                <article>
                  <div class="d-flex justify-content-between gap-3"><strong>Bahasa & Admission</strong><span>76%</span></div>
                  <div class="progress"><div class="progress-bar score-width-70"></div></div>
                </article>
              </div>
            </section>

            <section class="output-section mb-0">
              <h2>3. Rekomendasi Solusi & Prediksi Sukses</h2>
              <p class="formula-note">Decision Score = Impact×0.4 + Efficiency×0.3 + Speed×0.2 + LowRisk×0.1</p>
              <div class="table-responsive">
                <table class="table align-middle solution-table preview-table">
                  <thead>
                    <tr>
                      <th>Solusi</th>
                      <th>Impact</th>
                      <th>Efficiency</th>
                      <th>Speed</th>
                      <th>Low Risk</th>
                      <th>Sukses Rate</th>
                      <th>Decision Score</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr><td><strong>Prioritaskan Jepang + Beasiswa/Part-time Legal</strong></td><td>88</td><td>86</td><td>72</td><td>78</td><td>84%</td><td><strong>83.8</strong></td></tr>
                    <tr><td><strong>Pathway Hemat: Lokal lalu Transfer</strong></td><td>76</td><td>88</td><td>68</td><td>86</td><td>80%</td><td><strong>78.4</strong></td></tr>
                    <tr><td><strong>Singapura Jika Scholarship Besar</strong></td><td>82</td><td>58</td><td>86</td><td>55</td><td>66%</td><td><strong>72.9</strong></td></tr>
                  </tbody>
                </table>
              </div>
            </section>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section-pad pt-0">
    <div class="container">
      <div class="d-flex justify-content-between align-items-end mb-4 gap-3 flex-wrap">
        <div>
          <div class="section-kicker">Histori Keputusan</div>
          <h2 class="section-title mb-0">Kasus terbaru</h2>
        </div>
        <a href="{% url 'case_list' %}" class="link-optema">Lihat semua kasus →</a>
      </div>
      <div class="row g-4">
        {% for case in recent_cases %}
          <div class="col-md-6 col-xl-3">
            <a class="case-card h-100" href="{{ case.get_absolute_url }}">
              <span class="case-area">{{ case.get_business_area_display }}</span>
              <h3>{{ case.title }}</h3>
              <p>{{ case.description|truncatechars:88 }}</p>
              <div class="case-meta"><span>Prioritas {{ case.priority_score }}/100</span><span>{{ case.financial_impact }}</span></div>
            </a>
          </div>
        {% empty %}
          <div class="col-12">
            <div class="empty-state">
              <h3>Belum ada kasus tersimpan.</h3>
              <p>Gunakan form di atas untuk membuat analisis OPTEMA AI pertama Anda.</p>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  </section>
</main>

<footer class="site-footer">
  <div class="container d-flex flex-wrap justify-content-between gap-2">
    <span>OPTEMA AI — Optimal, Effective, Efficient Management Assistant</span>
    <span>Decision Score = I×0.40 + E×0.30 + S×0.20 + LR×0.10</span>
  </div>
</footer>
{% endblock %}