<style>
    .qr-header {
        background: var(--primary);
        color: white;
        padding: 20px;
        text-align: center;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        position: relative;
    }
    .qr-tabs {
        display: flex;
        justify-content: center;
        margin-top: 15px;
        background: rgba(255,255,255,0.2);
        border-radius: 10px;
        padding: 5px;
    }
    .qr-tab {
        flex: 1;
        padding: 10px;
        text-align: center;
        border-radius: 8px;
        font-weight: bold;
        font-size: 14px;
        cursor: pointer;
        transition: 0.3s;
    }
    .qr-tab.active {
        background: white;
        color: var(--primary);
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    .qr-tab:not(.active) {
        color: white;
    }
    .qr-container {
        padding: 20px;
        text-align: center;
    }
    #myQrCode {
        background: white;
        padding: 20px;
        border-radius: 15px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        display: inline-block;
        margin-top: 10px;
    }
    /* Mempercantik scanner agar seperti DANA */
    #reader {
        width: 100%;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        border: 2px solid var(--primary);
    }
    .profile-info {
        margin-top: 20px;
        background: white;
        padding: 15px;
        border-radius: 15px;
        text-align: left;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        border: 1px solid #eee;
    }
    .profile-info div {
        margin-bottom: 10px;
        font-size: 13px;
        color: #555;
    }
    .profile-info strong {
        color: #222;
        float: right;
    }
</style>

<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

<div class="qr-header">
    <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
        <i class="fas fa-arrow-left" onclick="navSwitch('home'); stopScanner();" style="font-size:20px; cursor:pointer;"></i>
        <div style="font-size:18px; font-weight:bold;">Transfer QR</div>
        <i class="fas fa-qrcode" style="font-size:20px; opacity:0.8;"></i>
    </div>
    
    <div class="qr-tabs">
        <div class="qr-tab active" id="tabScan" onclick="switchQrTab('scan')"><i class="fas fa-expand"></i> Scan QR</div>
        <div class="qr-tab" id="tabKode" onclick="switchQrTab('kode')"><i class="fas fa-qrcode"></i> Kode Saya</div>
    </div>
</div>

<div class="qr-container">
    
    <div id="areaScan">
        <p style="color:#666; font-size:13px; margin-bottom:15px;">Arahkan kamera ke Barcode Pandawa Digital milik pengguna lain untuk transfer saldo otomatis.</p>
        <div id="reader"></div>
        <button onclick="startScanner()" class="btn-konfirmasi" style="margin-top:15px; background:var(--primary);"><i class="fas fa-camera"></i> Mulai Scan Kamera</button>
    </div>

    <div id="areaKode" style="display:none;">
        <p style="color:#666; font-size:13px;">Tunjukkan Barcode ini kepada teman Anda untuk menerima saldo.</p>
        
        <div id="myQrCode"></div>
        <p style="margin-top:15px; font-weight:bold; color:var(--primary); font-size:18px; letter-spacing:1px;" id="qrUsernameDisplay">@USERNAME</p>

        <div class="profile-info">
            <div><i class="fas fa-user-circle"></i> Username: <strong id="infoUser"></strong></div>
            <div><i class="fas fa-envelope"></i> Email: <strong id="infoEmail"></strong></div>
            <div><i class="fas fa-phone"></i> HP: <strong id="infoPhone"></strong></div>
            <div><i class="fas fa-globe"></i> Website: <strong>pandawa-digital.com</strong></div>
            <div style="color:var(--success); margin-top:15px; text-align:center; padding-top:10px; border-top:1px dashed #ddd;">
                <i class="fas fa-check-circle"></i> <strong>Akun Terdaftar Resmi</strong>
            </div>
        </div>
    </div>

</div>

<script>
    let html5QrcodeScanner = null;

    // FUNGSI GANTI TAB
    function switchQrTab(tab) {
        document.getElementById('tabScan').classList.remove('active');
        document.getElementById('tabKode').classList.remove('active');
        document.getElementById('areaScan').style.display = 'none';
        document.getElementById('areaKode').style.display = 'none';

        if(tab === 'scan') {
            document.getElementById('tabScan').classList.add('active');
            document.getElementById('areaScan').style.display = 'block';
            startScanner();
        } else {
            document.getElementById('tabKode').classList.add('active');
            document.getElementById('areaKode').style.display = 'block';
            stopScanner();
            generateMyQr();
        }
    }

    // FUNGSI KAMERA SCANNER
    function startScanner() {
        if(html5QrcodeScanner == null) {
            html5QrcodeScanner = new Html5QrcodeScanner(
                "reader", 
                { fps: 10, qrbox: {width: 250, height: 250}, aspectRatio: 1.0 }, 
                false
            );
            html5QrcodeScanner.render(onScanSuccess, onScanFailure);
        }
    }

    function stopScanner() {
        if(html5QrcodeScanner) {
            html5QrcodeScanner.clear();
            html5QrcodeScanner = null;
        }
    }

    // JIKA BERHASIL SCAN
    function onScanSuccess(decodedText, decodedResult) {
        stopScanner(); // Matikan kamera
        
        let usernameTarget = '';
        try {
            // Cek apakah hasil scan berupa JSON (Sesuai format Kode Saya)
            let data = JSON.parse(decodedText);
            if(data.username && data.website === "pandawa-digital.com") {
                usernameTarget = data.username;
            } else {
                window.showNotice('error', 'QR Tidak Valid', 'Ini bukan Barcode Pandawa Digital.');
                return;
            }
        } catch(e) {
            // Jika bukan format JSON, tangkap saja teksnya (sebagai fallback)
            usernameTarget = decodedText;
        }

        // Tampilkan Notifikasi & Eksekusi Transfer
        window.showNotice('success', 'Berhasil Scan!', 'Mengarahkan transfer ke: ' + usernameTarget);
        
        setTimeout(() => {
            // 1. Kembali ke Beranda
            navSwitch('home');
            
            // 2. Buka Menu Kirim Saldo (Transfer)
            if(typeof bukaMenu === 'function') bukaMenu('Kirim Saldo');
            
            // 3. Auto-fill Username di kolom Transfer
            setTimeout(() => {
                // Mencari input username/tujuan secara otomatis berdasarkan kata kunci di placeholder
                let inputTarget = document.querySelector('input[placeholder*="Username"], input[placeholder*="tujuan"], input[placeholder*="Penerima"]');
                if(inputTarget) {
                    inputTarget.value = usernameTarget;
                    // Trigger animasi CSS jika ada
                    inputTarget.focus();
                }
            }, 500);

        }, 1500);
    }

    function onScanFailure(error) {
        // Abaikan, karena library membaca kamera puluhan kali per detik
    }

    // FUNGSI GENERATE BARCODE PRIBADI
    function generateMyQr() {
        document.getElementById('myQrCode').innerHTML = ''; // Bersihkan QR lama
        
        // Mengambil data user yang sedang login (Fallback otomatis jika data tidak ada)
        let myUsername = localStorage.getItem('username') || 'MemberPandawa';
        let myEmail = localStorage.getItem('email') || 'user@pandawa-digital.com';
        let myPhone = localStorage.getItem('phone') || '08xxxxxxxxx';

        // Tampilkan di UI Profil
        document.getElementById('infoUser').innerText = myUsername;
        document.getElementById('infoEmail').innerText = myEmail;
        document.getElementById('infoPhone').innerText = myPhone;
        document.getElementById('qrUsernameDisplay').innerText = '@' + myUsername.toUpperCase();

        // Siapkan Data JSON sesuai standar yang Anda minta
        let qrData = {
            username: myUsername,
            email: myEmail,
            phone: myPhone,
            account: "Terdaftar",
            website: "pandawa-digital.com"
        };

        let qrString = JSON.stringify(qrData);

        // Generate QR Code Ala QRIS
        new QRCode(document.getElementById("myQrCode"), {
            text: qrString,
            width: 220, // Ukuran Besar
            height: 220,
            colorDark : "#1e3a8a", // Warna Biru Pandawa
            colorLight : "#ffffff",
            correctLevel : QRCode.CorrectLevel.H // High Error Correction (QR Tetap terbaca walau agak buram)
        });
    }
</script>