{% extends "base.html" %}

{% block title %}Scan — open-inventory{% endblock %}

{% block content %}
<section>
    <h2>Inventory Scanner</h2>

    <form>
        <fieldset>
            <legend>Scan Mode</legend>
            <div>
                <label>
                    <input type="radio" name="qty_multiplier" value="1" checked>
                    Each (×1)
                </label>
            </div>
            <div>
                <label>
                    <input type="radio" name="qty_multiplier" value="12">
                    Case (×12)
                </label>
            </div>
            <div>
                <label>
                    <input type="radio" name="qty_multiplier" value="6">
                    Cluster (×6)
                </label>
            </div>
            <div>
                <label>
                    <input type="radio" name="qty_multiplier" value="custom">
                    Custom:
                    <input type="number" name="custom_multiplier" id="custom-multiplier" value="1" min="1" style="width: 80px;">
                </label>
            </div>
        </fieldset>

        <fieldset>
            <legend>Direction</legend>
            <div>
                <label>
                    <input type="radio" name="direction" value="IN" checked>
                    Scan In
                </label>
            </div>
            <div>
                <label>
                    <input type="radio" name="direction" value="OUT">
                    Scan Out
                </label>
            </div>
            <div>
                <label>
                    <input type="radio" name="direction" value="ADJUST">
                    Adjust
                </label>
            </div>
        </fieldset>

        <fieldset>
            <legend>Barcode</legend>
            <input
                type="text"
                id="scan-input"
                name="gtin"
                placeholder="Scan a barcode or enter GTIN..."
                autofocus
                required
                style="font-size: 1.2em; padding: 0.8em;"
            >
        </fieldset>

        <input type="hidden" name="location_id" value="1">
    </form>

    <div id="scan-result" style="margin-top: 2em; min-height: 80px;">
        <!-- HTMX partial responses will land here -->
    </div>

    <hr>

    <h3>Last Scans <small style="font-weight:normal;font-size:0.75em;">(this session)</small></h3>
    <div id="scan-history" style="border: 1px solid #ddd; padding: 1em; border-radius: 0.5em; max-height: 220px; overflow-y: auto; min-height: 60px;">
        <em style="color:#999;">No scans yet.</em>
    </div>
</section>

<script>
/**
 * Client-side scan history: keeps the last MAX_HISTORY scans in memory
 * and renders them in the #scan-history panel. Cleared on page reload
 * (server-side persistence is a post-M4 item per the risk register).
 */
const MAX_HISTORY = 5;
const scanHistory = [];  // [{gtin, name, direction, qty, on_hand, ts}]

function addToHistory(entry) {
    scanHistory.unshift(entry);
    if (scanHistory.length > MAX_HISTORY) scanHistory.pop();
    renderHistory();
}

function renderHistory() {
    const el = document.getElementById('scan-history');
    if (scanHistory.length === 0) {
        el.innerHTML = '<em style="color:#999;">No scans yet.</em>';
        return;
    }
    el.innerHTML = scanHistory.map(e => {
        const dirColor = e.direction === 'IN' ? 'green' : e.direction === 'OUT' ? '#c00' : '#555';
        const label = e.name || e.gtin;
        return `<div style="padding:0.3em 0; border-bottom:1px solid #eee; font-size:0.9em;">
            <span style="color:${dirColor};font-weight:bold;">${e.direction}</span>
            &nbsp;×${e.qty}&nbsp;
            <strong>${label}</strong>
            &nbsp;→&nbsp;on hand: <strong>${e.on_hand}</strong>
            <span style="color:#999;float:right;">${e.ts}</span>
        </div>`;
    }).join('');
}

/**
 * Handle barcode scanner input: Enter submits, arrow keys adjust custom qty.
 */
document.getElementById('scan-input').addEventListener('keydown', function(evt) {
    if (evt.key === 'Enter') {
        evt.preventDefault();
        submitScan();
    }
});

async function submitScan() {
    const scanInput = document.getElementById('scan-input');
    const gtin = scanInput.value.trim();

    if (!gtin) return;

    const direction = document.querySelector('input[name="direction"]:checked').value;
    const locationId = document.querySelector('input[name="location_id"]').value;
    let qtyMultiplier = 1;

    const selectedMode = document.querySelector('input[name="qty_multiplier"]:checked');
    if (selectedMode.value === 'custom') {
        qtyMultiplier = parseInt(document.getElementById('custom-multiplier').value) || 1;
    } else {
        qtyMultiplier = parseInt(selectedMode.value) || 1;
    }

    const payload = {
        gtin: gtin,
        direction: direction,
        qty_multiplier: qtyMultiplier,
        location_id: parseInt(locationId),
    };

    try {
        const response = await fetch('/scan', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload),
        });

        if (response.ok) {
            const html = await response.text();
            const resultDiv = document.getElementById('scan-result');
            resultDiv.innerHTML = html;

            // Extract on_hand from the rendered partial via data attribute.
            const onHandEl = resultDiv.querySelector('[data-on-hand]');
            const nameEl   = resultDiv.querySelector('[data-item-name]');
            addToHistory({
                gtin:      gtin,
                name:      nameEl      ? nameEl.dataset.itemName   : gtin,
                direction: direction,
                qty:       qtyMultiplier,
                on_hand:   onHandEl    ? onHandEl.dataset.onHand   : '?',
                ts:        new Date().toLocaleTimeString(),
            });
        } else {
            const errorText = await response.text();
            let errorMessage = `Error ${response.status}`;
            try {
                const errorJson = JSON.parse(errorText);
                errorMessage = errorJson.detail || errorMessage;
            } catch (e) { errorMessage = errorText || errorMessage; }
            document.getElementById('scan-result').innerHTML =
                `<div style="color:red;padding:1em;border:1px solid red;border-radius:4px;background:#ffe6e6;">${errorMessage}</div>`;
        }
    } catch (error) {
        console.error('Fetch error:', error);
        document.getElementById('scan-result').innerHTML =
            `<div style="color:red;padding:1em;">Network error: ${error.message}</div>`;
    }

    scanInput.value = '';
    scanInput.focus();
}
</script>
{% endblock %}