@extends('layouts.web')

@push('styles')
<style>
    body {
        background: #f8f9fa;
    }
    
    .scanner-container {
        background: white;
        padding: 2rem;
        border-radius: 1rem;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        margin-bottom: 2rem;
    }
    
    #qr-scanner-universal {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        min-height: 400px;
    }
    
    .scan-result {
        margin-top: 1rem;
    }
</style>
@endpush

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h4 class="card-title mb-0">
                        <i class="fas fa-qrcode me-2"></i>
                        Scan QR Code Absensi
                    </h4>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-4">
                        Arahkan kamera ke QR code yang ditampilkan panitia untuk melakukan absensi
                    </p>
                    
                    <!-- Pilihan Kamera -->
                    <div class="mb-3">
                        <label for="cameraSelect" class="form-label">
                            <i class="fas fa-camera me-2"></i>Pilih Kamera
                        </label>
                        <select id="cameraSelect" class="form-select">
                            <option value="">Memuat daftar kamera...</option>
                        </select>
                        <div class="mt-2">
                            <button type="button" id="requestCameraAccess" class="btn btn-sm btn-outline-primary" style="display:none;">
                                Aktifkan izin kamera
                            </button>
                            <small id="cameraPermissionHint" class="text-muted ms-2" style="display:none;">
                                Jika tombol tidak memunculkan prompt, ubah izin situs di icon kamera/padlock pada address bar.
                            </small>
                        </div>
                    </div>
                    
                    <div class="scanner-container">
                        <div id="qr-scanner-universal"></div>
                        <div id="scan-result" class="scan-result"></div>
                        <div id="cameraDiagnostics" class="mt-3 p-3 border rounded" style="background:#f9fafb;">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <strong>Diagnostik Kamera</strong>
                                <div>
                                    <button type="button" id="retryCamera" class="btn btn-sm btn-secondary">Coba Lagi</button>
                                </div>
                            </div>
                            <div class="small">
                                <div>Status izin: <span id="diag-permission">Menunggu</span></div>
                                <div>Kamera terdeteksi: <span id="diag-count">0</span></div>
                                <div>Kamera dipilih: <span id="diag-selected">-</span></div>
                                <div>Terakhir error: <span id="diag-error">-</span></div>
                            </div>
                            <div id="diag-instructions" class="mt-2 text-muted small"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/html5-qrcode"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
let html5QrcodeScanner;
let availableCameras = [];
let currentCameraId = null;

document.addEventListener('DOMContentLoaded', function() {
    // Initialize scanner
    html5QrcodeScanner = new Html5Qrcode("qr-scanner-universal");
    // Jika berjalan di dalam iframe, tampilkan opsi buka di tab baru
    try {
        if (window.top !== window.self) {
            const diag = document.getElementById('cameraDiagnostics');
            if (diag) {
                const alert = document.createElement('div');
                alert.className = 'alert alert-warning mt-2';
                alert.innerHTML = '<strong>Catatan:</strong> Pratinjau tersemat dapat menolak akses kamera. Buka halaman ini di tab baru untuk mengaktifkan kamera.';
                const openBtn = document.createElement('a');
                openBtn.href = window.location.href;
                openBtn.target = '_blank';
                openBtn.className = 'btn btn-sm btn-outline-primary ms-2';
                openBtn.textContent = 'Buka di Tab Baru';
                alert.appendChild(openBtn);
                diag.appendChild(alert);
            }
        }
    } catch($e) {}
    
// Metode sederhana: jangan minta izin otomatis. Minta saat tombol diklik.
showScanResult('info', 'Klik "Aktifkan Kamera" untuk memulai.');
    
    // Handler untuk perubahan kamera
    document.getElementById('cameraSelect').addEventListener('change', function() {
        const selectedCameraId = this.value;
        if (selectedCameraId && selectedCameraId !== currentCameraId) {
            switchCamera(selectedCameraId);
        }
    });
});

// Tombol untuk memicu permintaan izin ulang
document.addEventListener('click', async function(e) {
    if (e.target && e.target.id === 'requestCameraAccess') {
        e.preventDefault();
        try {
            const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
            try { stream.getTracks().forEach(t => t.stop()); } catch($e) {}
            // Sembunyikan tombol setelah izin tersedia
            const btn = document.getElementById('requestCameraAccess');
            const hint = document.getElementById('cameraPermissionHint');
            if (btn) btn.style.display = 'none';
            if (hint) hint.style.display = 'none';
            // Muat ulang daftar kamera
            loadCameras();
            // Mulai dengan kamera pertama jika ada
            setTimeout(async () => {
                try {
                    const devices = await Html5Qrcode.getCameras();
                    if (devices && devices.length) {
                        const first = devices[0];
                        const select = document.getElementById('cameraSelect');
                        if (select) select.value = first.id;
                        startScanner(first.id);
                        updateDiagnostics({ permission: 'Diizinkan', selected: first.label || 'Kamera 1' });
                    } else {
                        showScanResult('error', 'Tidak ada kamera terdeteksi.');
                        updateDiagnostics({ count: 0 });
                    }
                } catch (err) {
                    const msg = (err && (err.message || err.name)) ? (err.name ? (err.name+': ') : '') + (err.message || '') : 'Gagal memuat kamera.';
                    showScanResult('error', msg);
                    updateDiagnostics({ error: msg });
                }
            }, 300);
        } catch (err) {
            const msg = (err && (err.message || err.name))
                ? (err.name ? (err.name + ': ') : '') + (err.message || '')
                : 'Kamera tidak tersedia atau akses ditolak.';
            showScanResult('error', msg);
            Swal.fire({
                icon: 'error',
                title: 'Kamera Tidak Tersedia',
                text: msg
            });
            const hint = document.getElementById('cameraPermissionHint');
            if (hint) hint.style.display = 'inline';
        }
    }
});

// Tombol Diagnostik: Coba Lagi (memicu ulang verifikasi dan pemuatan kamera)
document.addEventListener('click', function(e) {
    if (e.target && e.target.id === 'retryCamera') {
        e.preventDefault();
        verifyCameraAvailability()
            .then(() => {
                loadCameras();
            })
            .catch(err => {
                const msg = err && err.message ? err.message : 'Kamera tidak tersedia atau akses ditolak.';
                showScanResult('error', msg);
                updateDiagnostics({ error: msg });
            });
    }
});

// Fungsi untuk memuat daftar kamera
function loadCameras() {
    const cameraSelect = document.getElementById('cameraSelect');
    
    // Gunakan enumerateDevices jika tersedia untuk hasil yang lebih akurat
    const getDevices = (navigator.mediaDevices && navigator.mediaDevices.enumerateDevices)
        ? navigator.mediaDevices.enumerateDevices()
        : Html5Qrcode.getCameras();

    Promise.resolve(getDevices).then(devices => {
        // Normalisasi format hasil devices (Html5Qrcode vs enumerateDevices)
        const normalized = devices.map((d, i) => ({
            id: d.deviceId || d.id || i.toString(),
            label: (d.label || d.facing || '').trim(),
            kind: d.kind || 'videoinput'
        })).filter(d => d.kind === 'videoinput');

        availableCameras = normalized;
        updateDiagnostics({ count: normalized.length });
        
        if (normalized && normalized.length > 0) {
            // Kosongkan dropdown
            cameraSelect.innerHTML = '';
            
            // Jika hanya ada 1 kamera, sembunyikan dropdown
            if (normalized.length === 1) {
                cameraSelect.style.display = 'none';
                document.querySelector('label[for="cameraSelect"]').style.display = 'none';
                startScanner(normalized[0].id);
                updateDiagnostics({ selected: normalized[0].label || 'Kamera 1' });
            } else {
                // Tampilkan semua kamera di dropdown
                normalized.forEach((device, index) => {
                    const option = document.createElement('option');
                    option.value = device.id;
                    option.textContent = device.label || `Kamera ${index + 1}`;
                    cameraSelect.appendChild(option);
                });
                
                // Pilih kamera default (prioritas: back camera, lalu kamera pertama)
                const defaultCamera = normalized.find(device => {
                    const label = (device.label || '').toLowerCase();
                    return label.includes('back') || label.includes('belakang') || label.includes('rear');
                }) || normalized[0];
                
                cameraSelect.value = defaultCamera.id;
                startScanner(defaultCamera.id);
                updateDiagnostics({ selected: defaultCamera.label || 'Kamera Default' });
            }
        } else {
            cameraSelect.innerHTML = '<option value="">Tidak ada kamera yang terdeteksi</option>';
            showScanResult('error', 'Tidak ada kamera yang terdeteksi. Pastikan perangkat Anda memiliki kamera dan izin akses diberikan.');
            updateDiagnostics({ count: 0, error: 'Tidak ada kamera terdeteksi' });
            Swal.fire({
                icon: 'error',
                title: 'Kamera Tidak Tersedia',
                text: 'Tidak dapat mengakses kamera. Pastikan perangkat Anda memiliki kamera dan izin akses diberikan.'
            });
        }
    }).catch(err => {
        cameraSelect.innerHTML = '<option value="">Gagal memuat kamera</option>';
        showScanResult('error', 'Gagal mengakses kamera. Pastikan izin akses kamera sudah diberikan.');
        updateDiagnostics({ error: 'Gagal memuat kamera: ' + (err && err.message ? err.message : 'Unknown') });
        Swal.fire({
            icon: 'error',
            title: 'Kamera Tidak Tersedia',
            text: 'Tidak dapat mengakses kamera. Pastikan perangkat Anda memiliki kamera dan izin akses diberikan.'
        });
    });
}

// Verifikasi ketersediaan kamera dan izin akses secara robust
async function verifyCameraAvailability() {
    // Cek dukungan API
    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
        updateDiagnostics({ permission: 'Tidak didukung', error: 'Browser tidak mendukung akses kamera.' });
        throw new Error('Browser tidak mendukung akses kamera. Gunakan Chrome, Edge, atau Firefox versi terbaru.');
    }

    // Enumerasi perangkat
    let devices = [];
    try {
        devices = await navigator.mediaDevices.enumerateDevices();
    } catch (e) {
        // Lanjutkan ke getUserMedia untuk memicu prompt izin
    }
    const videoInputs = (devices || []).filter(d => d.kind === 'videoinput');

    // Coba akses kamera untuk memicu prompt izin jika diperlukan
    try {
        await navigator.mediaDevices.getUserMedia({ video: { facingMode: { ideal: 'environment' } }, audio: false });
        updateDiagnostics({ permission: 'Diizinkan' });
    } catch (err) {
        switch (err && err.name) {
            case 'NotAllowedError':
            case 'SecurityError':
                updateDiagnostics({ permission: 'Ditolak', error: 'Akses kamera ditolak oleh browser.' });
                throw new Error('Akses kamera ditolak. Beri izin kamera pada browser.');
            case 'NotFoundError':
                updateDiagnostics({ permission: 'Gagal', error: 'Tidak ada kamera terdeteksi.' });
                throw new Error('Tidak ada kamera yang terdeteksi pada perangkat.');
            case 'OverconstrainedError':
                updateDiagnostics({ permission: 'Gagal', error: 'Konfigurasi kamera tidak terpenuhi.' });
                throw new Error('Kamera tidak memenuhi syarat konfigurasi. Coba kamera lain.');
            case 'NotReadableError':
                updateDiagnostics({ permission: 'Gagal', error: 'Kamera sedang digunakan aplikasi lain.' });
                throw new Error('Kamera sedang digunakan aplikasi lain. Tutup aplikasi kamera dan coba lagi.');
            case 'AbortError':
                updateDiagnostics({ permission: 'Gagal', error: 'Aktivasi kamera dibatalkan.' });
                throw new Error('Aktivasi kamera dibatalkan. Coba ulangi.');
            default:
                updateDiagnostics({ permission: 'Gagal', error: 'Gagal mengakses kamera: ' + (err.message || 'Unknown error') });
                throw new Error('Gagal mengakses kamera: ' + (err.message || 'Unknown error'));
        }
    }

    // Re-check setelah izin, pastikan ada videoinput
    try {
        devices = await navigator.mediaDevices.enumerateDevices();
    } catch($e) {}
    if (!devices || !devices.some(d => d.kind === 'videoinput')) {
        updateDiagnostics({ count: 0, error: 'Tidak ada kamera setelah izin diberikan.' });
        throw new Error('Tidak ada kamera yang terdeteksi setelah izin diberikan.');
    }
}

// Util: perbarui panel diagnostik kamera
function updateDiagnostics({ permission, count, selected, error }) {
    const permEl = document.getElementById('diag-permission');
    const cntEl = document.getElementById('diag-count');
    const selEl = document.getElementById('diag-selected');
    const errEl = document.getElementById('diag-error');
    const instrEl = document.getElementById('diag-instructions');
    if (permission !== undefined && permEl) permEl.textContent = permission;
    if (count !== undefined && cntEl) cntEl.textContent = count;
    if (selected !== undefined && selEl) selEl.textContent = selected;
    if (error !== undefined && errEl) errEl.textContent = error;
    if (instrEl) {
        const ua = navigator.userAgent || '';
        let text = '';
        if (/Chrome|Edg/i.test(ua)) {
            text = 'Chrome/Edge: Klik ikon gembok/kamera di address bar → izinkan Camera untuk situs ini, lalu reload.';
        } else if (/Firefox/i.test(ua)) {
            text = 'Firefox: Klik ikon kamera di address bar → Allow untuk situs ini, atau buka Preferences → Permissions → Camera.';
        } else {
            text = 'Pastikan browser mengizinkan akses kamera untuk situs ini dan tidak ada aplikasi lain yang memakai kamera.';
        }
        instrEl.textContent = text;
    }
}

// Fungsi untuk memulai scanner dengan kamera tertentu
function startScanner(cameraId) {
    if (!cameraId) return;
    
    const config = {
        fps: 10,
        qrbox: { width: 250, height: 250 },
        aspectRatio: 1.0
    };
    
    currentCameraId = cameraId;
    
    html5QrcodeScanner.start(
        cameraId,
        config,
        onQRCodeScanned,
        onScanError
    ).then(() => {
        showScanResult('info', 'Scanner siap. Arahkan kamera ke QR code.');
    }).catch(err => {
        showScanResult('error', 'Gagal mengaktifkan kamera. Silakan pilih kamera lain.');
        Swal.fire({
            icon: 'error',
            title: 'Gagal Mengaktifkan Kamera',
            text: 'Pastikan Anda memberikan izin akses kamera dan perangkat Anda memiliki kamera.'
        });
    });
}

// Fungsi untuk mengganti kamera
function switchCamera(newCameraId) {
    if (html5QrcodeScanner && html5QrcodeScanner.isScanning) {
        // Stop scanner yang sedang berjalan
        html5QrcodeScanner.stop().then(() => {
            showScanResult('loading', 'Mengganti kamera...');
            // Start dengan kamera baru setelah delay singkat
            setTimeout(() => {
                startScanner(newCameraId);
            }, 500);
        }).catch(err => {
            showScanResult('loading', 'Mengganti kamera...');
            setTimeout(() => {
                startScanner(newCameraId);
            }, 500);
        });
    } else {
        startScanner(newCameraId);
    }
}

// Callback ketika QR code berhasil di-scan
function onQRCodeScanned(decodedText, decodedResult) {
    // Stop scanner sementara untuk mencegah scan berulang
    html5QrcodeScanner.stop().catch(() => {});
    
    // Validasi dan proses QR code
    try {
        const qrData = JSON.parse(decodedText);
        
        // Validasi format QR code
        if (!qrData || !qrData.type || qrData.type !== 'attendance') {
            showScanResult('error', 'QR code tidak valid. Pastikan Anda scan QR code absensi yang benar.');
            // Restart scanner setelah 3 detik
            setTimeout(() => restartScanner(), 3000);
            return;
        }
        
        // Tampilkan loading
        showScanResult('loading', 'Memproses QR code...');
        
        // Kirim ke server untuk diproses
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '{{ csrf_token() }}';
        $.ajax({
            url: '/attendance/process-scan',
            method: 'POST',
            data: {
                qr_data: decodedText,
                _token: csrfToken
            },
            success: function(response) {
                if (response.success) {
                    showScanResult('success', 
                        'Absensi berhasil dicatat!<br>' +
                        '<strong>' + (response.activity_name || '') + '</strong><br>' +
                        '<small>' + (response.attendance_name || '') + '</small><br>' +
                        '<small class="text-muted">Mengalihkan ke halaman detail kegiatan...</small>'
                    );
                    
                    // Redirect ke halaman show kegiatan setelah 2 detik
                    setTimeout(() => {
                        if (response.activity_id) {
            window.location.href = '/activity/' + response.activity_id + '/detail';
                        } else {
                            // Jika tidak ada activity_id, restart scanner
                            showScanResult('info', 'Siap untuk scan QR code berikutnya...');
                            restartScanner();
                        }
                    }, 2000);
                } else {
                    showScanResult('error', response.message || 'Gagal memproses QR code');
                    // Restart scanner setelah 3 detik
                    setTimeout(() => restartScanner(), 3000);
                }
            },
            error: function(xhr) {
                let errorMessage = 'Gagal memproses QR code';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    errorMessage = xhr.responseJSON.message;
                }
                showScanResult('error', errorMessage);
                // Restart scanner setelah 3 detik
                setTimeout(() => restartScanner(), 3000);
            }
        });
    } catch (e) {
        showScanResult('error', 'Format QR code tidak valid. Pastikan Anda scan QR code yang benar dari panitia.');
        // Restart scanner setelah 3 detik
        setTimeout(() => restartScanner(), 3000);
    }
}

// Callback untuk error scanning
function onScanError(errorMessage) {
    // Error diabaikan untuk scanning berkelanjutan
}

// Fungsi untuk menampilkan hasil scan
function showScanResult(type, message) {
    const resultDiv = $('#scan-result');
    let alertClass = 'alert-info';
    let icon = 'fa-info-circle';
    
    if (type === 'success') {
        alertClass = 'alert-success';
        icon = 'fa-check-circle';
    } else if (type === 'error') {
        alertClass = 'alert-danger';
        icon = 'fa-exclamation-circle';
    } else if (type === 'loading') {
        alertClass = 'alert-info';
        icon = 'fa-spinner fa-spin';
    }
    
    resultDiv.html(
        '<div class="alert ' + alertClass + '">' +
        '<i class="fas ' + icon + ' me-2"></i>' +
        message +
        '</div>'
    );
}

// Fungsi untuk restart scanner dengan kamera yang sedang dipilih
function restartScanner() {
    if (html5QrcodeScanner && currentCameraId) {
        const config = {
            fps: 10,
            qrbox: { width: 250, height: 250 },
            aspectRatio: 1.0
        };
        
        html5QrcodeScanner.start(
            currentCameraId,
            config,
            onQRCodeScanned,
            onScanError
        ).then(() => {
            showScanResult('info', 'Scanner siap. Arahkan kamera ke QR code.');
        }).catch(err => {
            showScanResult('error', 'Gagal memulai ulang scanner.');
        });
    }
}

// Cleanup saat halaman ditutup
window.addEventListener('beforeunload', function() {
    if (html5QrcodeScanner) {
        html5QrcodeScanner.stop().catch(() => {});
    }
});
</script>
@endpush
@endsection