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

{% block title %}Connect Phone Scanner{% endblock %}
{% block head_extra %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<link rel="stylesheet" href="/static/hil-pages/connect_phone_scanner.css">
{% endblock %}
{% block content %}
<div class="wrap">
        <div class="hero">
            <h1>Connect Your Phone as a Scanner</h1>
            <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-a4adf67904">Select a mode to start</p>
        <p>Use the website link on your phone for the reliable live connection. Direct Bluetooth with a normal phone is limited and often does not work as a barcode scanner in browsers.</p>
    </div>

    <div class="grid">
        <div class="card">
            <h2>Website Connection</h2>
            <p class="muted">This is the recommended method. Open this link on your phone, allow camera access, and each scan will arrive here automatically on the desktop.</p>

            <div class="link-box" id="phone-url">{{ phone_url }}</div>
            <div class="actions">
                <button type="button" onclick="copyPhoneLink()">Copy Phone Link</button>
                <a class="button-link secondary" href="{{ phone_url }}" target="_blank" rel="noopener">Open Phone Page</a>
                <a class="button-link" href="/scan?return_to={{ return_to }}&target={{ target }}">Use Hardware Scanner</a>
            </div>

            <div class="qr-wrap">
                <div class="qr-code" id="phone-qr"></div>
                <div class="qr-help">
                    <p><strong>Quick phone connect</strong></p>
                    <p class="muted">Open your phone camera or QR scanner app and scan this code to launch the phone scanner instantly.</p>
                </div>
            </div>

            <h3>Session Code</h3>
            <div class="token-box">{{ token }}</div>

            <h3>Desktop Status</h3>
            <div class="status-box" id="desktop-status">Waiting for phone scans...</div>

            <div class="scan-feed" id="scan-feed"></div>
        </div>

        <div class="card">
            <h2>Bluetooth Option</h2>
            <p class="muted">This only checks whether the desktop browser can pair with a nearby Bluetooth device. Most phones do not expose barcode scans directly over Web Bluetooth, so pairing alone usually will not create a working scanner.</p>

            <div class="actions">
                <button type="button" id="bluetooth-btn">Check Bluetooth Support</button>
            </div>
            <div class="bottom-left-back">
                <a class="button-link secondary" href="{{ return_to }}">Back</a>
            </div>

            <p class="muted" id="bluetooth-status">Bluetooth not started yet. If you want dependable scanning, use the website connection on the left.</p>

            <h3>How to Use</h3>
            <ol class="list">
                <li>Keep this desktop page open.</li>
                <li>Open the website link on your phone.</li>
                <li>Scan a product barcode with the phone camera.</li>
                <li>The desktop will auto-open the product in sales.</li>
            </ol>

            <h3>Why Bluetooth May Fail</h3>
            <ol class="list">
                <li>Many phones do not behave like Bluetooth barcode scanners for desktop browsers.</li>
                <li>Web Bluetooth support depends on the desktop browser and operating system.</li>
                <li>Even after pairing, the browser may not receive barcode data from the phone.</li>
            </ol>
        </div>
    </div>
</div>

<script>
const token = "{{ token }}";
const phoneUrl = "{{ phone_url }}";
const desktopStatus = document.getElementById("desktop-status") || document.body;
const scanFeed = document.getElementById("scan-feed") || document.createElement("div");
const bluetoothStatus = document.getElementById("bluetooth-status") || document.body;
const autoDetectBtn = document.getElementById("auto-detect-btn");
const manualDetectBtn = document.getElementById("manual-detect-btn");
const modeStatus = document.getElementById("mode-status");

if (document.getElementById("phone-qr")) {
    new QRCode(document.getElementById("phone-qr"), {
        text: phoneUrl,
        width: 150,
        height: 150,
        colorDark: "#0f172a",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.M
    });
}

function copyPhoneLink() {
    navigator.clipboard.writeText(document.getElementById("phone-url").innerText)
        .then(() => {
            desktopStatus.innerText = "Phone link copied. Open it on your phone.";
        })
        .catch(() => {
            desktopStatus.innerText = "Could not copy automatically. Copy the link manually.";
        });
}

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);
}

let scanMode = null;
let currentBarcode = null;
let lastHandledBarcode = null;
let lastHandledAt = 0;

function setMode(mode) {
    scanMode = mode;
    if (currentBarcode) {
        desktopStatus.innerText = mode === 'auto'
            ? `Mode changed to auto. The next scan will proceed automatically.`
            : `Mode changed to manual. The next scan will wait for OK.`;
    }
    if (modeStatus) {
        modeStatus.innerText = mode === 'auto'
            ? "Auto Detect Mode - Barcodes will submit automatically"
            : "Manual Detect Mode - Click OK to submit each barcode";
    }
    if (autoDetectBtn) {
        autoDetectBtn.style.opacity = mode === 'auto' ? "0.6" : "1";
    }
    if (manualDetectBtn) {
        manualDetectBtn.style.opacity = mode === 'manual' ? "0.6" : "1";
    }
}

if (autoDetectBtn) {
    autoDetectBtn.addEventListener("click", () => setMode('auto'));
}
if (manualDetectBtn) {
    manualDetectBtn.addEventListener("click", () => setMode('manual'));
}

async function pollScans() {
    try {
        const response = await fetch(`/api/phone-scanner/${token}/next`);
        const data = await response.json();

        if (data.ok && data.barcode) {
            const now = Date.now();
            if (data.barcode === lastHandledBarcode && now - lastHandledAt < 1800) {
                setTimeout(pollScans, 300);
                return;
            }
            lastHandledBarcode = data.barcode;
            lastHandledAt = now;
            playBeep();
            currentBarcode = data.barcode;
            const item = document.createElement("div");
            item.className = "scan-item";
            item.innerHTML = `<strong>Received barcode:</strong> ${data.barcode} <span style="color: green; font-size: 18px;">✓</span>`;
            scanFeed.prepend(item);

            if (scanMode === 'auto') {
                desktopStatus.innerText = `Barcode received: ${data.barcode}. Proceeding...`;
                setTimeout(() => {
                    const target = data.target || "{{ target }}";
                    const url = target === '/add-product' ? `/add-product-scan?barcode=${encodeURIComponent(data.barcode)}` : `${target}?barcode=${encodeURIComponent(data.barcode)}`;
                    window.location.href = url;
                }, 500);
            } else if (scanMode === 'manual') {
                desktopStatus.innerText = `Barcode received: ${data.barcode}. Click OK to continue.`;
                const continueBtn = document.createElement("button");
                continueBtn.innerText = "OK";
                continueBtn.onclick = () => {
                    const target = data.target || "{{ target }}";
                    const url = target === '/add-product' ? `/add-product-scan?barcode=${encodeURIComponent(data.barcode)}` : `${target}?barcode=${encodeURIComponent(data.barcode)}`;
                    window.location.href = url;
                };
                item.appendChild(continueBtn);
            } else {
                desktopStatus.innerText = `Barcode received: ${data.barcode}. Select a mode to continue.`;
                const autoBtn = document.createElement("button");
                autoBtn.innerText = "Use Auto";
                autoBtn.onclick = () => {
                    setMode('auto');
                    const target = data.target || "{{ target }}";
                    const url = target === '/add-product' ? `/add-product-scan?barcode=${encodeURIComponent(data.barcode)}` : `${target}?barcode=${encodeURIComponent(data.barcode)}`;
                    window.location.href = url;
                };
                const manualBtn = document.createElement("button");
                manualBtn.innerText = "OK";
                manualBtn.onclick = () => {
                    setMode('manual');
                    const target = data.target || "{{ target }}";
                    const url = target === '/add-product' ? `/add-product-scan?barcode=${encodeURIComponent(data.barcode)}` : `${target}?barcode=${encodeURIComponent(data.barcode)}`;
                    window.location.href = url;
                };
                item.appendChild(autoBtn);
                item.appendChild(manualBtn);
            }

            setTimeout(pollScans, 300);
            return;
        }
    } catch (error) {
        desktopStatus.innerText = "Connection lost while waiting for the phone scanner.";
    }

    setTimeout(pollScans, 300);
}

document.getElementById("bluetooth-btn").addEventListener("click", async () => {
    if (!navigator.bluetooth) {
        bluetoothStatus.innerText = "This browser does not support Web Bluetooth. Use the website connection above for a working phone scanner.";
        return;
    }

    try {
        const device = await navigator.bluetooth.requestDevice({
            acceptAllDevices: true,
            optionalServices: ["battery_service"]
        });
        bluetoothStatus.innerText = `Bluetooth paired with ${device.name || "a nearby device"}. If scans still do not reach the desktop, use the website connection because most phones do not send barcode data through Web Bluetooth.`;
    } catch (error) {
        bluetoothStatus.innerText = "Bluetooth pairing was cancelled or not supported. The website connection is still the recommended working method.";
    }
});

pollScans();
</script>
{% endblock %}