@extends($layout ?? 'layouts.admin')

@section('content')
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
    <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
        <div class="p-6 bg-white border-b border-gray-200">
            <h1 class="text-2xl font-semibold text-gray-900 mb-4">Invoice QR Code Scanner</h1>
            <p class="text-sm text-gray-600 mb-6">Scan invoice QR codes to mark devotees as visited</p>

            <!-- Scanner Section -->
            <div class="mb-6">
                <div id="scanner-container" class="mb-4">
                    <div class="bg-gray-100 rounded-lg p-4 text-center">
                        <div id="reader" class="mx-auto" style="max-width: 400px;"></div>
                        <button id="start-scanner" class="mt-4 px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700">
                            Start Camera
                        </button>
                        <button id="stop-scanner" class="mt-4 px-6 py-3 bg-red-600 text-white rounded-lg font-semibold hover:bg-red-700 hidden">
                            Stop Camera
                        </button>
                    </div>
                </div>

                <!-- Manual Entry -->
                <div class="border-t pt-6 mt-6">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">Or Enter Invoice Number Manually</h3>
                    <div class="flex gap-4">
                        <input type="text" id="manual-invoice-number" placeholder="Enter Invoice Number (e.g., INV-2025-000123 or 000123)"
                            class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <button id="manual-submit" class="px-6 py-2 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700">
                            Verify
                        </button>
                    </div>
                    <p class="text-xs text-gray-500 mt-2">You can enter the full invoice number or just the last part (e.g., 000123)</p>
                </div>
            </div>

            <!-- Result Section -->
            <div id="result-container" class="hidden mt-6">
                <div id="result-message" class="p-4 rounded-lg"></div>
            </div>

            <!-- Recent Scans -->
            <div class="mt-8 border-t pt-6">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">Recent Scans</h3>
                <div id="recent-scans" class="space-y-2">
                    <p class="text-sm text-gray-500">No scans yet</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Include html5-qrcode library -->
<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    let html5QrcodeScanner = null;
    let isScanning = false;
    const recentScans = [];

    const startButton = document.getElementById('start-scanner');
    const stopButton = document.getElementById('stop-scanner');
    const readerDiv = document.getElementById('reader');
    const resultContainer = document.getElementById('result-container');
    const resultMessage = document.getElementById('result-message');
    const manualInvoiceNumber = document.getElementById('manual-invoice-number');
    const manualSubmit = document.getElementById('manual-submit');
    const recentScansDiv = document.getElementById('recent-scans');

    // Start scanner
    startButton.addEventListener('click', function() {
        if (isScanning) return;

        html5QrcodeScanner = new Html5Qrcode("reader");

        html5QrcodeScanner.start(
            { facingMode: "environment" }, // Use back camera on mobile
            {
                fps: 10,
                qrbox: { width: 250, height: 250 }
            },
            onScanSuccess,
            onScanError
        ).then(() => {
            isScanning = true;
            startButton.classList.add('hidden');
            stopButton.classList.remove('hidden');
        }).catch(err => {
            console.error("Unable to start scanning", err);
            showResult('error', 'Unable to access camera. Please ensure camera permissions are granted.');
        });
    });

    // Stop scanner
    stopButton.addEventListener('click', function() {
        if (html5QrcodeScanner) {
            html5QrcodeScanner.stop().then(() => {
                html5QrcodeScanner.clear();
                isScanning = false;
                startButton.classList.remove('hidden');
                stopButton.classList.add('hidden');
            }).catch(err => {
                console.error("Error stopping scanner", err);
            });
        }
    });

    // Handle successful scan
    function onScanSuccess(decodedText, decodedResult) {
        // Extract invoice ID from URL (supports both /admin/invoices/{id}/scan/verify and direct invoice ID)
        let invoiceId = null;

        // Try to match URL pattern
        const urlMatch = decodedText.match(/\/admin\/invoices\/(\d+)\/scan\/verify/);
        if (urlMatch) {
            invoiceId = urlMatch[1];
        } else if (/^\d+$/.test(decodedText)) {
            // If it's just a number, treat it as invoice ID
            invoiceId = decodedText;
        }

        if (invoiceId) {
            verifyInvoice(invoiceId);
        } else {
            showResult('error', 'Invalid QR code format. Please scan an invoice QR code.');
        }
    }

    // Handle scan errors
    function onScanError(errorMessage) {
        // Ignore continuous error messages while scanning
    }

    // Manual invoice verification by invoice number
    manualSubmit.addEventListener('click', function() {
        const invoiceNumber = manualInvoiceNumber.value.trim();
        if (!invoiceNumber) {
            showResult('error', 'Please enter an invoice number');
            return;
        }
        verifyInvoiceByNumber(invoiceNumber);
    });

    // Allow Enter key to submit
    manualInvoiceNumber.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            manualSubmit.click();
        }
    });

    // Verify invoice by ID (for QR code scanning)
    function verifyInvoice(invoiceId) {
        // Stop scanner temporarily
        if (html5QrcodeScanner && isScanning) {
            html5QrcodeScanner.pause();
        }

        fetch(`/admin/invoices/${invoiceId}/scan/verify`, {
            method: 'GET',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
            },
            credentials: 'same-origin'
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showResult('success', `Invoice ${data.invoice.number} marked as visited successfully!`, data.invoice);
                addToRecentScans(data.invoice);
            } else {
                showResult('error', data.message, data.invoice);
            }

            // Resume scanner
            if (html5QrcodeScanner && isScanning) {
                html5QrcodeScanner.resume();
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showResult('error', 'An error occurred while verifying the invoice. Please try again.');

            // Resume scanner
            if (html5QrcodeScanner && isScanning) {
                html5QrcodeScanner.resume();
            }
        });
    }

    // Verify invoice by invoice number (for manual entry)
    function verifyInvoiceByNumber(invoiceNumber) {
        fetch(`/admin/invoices/scan/verify-by-number`, {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
            },
            credentials: 'same-origin',
            body: JSON.stringify({
                invoice_number: invoiceNumber
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showResult('success', `Invoice ${data.invoice.number} marked as visited successfully!`, data.invoice);
                addToRecentScans(data.invoice);
                manualInvoiceNumber.value = '';
            } else {
                showResult('error', data.message, data.invoice);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showResult('error', 'An error occurred while verifying the invoice. Please try again.');
        });
    }

    // Show result message
    function showResult(type, message, invoice = null) {
        resultContainer.classList.remove('hidden');

        const bgColor = type === 'success' ? 'bg-green-100 border-green-400 text-green-700' : 'bg-red-100 border-red-400 text-red-700';
        resultMessage.className = `p-4 rounded-lg border ${bgColor}`;

        let html = `<div class="font-semibold mb-2">${message}</div>`;

        if (invoice) {
            html += `<div class="text-sm mt-2">
                <div><strong>Invoice #:</strong> ${invoice.number}</div>
                ${invoice.visited_at ? `<div><strong>Visited At:</strong> ${invoice.visited_at}</div>` : ''}
                ${invoice.visited_by ? `<div><strong>Scanned By:</strong> ${invoice.visited_by}</div>` : ''}
            </div>`;
        }

        resultMessage.innerHTML = html;

        // Auto-hide after 5 seconds for success messages
        if (type === 'success') {
            setTimeout(() => {
                resultContainer.classList.add('hidden');
            }, 5000);
        }
    }

    // Add to recent scans
    function addToRecentScans(invoice) {
        recentScans.unshift({
            ...invoice,
            timestamp: new Date().toLocaleTimeString()
        });

        // Keep only last 10 scans
        if (recentScans.length > 10) {
            recentScans.pop();
        }

        updateRecentScansDisplay();
    }

    // Update recent scans display
    function updateRecentScansDisplay() {
        if (recentScans.length === 0) {
            recentScansDiv.innerHTML = '<p class="text-sm text-gray-500">No scans yet</p>';
            return;
        }

        recentScansDiv.innerHTML = recentScans.map(scan => `
            <div class="bg-gray-50 p-3 rounded-lg border border-gray-200">
                <div class="flex justify-between items-center">
                    <div>
                        <div class="font-semibold text-gray-900">Invoice #${scan.number}</div>
                        <div class="text-sm text-gray-600">${scan.timestamp}</div>
                    </div>
                    <div class="text-sm text-green-600 font-semibold">✓ Verified</div>
                </div>
            </div>
        `).join('');
    }
});
</script>

<style>
/* Mobile-friendly styles */
@media (max-width: 640px) {
    #reader {
        width: 100% !important;
    }
}
</style>
@endsection