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

{% block title %}Barcode Hub{% endblock %}
{% block head_extra %}
<meta name="csrf-token" content="{{ csrf_token() }}">
    
    <link rel="stylesheet" href="/static/barcode/barcode.css?v=dark-barcode-20260519">
<link rel="stylesheet" href="/static/hil-pages/barcode/dashboard.css">
{% endblock %}
{% block content %}
<div class="hil-page-tools">
    {{ ui.button('Admin Dashboard', '/admin', 'secondary') }}
    {{ ui.button('Help Center', '/help-center', 'secondary') }}
</div>

<header>
    <h1>Barcode Hub</h1>
    <nav>
        <a href="/sales">Sales</a>
        <a href="/inventory">Inventory</a>
        <a href="/scanner-center">Scanner Center</a>
    </nav>
</header>

<main>
    <section class="grid">
        <div class="panel">
            <h2>Offline Cache</h2>
            <div class="metric">{{ cache.count }}</div>
            <p>barcode-ready products cached for fast scanning.</p>
            <button type="button" id="refresh-cache">Refresh Barcode Cache</button>
        </div>
        <div class="panel">
            <h2>Supported Workflows</h2>
            <p>USB and Bluetooth keyboard scanners, camera QR scanning, custom assignment, auto generation, print labels, and offline lookup.</p>
            <a class="btn" href="/barcode/print">Print Labels</a>
        </div>
        <div class="panel">
            <h2>Scan Modes</h2>
            <p>Audit stock, receive supplier deliveries, validate returns, or route any scan through the universal engine.</p>
            <button type="button" data-workflow="audit" class="workflow-start">Audit</button>
            <button type="button" data-workflow="receiving" class="workflow-start">Receiving</button>
            <button type="button" data-workflow="returns" class="workflow-start">Returns</button>
        </div>
        <div class="panel">
            <h2>Cache Manifest</h2>
            <p><strong>Version:</strong> {{ manifest.version }}</p>
            <p><strong>Generated:</strong> {{ manifest.generated_at }}</p>
        </div>
    </section>

    <section class="panel">
        <h2>Generate or Assign</h2>
        <div class="form-grid">
            <label>Product ID
                <input id="product-id" type="number" min="1" placeholder="Database product ID">
            </label>
            <label>Barcode Type
                <select id="barcode-kind">
                    <option value="internal">Internal Gvelo</option>
                    <option value="ean13">EAN-13</option>
                    <option value="upc">UPC-A</option>
                    <option value="qr">QR Product</option>
                </select>
            </label>
            <label>Prefix
                <input id="barcode-prefix" placeholder="Optional">
            </label>
            <label>Barcode
                <input id="barcode-value" placeholder="Generate or type custom barcode">
            </label>
            <button type="button" id="generate-barcode">Generate</button>
            <button type="button" id="assign-barcode">Assign</button>
        </div>
        <div id="barcode-message" class="barcode-status hil-inline-56f4356299">Ready.</div>
    </section>

    <section class="panel">
        <h2>Universal Scan</h2>
        <div class="form-grid">
            <label>Context
                <select id="universal-context">
                    <option value="auto">Auto</option>
                    <option value="product">Product</option>
                    <option value="receipt">Receipt</option>
                    <option value="audit">Inventory Audit</option>
                    <option value="receiving">Supplier Delivery</option>
                    <option value="returns">Returns</option>
                </select>
            </label>
            <label>Code
                <input id="universal-code" placeholder="Scan or type any product, receipt, or operational code">
            </label>
            <button type="button" id="universal-scan">Route Scan</button>
        </div>
        <pre id="universal-result" class="barcode-status hil-inline-09660f204a"></pre>
    </section>

    <section class="panel">
        <h2>Recent Cached Products</h2>
        <table>
            <thead>
            <tr><th>Product</th><th>Barcode</th><th>Stock</th><th>Type</th></tr>
            </thead>
            <tbody>
            {% for product in cache.products %}
                <tr>
                    <td>{{ product.name }}</td>
                    <td><code>{{ product.barcode }}</code></td>
                    <td>{{ product.stock }}</td>
                    <td>{{ product.item_type }}</td>
                </tr>
            {% else %}
                <tr><td colspan="4">No barcode-ready products yet.</td></tr>
            {% endfor %}
            </tbody>
        </table>
    </section>
</main>

<script src="/static/barcode/scanner.js"></script>
<script>
window.GVELO_CSRF_TOKEN = "{{ csrf_token() }}";
const message = document.getElementById("barcode-message");
function setMessage(text, kind) {
    message.textContent = text;
    message.className = "barcode-status " + (kind || "");
}
function csrfToken() {
    return document.querySelector('meta[name="csrf-token"]')?.content || window.GVELO_CSRF_TOKEN || "";
}
function postJson(url, payload) {
    return fetch(url, {
        method: "POST",
        credentials: "same-origin",
        headers: {"Content-Type": "application/json", "X-CSRF-Token": csrfToken()},
        body: JSON.stringify(payload)
    }).then(res => res.json().then(data => ({ok: res.ok, data})));
}
document.getElementById("refresh-cache").addEventListener("click", function () {
    GveloBarcodeScanner.refreshBarcodeCache()
        .then(ok => setMessage(ok ? "Barcode cache refreshed." : "Could not refresh cache.", ok ? "ok" : "warn"));
});
document.getElementById("generate-barcode").addEventListener("click", function () {
    postJson("/api/barcode/generate", {
        product_id: document.getElementById("product-id").value,
        kind: document.getElementById("barcode-kind").value,
        prefix: document.getElementById("barcode-prefix").value
    }).then(result => {
        if (!result.ok) {
            setMessage(result.data.error || "Generation failed.", "error");
            return;
        }
        document.getElementById("barcode-value").value = result.data.barcode;
        setMessage("Generated " + result.data.barcode, "ok");
    });
});
document.getElementById("assign-barcode").addEventListener("click", function () {
    postJson("/api/barcode/assign", {
        product_id: document.getElementById("product-id").value,
        barcode: document.getElementById("barcode-value").value,
        source: "barcode_hub"
    }).then(result => {
        if (!result.ok) {
            setMessage((result.data.errors || [result.data.error || "Assignment failed."]).join(" "), "error");
            return;
        }
        setMessage("Barcode assigned to product " + result.data.product_id + ".", "ok");
    });
});
document.querySelectorAll(".workflow-start").forEach(button => {
    button.addEventListener("click", function () {
        postJson("/api/barcode/workflows/start", {workflow_type: button.dataset.workflow})
            .then(result => {
                if (!result.ok) {
                    setMessage(result.data.error || "Could not start workflow.", "error");
                    return;
                }
                setMessage(button.dataset.workflow + " session started: " + result.data.session.id, "ok");
            });
    });
});
document.getElementById("universal-scan").addEventListener("click", function () {
    postJson("/api/barcode/universal-scan", {
        barcode: document.getElementById("universal-code").value,
        context: document.getElementById("universal-context").value
    }).then(result => {
        document.getElementById("universal-result").textContent = JSON.stringify(result.data, null, 2);
    });
});
</script>
{% endblock %}