{% extends "layout.html" %}
{% block title %}Aktivasi{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-6">
        <div class="text-center mb-4">
            <i class="bi bi-shield-lock text-theme" style="font-size:2.5rem;"></i>
            <h1 class="page-header mt-2 mb-1">Aktivasi KOMANDO</h1>
            <p class="text-inverse text-opacity-50" id="subtitle">
                Masukkan serial number untuk mengaktifkan aplikasi di perangkat ini.
            </p>
        </div>

        <!-- MODE 1: input serial (belum aktif) -->
        <div class="card mb-3" id="card-input">
            <div class="card-body">
                <label class="form-label">Serial Number</label>
                <input type="text" id="serial" class="form-control form-control-lg text-center"
                       placeholder="KMDO-XXXX-XXXX-XXXX" autocomplete="off"
                       style="letter-spacing:2px;font-family:monospace;" maxlength="19">
                <div class="small mt-1" id="serial-hint">&nbsp;</div>
                <div class="alert alert-danger d-none mt-2" id="err"></div>
                <button class="btn btn-theme btn-lg w-100 mt-2" id="btn-activate" disabled>
                    <i class="bi bi-check2-circle me-1"></i>Aktifkan</button>
                <p class="text-inverse text-opacity-50 small mt-3 mb-0">
                    <i class="bi bi-wifi me-1"></i>Aktivasi membutuhkan koneksi internet.
                    Satu serial hanya untuk satu perangkat.
                </p>
            </div>
        </div>

        <!-- MODE 2: revalidasi (token kedaluwarsa / mundur jam) -->
        <div class="card mb-3 d-none" id="card-reval">
            <div class="card-body text-center">
                <p class="mb-3" id="reval-msg">Lisensi perlu divalidasi ulang secara online.</p>
                <button class="btn btn-theme btn-lg w-100" id="btn-reval">
                    <i class="bi bi-arrow-repeat me-1"></i>Validasi Ulang</button>
            </div>
        </div>

        <!-- MODE 3: sudah aktif -->
        <div class="card mb-3 d-none" id="card-active">
            <div class="card-body">
                <div class="d-flex align-items-center mb-3">
                    <i class="bi bi-check-circle-fill text-theme fs-3 me-2"></i>
                    <div>
                        <div class="fw-600">Perangkat ini aktif</div>
                        <div class="small text-inverse text-opacity-50" id="active-serial">–</div>
                    </div>
                </div>
                <div class="row text-center mb-3">
                    <div class="col"><div class="stat-label">Berlaku s/d</div>
                        <div class="fw-600" id="active-exp">–</div></div>
                    <div class="col"><div class="stat-label">Sisa</div>
                        <div class="fw-600" id="active-days">–</div></div>
                </div>
                <a href="{{ url_for('home') }}" class="btn btn-theme w-100 mb-2">
                    <i class="bi bi-play-fill me-1"></i>Mulai Pakai</a>
                <button class="btn btn-outline-danger w-100" id="btn-deactivate">
                    <i class="bi bi-box-arrow-right me-1"></i>Lepas Aktivasi (pindah perangkat)</button>
            </div>
        </div>
    </div>
</div>

{% block extra_scripts %}
<script>
    // ---- checksum serial (HARUS sama dengan server/serials.py) ----
    const ALPHABET = "0123456789ABCDEFGHJKMNPQRSTVWXYZ";
    const CONFUSE = {I:"1", L:"1", O:"0"};
    function normalizeSerial(raw){
        let s = (raw||"").toUpperCase().replace(/[^0-9A-Z]/g,"");
        if (s.startsWith("KMDO")) s = s.slice(4);
        s = s.split("").map(c => CONFUSE[c] || c).join("");
        return s;
    }
    function serialValid(raw){
        const s = normalizeSerial(raw);
        if (s.length !== 12) return false;
        let sum = 0;
        for (let i=0;i<11;i++){ const idx = ALPHABET.indexOf(s[i]); if (idx<0) return false; sum += idx; }
        return ALPHABET[sum % 32] === s[11];
    }
    const ERR = {
        serial_unknown: "Serial tidak dikenal.",
        serial_revoked: "Serial dinonaktifkan. Hubungi penjual.",
        bound_to_other_device: "Serial sudah terpakai di perangkat lain. Lepaskan dulu di perangkat lama, atau hubungi penjual.",
        bad_request: "Format serial tidak valid.",
        rate_limited: "Terlalu banyak percobaan. Coba lagi sebentar.",
        offline: "Aktivasi membutuhkan internet. Sambungkan lalu coba lagi.",
        no_server_url: "Server aktivasi belum dikonfigurasi.",
        insecure_url: "Server aktivasi harus HTTPS.",
        fingerprint_error: "Tidak bisa membaca ID perangkat ini."
    };
    function errMsg(code){ return ERR[code] || ("Aktivasi gagal (" + (code||"?") + ")."); }

    const $ = (id) => document.getElementById(id);
    const inp = $("serial"), btn = $("btn-activate"), errBox = $("err");

    // auto uppercase + auto-dash saat mengetik
    inp.addEventListener("input", function(){
        let s = normalizeSerial(inp.value).slice(0,12);
        let grp = [];
        for (let i=0;i<s.length;i+=4) grp.push(s.slice(i,i+4));
        inp.value = (s.length ? "KMDO-" : "") + grp.join("-");
        const ok = serialValid(inp.value);
        btn.disabled = !ok;
        $("serial-hint").innerHTML = inp.value && !ok
            ? '<span class="text-warning">Serial belum lengkap / checksum salah</span>' : '&nbsp;';
    });

    btn.addEventListener("click", async function(){
        btn.disabled = true; errBox.classList.add("d-none");
        try {
            const r = await fetch("{{ url_for('api_aktivasi') }}", {
                method:"POST", headers:{"Content-Type":"application/json"},
                body: JSON.stringify({serial: inp.value})});
            const d = await r.json();
            if (d.ok){ window.location = "{{ url_for('home') }}"; return; }
            errBox.textContent = errMsg(d.error); errBox.classList.remove("d-none");
        } catch(e){ errBox.textContent = errMsg("offline"); errBox.classList.remove("d-none"); }
        btn.disabled = false;
    });

    $("btn-reval").addEventListener("click", async function(){
        this.disabled = true;
        try {
            const r = await fetch("{{ url_for('api_aktivasi_revalidate') }}", {method:"POST"});
            const d = await r.json();
            if (d.ok){ window.location = "{{ url_for('home') }}"; return; }
        } catch(e){}
        alert("Validasi ulang gagal — pastikan internet tersambung."); this.disabled = false;
    });

    $("btn-deactivate").addEventListener("click", async function(){
        if (!confirm("Lepas aktivasi di perangkat ini? Serial bisa dipakai di perangkat lain.")) return;
        this.disabled = true;
        try { await fetch("{{ url_for('api_aktivasi_deactivate') }}", {method:"POST"}); } catch(e){}
        location.reload();
    });

    // tentukan mode dari status
    async function initMode(){
        const s = await (await fetch("{{ url_for('api_aktivasi_status') }}")).json();
        const revalReasons = ["expired","clock_rollback"];
        if (s.valid){
            $("card-input").classList.add("d-none");
            $("card-active").classList.remove("d-none");
            $("subtitle").textContent = "Aplikasi sudah aktif di perangkat ini.";
            $("active-serial").textContent = s.serial;
            $("active-exp").textContent = s.expires_at ? new Date(s.expires_at*1000).toLocaleDateString("id-ID") : "–";
            $("active-days").textContent = s.days_left + " hari";
        } else if (revalReasons.includes(s.reason) && s.serial){
            $("card-input").classList.add("d-none");
            $("card-reval").classList.remove("d-none");
            $("reval-msg").textContent = s.reason === "expired"
                ? "Masa berlaku offline habis. Sambungkan internet lalu validasi ulang."
                : "Jam sistem berubah. Sambungkan internet lalu validasi ulang.";
        }
    }
    initMode();
</script>
{% endblock %}
{% endblock %}