{% extends "layout.html" %}
{% block title %}Sesi Berjalan{% endblock %}

{% block content %}
<div class="d-flex align-items-center mb-3">
    <div>
        <h1 class="page-header mb-0">{{ sesi.nama }}</h1>
        <span class="badge bg-theme">{{ sesi.mode_label }}</span>
        {% if sesi.target_n %}<span class="text-inverse text-opacity-50 ms-2">target {{ sesi.target_n }}
            {{ 'perkenaan' if sesi.challenge_kind == 'hit_count' else 'tembakan' }}</span>{% endif %}
    </div>
    <form method="POST" action="{{ url_for('sesi_selesai') }}" class="ms-auto">
        <button class="btn btn-outline-theme"><i class="bi bi-stop-fill me-1"></i>Selesai &amp; Simpan</button>
    </form>
</div>

<div class="row g-3">
    <!-- video kamera IR + overlay sasaran virtual -->
    <div class="col-lg-8">
        <div class="card"><div class="card-header fw-bold d-flex align-items-center">
            <i class="bi bi-camera-video text-theme me-2"></i>Kamera IR — Sasaran Virtual Live
            <span class="badge bg-inverse bg-opacity-15 ms-auto" id="cam-status">memuat…</span>
        </div>
        <div class="card-body p-2">
            <img src="{{ url_for('video_feed') }}" id="feed"
                 style="width:100%;border-radius:.4rem;background:#0b1017;min-height:320px;object-fit:contain;">
            <p class="text-inverse text-opacity-50 small mt-2 mb-0">
                Titik hijau = laser terdeteksi. Ring/zona hijau = area skor terkalibrasi.
                Perkenaan otomatis masuk papan skor.
            </p>
        </div></div>
    </div>

    <!-- papan skor -->
    <div class="col-lg-4">
        <div class="card mb-3"><div class="card-body text-center">
            <div class="stat-label mb-1">Skor</div>
            <div class="scoreboard-total text-theme" id="skor">0</div>
        </div></div>
        <div class="card mb-3"><div class="card-body text-center">
            <div class="stat-label mb-1">Waktu</div>
            <div class="timer-big" id="timer">0.0s</div>
        </div></div>
        {% if sesi.tipe == 'challenge' %}
        <div class="card mb-3" id="sisa-card"><div class="card-body text-center">
            <div class="stat-label mb-1">Sisa Target</div>
            <div class="scoreboard-total text-theme" id="sisa">{{ sesi.target_n }}</div>
            <div class="stat-label" id="sisa-sub">dari {{ sesi.target_n }}
                {{ 'perkenaan' if sesi.challenge_kind == 'hit_count' else 'tembakan' }}</div>
        </div></div>
        {% endif %}
        <div class="row g-2 mb-3">
            <div class="col-6"><div class="card"><div class="card-body text-center py-3">
                <div class="stat-value" id="jml">0</div><div class="stat-label">Tembakan</div>
            </div></div></div>
            <div class="col-6"><div class="card"><div class="card-body text-center py-3">
                <div class="stat-value" id="akurasi">0%</div><div class="stat-label">Akurasi</div>
            </div></div></div>
        </div>
        {% if sesi.target in ['baja', 'campuran'] %}
        <div class="card mb-3"><div class="card-body">
            <div class="d-flex align-items-center mb-2">
                <div class="stat-label">Popper Baja</div>
                <button class="btn btn-sm btn-outline-theme ms-auto" id="btn-reset-popper">
                    <i class="bi bi-arrow-counterclockwise me-1"></i>Reset semua
                </button>
            </div>
            <div id="popper-list"><span class="text-inverse text-opacity-50 small">memuat…</span></div>
        </div></div>
        {% endif %}
        <div class="card"><div class="card-header fw-bold py-2"><i class="bi bi-crosshair text-theme me-2"></i>Perkenaan</div>
        <div class="card-body"><div id="shots"><span class="text-inverse text-opacity-50 small">Belum ada.</span></div></div></div>
    </div>
</div>

<!-- overlay SELESAI (Challenge) -->
<div id="done-overlay" style="display:none;position:fixed;inset:0;z-index:1080;
     background:rgba(6,10,16,.88);backdrop-filter:blur(4px);align-items:center;justify-content:center;">
    <div class="text-center">
        <i class="bi bi-flag-fill text-theme" style="font-size:3rem;"></i>
        <h1 class="page-header text-theme mt-2 mb-3">CHALLENGE SELESAI</h1>
        <div class="d-flex gap-4 justify-content-center mb-3">
            <div><div class="stat-label">Waktu</div><div class="timer-big text-theme" id="done-time">–</div></div>
            <div><div class="stat-label">Skor</div><div class="timer-big" id="done-score">–</div></div>
            <div><div class="stat-label">Akurasi</div><div class="timer-big" id="done-acc">–</div></div>
        </div>
        <p class="text-inverse text-opacity-50">Mengalihkan ke Riwayat…
            <a href="{{ url_for('riwayat') }}" class="alert-link">buka sekarang →</a></p>
    </div>
</div>

{% block extra_scripts %}
<script>
    let finished = false;
    async function refresh() {
        if (finished) return;
        try {
            const r = await fetch("{{ url_for('api_state') }}");
            const s = await r.json();
            if (!s.aktif) return;
            document.getElementById('skor').textContent = s.skor;
            document.getElementById('jml').textContent = s.jumlah;
            document.getElementById('akurasi').textContent = s.akurasi + '%';
            document.getElementById('timer').textContent = s.timer.toFixed(1) + 's';
            document.getElementById('cam-status').textContent = 'kamera: ' + (s.cam || '-');
            if (s.challenge) {
                const el = document.getElementById('sisa');
                if (el) el.textContent = s.challenge.sisa;
            }
            const box = document.getElementById('shots');
            box.innerHTML = s.shots.length ? s.shots.map(function (v) {
                return '<span class="shot-badge' + (v > 0 ? '' : ' miss') + '">' + v + '</span>';
            }).join('') : '<span class="text-inverse text-opacity-50 small">Belum ada.</span>';
            const pl = document.getElementById('popper-list');
            if (pl) {
                const ps = s.poppers || [];
                pl.innerHTML = ps.length ? ps.map(function (p) {
                    return '<span class="badge me-1 mb-1 ' + (p.down ? 'bg-danger' : 'bg-theme') + '">' +
                        (p.label || ('CH' + p.channel)) + ': ' + (p.down ? 'ROBOH' : 'TEGAK') + '</span>';
                }).join('') : '<span class="text-inverse text-opacity-50 small">Belum ada popper terkalibrasi.</span>';
            }
            if (s.selesai && !finished) {
                finished = true;
                const dc = s.challenge && s.challenge.durasi_challenge != null
                    ? s.challenge.durasi_challenge : s.timer;
                document.getElementById('done-time').textContent = dc.toFixed(2) + 's';
                document.getElementById('done-score').textContent = s.skor;
                document.getElementById('done-acc').textContent = s.akurasi + '%';
                document.getElementById('done-overlay').style.display = 'flex';
                setTimeout(function () { window.location = "{{ url_for('riwayat') }}"; }, 3500);
            }
        } catch (e) {}
    }
    setInterval(refresh, 500);
    refresh();

    const btnReset = document.getElementById('btn-reset-popper');
    if (btnReset) btnReset.addEventListener('click', async function () {
        btnReset.disabled = true;
        try { await fetch("{{ url_for('api_popper_reset') }}", {method: 'POST'}); } catch (e) {}
        setTimeout(function () { btnReset.disabled = false; }, 600);
    });
</script>
{% endblock %}
{% endblock %}