{% extends "base.html" %}
{% block title %}{{ page_title }}{% endblock %}
{% block content %}
{% include "core/_nav.html" %}
<main class="page-shell">
  <section class="detail-hero">
    <div class="container">
      {% 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-center">
        <div class="col-lg-8">
          <p class="eyebrow mb-2">Analisis Tersimpan · {{ problem.get_business_area_display }}</p>
          <h1 class="page-title">{{ problem.title }}</h1>
          <p class="hero-copy mb-0">{{ problem.description }}</p>
        </div>
        <div class="col-lg-4">
          <div class="detail-status-card glass-card">
            <div class="output-success mb-3">✅ Analisis Berhasil Disimulasikan!</div>
            <p class="mb-0">Case ini tersimpan di database lokal dan bisa dibuka ulang dari Riwayat Case.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="container py-5">
    <div class="analysis-card mb-4">
      <div class="section-kicker">Problem Detection</div>
      <h2>1. Problem Detection</h2>
      <div class="metric-grid">
        <div class="metric-card"><span>Prioritas Skor</span><strong>{{ problem.priority_score }}/100</strong></div>
        <div class="metric-card"><span>Dampak Finansial</span><strong>{{ problem.financial_impact }}</strong></div>
      </div>
    </div>

    <div class="row g-4">
      <div class="col-lg-5">
        <div class="analysis-card sticky-lg-top">
          <div class="section-kicker">Root Cause Analysis</div>
          <h2>2. Root Cause (Akar Masalah)</h2>
          <div class="cause-list">
            {% for cause in problem.root_causes.all %}
              <article>
                <div class="d-flex justify-content-between gap-3"><strong>{{ cause.factor }}</strong><span>{{ cause.contribution_score }}%</span></div>
                <div class="progress" role="progressbar" aria-label="Kontribusi {{ cause.factor }}" aria-valuenow="{{ cause.contribution_score }}" aria-valuemin="0" aria-valuemax="100">
                  <div class="progress-bar score-width-{{ cause.contribution_score }}"></div>
                </div>
                <p>{{ cause.why_chain }}</p>
              </article>
            {% endfor %}
          </div>
        </div>
      </div>
      <div class="col-lg-7">
        <div class="analysis-card mb-4">
          <div class="section-kicker">Solution & Decision Scoring</div>
          <h2>3. Rekomendasi Solusi & Prediksi Sukses</h2>
          <p class="formula-note">Rumus: 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">
              <thead>
                <tr>
                  <th>Rank</th>
                  <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>
                {% for solution in problem.solutions.all %}
                  <tr>
                    <td><span class="rank-badge">#{{ solution.rank }}</span></td>
                    <td>
                      <strong>{{ solution.title }}</strong>
                      <p>{{ solution.rationale }}</p>
                    </td>
                    <td>{{ solution.impact }}</td>
                    <td>{{ solution.efficiency }}</td>
                    <td>{{ solution.speed }}</td>
                    <td>{{ solution.low_risk }}</td>
                    <td>{{ solution.success_rate }}%</td>
                    <td><strong>{{ solution.decision_score|floatformat:1 }}</strong></td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>

        {% if top_solution %}
          <div class="analysis-card action-card">
            <div class="section-kicker">Action Plan</div>
            <h2>4. Action Plan 5 Hari: {{ top_solution.title }}</h2>
            <div class="timeline">
              {% for step in top_solution.action_steps.all %}
                <article>
                  <span>Hari {{ step.day_index }}</span>
                  <div>
                    <h3>{{ step.title }}</h3>
                    <p>{{ step.task }}</p>
                  </div>
                </article>
              {% endfor %}
            </div>
          </div>
        {% endif %}
      </div>
    </div>
    <div class="mt-5 d-flex gap-3 flex-wrap">
      <a href="{% url 'home' %}#analisis" class="btn btn-optema">Analisis Kasus Baru</a>
      <a href="{% url 'case_list' %}" class="btn btn-outline-optema">Kembali ke Riwayat Case</a>
    </div>
  </section>
</main>
{% endblock %}