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

{% block title %}Phone Scanner{% endblock %}
{% block head_extra %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/quagga/0.12.1/quagga.min.js"></script>
<link rel="stylesheet" href="/static/hil-pages/phone_scanner.css">
{% endblock %}
{% block content %}
<div class="wrap">
    <div class="card">
        <h1>Phone Scanner</h1>
        <p>Scan a barcode with your phone camera or type the code manually. The desktop sales screen will receive it live.</p>

        <div id="scanner"></div>
        <div class="status" id="status">Starting camera...</div>

        <div class="scanned-code" id="scanned-display">
            <div class="code-label">Last Scanned Code:</div>
            <div class="code-display" id="scanned-code-text"></div>
            <div class="btn-row">
                <button type="button" class="btn-ok" id="btn-confirm">&#10004; Confirm & Send</button>
                <button type="button" class="btn-clear" id="btn-clear">&#10006; Clear</button>
            </div>
        </div>

        <div class="manual-row">
            <input id="manual-barcode" placeholder="Enter barcode manually">
            <button type="button" id="send-manual">Send</button>
        </div>
    </div>
</div>

<script>
const token = "{{ token }}";
const statusBox = document.getElementById("status");
const scannedDisplay = document.getElementById("scanned-display");
const scannedCodeText = document.getElementById("scanned-code-text");
let currentScannedCode = "";
let sending = false;
let lastSentCode = "";
let lastSentAt = 0;

function playBeep() {
    try {
        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 = 860;
        gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
        gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.12);
        oscillator.start(audioContext.currentTime);
        oscillator.stop(audioContext.currentTime + 0.12);
    } catch (e) {}
}

function showScannedCode(code) {
    currentScannedCode = code;
    scannedCodeText.textContent = code;
    scannedDisplay.classList.add("show");
    statusBox.innerText = `Scanned: ${code} - Click Confirm to send to desktop`;
}

async function sendBarcode(barcode) {
    barcode = (barcode || "").trim();
    const now = Date.now();
    if (!barcode || sending || (barcode === lastSentCode && now - lastSentAt < 2200)) {
        return;
    }

    sending = true;
    lastSentCode = barcode;
    lastSentAt = now;
    statusBox.innerText = `Sending ${barcode} to desktop...`;

    try {
        const response = await fetch(`/api/phone-scanner/${token}/scan`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({ barcode })
        });
        const data = await response.json();
        statusBox.innerText = data.ok ? `Sent ${barcode}. Ready for the next scan.` : data.message;
        if (data.ok) {
            playBeep();
            document.getElementById("manual-barcode").value = "";
            scannedDisplay.classList.remove("show");
            currentScannedCode = "";
        }
    } catch (error) {
        statusBox.innerText = "Could not send the barcode to desktop.";
    }

    setTimeout(() => {
        sending = false;
    }, 1200);
}

// Confirm button - sends the currently displayed code
document.getElementById("btn-confirm").addEventListener("click", () => {
    if (currentScannedCode) {
        sendBarcode(currentScannedCode);
    }
});

// Clear button - clears the displayed code
document.getElementById("btn-clear").addEventListener("click", () => {
    currentScannedCode = "";
    scannedDisplay.classList.remove("show");
    statusBox.innerText = "Camera ready. Point it at a barcode.";
});

document.getElementById("send-manual").addEventListener("click", () => {
    const value = document.getElementById("manual-barcode").value.trim();
    showScannedCode(value);
});

document.getElementById("manual-barcode").addEventListener("keydown", (event) => {
    if (event.key === "Enter") {
        event.preventDefault();
        const value = event.target.value.trim();
        showScannedCode(value);
    }
});

Quagga.init({
    inputStream: {
        name: "Live",
        type: "LiveStream",
        target: document.querySelector("#scanner"),
        constraints: {
            facingMode: "environment"
        }
    },
    decoder: {
        readers: ["code_128_reader", "ean_reader", "ean_8_reader", "upc_reader"]
    }
}, function (err) {
    if (err) {
        console.log(err);
        statusBox.innerText = "Camera not accessible. You can still type a barcode manually below.";
        return;
    }

    statusBox.innerText = "Camera ready. Point it at a barcode.";
    Quagga.start();
});

Quagga.onDetected(function (data) {
    const code = data.codeResult.code;
    if (!code) {
        return;
    }
    statusBox.innerText = `Detected ${code}`;
    playBeep();
    // Show the scanned code with OK button for confirmation
    showScannedCode(code);
});
</script>
{% endblock %}