@extends('layouts.app')

@section('title', 'Scan Tickets')

@section('content')
    <div class="max-w-md mx-auto">
        <h1 class="text-2xl font-bold mb-6">Scan Tickets</h1>

        <div class="bg-white rounded-xl shadow-sm p-6 mb-4">
            <div id="qr-reader" class="mb-4"></div>
            <p class="text-xs text-gray-400 text-center mb-4">Point the camera at a ticket's QR code, or type the code manually below.</p>

            <form id="manual-form" class="flex gap-2">
                <input type="text" id="manual-code" placeholder="TKT-XXXXXXXXXX" class="flex-1 border rounded-lg px-3 py-2 font-mono">
                <button class="bg-brand text-white px-4 py-2 rounded-lg font-medium hover:bg-indigo-700">Check</button>
            </form>
        </div>

        <div id="result" class="hidden rounded-xl p-6 text-center"></div>
    </div>

    <script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
    <script>
        const resultBox = document.getElementById('result');

        async function checkCode(code) {
            try {
                const res = await fetch("{{ route('scanner.validate') }}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify({ code }),
                });
                const data = await res.json();

                resultBox.classList.remove('hidden', 'bg-green-100', 'bg-red-100', 'text-green-800', 'text-red-800');
                if (data.result === 'valid') {
                    resultBox.classList.add('bg-green-100', 'text-green-800');
                    resultBox.innerHTML = `<p class="text-xl font-bold mb-1">✅ ${data.message}</p>
                        <p class="text-sm">${data.holder} — ${data.event} (${data.ticket_type})</p>`;
                } else {
                    resultBox.classList.add('bg-red-100', 'text-red-800');
                    resultBox.innerHTML = `<p class="text-xl font-bold">❌ ${data.message}</p>`;
                }
            } catch (e) {
                resultBox.classList.remove('hidden');
                resultBox.innerHTML = `<p class="text-red-700">Something went wrong. Try again.</p>`;
            }
        }

        document.getElementById('manual-form').addEventListener('submit', (e) => {
            e.preventDefault();
            const code = document.getElementById('manual-code').value.trim();
            if (code) checkCode(code);
        });

        // Camera scanning — degrades gracefully if no camera/permission is available.
        try {
            const scanner = new Html5Qrcode('qr-reader');
            Html5Qrcode.getCameras().then(cameras => {
                if (cameras && cameras.length) {
                    scanner.start(
                        { facingMode: 'environment' },
                        { fps: 10, qrbox: 220 },
                        (decodedText) => checkCode(decodedText)
                    );
                }
            }).catch(() => {
                document.getElementById('qr-reader').innerHTML =
                    '<p class="text-sm text-gray-400 text-center py-6">No camera available — use manual entry below.</p>';
            });
        } catch (e) {
            document.getElementById('qr-reader').innerHTML =
                '<p class="text-sm text-gray-400 text-center py-6">Camera scanning unavailable — use manual entry below.</p>';
        }
    </script>
@endsection