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

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

{% block extra_css %}
<style>
    .scanner-container {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .scanner-header {
        background: linear-gradient(135deg, #2c3e50, #4a6491);
        color: white;
        padding: 20px;
        border-radius: 10px;
        margin-bottom: 20px;
    }
    
    #scanner-video {
        width: 100%;
        height: 300px;
        background-color: #000;
        border-radius: 10px;
        object-fit: cover;
    }
    
    .scanner-controls {
        padding: 20px;
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    
    .quantity-control {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        margin: 20px 0;
    }
    
    .quantity-btn {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        font-size: 24px;
        font-weight: bold;
        border: none;
        background-color: #3498db;
        color: white;
        cursor: pointer;
        transition: all 0.3s;
    }
    
    .quantity-btn:hover {
        background-color: #2980b9;
        transform: scale(1.1);
    }
    
    .quantity-display {
        font-size: 32px;
        font-weight: bold;
        min-width: 60px;
        text-align: center;
        padding: 10px;
        border: 2px solid #3498db;
        border-radius: 5px;
    }
    
    .scanned-items {
        max-height: 400px;
        overflow-y: auto;
    }
    
    .scan-item {
        padding: 12px;
        border-bottom: 1px solid #eee;
        transition: background-color 0.3s;
    }
    
    .scan-item:hover {
        background-color: #f8f9fa;
    }
    
    .scan-item.new {
        background-color: #e8f5e8;
        border-left: 4px solid #27ae60;
    }
    
    .barcode-input {
        font-size: 24px;
        text-align: center;
        letter-spacing: 2px;
        padding: 15px;
    }
    
    .stats-card {
        text-align: center;
        padding: 15px;
        border-radius: 8px;
        background-color: white;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .stats-card.today {
        background: linear-gradient(135deg, #3498db, #2980b9);
        color: white;
    }
    
    .stats-card.total {
        background: linear-gradient(135deg, #27ae60, #219653);
        color: white;
    }
    
    .camera-selector {
        margin-bottom: 15px;
    }
    
    .status-indicator {
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin-right: 8px;
    }
    
    .status-active {
        background-color: #27ae60;
        animation: pulse 2s infinite;
    }
    
    .status-inactive {
        background-color: #e74c3c;
    }
    
    @keyframes pulse {
        0% { opacity: 1; }
        50% { opacity: 0.5; }
        100% { opacity: 1; }
    }
</style>
{% endblock %}

{% block content %}
<div class="scanner-container">
    <!-- Header -->
    <div class="scanner-header">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h2><i class="bi bi-upc-scan"></i> Warehouse Barcode Scanner</h2>
                <p class="mb-0">Scan products to add to warehouse inventory</p>
            </div>
            <div class="col-md-6 text-md-end">
                <h4>{{ warehouse.name|default:"Main Warehouse" }}</h4>
                <small>{% now "j F Y, H:i" %}</small>
            </div>
        </div>
    </div>
    
    <div class="row">
        <!-- Left Column: Scanner -->
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <span class="status-indicator status-active"></span>
                        Live Scanner
                    </h5>
                </div>
                <div class="card-body">
                    <!-- Camera Selection -->
                    <div class="camera-selector mb-3">
                        <label class="form-label">Select Camera:</label>
                        <select id="camera-select" class="form-select">
                            <option value="">Select camera...</option>
                        </select>
                    </div>
                    
                    <!-- Video Preview -->
                    <div id="scanner-area" class="mb-3">
                        <video id="scanner-video" autoplay playsinline></video>
                        <div id="scanner-overlay" style="position: relative; top: -300px; pointer-events: none;">
                            <div style="width: 100%; height: 2px; background: rgba(52, 152, 219, 0.7); position: absolute; top: 50%;"></div>
                        </div>
                    </div>
                    
                    <!-- Manual Barcode Input -->
                    <div class="mb-3">
                        <label class="form-label">Or enter barcode manually:</label>
                        <div class="input-group">
                            <input type="text" id="manual-barcode" class="form-control barcode-input" 
                                   placeholder="Scan or enter barcode" autocomplete="off">
                            <button class="btn btn-primary" onclick="manualScan()">
                                <i class="bi bi-check-lg"></i> Add
                            </button>
                        </div>
                    </div>
                    
                    <!-- Quantity Controls -->
                    <div class="quantity-control">
                        <button class="quantity-btn" onclick="changeQuantity(-1)">-</button>
                        <div class="quantity-display" id="quantity-display">1</div>
                        <button class="quantity-btn" onclick="changeQuantity(1)">+</button>
                    </div>
                    
                    <!-- Product Details (for new products) -->
                    <div id="new-product-form" style="display: none;">
                        <div class="card mt-3">
                            <div class="card-header bg-warning">
                                <h6 class="mb-0">New Product Detected</h6>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <label class="form-label">Product Name:</label>
                                    <input type="text" id="new-product-name" class="form-control" 
                                           placeholder="Enter product name">
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Cost Price (GH₵):</label>
                                        <input type="number" id="new-cost-price" class="form-control" 
                                               step="0.01" min="0" value="0">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Selling Price (GH₵):</label>
                                        <input type="number" id="new-selling-price" class="form-control" 
                                               step="0.01" min="0" value="0">
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Category:</label>
                                    <select id="new-product-category" class="form-select">
                                        <option value="">Select category...</option>
                                        {% for category in categories %}
                                        <option value="{{ category.id }}">{{ category.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <button class="btn btn-success w-100" onclick="saveNewProduct()">
                                    <i class="bi bi-save"></i> Save & Add to Stock
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Right Column: Stats & Recent Scans -->
        <div class="col-lg-4">
            <!-- Stats Cards -->
            <div class="row mb-4">
                <div class="col-md-6 col-lg-12 mb-3">
                    <div class="stats-card today">
                        <h6>TODAY'S SCANS</h6>
                        <h3 class="mb-0">{{ today_total|default:"0" }}</h3>
                        <small>{{ today_items|default:"0" }} items</small>
                    </div>
                </div>
                <div class="col-md-6 col-lg-12 mb-3">
                    <div class="stats-card total">
                        <h6>TOTAL IN WAREHOUSE</h6>
                        <h3 class="mb-0">
                            {% if warehouse %}
                                {{ total_warehouse_quantity|default:"0" }}
                            {% else %}
                                0
                            {% endif %}
                        </h3>
                        <small>items</small>
                    </div>
                </div>
            </div>
            
            <!-- Recent Scans -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-clock-history"></i> Recent Scans</h5>
                </div>
                <div class="card-body p-0">
                    <div class="scanned-items" id="recent-scans">
                        <!-- Scans will be loaded via AJAX -->
                        {% for scan in recent_scans %}
                        <div class="scan-item">
                            <div class="d-flex justify-content-between">
                                <strong>{{ scan.product.name|truncatechars:20 }}</strong>
                                <span class="badge bg-primary">{{ scan.quantity }}</span>
                            </div>
                            <small class="text-muted">{{ scan.created_at|timesince }} ago</small>
                        </div>
                        {% empty %}
                        <div class="text-center p-3 text-muted">
                            No scans yet today
                        </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="card-footer text-center">
                    <button class="btn btn-sm btn-outline-primary" onclick="loadRecentScans()">
                        <i class="bi bi-arrow-clockwise"></i> Refresh
                    </button>
                </div>
            </div>
            
            <!-- Quick Actions -->
            <div class="card mt-3">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-lightning"></i> Quick Actions</h5>
                </div>
                <div class="card-body">
                    <button class="btn btn-outline-success w-100 mb-2" onclick="startScanner()">
                        <i class="bi bi-play-circle"></i> Start Scanner
                    </button>
                    <button class="btn btn-outline-danger w-100 mb-2" onclick="stopScanner()">
                        <i class="bi bi-stop-circle"></i> Stop Scanner
                    </button>
                    <a href="{% url 'export_scans_report' %}" class="btn btn-outline-primary w-100 mb-2">
                        <i class="bi bi-download"></i> Export Report
                    </a>
                    <a href="{% url 'mobile_scanner' %}" class="btn btn-mobile w-100">
                        <i class="bi bi-phone"></i> Mobile Scanner
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

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

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/quagga@0.12.1/dist/quagga.min.js"></script>
<script>
    // Global variables
    let currentQuantity = 1;
    let scannerActive = false;
    let currentBarcode = '';
    let currentProduct = null;
    
    // Quantity control
    function changeQuantity(delta) {
        currentQuantity = Math.max(1, currentQuantity + delta);
        document.getElementById('quantity-display').textContent = currentQuantity;
    }
    
    // Manual barcode entry
    document.getElementById('manual-barcode').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            manualScan();
        }
    });
    
    function manualScan() {
        const barcode = document.getElementById('manual-barcode').value.trim();
        if (barcode) {
            scanProduct(barcode);
        }
    }
    
    // Camera setup
    async function setupCameras() {
        try {
            const devices = await navigator.mediaDevices.enumerateDevices();
            const videoDevices = devices.filter(device => device.kind === 'videoinput');
            const select = document.getElementById('camera-select');
            
            select.innerHTML = '<option value="">Select camera...</option>';
            videoDevices.forEach(device => {
                const option = document.createElement('option');
                option.value = device.deviceId;
                option.text = device.label || `Camera ${select.options.length}`;
                select.appendChild(option);
            });
            
            select.addEventListener('change', function() {
                if (scannerActive) {
                    stopScanner();
                    setTimeout(() => startScanner(this.value), 500);
                }
            });
            
            // Auto-select first camera
            if (videoDevices.length > 0) {
                select.value = videoDevices[0].deviceId;
            }
        } catch (error) {
            console.error('Error getting cameras:', error);
        }
    }
    
    // Start barcode scanner
    function startScanner(deviceId = null) {
        if (scannerActive) return;
        
        const selectedCamera = deviceId || document.getElementById('camera-select').value;
        if (!selectedCamera) {
            alert('Please select a camera first');
            return;
        }
        
        const constraints = {
            video: {
                deviceId: { exact: selectedCamera },
                facingMode: 'environment',
                width: { ideal: 1280 },
                height: { ideal: 720 }
            },
            audio: false
        };
        
        const video = document.getElementById('scanner-video');
        
        navigator.mediaDevices.getUserMedia(constraints)
            .then(stream => {
                video.srcObject = stream;
                scannerActive = true;
                
                // Start Quagga.js for barcode scanning
                Quagga.init({
                    inputStream: {
                        name: "Live",
                        type: "LiveStream",
                        target: video,
                        constraints: constraints
                    },
                    decoder: {
                        readers: [
                            "code_128_reader",
                            "ean_reader",
                            "ean_8_reader",
                            "code_39_reader",
                            "upc_reader",
                            "upc_e_reader"
                        ]
                    },
                    locate: true
                }, function(err) {
                    if (err) {
                        console.error("Quagga initialization failed:", err);
                        alert("Barcode scanner initialization failed: " + err.message);
                        return;
                    }
                    
                    Quagga.start();
                    
                    Quagga.onDetected(function(result) {
                        if (result.codeResult && result.codeResult.code) {
                            const code = result.codeResult.code;
                            scanProduct(code);
                        }
                    });
                });
                
                updateUI();
            })
            .catch(error => {
                console.error("Camera access error:", error);
                alert("Cannot access camera: " + error.message);
            });
    }
    
    // Stop scanner
    function stopScanner() {
        if (!scannerActive) return;
        
        const video = document.getElementById('scanner-video');
        const stream = video.srcObject;
        
        if (stream) {
            stream.getTracks().forEach(track => track.stop());
            video.srcObject = null;
        }
        
        if (Quagga) {
            Quagga.stop();
        }
        
        scannerActive = false;
        updateUI();
    }
    
    // Update UI based on scanner state
    function updateUI() {
        const indicator = document.querySelector('.status-indicator');
        if (scannerActive) {
            indicator.classList.remove('status-inactive');
            indicator.classList.add('status-active');
        } else {
            indicator.classList.remove('status-active');
            indicator.classList.add('status-inactive');
        }
    }
    
    // Scan product
    function scanProduct(barcode) {
        if (!barcode) return;
        
        // Play scan sound
        document.getElementById('scan-sound').play();
        
        // Clear manual input
        document.getElementById('manual-barcode').value = '';
        
        // Show loading
        showToast('Scanning barcode...', 'info');
        
        // Check if product exists
        fetch(`/api/check-barcode/?barcode=${encodeURIComponent(barcode)}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    if (data.exists) {
                        // Product exists, add to stock
                        currentProduct = data.product;
                        currentBarcode = barcode;
                        addToStock(data.product.id);
                    } else {
                        // New product, show form
                        currentBarcode = barcode;
                        document.getElementById('new-product-name').value = `Product-${barcode.substring(0, 8)}`;
                        document.getElementById('new-product-form').style.display = 'block';
                        document.getElementById('new-product-name').focus();
                    }
                } else {
                    showToast('Error: ' + data.error, 'error');
                }
            })
            .catch(error => {
                console.error('Error checking barcode:', error);
                showToast('Network error occurred', 'error');
            });
    }
    
    // Add product to stock
    function addToStock(productId) {
        const quantity = currentQuantity;
        
        const data = {
            barcode: currentBarcode,
            quantity: quantity,
            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) {
                showToast(data.message, 'success');
                
                // Add to recent scans list
                addToRecentScans(data.product, quantity);
                
                // Reset quantity
                currentQuantity = 1;
                document.getElementById('quantity-display').textContent = '1';
            } else {
                showToast('Error: ' + data.error, 'error');
            }
        })
        .catch(error => {
            console.error('Error adding to stock:', error);
            showToast('Network error occurred', 'error');
        });
    }
    
    // Save new product
    function saveNewProduct() {
        const name = document.getElementById('new-product-name').value.trim();
        const costPrice = document.getElementById('new-cost-price').value;
        const sellingPrice = document.getElementById('new-selling-price').value;
        const categoryId = document.getElementById('new-product-category').value;
        const quantity = currentQuantity;
        
        if (!name) {
            showToast('Please enter product name', 'error');
            return;
        }
        
        const productData = {
            barcode: currentBarcode,
            quantity: quantity,
            product_name: name,
            cost_price: costPrice,
            selling_price: sellingPrice
        };
        
        fetch('{% url "scan_product" %}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCookie('csrftoken')
            },
            body: JSON.stringify(productData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showToast('New product created and added to stock!', 'success');
                
                // Update product details if category selected
                if (categoryId) {
                    updateProductDetails(data.product.id, categoryId);
                }
                
                // Add to recent scans
                addToRecentScans(data.product, quantity, true);
                
                // Hide form and reset
                document.getElementById('new-product-form').style.display = 'none';
                document.getElementById('new-product-name').value = '';
                document.getElementById('new-cost-price').value = '0';
                document.getElementById('new-selling-price').value = '0';
                document.getElementById('new-product-category').value = '';
                
                // Reset quantity
                currentQuantity = 1;
                document.getElementById('quantity-display').textContent = '1';
            } else {
                showToast('Error: ' + data.error, 'error');
            }
        })
        .catch(error => {
            console.error('Error saving product:', error);
            showToast('Network error occurred', 'error');
        });
    }
    
    // Update product details
    function updateProductDetails(productId, categoryId) {
        const data = {
            category_id: categoryId
        };
        
        fetch(`/api/update-product/${productId}/`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': getCookie('csrftoken')
            },
            body: JSON.stringify(data)
        });
    }
    
    // Add to recent scans list
    function addToRecentScans(product, quantity, isNew = false) {
        const recentScans = document.getElementById('recent-scans');
        const now = new Date();
        const timeString = now.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
        
        const scanItem = document.createElement('div');
        scanItem.className = `scan-item ${isNew ? 'new' : ''}`;
        scanItem.innerHTML = `
            <div class="d-flex justify-content-between">
                <strong>${product.name}</strong>
                <span class="badge ${isNew ? 'bg-success' : 'bg-primary'}">${quantity}</span>
            </div>
            <small class="text-muted">${timeString} ${isNew ? '· NEW' : ''}</small>
        `;
        
        recentScans.insertBefore(scanItem, recentScans.firstChild);
        
        // Limit to 10 items
        if (recentScans.children.length > 10) {
            recentScans.removeChild(recentScans.lastChild);
        }
    }
    
    // Load recent scans via AJAX
    function loadRecentScans() {
        fetch('/api/recent-activity/?limit=10')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const recentScans = document.getElementById('recent-scans');
                    recentScans.innerHTML = '';
                    
                    data.scans.forEach(scan => {
                        const scanItem = document.createElement('div');
                        scanItem.className = 'scan-item';
                        scanItem.innerHTML = `
                            <div class="d-flex justify-content-between">
                                <strong>${scan.product_name}</strong>
                                <span class="badge bg-primary">${scan.quantity}</span>
                            </div>
                            <small class="text-muted">${scan.time_ago}</small>
                        `;
                        recentScans.appendChild(scanItem);
                    });
                    
                    showToast('Recent scans refreshed', 'info');
                }
            });
    }
    
    // Toast notification
    function showToast(message, type = 'info') {
        // Remove existing toasts
        const existingToasts = document.querySelectorAll('.custom-toast');
        existingToasts.forEach(toast => toast.remove());
        
        const toast = document.createElement('div');
        toast.className = `custom-toast alert alert-${type === 'error' ? 'danger' : type}`;
        toast.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
            min-width: 250px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            animation: slideIn 0.3s ease-out;
        `;
        toast.innerHTML = `
            <button type="button" class="btn-close" onclick="this.parentElement.remove()"></button>
            ${message}
        `;
        
        document.body.appendChild(toast);
        
        // Auto-remove after 3 seconds
        setTimeout(() => {
            if (toast.parentElement) {
                toast.remove();
            }
        }, 3000);
    }
    
    // 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 on page load
    document.addEventListener('DOMContentLoaded', function() {
        setupCameras();
        
        // Auto-start scanner if on desktop and user confirmed before
        if (window.innerWidth > 768) {
            const hasConfirmed = localStorage.getItem('scannerAutoStart');
            if (hasConfirmed === 'true') {
                setTimeout(() => startScanner(), 1000);
            }
        }
        
        // Focus on manual input
        document.getElementById('manual-barcode').focus();
        
        // Load recent scans every 30 seconds
        setInterval(loadRecentScans, 30000);
    });
</script>
{% endblock %}