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

{% block title %}Phone Camera Scanner - Gvelo Enterprise Platform{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/hil-pages/mobile_scan.css">
{% endblock %}
{% block content %}
<div class="container">
    <h1 class="brand">Gvelo Enterprise Platform</h1>

    <div class="card">
        <h2>Phone Camera Scanner</h2>
        <p>Choose scanning mode:</p>
        <button id="auto-detect-btn" class="hil-inline-6d4d8c5e04">Auto Detect</button>
        <button id="manual-detect-btn" class="hil-inline-48bdb25f93">Manual Detect</button>
        <p id="mode-status" class="hil-inline-f5174f23b9">Select a mode to start</p>

        <div id="scanner"></div>
        <div class="box" id="scan-guidance">
            Hold steady, fill the frame with the barcode, and avoid glare. The scanner will suggest lighting and alignment improvements while scanning.
        </div>

        <div class="box">
            <h3>Scanned Code:</h3>
            <p id="result">Waiting for mode selection...</p>
        </div>

        <div class="box scanned" id="scanned-box">
            <h3>Barcode Scanned <span class="tick">✓</span></h3>
            <p id="scanned-code"></p>
            <button id="continue-btn">OK</button>
        </div>

        <div class="link-row">
            <a href="{{ target }}">Back to Sales</a>
            <a href="/scan?return_to={{ return_to }}&target={{ target }}">Use Barcode Scanner</a>
            <a href="/connect-phone-scanner?return_to={{ return_to }}&target={{ target }}">Connect Phone</a>
        </div>
        <div class="bottom-left-back">
            <a href="{{ return_to }}">Back</a>
        </div>
    </div>
</div>

<script>
let redirected = false;
let scanningMode = null; // 'auto' or 'manual'
let isScanning = false;
let lastCode = "";
let lastDetectedAt = 0;
let guidanceTimer = null;

function setGuidance(message) {
    document.getElementById("scan-guidance").innerText = message;
}

function startCameraGuidance(video) {
    if (guidanceTimer) clearInterval(guidanceTimer);
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d", {willReadFrequently: true});
    guidanceTimer = setInterval(() => {
        if (!video.videoWidth || !video.videoHeight || redirected) return;
        canvas.width = 80;
        canvas.height = 45;
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        const pixels = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
        let brightness = 0;
        let contrast = 0;
        let previous = 0;
        for (let i = 0; i < pixels.length; i += 4) {
            const value = (pixels[i] + pixels[i + 1] + pixels[i + 2]) / 3;
            brightness += value;
            contrast += Math.abs(value - previous);
            previous = value;
        }
        brightness = brightness / (pixels.length / 4);
        contrast = contrast / (pixels.length / 4);
        if (brightness < 55) {
            setGuidance("Low light detected. Move closer to light or turn the label toward a brighter area.");
        } else if (contrast < 14) {
            setGuidance("Image looks soft. Hold still, move slightly closer, and keep the barcode flat in the guide area.");
        } else {
            setGuidance("Camera quality looks good. Keep the barcode centered and steady.");
        }
    }, 900);
}

function playBeep() {
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
    const oscillator = audioContext.createOscillator();
    const gainNode = audioContext.createGain();
    oscillator.connect(gainNode);
    gainNode.connect(audioContext.destination);
    oscillator.frequency.value = 800;
    oscillator.type = 'sine';
    gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
    gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
    oscillator.start(audioContext.currentTime);
    oscillator.stop(audioContext.currentTime + 0.1);
}

function initScanner() {
    if (isScanning) return;
    isScanning = true;

    if ("BarcodeDetector" in window) {
        const scanner = document.querySelector("#scanner");
        scanner.innerHTML = '<video id="native-scanner-video" playsinline muted style="width:100%;height:100%;object-fit:cover;"></video>';
        const video = document.getElementById("native-scanner-video");
        const detector = new BarcodeDetector({formats: ["ean_13", "ean_8", "upc_a", "upc_e", "code_128", "qr_code"]});
        navigator.mediaDevices.getUserMedia({video: {facingMode: "environment"}})
            .then(stream => {
                video.srcObject = stream;
                video.play();
                startCameraGuidance(video);
                const tick = async () => {
                    if (!isScanning || redirected) return;
                    try {
                        const codes = await detector.detect(video);
                        if (codes.length) {
                            handleDetectedCode(codes[0].rawValue || "");
                        }
                    } catch (error) {}
                    requestAnimationFrame(tick);
                };
                tick();
            })
            .catch(() => {
                document.getElementById("result").innerText = "Camera not accessible. Check browser permission and try again.";
            });
        return;
    }

    const script = document.createElement("script");
    script.src = "https://cdnjs.cloudflare.com/ajax/libs/quagga/0.12.1/quagga.min.js";
    script.onload = startQuaggaScanner;
    script.onerror = function () {
        document.getElementById("result").innerText = "Camera scanner is unavailable offline in this browser. Use manual entry or a hardware scanner.";
    };
    document.head.appendChild(script);
}

function startQuaggaScanner() {
    if (!window.Quagga) {
        document.getElementById("result").innerText = "Camera scanner is unavailable. Use manual entry or a hardware scanner.";
        return;
    }
    registerQuaggaDetection();
    
    Quagga.init({
        inputStream: {
            name: "Live",
            type: "LiveStream",
            target: document.querySelector("#scanner"),
            constraints: {
                facingMode: "environment"
            },
            area: {
                top: "20%",
                right: "10%",
                left: "10%",
                bottom: "20%"
            }
        },
        locator: {
            halfSample: true,
            patchSize: "small"
        },
        numOfWorkers: Math.min(2, navigator.hardwareConcurrency || 1),
        frequency: (navigator.deviceMemory && navigator.deviceMemory <= 2) ? 6 : 10,
        decoder: {
            readers: ["ean_reader", "ean_8_reader", "upc_reader", "upc_e_reader", "code_128_reader"],
            debug: {
                showCanvas: false,
                showPatches: false,
                showFoundPatches: false,
                showSkeleton: false,
                showLabels: false,
                showCentroids: false,
                drawBoundingBox: false,
                drawScanline: false,
                visible: false
            }
        }
    }, function (err) {
        if (err) {
            console.log(err);
            document.getElementById("result").innerText = "Camera not accessible. Check browser permission and try again.";
            return;
        }
        setGuidance("Camera ready. Center the barcode, hold steady, and avoid glare.");
        Quagga.start();
    });
}

function handleDetectedCode(code) {
    if (redirected || !scanningMode) {
        return;
    }

    const now = Date.now();
    if (!code || (code === lastCode && now - lastDetectedAt < 1800)) {
        return;
    }
    lastCode = code;
    lastDetectedAt = now;
    playBeep();
    document.getElementById("result").innerText = code + " ✓";

    document.getElementById("scanned-code").innerText = code;
    document.getElementById("scanned-box").style.display = "block";
    document.getElementById("continue-btn").style.display = "inline-block";

    if (scanningMode === 'auto') {
        redirected = true;
        if (window.Quagga) {
            Quagga.stop();
        }
        setTimeout(() => {
            const target = "{{ target }}";
            const url = target === '/add-product' ? `/add-product-scan?barcode=${encodeURIComponent(code)}` : `${target}?barcode=${encodeURIComponent(code)}`;
            window.location.href = url;
        }, 500);
    }
}

function registerQuaggaDetection() {
if (!window.Quagga) return;
Quagga.onDetected(function (data) {
    if (redirected || !scanningMode) {
        return;
    }

    const code = data.codeResult.code;
    const now = Date.now();
    if (!code || (code === lastCode && now - lastDetectedAt < 1800)) {
        return;
    }
    lastCode = code;
    lastDetectedAt = now;
    playBeep();
    document.getElementById("result").innerText = code + " ✓";

    // Show scanned box
    document.getElementById("scanned-code").innerText = code;
    document.getElementById("scanned-box").style.display = "block";
    document.getElementById("continue-btn").style.display = "inline-block";

    // Auto-redirect if in auto mode
    if (scanningMode === 'auto') {
        redirected = true;
        if (window.Quagga) {
            Quagga.stop();
        }
        setTimeout(() => {
            const target = "{{ target }}";
            const url = target === '/add-product' ? `/add-product-scan?barcode=${encodeURIComponent(code)}` : `${target}?barcode=${encodeURIComponent(code)}`;
            window.location.href = url;
        }, 500);
    }
});
}

document.getElementById("auto-detect-btn").addEventListener("click", function() {
    scanningMode = 'auto';
    redirected = false;
    lastCode = "";
    document.getElementById("mode-status").innerText = "Auto Detect Mode - Scanning will proceed automatically";
    document.getElementById("result").innerText = "Scanning...";
    document.getElementById("auto-detect-btn").style.opacity = "0.6";
    document.getElementById("manual-detect-btn").style.opacity = "1";
    initScanner();
});

document.getElementById("manual-detect-btn").addEventListener("click", function() {
    scanningMode = 'manual';
    redirected = false;
    lastCode = "";
    document.getElementById("mode-status").innerText = "Manual Detect Mode - Click OK to proceed after scanning";
    document.getElementById("result").innerText = "Scanning...";
    document.getElementById("manual-detect-btn").style.opacity = "0.6";
    document.getElementById("auto-detect-btn").style.opacity = "1";
    initScanner();
});

document.getElementById("continue-btn").addEventListener("click", function() {
    if (!redirected && document.getElementById("scanned-code").innerText.trim()) {
        redirected = true;
        if (window.Quagga) {
            Quagga.stop();
        }
        const code = document.getElementById("scanned-code").innerText;
        const target = "{{ target }}";
        const url = target === '/add-product' ? `/add-product-scan?barcode=${encodeURIComponent(code)}` : `${target}?barcode=${encodeURIComponent(code)}`;
        window.location.href = url;
    }
});
</script>
{% endblock %}