@extends('layouts.dashboard')

@section('title', 'Scan QR Tiket')

@section('content')
<style>
    #qr-reader video {
        height: 100% !important;
        object-fit: cover;
        width: 100% !important;
    }

    #nativeQrVideo {
        min-height: 320px;
    }

    #qr-reader__dashboard_section_csr,
    #qr-reader__scan_region img,
    #qr-reader__status_span {
        display: none !important;
    }
</style>

<div class="grid gap-5 lg:grid-cols-[1.25fr_.75fr]">
    <section class="overflow-hidden rounded-lg bg-white shadow-sm">
        <div class="border-b border-slate-200 p-4 sm:p-6">
            <div class="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
                <div>
                    <p class="inline-flex items-center gap-2 rounded-full bg-sky-50 px-3 py-1 text-xs font-black uppercase tracking-wide text-sky-700">
                        <i data-lucide="scan-line" class="h-4 w-4"></i>
                        Check-in / Check-out Otomatis
                    </p>
                    <h2 class="mt-3 max-w-3xl text-2xl font-black leading-tight text-slate-950 sm:text-3xl">Admin membuka kamera, user menempelkan QR Code, sistem langsung memproses kunjungan.</h2>
                    <p class="mt-3 max-w-2xl text-sm leading-6 text-slate-600">Jika status tiket masih belum masuk, scan akan mencatat jam masuk. Jika pengunjung sedang di kolam, scan berikutnya akan mencatat jam keluar.</p>
                </div>
                <button id="restartScanner" type="button" class="inline-flex items-center justify-center gap-2 rounded-lg border border-slate-200 bg-white px-4 py-2 text-sm font-black text-slate-700 hover:border-sky-300 hover:text-sky-700">
                    <i data-lucide="refresh-cw" class="h-4 w-4"></i>
                    Ulang Kamera
                </button>
            </div>
        </div>

        <div class="grid gap-5 p-4 sm:p-6 lg:grid-cols-[1fr_18rem]">
            <div>
                <div class="relative overflow-hidden rounded-lg border border-slate-200 bg-slate-950">
                    <div id="qr-reader" class="min-h-[320px] w-full bg-slate-950 sm:min-h-[420px]">
                        <video id="nativeQrVideo" class="hidden h-full min-h-[320px] w-full bg-slate-950 sm:min-h-[420px]" muted playsinline autoplay></video>
                        <canvas id="nativeQrCanvas" class="hidden"></canvas>
                    </div>
                    <div class="pointer-events-none absolute inset-x-6 top-1/2 hidden -translate-y-1/2 rounded-lg border-2 border-sky-300/90 shadow-[0_0_0_9999px_rgba(2,6,23,.38)] sm:block" style="height: min(62vw, 290px);"></div>
                </div>
                <div id="qrStatus" class="mt-4 rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm font-semibold text-amber-800">
                    Menyiapkan kamera. Berikan izin kamera ketika browser meminta akses.
                </div>
                <button id="startScanner" type="button" class="mt-3 inline-flex w-full items-center justify-center gap-2 rounded-lg bg-emerald-600 px-4 py-3 text-sm font-black text-white hover:bg-orange-400 hover:text-cyan-950 sm:w-auto">
                    <i data-lucide="camera" class="h-4 w-4"></i>
                    Mulai Scan Kamera
                </button>
            </div>

            <aside class="grid content-start gap-3">
                <div class="rounded-lg border border-slate-200 bg-slate-50 p-4">
                    <p class="flex items-center gap-2 font-black text-slate-950"><i data-lucide="camera" class="h-4 w-4 text-sky-700"></i> Mode Kamera</p>
                    <p class="mt-2 text-sm leading-6 text-slate-600">Gunakan kamera belakang di HP/tablet admin untuk hasil scan paling cepat. Halaman HTTPS dari tunnel mendukung akses kamera.</p>
                </div>
                <div class="rounded-lg border border-slate-200 bg-slate-50 p-4">
                    <p class="flex items-center gap-2 font-black text-slate-950"><i data-lucide="badge-check" class="h-4 w-4 text-emerald-700"></i> Hasil Scan</p>
                    <p id="lastScanned" class="mt-2 break-all rounded-md bg-white p-3 text-sm font-bold text-slate-700">Belum ada QR terbaca.</p>
                </div>
                <div class="rounded-lg border border-slate-200 bg-slate-50 p-4">
                    <p class="font-black text-slate-950">Alur</p>
                    <ol class="mt-2 space-y-2 text-sm leading-6 text-slate-600">
                        <li>1. Buka halaman ini di akun admin.</li>
                        <li>2. Klik izinkan kamera.</li>
                        <li>3. Arahkan QR tiket user ke kotak scan.</li>
                        <li>4. Sistem proses otomatis.</li>
                    </ol>
                </div>
            </aside>
        </div>
    </section>

    <section class="rounded-lg bg-white p-4 shadow-sm sm:p-6">
        <div class="rounded-lg border border-slate-200 bg-slate-50 p-4">
            <p class="flex items-center gap-2 text-sm font-black uppercase tracking-wide text-sky-700">
                <i data-lucide="keyboard" class="h-4 w-4"></i>
                Fallback Manual
            </p>
            <p class="mt-2 text-sm leading-6 text-slate-600">Jika kamera perangkat bermasalah, admin tetap bisa mengetik kode tiket lalu memprosesnya.</p>
            <form id="scanForm" method="POST" action="{{ route('admin.checkins.process') }}" class="mt-5 grid gap-4">
                @csrf
                <input type="hidden" name="continue_scan" value="1">
                <label class="grid gap-1 text-sm font-bold text-slate-700">Kode Tiket / QR Code
                    <input id="ticket_code_input" name="ticket_code" autocomplete="off" placeholder="Contoh: KM-260517-ABC123" class="rounded-lg border border-slate-300 bg-white px-4 py-3 text-base font-bold text-slate-900" required>
                </label>
                <button class="inline-flex items-center justify-center gap-2 rounded-lg bg-sky-700 px-4 py-3 font-black text-white hover:bg-slate-950">
                    <i data-lucide="scan-line" class="h-4 w-4"></i>
                    Proses Check-in / Check-out
                </button>
            </form>
        </div>
        <div class="mt-5 rounded-lg border border-slate-200 p-4">
            <p class="font-black text-slate-950">Catatan keamanan</p>
            <p class="mt-2 text-sm leading-6 text-slate-600">Kamera browser hanya aktif saat halaman ini terbuka. QR Code yang terbaca dikirim ke route admin yang tetap dilindungi login dan middleware role admin.</p>
        </div>
    </section>
</div>

<script src="https://cdn.jsdelivr.net/npm/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
<script>
    const qrStatus = document.getElementById('qrStatus');
    const ticketInput = document.getElementById('ticket_code_input');
    const scanForm = document.getElementById('scanForm');
    const lastScanned = document.getElementById('lastScanned');
    const startScanner = document.getElementById('startScanner');
    const restartScanner = document.getElementById('restartScanner');
    const qrReader = document.getElementById('qr-reader');
    const nativeQrVideo = document.getElementById('nativeQrVideo');
    const nativeQrCanvas = document.getElementById('nativeQrCanvas');
    let html5QrCode = null;
    let nativeStream = null;
    let nativeDetector = null;
    let nativeScanTimer = null;
    let isSubmitting = false;
    let scannerState = 'idle';
    let selectedCameraId = null;

    function setStatus(message, type = 'info') {
        const styles = {
            info: 'border-sky-200 bg-sky-50 text-sky-800',
            success: 'border-emerald-200 bg-emerald-50 text-emerald-800',
            warning: 'border-amber-200 bg-amber-50 text-amber-800',
            error: 'border-red-200 bg-red-50 text-red-800',
        };
        qrStatus.className = `mt-4 rounded-lg border p-4 text-sm font-semibold ${styles[type] || styles.info}`;
        qrStatus.textContent = message;
    }

    function resetNativeReader() {
        if (!nativeQrVideo.parentElement) {
            qrReader.appendChild(nativeQrVideo);
        }

        if (!nativeQrCanvas.parentElement) {
            qrReader.appendChild(nativeQrCanvas);
        }

        nativeQrVideo.classList.add('hidden');
        nativeQrVideo.srcObject = null;
    }

    async function stopNativeScanner() {
        if (nativeScanTimer) {
            window.clearTimeout(nativeScanTimer);
            nativeScanTimer = null;
        }

        if (nativeStream) {
            nativeStream.getTracks().forEach((track) => track.stop());
            nativeStream = null;
        }

        resetNativeReader();
    }

    async function stopHtml5Scanner({ clear = false } = {}) {
        if (!html5QrCode) {
            return;
        }

        try {
            await html5QrCode.stop();
        } catch (error) {
            // Scanner may already be stopped by the browser.
        }

        if (clear) {
            try {
                await html5QrCode.clear();
            } catch (error) {
                // Nothing else to clear.
            }
            html5QrCode = null;
            selectedCameraId = null;
        }
    }

    async function stopScanner({ clear = false } = {}) {
        scannerState = 'stopping';

        await stopNativeScanner();
        await stopHtml5Scanner({ clear });
        resetNativeReader();

        scannerState = 'idle';
    }

    function handleDecodedCode(rawCode) {
        if (isSubmitting) return;

        const code = String(rawCode || '').trim();
        if (!code) return;

        isSubmitting = true;
        ticketInput.value = code;
        lastScanned.textContent = code;
        setStatus('QR terbaca. Memproses check-in/check-out otomatis...', 'success');
        stopScanner().finally(() => {
            setTimeout(() => scanForm.submit(), 250);
        });
    }

    async function resolveCameraId() {
        if (selectedCameraId) {
            return selectedCameraId;
        }

        const cameras = await Html5Qrcode.getCameras();
        if (!cameras || cameras.length === 0) {
            return null;
        }

        const rearCamera = cameras.find((camera) => /back|rear|environment|belakang/i.test(camera.label));
        selectedCameraId = (rearCamera || cameras[cameras.length - 1]).id;
        return selectedCameraId;
    }

    async function startNativeScanner() {
        if (!navigator.mediaDevices?.getUserMedia || !window.BarcodeDetector) {
            return false;
        }

        const formats = await BarcodeDetector.getSupportedFormats?.().catch(() => []);
        if (Array.isArray(formats) && formats.length > 0 && !formats.includes('qr_code')) {
            return false;
        }

        nativeDetector = new BarcodeDetector({ formats: ['qr_code'] });
        nativeStream = await navigator.mediaDevices.getUserMedia({
            audio: false,
            video: {
                facingMode: { ideal: 'environment' },
                width: { ideal: 1280 },
                height: { ideal: 720 },
            },
        });

        nativeQrVideo.srcObject = nativeStream;
        nativeQrVideo.classList.remove('hidden');
        await nativeQrVideo.play();

        scannerState = 'running';
        setStatus('Kamera HP aktif. Arahkan QR Code tiket ke kotak scan.', 'info');

        const scanFrame = async () => {
            if (scannerState !== 'running' || isSubmitting || !nativeDetector) {
                return;
            }

            try {
                const results = await nativeDetector.detect(nativeQrVideo);
                if (results.length > 0) {
                    handleDecodedCode(results[0].rawValue);
                    return;
                }
            } catch (error) {
                // Some mobile browsers need a short warm-up before frames are readable.
            }

            nativeScanTimer = window.setTimeout(scanFrame, 180);
        };

        scanFrame();

        return true;
    }

    async function startHtml5Scanner() {
        if (!window.Html5Qrcode) {
            return false;
        }

        nativeQrVideo.remove();
        nativeQrCanvas.remove();
        qrReader.innerHTML = '';

        html5QrCode = new Html5Qrcode('qr-reader', { verbose: false });

        const config = {
            fps: 8,
            qrbox: (viewfinderWidth, viewfinderHeight) => {
                const size = Math.floor(Math.min(viewfinderWidth, viewfinderHeight) * 0.72);
                return { width: Math.max(220, size), height: Math.max(220, size) };
            },
            aspectRatio: 1.333,
            disableFlip: false,
        };

        const onSuccess = (decodedText) => handleDecodedCode(decodedText);
        const onFailure = () => {};

        try {
            await html5QrCode.start({ facingMode: 'environment' }, config, onSuccess, onFailure);
        } catch (error) {
            const cameraId = await resolveCameraId();
            if (!cameraId) {
                throw error;
            }
            await html5QrCode.start(cameraId, config, onSuccess, onFailure);
        }

        scannerState = 'running';
        setStatus('Kamera aktif. Arahkan QR Code tiket ke area pemindaian.', 'info');

        return true;
    }

    async function startQrScanner({ userAction = false } = {}) {
        if (scannerState === 'starting' || scannerState === 'running' || isSubmitting) {
            return;
        }

        scannerState = 'starting';
        isSubmitting = false;
        setStatus('Menyiapkan kamera. Berikan izin kamera ketika browser meminta akses.', 'warning');

        try {
            await stopScanner({ clear: true });

            if (await startNativeScanner()) {
                return;
            }

            if (await startHtml5Scanner()) {
                return;
            }

            scannerState = 'idle';
            setStatus('Scanner otomatis tidak tersedia di browser ini. Gunakan Chrome Android, izinkan kamera, atau pakai input manual.', 'error');
        } catch (error) {
            console.error(error);
            scannerState = 'idle';
            const message = userAction
                ? 'Tidak bisa membuka kamera. Cek izin kamera browser, tutup aplikasi lain yang memakai kamera, lalu klik Mulai Scan Kamera lagi.'
                : 'Kamera belum bisa start otomatis di HP ini. Klik tombol Mulai Scan Kamera, izinkan kamera, atau pakai input manual.';
            setStatus(message, 'error');
        }
    }

    startScanner?.addEventListener('click', () => {
        startQrScanner({ userAction: true });
    });
    restartScanner?.addEventListener('click', async () => {
        isSubmitting = false;
        await stopScanner({ clear: true });
        await startQrScanner({ userAction: true });
    });
    window.addEventListener('load', () => {
        setTimeout(() => startQrScanner({ userAction: false }), 500);
    });
    window.addEventListener('beforeunload', () => {
        stopScanner();
    });
</script>
@endsection