{% extends 'base.html' %}
{% load static %}

{% block title %}Mobile Scanner - Ghana Wholesale System{% endblock %}

{% block extra_css %}
<style>
    .mobile-scanner {
        padding: 10px;
        max-width: 100%;
        margin: 0 auto;
    }
    
    .mobile-header {
        background: linear-gradient(135deg, #9b59b6, #8e44ad);
        color: white;
        padding: 15px;
        border-radius: 10px;
        margin-bottom: 15px;
        text-align: center;
    }
    
    #mobile-scanner-video {
        width: 100%;
        height: 50vh;
        max-height: 400px;
        background-color: #000;
        border-radius: 10px;
        object-fit: cover;
    }
    
    .mobile-controls {
        padding: 15px;
        background-color: white;
        border-radius: 10px;
        margin-top: 15px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    
    .quantity-control-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 15px 0;
    }
    
    .quantity-btn-mobile {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        font-size: 28px;
        font-weight: bold;
        border: none;
        background-color: #9b59b6;
        color: white;
        cursor: pointer;
        transition: all 0.3s;
    }
    
    .quantity-btn-mobile:active {
        transform: scale(0.95);
        background-color: #8e44ad;
    }
    
    .quantity-display-mobile {
        font-size: 36px;
        font-weight: bold;
        min-width: 80px;
        text-align: center;
        padding: 15px;
        border: 3px solid #9b59b6;
        border-radius: 10px;
        background-color: #f8f9fa;
    }
    
    .mobile-input {
        font-size: 20px;
        text-align: center;
        padding: 15px;
        border: 2px solid #9b59b6;
        border-radius: 10px;
        width: 100%;
        margin-bottom: 10px;
    }
    
    .mobile-button {
        width: 100%;
        padding: 18px;
        font-size: 18px;
        font-weight: bold;
        border: none;
        border-radius: 10px;
        margin: 5px 0;
        transition: all 0.2s;
    }
    
    .mobile-button:active {
        transform: translateY(2px);
    }
    
    .btn-scan {
        background: linear-gradient(135deg, #27ae60, #219653);
        color: white;
    }
    
    .btn-stop {
        background: linear-gradient(135deg, #e74c3c, #c0392b);
        color: white;
    }
    
    .btn-manual {
        background: linear-gradient(135deg, #3498db, #2980b9);
        color: white;
    }
    
    .btn-switch {
        background: linear-gradient(135deg, #f39c12, #d35400);
        color: white;
    }
    
    .scan-history {
        margin-top: 20px;
        max-height: 40vh;
        overflow-y: auto;
        padding: 10px;
        background-color: white;
        border-radius: 10px;
    }
    
    .scan-item-mobile {
        padding: 12px;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .scan-item-mobile.new {
        background-color: #e8f5e8;
        border-left: 4px solid #27ae60;
    }
    
    .vibrate {
        animation: vibrate 0.3s linear;
    }
    
    @keyframes vibrate {
        0% { transform: translateX(0); }
        20% { transform: translateX(-2px); }
        40% { transform: translateX(2px); }
        60% { transform: translateX(-2px); }
        80% { transform: translateX(2px); }
        100% { transform: translateX(0); }
    }
    
    .flash {
        animation: flash 0.5s;
    }
    
    @keyframes flash {
        0% { background-color: white; }
        50% { background-color: #e8f5e8; }
        100% { background-color: white; }
    }
    
    .mobile-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 15px;
    }
    
    .stat-mobile {
        background-color: white;
        padding: 12px;
        border-radius: 8px;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .stat-mobile.today {
        background: linear-gradient(135deg, #3498db, #2980b9);
        color: white;
    }
    
    .stat-mobile.quantity {
        background: linear-gradient(135deg, #9b59b6, #8e44ad);
        color: white;
    }
    
    .torch-button {
        position: absolute;
        top: 20px;
        right: 20px;
        background-color: rgba(0,0,0,0.5);
        color: white;
        border: none;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        font-size: 20px;
        z-index: 100;
    }
</style>
{% endblock %}

{% block content %}
<div class="mobile-scanner">
    <!-- Mobile Header -->
    <div class="mobile-header">
        <h4><i class="bi bi-phone"></i> Mobile Warehouse Scanner</h4>
        <p class="mb-0">Tap scan button or point camera at barcode</p>
    </div>
    
    <!-- Video Preview -->
    <div style="position: relative;">
        <video id="mobile-scanner-video" autoplay playsinline></video>
        <button class="torch-button" id="torch-btn" onclick="toggleTorch()">
            <i class="bi bi-lightning"></i>
        </button>
        <div style="position: absolute; top: 50%; left: 0; right: 0; height: 3px; background: rgba(155, 89, 182, 0.7);"></div>
    </div>
    
    <!-- Stats -->
    <div class="mobile-stats">
        <div class="stat-mobile today">
            <small>TODAY</small>
            <h5 class="mb-0">{{ today_total|default:"0" }}</h5>
            <small>scans</small>
        </div>
        <div class="stat-mobile quantity">
            <small>QTY</small>
            <h5 class="mb-0" id="current-quantity">1</h5>
            <small>units</small>
        </div>
    </div>
    
    <!-- Quantity Controls -->
    <div class="quantity-control-mobile">
        <button class="quantity-btn-mobile" onclick="changeMobileQuantity(-1)">-</button>
        <div class="quantity-display-mobile" id="mobile-quantity-display">1</div>
        <button class="quantity-btn-mobile" onclick="changeMobileQuantity(1)">+</button>
    </div>
    
    <!-- Control Buttons -->
    <div class="mobile-controls">
        <input type="text" id="mobile-barcode-input" class="mobile-input" 
               placeholder="Enter barcode or tap SCAN" autocomplete="off">
        
        <button class="mobile-button btn-scan" onclick="startMobileScanner()">
            <i class="bi bi-upc-scan"></i> START SCANNER
        </button>
        
        <button class="mobile-button btn-stop" onclick="stopMobileScanner()" style="display: none;" id="stop-btn">
            <i class="bi bi-stop-circle"></i> STOP SCANNER
        </button>
        
        <button class="mobile-button btn-manual" onclick="manualMobileScan()">
            <i class="bi bi-keyboard"></i> MANUAL ENTRY
        </button>
        
        <button class="mobile-button btn-switch" onclick="switchCamera()">
            <i class="bi bi-camera-video"></i> SWITCH CAMERA
        </button>
    </div>
    
    <!-- Recent Scans -->
    <div class="scan-history" id="mobile-scan-history">
        <h6><i class="bi bi-clock"></i> Recent Scans</h6>
        {% for scan in recent_scans|slice:":5" %}
        <div class="scan-item-mobile">
            <div>
                <strong>{{ scan.product.name|truncatechars:15 }}</strong>
                <br>
                <small>{{ scan.created_at|timesince }} ago</small>
            </div>
            <span class="badge bg-primary" style="font-size: 16px;">{{ scan.quantity }}</span>
        </div>
        {% empty %}
        <div class="text-center p-3 text-muted">
            No scans yet
        </div>
        {% endfor %}
    </div>
</div>

<!-- Audio for scan confirmation -->
<audio id="mobile-scan-sound" preload="auto">
    <source src="https://assets.mixkit.co/active_storage/sfx/286/286-preview.mp3" type="audio/mpeg">
</audio>

<!-- Vibration API support check -->
<script>
    if ('vibrate' in navigator) {
        console.log("Vibration API supported");
    }
</script>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/quagga@0.12.1/dist/quagga.min.js"></script>
<script>
    // Mobile-specific variables
    let mobileQuantity = 1;
    let mobileScannerActive = false;
    let currentMobileBarcode = '';
    let currentStream = null;
    let currentFacingMode = 'environment';
    let torchActive = false;
    
    // Change quantity
    function changeMobileQuantity(delta) {
        mobileQuantity = Math.max(1, mobileQuantity + delta);
        document.getElementById('mobile-quantity-display').textContent = mobileQuantity;
        document.getElementById('current-quantity').textContent = mobileQuantity;
        
        // Haptic feedback on mobile
        if ('vibrate' in navigator) {
            navigator.vibrate(50);
        }
    }
    
    // Start mobile scanner
    function startMobileScanner() {
        if (mobileScannerActive) return;
        
        const video = document.getElementById('mobile-scanner-video');
        
        // Mobile-optimized constraints
        const constraints = {
            video: {
                facingMode: currentFacingMode,
                width: { ideal: 1280 },
                height: { ideal: 720 },
                frameRate: { ideal: 30 }
            },
            audio: false
        };
        
        navigator.mediaDevices.getUserMedia(constraints)
            .then(stream => {
                currentStream = stream;
                video.srcObject = stream;
                mobileScannerActive = true;
                
                // Update UI
                document.getElementById('stop-btn').style.display = 'block';
                document.querySelector('.btn-scan').textContent = 'SCANNING...';
                document.querySelector('.btn-scan').style.opacity = '0.7';
                
                // Start Quagga
                Quagga.init({
                    inputStream: {
                        name: "Live",
                        type: "LiveStream",
                        target: video,
                        constraints: {
                            facingMode: currentFacingMode
                        }
                    },
                    decoder: {
                        readers: [
                            "code_128_reader",
                            "ean_reader",
                            "ean_8_reader",
                            "code_39_reader",
                            "upc_reader",
                            "upc_e_reader"
                        ]
                    },
                    locate: true,
                    numOfWorkers: 1 // Reduced for mobile performance
                }, function(err) {
                    if (err) {
                        console.error("Mobile scanner init error:", err);
                        mobileAlert("Scanner failed to start");
                        return;
                    }
                    
                    Quagga.start();
                    
                    Quagga.onDetected(function(result) {
                        if (result.codeResult && result.codeResult.code) {
                            const code = result.codeResult.code;
                            processMobileScan(code);
                        }
                    });
                });
            })
            .catch(error => {
                console.error("Mobile camera error:", error);
                mobileAlert("Cannot access camera: " + error.message);
            });
    }
    
    // Stop mobile scanner
    function stopMobileScanner() {
        if (!mobileScannerActive) return;
        
        const video = document.getElementById('mobile-scanner-video');
        
        if (currentStream) {
            currentStream.getTracks().forEach(track => track.stop());
            currentStream = null;
        }
        
        video.srcObject = null;
        
        if (Quagga) {
            Quagga.stop();
        }
        
        mobileScannerActive = false;
        torchActive = false;
        
        // Update UI
        document.getElementById('stop-btn').style.display = 'none';
        document.querySelector('.btn-scan').innerHTML = '<i class="bi bi-upc-scan"></i> START SCANNER';
        document.querySelector('.btn-scan').style.opacity = '1';
    }
    
    // Switch camera (front/back)
    function switchCamera() {
        stopMobileScanner();
        currentFacingMode = currentFacingMode === 'environment' ? 'user' : 'environment';
        
        // Haptic feedback
        if ('vibrate' in navigator) {
            navigator.vibrate(100);
        }
        
        // Brief message
        mobileAlert(`Switched to ${currentFacingMode === 'environment' ? 'rear' : 'front'} camera`);
        
        // Restart with new camera
        setTimeout(startMobileScanner, 500);
    }
    
    // Toggle torch/flashlight
    function toggleTorch() {
        if (!currentStream) return;
        
        const track = currentStream.getVideoTracks()[0];
        if (!track || !track.getCapabilities().torch) return;
        
        torchActive = !torchActive;
        
        track.applyConstraints({
            advanced: [{torch: torchActive}]
        }).then(() => {
            const torchBtn = document.getElementById('torch-btn');
            torchBtn.innerHTML = torchActive ? '<i class="bi bi-lightning-fill"></i>' : '<i class="bi bi-lightning"></i>';
            torchBtn.style.backgroundColor = torchActive ? 'rgba(255,255,255,0.8)' : 'rgba(0,0,0,0.5)';
            torchBtn.style.color = torchActive ? '#000' : '#fff';
        });
    }
    
    // Process scan
    function processMobileScan(barcode) {
        // Visual and audio feedback
        document.body.classList.add('flash');
        document.getElementById('mobile-scanner-video').classList.add('vibrate');
        
        // Play sound
        document.getElementById('mobile-scan-sound').play();
        
        // Haptic feedback
        if ('vibrate' in navigator) {
            navigator.vibrate(200);
        }
        
        // Clear animations after delay
        setTimeout(() => {
            document.body.classList.remove('flash');
            document.getElementById('mobile-scanner-video').classList.remove('vibrate');
        }, 500);
        
        // Process the scan
        checkMobileBarcode(barcode);
    }
    
    // Manual scan
    function manualMobileScan() {
        const barcode = document.getElementById('mobile-barcode-input').value.trim();
        if (barcode) {
            processMobileScan(barcode);
            document.getElementById('mobile-barcode-input').value = '';
        } else {
            document.getElementById('mobile-barcode-input').focus();
        }
    }
    
    // Check barcode
    function checkMobileBarcode(barcode) {
        currentMobileBarcode = barcode;
        
        fetch(`/api/check-barcode/?barcode=${encodeURIComponent(barcode)}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    if (data.exists) {
                        // Existing product
                        addMobileToStock(data.product.id);
                    } else {
                        // New product - quick add with default name
                        quickAddMobileProduct(barcode);
                    }
                } else {
                    mobileAlert('Scan error: ' + data.error);
                }
            })
            .catch(error => {
                console.error('Mobile scan error:', error);
                mobileAlert('Network error');
            });
    }
    
    // Add to stock
    function addMobileToStock(productId) {
        const data = {
            barcode: currentMobileBarcode,
            quantity: mobileQuantity,
            product_id: productId
        };
        
        fetch('{% url "scan_product" %}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCookie('csrftoken')
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                mobileAlert(`✓ Added ${mobileQuantity} units`, 'success');
                addToMobileHistory(data.product, mobileQuantity);
                
                // Reset quantity
                mobileQuantity = 1;
                document.getElementById('mobile-quantity-display').textContent = '1';
                document.getElementById('current-quantity').textContent = '1';
            } else {
                mobileAlert('Error: ' + data.error, 'error');
            }
        })
        .catch(error => {
            mobileAlert('Network error', 'error');
        });
    }
    
    // Quick add new product
    function quickAddMobileProduct(barcode) {
        const productName = `Product-${barcode.substring(0, 8)}`;
        
        const data = {
            barcode: barcode,
            quantity: mobileQuantity,
            product_name: productName,
            cost_price: 0,
            selling_price: 0
        };
        
        fetch('{% url "scan_product" %}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCookie('csrftoken')
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                mobileAlert(`✓ New product added!`, 'success');
                addToMobileHistory(data.product, mobileQuantity, true);
                
                // Reset quantity
                mobileQuantity = 1;
                document.getElementById('mobile-quantity-display').textContent = '1';
                document.getElementById('current-quantity').textContent = '1';
            } else {
                mobileAlert('Error: ' + data.error, 'error');
            }
        })
        .catch(error => {
            mobileAlert('Network error', 'error');
        });
    }
    
    // Add to scan history
    function addToMobileHistory(product, quantity, isNew = false) {
        const historyDiv = document.getElementById('mobile-scan-history');
        const now = new Date();
        const timeString = now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
        
        const scanItem = document.createElement('div');
        scanItem.className = `scan-item-mobile ${isNew ? 'new' : ''}`;
        scanItem.innerHTML = `
            <div>
                <strong>${product.name.length > 15 ? product.name.substring(0, 15) + '...' : product.name}</strong>
                <br>
                <small>${timeString} ${isNew ? '· NEW' : ''}</small>
            </div>
            <span class="badge ${isNew ? 'bg-success' : 'bg-primary'}" style="font-size: 16px;">${quantity}</span>
        `;
        
        // Add to top
        const header = historyDiv.querySelector('h6');
        historyDiv.insertBefore(scanItem, header.nextSibling);
        
        // Limit to 10 items
        const items = historyDiv.querySelectorAll('.scan-item-mobile');
        if (items.length > 10) {
            items[items.length - 1].remove();
        }
    }
    
    // Mobile alert/toast
    function mobileAlert(message, type = 'info') {
        // Remove existing alerts
        const existingAlerts = document.querySelectorAll('.mobile-alert');
        existingAlerts.forEach(alert => alert.remove());
        
        const alertDiv = document.createElement('div');
        alertDiv.className = `mobile-alert alert alert-${type === 'error' ? 'danger' : 'success'}`;
        alertDiv.style.cssText = `
            position: fixed;
            top: 20px;
            left: 10px;
            right: 10px;
            z-index: 9999;
            text-align: center;
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            animation: slideDown 0.3s ease-out;
        `;
        alertDiv.textContent = message;
        
        document.body.appendChild(alertDiv);
        
        // Auto-remove
        setTimeout(() => {
            if (alertDiv.parentElement) {
                alertDiv.remove();
            }
        }, 2000);
    }
    
    // Get CSRF token
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    
    // Initialize mobile scanner
    document.addEventListener('DOMContentLoaded', function() {
        // Auto-start scanner on mobile (if permission previously granted)
        const hasPermission = localStorage.getItem('mobileScannerPermission');
        if (hasPermission === 'granted') {
            setTimeout(startMobileScanner, 1000);
        }
        
        // Focus management for mobile
        document.getElementById('mobile-barcode-input').addEventListener('focus', function() {
            // Stop scanner when typing
            if (mobileScannerActive) {
                stopMobileScanner();
            }
        });
        
        // Enter key for manual input
        document.getElementById('mobile-barcode-input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                manualMobileScan();
            }
        });
        
        // Request camera permission on first use
        if (!hasPermission) {
            setTimeout(() => {
                mobileAlert("Tap START SCANNER to begin. Allow camera access when prompted.");
            }, 1000);
        }
        
        // Save permission when granted
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({video: true})
                .then(() => {
                    localStorage.setItem('mobileScannerPermission', 'granted');
                })
                .catch(() => {
                    localStorage.setItem('mobileScannerPermission', 'denied');
                });
        }
    });
    
    // Handle page visibility changes
    document.addEventListener('visibilitychange', function() {
        if (document.hidden && mobileScannerActive) {
            // Stop scanner when page is hidden
            stopMobileScanner();
        }
    });
</script>
{% endblock %}