{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Barcode Scanner - Gvelo Enterprise Platform{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/hil-pages/scan.css">
{% endblock %}
{% block content %}
<div class="container">
    <h1 class="brand">Gvelo Enterprise Platform</h1>
    <div class="card">
        <h2>Barcode Scanner</h2>
        <p class="hil-inline-46babdf7a2">Choose a detection mode and scan barcodes using your hardware scanner, or type manually.</p>

        <div class="mode-buttons">
            <button class="mode-btn auto" id="auto-detect-btn" onclick="setMode('auto')">Auto Detect</button>
            <button class="mode-btn manual" id="manual-detect-btn" onclick="setMode('manual')">Manual Entry</button>
        </div>

        <div class="mode-info waiting" id="mode-status">Select a mode above to begin scanning</div>
        {% if error %}
            <div class="mode-info waiting">{{ error }}</div>
        {% endif %}

        <div class="barcode-input-wrapper">
            <label for="barcode">Barcode</label>
            <input type="text" id="barcode" name="barcode" placeholder="Click a mode, then scan or type..." disabled autocomplete="off">
        </div>

        <div class="stats-row hil-inline-6b99de8b69" id="stats-row">
            <span class="stat-badge wpm" id="wpm-badge">-- WPM</span>
            <span class="stat-badge chars" id="chars-badge">0 chars</span>
        </div>

        <div class="submit-row">
            <button type="button" id="submit-btn" disabled>Submit</button>
            <button type="button" id="ok-btn">OK (Submit)</button>
        </div>

        <div id="scan-history" class="hil-inline-6b99de8b69">
            <h4 class="hil-inline-d3fb99dbdd">Recent Scans</h4>
            <div class="history-list" id="history-list"></div>
            <button class="clear-history" onclick="clearHistory()">Clear</button>
        </div>

        {% if product %}
            <div class="product-found">
                <h3>Product Found</h3>
                <p><strong>Name:</strong> {{ product[1] }}</p>
                <p class="price"><strong>Price:</strong> {{ currency_symbol }}{{ "%.2f"|format(product[2]) }}</p>
                <p><strong>Stock:</strong> {{ product[3] }}</p>
                <a href="{{ target }}?barcode={{ product[4] }}" class="btn">Add to Cart</a>
            </div>
        {% endif %}

        <div class="nav-links">
            <a href="{{ target }}">Go to Sales</a>
            <a href="/mobile-scan?return_to={{ return_to }}&target={{ target }}">Camera</a>
            <a href="/connect-phone-scanner?return_to={{ return_to }}&target={{ target }}">Phone</a>
        </div>
        <div class="bottom-left-back">
            <a href="{{ return_to }}">Back</a>
        </div>
    </div>
</div>

<script>
(function() {
    var mode = null;
    var barcodeInput = document.getElementById('barcode');
    var submitBtn = document.getElementById('submit-btn');
    var okBtn = document.getElementById('ok-btn');
    var modeStatus = document.getElementById('mode-status');
    var autoBtn = document.getElementById('auto-detect-btn');
    var manualBtn = document.getElementById('manual-detect-btn');
    var statsRow = document.getElementById('stats-row');
    var wpmBadge = document.getElementById('wpm-badge');
    var charsBadge = document.getElementById('chars-badge');
    var scanHistory = document.getElementById('scan-history');
    var historyList = document.getElementById('history-list');

    var keyTimestamps = [];
    var scanTimer = null;
    var lastSubmittedCode = '';
    var lastSubmittedAt = 0;
    var SCAN_TIMEOUT = 140;
    var MIN_SCAN_SPEED = 120;
    var MIN_BARCODE_LENGTH = 4;

    window.setMode = function(newMode) {
        mode = newMode;
        barcodeInput.disabled = false;
        barcodeInput.value = '';
        keyTimestamps = [];
        barcodeInput.focus();
        statsRow.style.display = 'flex';
        scanHistory.style.display = 'block';

        if (mode === 'auto') {
            modeStatus.className = 'mode-info auto';
            modeStatus.textContent = 'Auto Detect: Barcodes submit automatically. Hardware scanners work best here.';
            autoBtn.classList.add('active');
            manualBtn.classList.remove('active');
            submitBtn.style.display = 'inline-block';
            submitBtn.disabled = false;
            okBtn.style.display = 'none';
        } else {
            modeStatus.className = 'mode-info manual';
            modeStatus.textContent = 'Manual Entry: Type the barcode, then click OK or press Enter to submit.';
            autoBtn.classList.remove('active');
            manualBtn.classList.add('active');
            submitBtn.style.display = 'none';
            okBtn.style.display = 'inline-block';
        }
    };

    function detectScannerSpeed() {
        if (keyTimestamps.length < 2) return 0;
        var intervals = [];
        for (var i = 1; i < keyTimestamps.length; i++) {
            intervals.push(keyTimestamps[i] - keyTimestamps[i-1]);
        }
        var avg = intervals.reduce(function(a,b){return a+b;}, 0) / intervals.length;
        return avg;
    }

    function isScannerInput() {
        var speed = detectScannerSpeed();
        return speed > 0 && speed < MIN_SCAN_SPEED && barcodeInput.value.trim().length >= MIN_BARCODE_LENGTH;
    }

    function playBeep() {
        try {
            var ctx = new (window.AudioContext || window.webkitAudioContext)();
            var osc = ctx.createOscillator();
            var gain = ctx.createGain();
            osc.connect(gain);
            gain.connect(ctx.destination);
            osc.frequency.value = 880;
            osc.type = 'sine';
            gain.gain.setValueAtTime(0.2, ctx.currentTime);
            gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.15);
            osc.start(ctx.currentTime);
            osc.stop(ctx.currentTime + 0.15);
        } catch(e) {}
    }

    function addToHistory(code) {
        var item = document.createElement('div');
        item.className = 'history-item';
        var now = new Date();
        var timeStr = now.getHours().toString().padStart(2,'0') + ':' + now.getMinutes().toString().padStart(2,'0') + ':' + now.getSeconds().toString().padStart(2,'0');
        item.innerHTML = '<span>' + code + '</span><span class="time">' + timeStr + '</span>';
        historyList.insertBefore(item, historyList.firstChild);
        while (historyList.children.length > 10) {
            historyList.removeChild(historyList.lastChild);
        }
    }

    window.clearHistory = function() {
        historyList.innerHTML = '';
    };

    function submitBarcode() {
        var code = barcodeInput.value.trim();
        if (!code || code.length < MIN_BARCODE_LENGTH) return;
        var now = Date.now();
        if (code === lastSubmittedCode && now - lastSubmittedAt < 1500) return;
        lastSubmittedCode = code;
        lastSubmittedAt = now;
        submitBtn.disabled = true;
        okBtn.disabled = true;
        addToHistory(code);
        barcodeInput.classList.add('detected');
        setTimeout(function() { barcodeInput.classList.remove('detected'); }, 500);
        playBeep();
        var form = document.createElement('form');
        form.method = 'POST';
        form.action = window.location.pathname + window.location.search;
        var input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'barcode';
        input.value = code;
        form.appendChild(input);
        document.body.appendChild(form);
        form.submit();
    }

    barcodeInput.addEventListener('keydown', function(e) {
        var now = Date.now();
        keyTimestamps.push(now);
        if (keyTimestamps.length > 20) keyTimestamps.shift();

        var speed = detectScannerSpeed();
        if (speed > 0) {
            var wpm = Math.round(60000 / speed / 5);
            wpmBadge.textContent = wpm + ' WPM';
        }
        if (mode === 'auto' && e.key === 'Enter') {
            e.preventDefault();
            clearTimeout(scanTimer);
            submitBarcode();
            return;
        }

        if (mode === 'manual' && e.key === 'Enter') {
            e.preventDefault();
            submitBarcode();
            return;
        }
    });

    barcodeInput.addEventListener('input', function() {
        var length = barcodeInput.value.length;
        charsBadge.textContent = length + ' chars';
        submitBtn.disabled = length < MIN_BARCODE_LENGTH;

        if (mode === 'auto') {
            clearTimeout(scanTimer);
            scanTimer = setTimeout(function() {
                var code = barcodeInput.value.trim();
                if (code.length >= MIN_BARCODE_LENGTH && (isScannerInput() || code.length >= 8)) {
                    submitBarcode();
                }
            }, SCAN_TIMEOUT);
        }
    });

    submitBtn.addEventListener('click', submitBarcode);
    okBtn.addEventListener('click', submitBarcode);

    barcodeInput.addEventListener('blur', function() {
        if (mode) setTimeout(function() { barcodeInput.focus(); }, 100);
    });
})();
</script>
{% endblock %}