{% extends "layout.html" %}
{% set active = 'sesi' %}
{% block title %}Sesi Baru{% endblock %}

{% block content %}
<h1 class="page-header mb-1">Sesi Baru</h1>
<p class="text-inverse text-opacity-50 mb-4">Isi nama penembak, pilih jenis sasaran dan tipe latihan.</p>

<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card"><div class="card-body">
            <form method="POST" action="{{ url_for('sesi_mulai') }}">
                <div class="mb-4">
                    <label class="form-label">Nama Penembak</label>
                    <input type="text" name="nama" class="form-control form-control-lg"
                           placeholder="Nama penembak" required autofocus>
                </div>

                <label class="form-label">Jenis Sasaran</label>
                <div class="row g-2 mb-4">
                    {% set targets = [
                        ('baja', 'Baja (Popper)', 'bi-record-circle', 'Piringan roboh saat kena'),
                        ('kertas', 'Sasaran Kertas', 'bi-bullseye', 'Skor ring presisi'),
                        ('campuran', 'Campuran', 'bi-collection', 'Baja + kertas sekaligus')
                    ] %}
                    {% for val, label, icon, desc in targets %}
                    <div class="col-md-4">
                        <input type="radio" class="btn-check" name="target" id="t-{{ val }}"
                               value="{{ val }}" {{ 'checked' if mode == val or (loop.first and mode not in ['kertas','campuran']) }}>
                        <label class="btn btn-outline-theme w-100 h-100 py-3 text-start" for="t-{{ val }}">
                            <i class="bi {{ icon }} fs-4 d-block mb-1"></i>
                            <span class="fw-600">{{ label }}</span><br>
                            <small class="text-inverse text-opacity-50">{{ desc }}</small>
                        </label>
                    </div>
                    {% endfor %}
                </div>

                <label class="form-label">Tipe Latihan</label>
                <div class="row g-2 mb-3">
                    {% set tipes = [
                        ('free_fire', 'Free Fire', 'bi-lightning-charge', 'Bebas, tanpa batas'),
                        ('challenge', 'Challenge', 'bi-stopwatch', 'Berwaktu, catat waktu')
                    ] %}
                    {% for val, label, icon, desc in tipes %}
                    <div class="col-md-6">
                        <input type="radio" class="btn-check" name="tipe" id="tp-{{ val }}"
                               value="{{ val }}" {{ 'checked' if loop.first }}>
                        <label class="btn btn-outline-theme w-100 py-2 text-start" for="tp-{{ val }}">
                            <i class="bi {{ icon }} me-1"></i><span class="fw-600">{{ label }}</span>
                            <small class="text-inverse text-opacity-50 ms-1">{{ desc }}</small>
                        </label>
                    </div>
                    {% endfor %}
                </div>

                <div class="mb-3" id="challenge-opts" style="display:none;">
                    <label class="form-label">Jenis Tantangan</label>
                    <div class="row g-2 mb-3">
                        {% set kinds = [
                            ('shot_count', 'Jumlah Tembakan', 'bi-123', 'Selesai setelah N tembakan (meleset ikut dihitung)'),
                            ('hit_count', 'Jumlah Perkenaan', 'bi-check2-circle', 'Selesai setelah N kali kena (nilai > 0)')
                        ] %}
                        {% for val, label, icon, desc in kinds %}
                        <div class="col-md-6">
                            <input type="radio" class="btn-check" name="challenge_kind" id="ck-{{ val }}"
                                   value="{{ val }}" {{ 'checked' if loop.first }}>
                            <label class="btn btn-outline-theme w-100 py-2 text-start" for="ck-{{ val }}">
                                <i class="bi {{ icon }} me-1"></i><span class="fw-600">{{ label }}</span><br>
                                <small class="text-inverse text-opacity-50">{{ desc }}</small>
                            </label>
                        </div>
                        {% endfor %}
                    </div>
                    <label class="form-label" id="target-n-label">Jumlah target (N)</label>
                    <input type="number" name="target_tembakan" class="form-control" value="10" min="1" max="100">
                    <p class="text-inverse text-opacity-50 small mt-2 mb-0">
                        Timer mulai saat <b>tembakan pertama</b> dan berhenti otomatis saat target tercapai.
                        <span class="d-block">Catatan: tembakan yang meleset dari bidang kamera tidak terdeteksi.</span>
                    </p>
                </div>

                <div class="alert alert-warning d-none" id="warn-kalib">
                    <i class="bi bi-exclamation-triangle me-2"></i>
                    <span id="warn-text"></span>
                    <a href="{{ url_for('kalibrasi') }}" class="alert-link ms-1">Kalibrasi sekarang →</a>
                </div>

                <div class="alert alert-secondary d-none" id="warn-popper">
                    <i class="bi bi-info-circle me-2"></i><span id="warn-popper-text"></span>
                    <span class="text-inverse text-opacity-50">(tetap bisa dimulai — sekadar info)</span>
                </div>

                <button type="submit" class="btn btn-theme btn-lg d-block w-100" id="btn-mulai">
                    <i class="bi bi-play-fill me-1"></i> Mulai (nyalakan kamera)
                </button>
                <p class="text-inverse text-opacity-50 small mt-2 mb-0">
                    Kamera IR tablet akan otomatis dinyalakan. Sasaran harus <b>dikalibrasi dulu</b>
                    (menu Kalibrasi Sasaran) sebelum bisa dimulai.
                </p>
            </form>
        </div></div>
    </div>
</div>

{% block extra_scripts %}
<script>
    function currentTarget() {
        var el = document.querySelector('input[name="target"]:checked');
        return el ? el.value : 'baja';
    }
    function syncKindLabel() {
        var k = document.querySelector('input[name="challenge_kind"]:checked');
        document.getElementById('target-n-label').textContent =
            (k && k.value === 'hit_count') ? 'Jumlah perkenaan (N)' : 'Jumlah tembakan (N)';
    }
    // default jenis tantangan mengikuti target: baja -> perkenaan, kertas -> tembakan
    function defaultKindForTarget() {
        var want = currentTarget() === 'baja' ? 'hit_count' : 'shot_count';
        var el = document.getElementById('ck-' + want);
        if (el) el.checked = true;
        syncKindLabel();
    }
    function syncOpts() {
        var c = document.getElementById('tp-challenge').checked;
        document.getElementById('challenge-opts').style.display = c ? 'block' : 'none';
        if (c) defaultKindForTarget();
    }
    document.querySelectorAll('input[name="tipe"]').forEach(function (r) {
        r.addEventListener('change', syncOpts);
    });
    document.querySelectorAll('input[name="challenge_kind"]').forEach(function (r) {
        r.addEventListener('change', syncKindLabel);
    });
    syncOpts();

    // cek kalibrasi: peringatkan & kunci tombol Mulai bila sasaran belum dikalibrasi
    const NEED = {baja:['baja'], kertas:['kertas'], campuran:['baja','kertas']};
    const LABEL = {baja:'Baja (Popper)', kertas:'Sasaran Kertas'};
    let status = {baja:false, kertas:false};
    async function loadStatus(){ status = await (await fetch("{{ url_for('api_kalibrasi_status') }}")).json(); syncKalib(); }
    function target(){ const el=document.querySelector('input[name="target"]:checked'); return el?el.value:'baja'; }
    function syncKalib(){
        const need = NEED[target()] || [];
        const miss = need.filter(function(k){ return !status[k]; });
        const warn = document.getElementById('warn-kalib');
        const btn = document.getElementById('btn-mulai');
        if (miss.length){
            warn.classList.remove('d-none');
            document.getElementById('warn-text').textContent =
                'Sasaran ' + miss.map(function(k){return LABEL[k];}).join(' & ') + ' belum dikalibrasi.';
            btn.disabled = true; btn.classList.add('disabled');
        } else {
            warn.classList.add('d-none'); btn.disabled = false; btn.classList.remove('disabled');
        }
    }
    document.querySelectorAll('input[name="target"]').forEach(function(r){
        r.addEventListener('change', function(){ syncKalib(); checkPoppers(); if (document.getElementById('tp-challenge').checked) defaultKindForTarget(); });
    });
    loadStatus();

    // peringatan lunak: zona menunjuk channel offline / tak terpasang (non-blocking)
    async function checkPoppers(){
        const w = document.getElementById('warn-popper');
        if (['baja','campuran'].indexOf(target()) < 0){ w.classList.add('d-none'); return; }
        try{
            const zones = (await (await fetch("{{ url_for('api_kalibrasi_zones') }}")).json()).zones || [];
            if (!zones.length){ w.classList.add('d-none'); return; }
            const devs = (await (await fetch("{{ url_for('api_devices') }}")).json()).devices || [];
            const byId = {}; devs.forEach(function(d){ byId[d.id] = d; });
            const bad = [];
            zones.forEach(function(z){
                const d = byId[z.device_id];
                if (!d){ bad.push('device '+z.device_id+' belum terdaftar'); return; }
                if (!d.online){ bad.push('device '+z.device_id+' offline'); return; }
                const ch = (d.channels||[]).filter(function(c){ return c.ch === z.channel; })[0];
                if (ch && ch.health === 'disconnected') bad.push((z.label||('CH'+z.channel))+' sensornya tak terpasang');
            });
            if (bad.length){
                document.getElementById('warn-popper-text').textContent =
                    'Perhatian popper: ' + bad.slice(0,3).join('; ') + '. ';
                w.classList.remove('d-none');
            } else w.classList.add('d-none');
        }catch(e){ w.classList.add('d-none'); }
    }
    checkPoppers();
</script>
{% endblock %}
{% endblock %}