{% extends "layout.html" %}
{% set active = 'setting' %}
{% block title %}Pengaturan{% endblock %}

{% block content %}
<h1 class="page-header mb-1">Pengaturan</h1>
<p class="text-inverse text-opacity-50 mb-4">Flash firmware ESP32 popper &amp; kelola device.</p>

<ul class="nav nav-tabs mb-3" role="tablist">
    <li class="nav-item"><a href="#tab-flash" data-bs-toggle="tab" class="nav-link active">
        <i class="bi bi-usb-symbol me-1"></i>Flash ESP32</a></li>
    <li class="nav-item"><a href="#tab-device" data-bs-toggle="tab" class="nav-link">
        <i class="bi bi-hdd-network me-1"></i>Device Popper</a></li>
    <li class="nav-item"><a href="#tab-update" data-bs-toggle="tab" class="nav-link">
        <i class="bi bi-arrow-repeat me-1"></i>Pembaruan</a></li>
    <li class="nav-item"><a href="#tab-license" data-bs-toggle="tab" class="nav-link">
        <i class="bi bi-shield-lock me-1"></i>Lisensi</a></li>
</ul>

<div class="tab-content">
    <!-- ================= TAB FLASH ================= -->
    <div class="tab-pane fade show active" id="tab-flash">
        <div class="alert alert-warning d-none" id="serial-unsupported">
            <i class="bi bi-exclamation-triangle me-2"></i>
            Browser ini tidak mendukung <b>Web Serial</b>. Gunakan <b>Chrome / Edge desktop</b>
            (bukan HP, bukan Safari/Firefox) untuk mem-flash ESP32.
        </div>

        <div class="row g-3">
            <div class="col-lg-5">
                <div class="card mb-3"><div class="card-body">
                    <h5 class="mb-3"><span class="badge bg-theme me-2">1</span>Hubungkan board</h5>
                    <p class="text-inverse text-opacity-50 small">Colok ESP32 DevKit V1 via USB, klik
                        Hubungkan, pilih port di dialog browser. Board Classic (CP2102/CH340) mungkin
                        perlu menahan tombol <b>BOOT</b> saat mulai.</p>
                    <button class="btn btn-theme w-100" id="btn-connect">
                        <i class="bi bi-plug me-1"></i>Hubungkan &amp; Deteksi Chip</button>
                    <div class="mt-3 d-none" id="chip-info">
                        <div class="stat-label">Chip terdeteksi</div>
                        <div class="fw-600 text-theme" id="chip-name">–</div>
                    </div>
                </div></div>

                <div class="card mb-3"><div class="card-body">
                    <h5 class="mb-3"><span class="badge bg-theme me-2">2</span>Firmware</h5>
                    <div class="stat-label">Versi terpilih (otomatis, terbaru)</div>
                    <div class="fw-600 text-theme mb-3" id="fw-current"><i class="bi bi-hourglass-split me-1"></i>memuat…</div>
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="checkbox" id="fw-advanced">
                        <label class="form-check-label small text-inverse text-opacity-75" for="fw-advanced">
                            Gunakan file <code>.bin</code> sendiri (lanjutan)</label>
                    </div>
                    <input type="file" class="form-control mb-3 d-none" id="fw-file" accept=".bin">
                    <label class="form-label">Kecepatan (baud)</label>
                    <select class="form-select" id="baud-select">
                        <option value="460800" selected>460800 (cepat)</option>
                        <option value="115200">115200 (aman untuk CH340)</option>
                    </select>
                </div></div>

                <div class="card mb-3"><div class="card-body">
                    <h5 class="mb-3"><span class="badge bg-theme me-2">3</span>Flash</h5>
                    <button class="btn btn-outline-theme w-100" id="btn-flash" disabled>
                        <i class="bi bi-download me-1"></i>Flash Sekarang</button>
                    <div class="progress mt-3 d-none" id="flash-progress-wrap" style="height:22px;">
                        <div class="progress-bar bg-theme" id="flash-progress" style="width:0%">0%</div>
                    </div>
                </div></div>

                <div class="card"><div class="card-body">
                    <h6 class="mb-2"><i class="bi bi-cpu text-theme me-1"></i>Wiring (ESP32 DevKit V1) — s/d 8 popper</h6>
                    <div class="table-responsive">
                    <table class="table table-sm mb-2">
                        <thead><tr><th>Popper</th><th class="text-center">Servo</th><th class="text-center">Sensor keadaan</th></tr></thead>
                        <tbody>
                        <tr><td>CH1</td><td class="text-center fw-600 text-theme">GPIO 13</td><td class="text-center">GPIO 32 (ADC)</td></tr>
                        <tr><td>CH2</td><td class="text-center fw-600 text-theme">GPIO 27</td><td class="text-center">GPIO 33 (ADC)</td></tr>
                        <tr><td>CH3</td><td class="text-center fw-600 text-theme">GPIO 26</td><td class="text-center">GPIO 34 (ADC)</td></tr>
                        <tr><td>CH4</td><td class="text-center fw-600 text-theme">GPIO 25</td><td class="text-center">GPIO 35 (ADC)</td></tr>
                        <tr><td colspan="3" class="text-inverse text-opacity-50">CH5–8: servo 18/19/21/22 · sensor 36/39/16/17 (5–6 ADC, 7–8 digital)</td></tr>
                        <tr><td>Tombol reset</td><td class="text-center fw-600 text-theme" colspan="2">GPIO 14 → GND</td></tr>
                        </tbody>
                    </table>
                    </div>
                    <p class="text-inverse text-opacity-50 small mb-0">
                        <b>1 board = s/d 8 popper.</b> Sensor keadaan (switch/reed + 2 resistor) di tiap
                        piringan → app tahu popper <b>tercolok + tegak/roboh sungguhan</b>. Sensor
                        <b>opsional</b> (tanpa sensor, status "tak terpantau"). Catu servo <b>5V ≥3A
                        eksternal</b>, GND disatukan (anti-brownout). Jumlah popper diatur saat setup WiFi.
                    </p>
                </div></div>
            </div>

            <div class="col-lg-7">
                <div class="card h-100"><div class="card-header fw-bold d-flex align-items-center">
                    <i class="bi bi-terminal text-theme me-2"></i>Log
                    <button class="btn btn-sm btn-outline-theme ms-auto" id="btn-clear-log">Bersihkan</button>
                </div>
                <div class="card-body">
                    <pre id="flash-log" style="height:420px;overflow:auto;background:#0b1017;color:#8fe;
                        padding:12px;border-radius:.4rem;font-size:12px;margin:0;white-space:pre-wrap;">Siap.
</pre>
                </div></div>
            </div>
        </div>
    </div>

    <!-- ================= TAB DEVICE ================= -->
    <div class="tab-pane fade" id="tab-device">
        <div class="alert alert-secondary">
            <i class="bi bi-info-circle me-1"></i>
            <b>Apa itu Device Popper?</b> Tiap sasaran baja (popper) digerakkan oleh satu ESP32 di
            WiFi lokal. Di sini kamu daftarkan <b>ID + alamat IP</b> tiap ESP32 supaya aplikasi tahu
            harus mengirim perintah <code>HIT</code> (robohkan) &amp; <code>RESET</code> (tegakkan) ke
            mana saat laser mengenai zona popper. IP didapat dari router setelah ESP32 tersambung
            (lihat provisioning WiFi mode AP di README firmware). Belum punya ESP32? bisa diuji dulu
            dengan simulator: <code>python app/popper_stub.py --port 8181</code> lalu daftarkan
            <code>127.0.0.1:8181</code>.
        </div>
        <div class="card"><div class="card-body">
            <div class="d-flex align-items-center mb-3">
                <h5 class="mb-0">Daftar Popper</h5>
                <span class="text-inverse text-opacity-50 small ms-2">id + IP (di WiFi lokal)</span>
                <button class="btn btn-sm btn-outline-theme ms-auto" id="btn-add-dev">
                    <i class="bi bi-plus-lg me-1"></i>Tambah</button>
            </div>
            <div class="table-responsive">
                <table class="table table-sm align-middle" id="dev-table">
                    <thead><tr>
                        <th style="width:36px"></th>
                        <th style="width:64px">ID</th><th>Nama</th><th>IP / host:port</th>
                        <th style="width:56px" class="text-center">Aktif</th>
                        <th style="width:96px" class="text-end">Status</th>
                        <th style="width:44px" class="text-end"></th>
                    </tr></thead>
                    <tbody id="dev-rows"></tbody>
                </table>
            </div>
            <div class="d-flex align-items-center mt-2">
                <span class="text-inverse text-opacity-50 small" id="dev-note"></span>
                <button class="btn btn-theme ms-auto" id="btn-save-dev">
                    <i class="bi bi-save me-1"></i>Simpan</button>
            </div>
        </div></div>
        <p class="text-inverse text-opacity-50 small mt-2">
            IP didapat dari router setelah ESP32 tersambung (provisioning mode AP — lihat
            <code>firmware/esp32_popper/README.md</code>). Tombol <b>Uji</b> mengirim langsung
            ke device dari browser.
        </p>
    </div>

    <!-- ================= TAB PEMBARUAN ================= -->
    <div class="tab-pane fade" id="tab-update">
        <div class="card mb-3"><div class="card-body">
            <h5 class="mb-3"><i class="bi bi-window text-theme me-2"></i>Aplikasi</h5>
            <div class="d-flex align-items-center">
                <div>
                    <div class="stat-label">Versi terpasang</div>
                    <div class="fw-600" id="u-app-cur">–</div>
                </div>
                <div class="ms-4">
                    <div class="stat-label">Versi terbaru</div>
                    <div class="fw-600 text-theme" id="u-app-latest">–</div>
                </div>
                <button class="btn btn-outline-theme ms-auto" id="u-check" onclick="uCheck()">
                    <i class="bi bi-arrow-repeat me-1"></i>Cek sekarang</button>
            </div>
            <div id="u-app-box" class="mt-3 d-none">
                <div class="stat-label">Yang baru:</div>
                <pre id="u-app-log" style="white-space:pre-wrap;background:#0b1017;padding:10px;border-radius:.4rem;font-size:13px" class="mt-1"></pre>
                <button class="btn btn-theme" onclick="updShow()"><i class="bi bi-download me-1"></i>Update sekarang</button>
            </div>
            <div id="u-app-none" class="text-inverse text-opacity-50 small mt-2">Aplikasi sudah versi terbaru.</div>
        </div></div>

        <div class="card"><div class="card-body">
            <h5 class="mb-3"><i class="bi bi-cpu text-theme me-2"></i>Firmware Popper</h5>
            <div class="stat-label">Versi firmware terbaru tersedia: <span class="text-theme" id="u-fw-latest">–</span></div>
            <div id="u-fw-log" class="text-inverse text-opacity-50 small mt-1"></div>
            <div class="table-responsive mt-2"><table class="table table-sm mb-0" id="u-fw-table">
                <thead><tr><th>Board</th><th>Versi board</th><th></th><th class="text-end">Aksi</th></tr></thead>
                <tbody id="u-fw-rows"><tr><td colspan=4 class="text-inverse text-opacity-50">memuat…</td></tr></tbody>
            </table></div>
            <p class="text-inverse text-opacity-50 small mt-2 mb-0">
                Update firmware OTA (via WiFi) menyusul. Untuk sekarang flash lewat tab <b>Flash ESP32</b>.</p>
        </div></div>
    </div>

    <!-- ================= TAB LISENSI ================= -->
    <div class="tab-pane fade" id="tab-license">
        <div class="card"><div class="card-body">
            <h5 class="mb-3"><i class="bi bi-shield-lock text-theme me-2"></i>Lisensi Perangkat Ini</h5>
            <div id="lic-inactive" class="d-none text-inverse text-opacity-50">
                Perangkat ini belum teraktivasi. <a href="{{ url_for('aktivasi') }}">Aktivasi sekarang →</a>
            </div>
            <div id="lic-active" class="d-none">
                <div class="row mb-3">
                    <div class="col"><div class="stat-label">Serial</div><div class="fw-600" id="lic-serial">–</div></div>
                    <div class="col"><div class="stat-label">Berlaku s/d</div><div class="fw-600" id="lic-exp">–</div></div>
                </div>
                <div class="alert alert-secondary small">
                    <i class="bi bi-info-circle me-1"></i>Satu serial hanya untuk <b>satu perangkat aktif</b>.
                    Mau ganti/pindah laptop? <b>Lepas aktivasi di sini dulu</b>, lalu aktifkan serial yang
                    sama di perangkat baru. Perangkat ini akan terkunci sampai diaktivasi lagi.
                </div>
                <button class="btn btn-outline-danger" id="lic-deact">
                    <i class="bi bi-box-arrow-right me-1"></i>Lepas / Pindah Perangkat</button>
                <div id="lic-msg" class="small mt-2"></div>
            </div>
        </div></div>
    </div>
</div>

{% block extra_scripts %}
<script>
    // URL dipakai modul flasher (dilewatkan via dataset agar tak hardcode di JS statis)
    window.KOMANDO = {
        firmwareBase: "{{ url_for('static', filename='firmware/') }}",
        manifestUrl: "{{ url_for('static', filename='firmware/manifest.json') }}",
        apiDevices: "{{ url_for('api_devices') }}"
    };
</script>
<script type="module" src="{{ url_for('static', filename='js/flasher.js') }}"></script>
<script src="{{ url_for('static', filename='js/devices.js') }}"></script>
<script>
    async function uLoad(){
        var s; try{ s=await (await fetch('/api/update/status')).json(); }catch(e){ return; }
        document.getElementById('u-app-cur').textContent = 'v'+(s.app_current||'?');
        var box=document.getElementById('u-app-box'), none=document.getElementById('u-app-none');
        if(s.app_available){
            document.getElementById('u-app-latest').textContent='v'+s.app.version;
            document.getElementById('u-app-log').textContent=s.app.changelog||'(tanpa catatan)';
            box.classList.remove('d-none'); none.classList.add('d-none');
        } else {
            document.getElementById('u-app-latest').textContent = s.app? ('v'+s.app.version) : ('v'+(s.app_current||'?'));
            box.classList.add('d-none'); none.classList.remove('d-none');
        }
        // firmware
        document.getElementById('u-fw-latest').textContent = s.firmware? ('v'+s.firmware.version) : '—';
        document.getElementById('u-fw-log').textContent = s.firmware? (s.firmware.changelog||'') : '';
        var latest = s.firmware? s.firmware.version : null;
        try{
            var devs=(await (await fetch('/api/devices')).json()).devices||[];
            var rows=devs.map(function(d){
                var cur=(d.channels&&d.online)?'?':'–'; var fw=d.online? (d.fw||(d.channels&&d.channels[0]&&d.channels[0].fw)||'?') : 'offline';
                var boardFw = d.online ? (d.fw||'?') : null;
                var canOta = latest && d.online && boardFw && boardFw!==latest;
                var btn = canOta
                  ? '<button class="btn btn-sm btn-theme" onclick="otaGo('+d.id+',this)">Update OTA</button>'
                  : (d.online? '<span class=text-theme>terbaru</span>' : '<span class=text-inverse>—</span>');
                return '<tr><td>'+(d.name||('Dev '+d.id))+'</td><td>'+(d.online?('v'+(boardFw||'?')):'<span class=text-danger>offline</span>')+'</td>'+
                  '<td>'+(latest?('terbaru v'+latest):'')+'</td>'+
                  '<td class=text-end id="ota-'+d.id+'">'+btn+'</td></tr>';
            }).join('');
            document.getElementById('u-fw-rows').innerHTML = rows || '<tr><td colspan=4 class="text-inverse text-opacity-50">Belum ada device. Daftarkan di tab Device Popper.</td></tr>';
        }catch(e){}
    }
    async function uCheck(){ document.getElementById('u-check').disabled=true; try{ await fetch('/api/update/check',{method:'POST'}); }catch(e){} await uLoad(); document.getElementById('u-check').disabled=false; }
    async function otaGo(id, btn){
        if(!confirm('Update firmware OTA board ini via WiFi? Jangan matikan board.')) return;
        var cell=document.getElementById('ota-'+id); cell.innerHTML='<span class=text-theme>memulai…</span>';
        try{
            var r=await (await fetch('/api/popper/ota',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({device_id:id})})).json();
            if(!r.ok){ cell.innerHTML='<span class=text-danger>gagal: '+(r.error||'?')+'</span>'; return; }
            var t=setInterval(async function(){
                var s; try{ s=await (await fetch('/api/popper/ota/status?device_id='+id)).json(); }catch(e){ return; }
                if(s.state==='downloading'||s.state==='verifying') cell.innerHTML='<span class=text-theme>'+s.state+' '+(s.progress||0)+'%</span>';
                else if(s.state==='applying'||s.state==='rebooting'){ cell.innerHTML='<span class=text-theme>restart…</span>'; }
                else if(s.state==='error'){ clearInterval(t); cell.innerHTML='<span class=text-danger>gagal: '+(s.error||'?')+'</span>'; }
                else if(s.state==='idle' && s.fw){ clearInterval(t); cell.innerHTML='<span class=text-theme>✓ v'+s.fw+'</span>'; setTimeout(uLoad,1500); }
            },2000);
        }catch(e){ cell.innerHTML='<span class=text-danger>gagal</span>'; }
    }
    var uTab=document.querySelector('a[href="#tab-update"]');
    if(uTab) uTab.addEventListener('shown.bs.tab', uLoad);

    // ---- tab Lisensi: pindah/lepas perangkat ----
    async function licLoad(){
        var s; try{ s=await (await fetch('/api/aktivasi/status')).json(); }catch(e){ return; }
        document.getElementById('lic-active').classList.toggle('d-none', !s.valid);
        document.getElementById('lic-inactive').classList.toggle('d-none', !!s.valid);
        if(s.valid){
            document.getElementById('lic-serial').textContent=s.serial||'–';
            document.getElementById('lic-exp').textContent=s.expires_at? new Date(s.expires_at*1000).toLocaleDateString('id-ID'):'–';
        }
    }
    var licBtn=document.getElementById('lic-deact');
    if(licBtn) licBtn.addEventListener('click', async function(){
        if(!confirm('Lepas lisensi dari perangkat ini? Setelah ini kamu bisa mengaktifkan serial yang sama di laptop lain. Perangkat ini akan terkunci sampai diaktivasi lagi.')) return;
        this.disabled=true; var msg=document.getElementById('lic-msg');
        try{
            var r=await (await fetch('/api/aktivasi/deactivate',{method:'POST'})).json();
            if(r.ok){ msg.className='small text-theme'; msg.textContent='✓ Lisensi dilepas. Perangkat ini bebas — aktifkan serial di laptop baru.'; setTimeout(function(){location.href="{{ url_for('aktivasi') }}";},2500); }
            else { msg.className='small text-danger'; msg.textContent = r.error==='deactivate_limit' ? 'Batas pindah perangkat tercapai (maks 2×/30 hari). Hubungi penjual.' : ('Gagal: '+(r.error||'?')); this.disabled=false; }
        }catch(e){ msg.className='small text-danger'; msg.textContent='Gagal menghubungi server aktivasi.'; this.disabled=false; }
    });
    var licTab=document.querySelector('a[href="#tab-license"]');
    if(licTab) licTab.addEventListener('shown.bs.tab', licLoad);
</script>
{% endblock %}
{% endblock %}