@extends('layouts.mobile')

@section('title', 'QR Scanner')

@section('content')
<div class="space-y-6">
    <!-- Header -->
    <div class="text-center">
        <div class="w-16 h-16 bg-gradient-to-r from-orange-500 to-orange-600 rounded-full flex items-center justify-center mx-auto mb-4">
            <i class="fas fa-qrcode text-white text-2xl"></i>
        </div>
        <h1 class="text-2xl font-bold text-white mb-2">QR Scanner</h1>
        <p class="text-gray-400">Scan QR codes to send money or pay requests</p>
    </div>

    <!-- Scanner Tabs -->
    <div class="bg-dark-800/50 rounded-lg p-1 flex">
        <button id="scanTab" onclick="switchTab('scan')" class="flex-1 py-2 px-4 rounded text-sm font-medium transition-colors bg-primary-600 text-white">
            <i class="fas fa-camera mr-2"></i>Scan QR
        </button>
        <button id="myQrTab" onclick="switchTab('myqr')" class="flex-1 py-2 px-4 rounded text-sm font-medium transition-colors text-gray-400 hover:text-white">
            <i class="fas fa-qrcode mr-2"></i>My QR
        </button>
    </div>

    <!-- Scan QR Tab -->
    <div id="scanTabContent" class="space-y-6">
        <!-- Camera Section -->
        <div class="card">
            <h3 class="text-lg font-semibold text-white mb-4">Scan QR Code</h3>
            
            <!-- Camera Preview -->
            <div class="relative bg-black rounded-lg overflow-hidden mb-4">
                <video id="video" class="w-full h-64 object-cover"></video>
                <canvas id="canvas" class="hidden"></canvas>
                
                <!-- Scanning Overlay -->
                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="border-2 border-primary-400 w-48 h-48 relative">
                        <div class="absolute top-0 left-0 w-6 h-6 border-t-2 border-l-2 border-primary-400"></div>
                        <div class="absolute top-0 right-0 w-6 h-6 border-t-2 border-r-2 border-primary-400"></div>
                        <div class="absolute bottom-0 left-0 w-6 h-6 border-b-2 border-l-2 border-primary-400"></div>
                        <div class="absolute bottom-0 right-0 w-6 h-6 border-b-2 border-r-2 border-primary-400"></div>
                    </div>
                </div>
                
                <!-- Status Overlay -->
                <div id="scanStatus" class="absolute top-4 left-4 right-4 text-center">
                    <p class="text-white text-sm bg-black/50 rounded px-3 py-1 inline-block">
                        Position QR code within the frame
                    </p>
                </div>
            </div>
            
            <!-- Camera Controls -->
            <div class="flex space-x-3">
                <button id="startCamera" onclick="startCamera()" class="flex-1 btn btn-primary">
                    <i class="fas fa-camera mr-2"></i>Start Camera
                </button>
                <button id="stopCamera" onclick="stopCamera()" class="flex-1 btn btn-secondary" style="display: none;">
                    <i class="fas fa-stop mr-2"></i>Stop Camera
                </button>
                <button onclick="switchCamera()" class="btn btn-secondary" title="Switch Camera">
                    <i class="fas fa-sync-alt"></i>
                </button>
            </div>
        </div>

        <!-- Manual Input -->
        <div class="card">
            <h3 class="text-lg font-semibold text-white mb-4">Or Enter QR Data Manually</h3>
            <div class="space-y-3">
                <textarea id="manualQrData" class="form-input" rows="3" placeholder="Paste QR code data here..."></textarea>
                <button onclick="processManualQR()" class="w-full btn btn-secondary">
                    <i class="fas fa-keyboard mr-2"></i>Process QR Data
                </button>
            </div>
        </div>
    </div>

    <!-- My QR Tab -->
    <div id="myQrTabContent" class="space-y-6" style="display: none;">
        <!-- Generate QR -->
        <div class="card">
            <h3 class="text-lg font-semibold text-white mb-4">Generate Payment QR</h3>
            
            <div class="space-y-4">
                <div>
                    <label for="qrAmount" class="form-label">Amount (Optional)</label>
                    <input type="number" id="qrAmount" class="form-input" placeholder="0.00" min="1">
                </div>
                
                <div>
                    <label for="qrDescription" class="form-label">Description (Optional)</label>
                    <input type="text" id="qrDescription" class="form-input" placeholder="What's this for?">
                </div>
                
                <div>
                    <label for="qrExpiry" class="form-label">Valid For</label>
                    <select id="qrExpiry" class="form-input">
                        <option value="15">15 minutes</option>
                        <option value="30">30 minutes</option>
                        <option value="60" selected>1 hour</option>
                        <option value="240">4 hours</option>
                        <option value="1440">24 hours</option>
                    </select>
                </div>
                
                <button onclick="generateQR()" class="w-full btn btn-primary">
                    <i class="fas fa-qrcode mr-2"></i>Generate QR Code
                </button>
            </div>
        </div>

        <!-- My Default QR -->
        <div class="card">
            <h3 class="text-lg font-semibold text-white mb-4">My Payment QR</h3>
            <div class="text-center">
                <div class="inline-block p-4 bg-white rounded-lg mb-4">
                    <img src="data:image/svg+xml;base64,{{ $userQrCode }}" alt="My QR Code" class="w-48 h-48">
                </div>
                <p class="text-gray-400 text-sm mb-4">Share this QR code for others to send you money</p>
                <div class="flex space-x-2">
                    <button onclick="shareMyQR()" class="flex-1 btn btn-primary">
                        <i class="fas fa-share mr-2"></i>Share
                    </button>
                    <button onclick="downloadQR()" class="flex-1 btn btn-secondary">
                        <i class="fas fa-download mr-2"></i>Download
                    </button>
                </div>
            </div>
        </div>

        <!-- Generated QR Display -->
        <div id="generatedQrSection" class="card" style="display: none;">
            <h3 class="text-lg font-semibold text-white mb-4">Generated QR Code</h3>
            <div class="text-center">
                <div id="generatedQrContainer" class="inline-block p-4 bg-white rounded-lg mb-4">
                    <!-- Generated QR will be inserted here -->
                </div>
                <div id="generatedQrInfo" class="text-sm text-gray-400 mb-4">
                    <!-- QR info will be inserted here -->
                </div>
                <div class="flex space-x-2">
                    <button onclick="shareGeneratedQR()" class="flex-1 btn btn-primary">
                        <i class="fas fa-share mr-2"></i>Share
                    </button>
                    <button onclick="downloadGeneratedQR()" class="flex-1 btn btn-secondary">
                        <i class="fas fa-download mr-2"></i>Download
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Scans -->
    <div class="card">
        <h3 class="text-lg font-semibold text-white mb-4">Recent Scans</h3>
        <div id="recentScans">
            <div class="text-center py-8">
                <i class="fas fa-history text-gray-500 text-3xl mb-2"></i>
                <p class="text-gray-400">No recent scans</p>
            </div>
        </div>
    </div>
</div>

<!-- Processing Modal -->
<div id="processingModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden z-50">
    <div class="absolute bottom-0 left-0 right-0 bg-dark-900 rounded-t-3xl p-6 slide-up">
        <div class="w-12 h-1 bg-gray-600 rounded-full mx-auto mb-6"></div>
        <div id="processingContent" class="text-center">
            <!-- Processing content will be inserted here -->
        </div>
    </div>
</div>

@push('scripts')
<script src="https://unpkg.com/qr-scanner@1.4.2/qr-scanner.umd.min.js" integrity="sha384-+pQvQkQwQpQwQpQwQpQwQpQwQpQwQpQwQpQwQpQwQpQwQpQwQpQwQpQwQpQwQpQwQpQwQpQwQpQwQpQwQpQwQw==" crossorigin="anonymous"></script>
<script>
let qrScanner = null;
let currentStream = null;
let currentCamera = 'environment'; // 'user' for front, 'environment' for back

// Tab switching
function switchTab(tab) {
    const scanTab = document.getElementById('scanTab');
    const myQrTab = document.getElementById('myQrTab');
    const scanContent = document.getElementById('scanTabContent');
    const myQrContent = document.getElementById('myQrTabContent');
    
    if (tab === 'scan') {
        scanTab.classList.add('bg-primary-600', 'text-white');
        scanTab.classList.remove('text-gray-400');
        myQrTab.classList.remove('bg-primary-600', 'text-white');
        myQrTab.classList.add('text-gray-400');
        scanContent.style.display = 'block';
        myQrContent.style.display = 'none';
    } else {
        myQrTab.classList.add('bg-primary-600', 'text-white');
        myQrTab.classList.remove('text-gray-400');
        scanTab.classList.remove('bg-primary-600', 'text-white');
        scanTab.classList.add('text-gray-400');
        myQrContent.style.display = 'block';
        scanContent.style.display = 'none';
        stopCamera(); // Stop camera when switching away
    }
}

// Camera functions
async function startCamera() {
    try {
        const video = document.getElementById('video');
        const startBtn = document.getElementById('startCamera');
        const stopBtn = document.getElementById('stopCamera');
        
        // Check for camera support first
        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
            throw new Error('Camera not supported by this browser');
        }
        
        // Request camera permissions
        updateScanStatus('Requesting camera access...');
        
        const constraints = {
            video: {
                facingMode: currentCamera,
                width: { ideal: 640 },
                height: { ideal: 480 }
            }
        };
        
        currentStream = await navigator.mediaDevices.getUserMedia(constraints);
        video.srcObject = currentStream;
        
        // Wait for video to load
        await new Promise((resolve) => {
            video.onloadedmetadata = resolve;
        });
        
        // Initialize QR Scanner
        qrScanner = new QrScanner(video, result => {
            processScannedQR(result.data);
        }, {
            highlightScanRegion: true,
            highlightCodeOutline: true,
            preferredCamera: currentCamera,
        });
        
        await qrScanner.start();
        
        startBtn.style.display = 'none';
        stopBtn.style.display = 'block';
        
        updateScanStatus('Scanning for QR codes...');
        
    } catch (error) {
        console.error('Camera error:', error);
        
        let errorMessage = 'Failed to access camera. ';
        
        if (error.name === 'NotAllowedError') {
            errorMessage += 'Please allow camera permissions and try again.';
        } else if (error.name === 'NotFoundError') {
            errorMessage += 'No camera found on this device.';
        } else if (error.name === 'NotSupportedError') {
            errorMessage += 'Camera not supported by this browser.';
        } else {
            errorMessage += 'Please check camera permissions and try again.';
        }
        
        updateScanStatus(errorMessage);
        showToast(errorMessage, 'error');
        
        // Show manual input fallback
        showManualInputFallback();
    }
}

function stopCamera() {
    if (qrScanner) {
        qrScanner.stop();
        qrScanner.destroy();
        qrScanner = null;
    }
    
    if (currentStream) {
        currentStream.getTracks().forEach(track => track.stop());
        currentStream = null;
    }
    
    document.getElementById('startCamera').style.display = 'block';
    document.getElementById('stopCamera').style.display = 'none';
    updateScanStatus('Camera stopped');
}

function switchCamera() {
    if (qrScanner) {
        stopCamera();
        currentCamera = currentCamera === 'environment' ? 'user' : 'environment';
        setTimeout(startCamera, 100); // Small delay before restarting
    }
}

// Manual input fallback
function showManualInputFallback() {
    const cameraSection = document.querySelector('.relative.bg-black');
    
    if (!document.getElementById('manualInputSection')) {
        const fallbackHtml = `
            <div id="manualInputSection" class="mt-4 p-4 bg-yellow-500/10 border border-yellow-500/30 rounded-lg">
                <h4 class="text-yellow-400 font-semibold mb-2">
                    <i class="fas fa-keyboard mr-2"></i>Manual Input
                </h4>
                <p class="text-yellow-300 text-sm mb-3">
                    Camera unavailable? You can manually enter payment information below:
                </p>
                <div class="space-y-3">
                    <div>
                        <label class="block text-sm font-medium text-gray-300 mb-1">Enter QR Code Data</label>
                        <textarea id="manualQrInput" 
                                  class="w-full p-2 bg-dark-700 border border-gray-600 rounded text-white text-sm" 
                                  rows="3" 
                                  placeholder="Paste QR code data or payment information here..."></textarea>
                    </div>
                    <button onclick="processManualInput()" 
                            class="w-full bg-yellow-600 hover:bg-yellow-700 text-white py-2 px-4 rounded font-medium">
                        <i class="fas fa-check mr-2"></i>Process Input
                    </button>
                </div>
            </div>
        `;
        
        cameraSection.insertAdjacentHTML('afterend', fallbackHtml);
    }
}

// Process manual input
function processManualInput() {
    const input = document.getElementById('manualQrInput');
    const data = input.value.trim();
    
    if (!data) {
        showToast('Please enter some data to process', 'error');
        return;
    }
    
    processScannedQR(data);
    input.value = '';
}

function updateScanStatus(message) {
    document.getElementById('scanStatus').innerHTML = 
        `<p class="text-white text-sm bg-black/50 rounded px-3 py-1 inline-block">${message}</p>`;
}

// QR Processing
async function processScannedQR(qrData) {
    updateScanStatus('QR Code detected! Processing...');
    addToRecentScans(qrData);
    
    try {
        const response = await fetch('{{ route('scan.process') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({ qr_data: qrData })
        });
        
        const data = await response.json();
        showProcessingResult(data);
        
    } catch (error) {
        console.error('Processing error:', error);
        showToast('Failed to process QR code', 'error');
    }
}

function processManualQR() {
    const qrData = document.getElementById('manualQrData').value.trim();
    if (!qrData) {
        showToast('Please enter QR code data', 'error');
        return;
    }
    
    processScannedQR(qrData);
}

// QR Generation
async function generateQR() {
    const amount = document.getElementById('qrAmount').value;
    const description = document.getElementById('qrDescription').value;
    const expiryMinutes = document.getElementById('qrExpiry').value;
    
    try {
        const response = await fetch('{{ route('scan.generate') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                type: 'user_payment',
                amount: amount || null,
                description: description || null,
                expires_in_minutes: expiryMinutes
            })
        });
        
        const data = await response.json();
        
        if (data.success) {
            showGeneratedQR(data);
        } else {
            showToast(data.message || 'Failed to generate QR code', 'error');
        }
        
    } catch (error) {
        console.error('Generation error:', error);
        showToast('Failed to generate QR code', 'error');
    }
}

function showGeneratedQR(data) {
    const container = document.getElementById('generatedQrContainer');
    const info = document.getElementById('generatedQrInfo');
    const section = document.getElementById('generatedQrSection');
    
    container.innerHTML = `<img src="data:image/svg+xml;base64,${data.qr_code}" alt="Generated QR Code" class="w-48 h-48">`;
    
    const expiresAt = new Date(data.expires_at).toLocaleString();
    let infoText = `Expires: ${expiresAt}`;
    
    if (data.qr_data.amount) {
        infoText = `Amount: ₦${parseFloat(data.qr_data.amount).toLocaleString()}<br>${infoText}`;
    }
    
    if (data.qr_data.description) {
        infoText = `${data.qr_data.description}<br>${infoText}`;
    }
    
    info.innerHTML = infoText;
    section.style.display = 'block';
    
    showToast('QR code generated successfully!', 'success');
}

// Processing Result Modal
function showProcessingResult(data) {
    const modal = document.getElementById('processingModal');
    const content = document.getElementById('processingContent');
    
    if (data.success) {
        let html = '';
        
        switch (data.action) {
            case 'send_money':
                html = `
                    <div class="text-center">
                        <div class="w-16 h-16 bg-success-600 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fas fa-user text-white text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold text-white mb-2">Send Money</h3>
                        <p class="text-gray-400 mb-4">Send money to ${data.target_user.name}</p>
                        <div class="bg-dark-800 rounded-lg p-4 mb-4">
                            <p class="text-white font-medium">${data.target_user.name}</p>
                            <p class="text-gray-400 text-sm">${data.target_user.email}</p>
                            ${data.suggested_amount ? `<p class="text-primary-400 mt-2">Suggested: ₦${parseFloat(data.suggested_amount).toLocaleString()}</p>` : ''}
                        </div>
                        <div class="space-y-3">
                            <button onclick="proceedToSendMoney(${JSON.stringify(data).replace(/"/g, '&quot;')})" class="w-full btn btn-primary">
                                Send Money
                            </button>
                            <button onclick="closeProcessingModal()" class="w-full btn btn-secondary">
                                Cancel
                            </button>
                        </div>
                    </div>
                `;
                break;
                
            case 'pay_request':
                html = `
                    <div class="text-center">
                        <div class="w-16 h-16 bg-warning-600 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fas fa-money-bill-wave text-white text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold text-white mb-2">Payment Request</h3>
                        <p class="text-gray-400 mb-4">From ${data.payment_request.requester}</p>
                        <div class="bg-dark-800 rounded-lg p-4 mb-4">
                            <p class="text-2xl font-bold text-white">${data.payment_request.formatted_amount}</p>
                            ${data.payment_request.description ? `<p class="text-gray-400 mt-1">${data.payment_request.description}</p>` : ''}
                        </div>
                        <div class="space-y-3">
                            <button onclick="proceedToPayRequest('${data.payment_request.request_code}')" class="w-full btn btn-primary">
                                Pay Now
                            </button>
                            <button onclick="closeProcessingModal()" class="w-full btn btn-secondary">
                                Cancel
                            </button>
                        </div>
                    </div>
                `;
                break;
                
            default:
                html = `
                    <div class="text-center">
                        <div class="w-16 h-16 bg-info-600 rounded-full flex items-center justify-center mx-auto mb-4">
                            <i class="fas fa-info text-white text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold text-white mb-2">QR Code Scanned</h3>
                        <p class="text-gray-400 mb-4">${data.message || 'QR code processed successfully'}</p>
                        <button onclick="closeProcessingModal()" class="w-full btn btn-primary">
                            OK
                        </button>
                    </div>
                `;
        }
        
        content.innerHTML = html;
    } else {
        content.innerHTML = `
            <div class="text-center">
                <div class="w-16 h-16 bg-error-600 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fas fa-exclamation-triangle text-white text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold text-white mb-2">Error</h3>
                <p class="text-gray-400 mb-4">${data.message}</p>
                <button onclick="closeProcessingModal()" class="w-full btn btn-primary">
                    OK
                </button>
            </div>
        `;
    }
    
    modal.classList.remove('hidden');
}

function closeProcessingModal() {
    document.getElementById('processingModal').classList.add('hidden');
}

// Action handlers
function proceedToSendMoney(data) {
    closeProcessingModal();
    window.location.href = `{{ route('transfer.p2p') }}?user_id=${data.target_user.id}&amount=${data.suggested_amount || ''}`;
}

function proceedToPayRequest(requestCode) {
    closeProcessingModal();
    window.location.href = `{{ url('/') }}/request/pay/${requestCode}`;
}

// Recent scans management
function addToRecentScans(qrData) {
    const recentScans = JSON.parse(localStorage.getItem('recentScans') || '[]');
    const scan = {
        data: qrData,
        timestamp: Date.now(),
        preview: qrData.substring(0, 50) + (qrData.length > 50 ? '...' : '')
    };
    
    recentScans.unshift(scan);
    if (recentScans.length > 5) recentScans.pop();
    
    localStorage.setItem('recentScans', JSON.stringify(recentScans));
    displayRecentScans();
}

function displayRecentScans() {
    const recentScans = JSON.parse(localStorage.getItem('recentScans') || '[]');
    const container = document.getElementById('recentScans');
    
    if (recentScans.length === 0) {
        container.innerHTML = `
            <div class="text-center py-8">
                <i class="fas fa-history text-gray-500 text-3xl mb-2"></i>
                <p class="text-gray-400">No recent scans</p>
            </div>
        `;
        return;
    }
    
    const html = recentScans.map(scan => `
        <div class="flex items-center justify-between p-3 border-b border-dark-700 last:border-b-0">
            <div class="flex-1">
                <p class="text-white text-sm font-medium">${scan.preview}</p>
                <p class="text-gray-400 text-xs">${new Date(scan.timestamp).toLocaleString()}</p>
            </div>
            <button onclick="processScannedQR('${scan.data.replace(/'/g, "\\'")}')" class="text-primary-400 hover:text-primary-300 text-sm">
                Process Again
            </button>
        </div>
    `).join('');
    
    container.innerHTML = html;
}

// Utility functions
function shareMyQR() {
    if (navigator.share) {
        navigator.share({
            title: 'My Payment QR Code',
            text: 'Scan this QR code to send me money',
            url: window.location.href
        });
    } else {
        showToast('QR code sharing coming soon!', 'info');
    }
}

function downloadQR() {
    showToast('QR code download coming soon!', 'info');
}

function shareGeneratedQR() {
    showToast('Generated QR sharing coming soon!', 'info');
}

function downloadGeneratedQR() {
    showToast('Generated QR download coming soon!', 'info');
}

function showToast(message, type = 'info') {
    const toast = document.createElement('div');
    toast.className = `fixed top-4 right-4 p-4 rounded-lg text-white z-50 ${type === 'success' ? 'bg-success-600' : type === 'error' ? 'bg-error-600' : 'bg-primary-600'}`;
    toast.textContent = message;
    document.body.appendChild(toast);
    
    setTimeout(() => {
        toast.remove();
    }, 3000);
}

// Initialize
document.addEventListener('DOMContentLoaded', function() {
    displayRecentScans();
    
    // Check for camera support
    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
        document.getElementById('startCamera').disabled = true;
        document.getElementById('startCamera').innerHTML = '<i class="fas fa-exclamation-triangle mr-2"></i>Camera Not Supported';
    }
});

// Clean up on page unload
window.addEventListener('beforeunload', function() {
    stopCamera();
});
</script>
@endpush
@endsection