{% extends "layout.html" %}
{% set active = 'riwayat' %}
{% block title %}Riwayat & Peringkat{% endblock %}

{% block content %}
<h1 class="page-header mb-1">Riwayat &amp; Peringkat</h1>
<p class="text-inverse text-opacity-50 mb-4">Rekaman sesi latihan dan papan peringkat penembak.</p>

<div class="row g-3">
    <div class="col-lg-5">
        <div class="card"><div class="card-header fw-bold"><i class="bi bi-trophy text-theme me-2"></i>Peringkat (Skor Terbaik)</div>
        <div class="card-body">
            {% if leaderboard %}
            <table class="table table-sm mb-0">
                <thead><tr><th>#</th><th>Penembak</th><th class="text-end">Skor</th></tr></thead>
                <tbody>
                {% for row in leaderboard %}
                    <tr>
                        <td>{{ loop.index }}</td>
                        <td>{{ row.nama }}</td>
                        <td class="text-end fw-bold text-theme">{{ row.skor }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            {% else %}
            <p class="text-inverse text-opacity-50 mb-0">Belum ada data.</p>
            {% endif %}
        </div></div>

        <div class="card mt-3"><div class="card-header fw-bold"><i class="bi bi-stopwatch text-theme me-2"></i>Peringkat Challenge (Tercepat)</div>
        <div class="card-body">
            {% if challenge_lb %}
            <table class="table table-sm mb-0">
                <thead><tr><th>#</th><th>Penembak</th><th class="text-center">Target</th><th class="text-end">Waktu</th></tr></thead>
                <tbody>
                {% for row in challenge_lb %}
                    <tr>
                        <td>{{ loop.index }}</td>
                        <td>{{ row.nama }}</td>
                        <td class="text-center">{{ row.target_n }}</td>
                        <td class="text-end fw-bold text-theme">{{ '%.2f'|format(row.w) }}s</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            {% else %}
            <p class="text-inverse text-opacity-50 mb-0">Belum ada sesi Challenge selesai.</p>
            {% endif %}
        </div></div>
    </div>

    <div class="col-lg-7">
        <div class="card"><div class="card-header fw-bold"><i class="bi bi-clock-history text-theme me-2"></i>Riwayat Sesi</div>
        <div class="card-body">
            {% if sesi %}
            <table class="table table-sm mb-0 align-middle">
                <thead><tr><th></th><th>Waktu</th><th>Nama</th><th>Mode</th><th class="text-end">Skor</th><th class="text-end">Durasi</th><th class="text-end">Akurasi</th></tr></thead>
                <tbody>
                {% for s in sesi %}
                    <tr>
                        <td>
                            {% if s.shots_list %}
                            <button class="btn btn-sm btn-outline-theme py-0 px-1" data-bs-toggle="collapse"
                                    data-bs-target="#det-{{ s.id }}" title="Detail tembakan">
                                <i class="bi bi-chevron-down"></i></button>
                            {% endif %}
                        </td>
                        <td class="small">{{ s.waktu }}</td>
                        <td>{{ s.nama }}</td>
                        <td>
                            {% if s.tipe == 'challenge' %}<span class="badge bg-theme">Challenge</span>
                            {% elif s.tipe == 'free_fire' %}<span class="badge bg-inverse bg-opacity-15">Free Fire</span>{% endif %}
                            <span class="badge bg-inverse bg-opacity-15">{{ s.mode }}</span>
                        </td>
                        <td class="text-end fw-bold">{{ s.skor }}</td>
                        <td class="text-end">
                            {% if s.durasi_challenge %}<span class="text-theme" title="waktu challenge">{{ '%.2f'|format(s.durasi_challenge) }}s</span>
                            {% else %}{{ '%.1f'|format(s.durasi) }}s{% endif %}
                        </td>
                        <td class="text-end">{{ s.akurasi }}%</td>
                    </tr>
                    {% if s.shots_list %}
                    <tr class="collapse" id="det-{{ s.id }}"><td colspan="7" class="bg-inverse bg-opacity-10">
                        <div class="small text-inverse text-opacity-50 mb-1">Perkenaan ({{ s.shots_list|length }}):</div>
                        {% for sh in s.shots_list %}
                            <span class="shot-badge{{ '' if sh.nilai > 0 else ' miss' }}"
                                  {% if sh.t is not none %}title="{{ '%.2f'|format(sh.t) }}s"{% endif %}>{{ sh.nilai }}</span>
                        {% endfor %}
                    </td></tr>
                    {% endif %}
                {% endfor %}
                </tbody>
            </table>
            {% else %}
            <p class="text-inverse text-opacity-50 mb-0">Belum ada sesi. Mulai dari menu Sesi Baru.</p>
            {% endif %}
        </div></div>
    </div>
</div>
{% endblock %}