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

{% block title %}POS Acceleration Center{% endblock %}
{% block body_class %}pos-acceleration-page{% endblock %}
{% block head_extra %}
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="/static/hil-pages/pos_acceleration.css">
{% endblock %}
{% block content %}
<main class="shell">
    <div class="topbar">
        <div>
            <h1>POS Acceleration Center</h1>
            <p class="muted">Real-time checkout speed, cart responsiveness, barcode latency, receipt readiness, offline continuity, and cashier workflow guardrails.</p>
        </div>
        <div class="actions">
            <a class="btn secondary" href="/sales">Open POS</a>
            <a class="btn secondary" href="/barcode">Barcode Hub</a>
            <a class="btn secondary" href="/enterprise-experience">Enterprise Experience</a>
        </div>
    </div>

    <section class="panel">
        <h2>Speed Guardrails</h2>
        <div class="kpis">
            {% for key, budget in snapshot.performance.budgets.items() %}
            <div class="kpi"><span>{{ key|title }}</span><strong>{{ budget }}ms</strong></div>
            {% endfor %}
        </div>
        <p class="muted hil-inline-d2c171b18b">{{ snapshot.performance.guardrails.message }}</p>
    </section>

    <section class="grid hil-inline-d6f2af6e0a">
        <article class="panel">
            <h2>Instant Product Search</h2>
            <input id="pos-speed-search" placeholder="Search product, barcode, SKU, service...">
            <div id="pos-speed-results" class="hil-inline-d2c171b18b"></div>
        </article>

        <article class="panel">
            <h2>Workflow Optimization</h2>
            {% for key, value in snapshot.workflow.items() %}
                <div class="result"><strong>{{ key.replace('_', ' ')|title }}</strong><br><span class="muted">{{ 'Enabled' if value else 'Disabled' }}</span></div>
            {% endfor %}
        </article>

        <article class="panel">
            <h2>Offline Speed Continuity</h2>
            {% for key, value in snapshot.continuity.items() %}
                <div class="result"><strong>{{ key.replace('_', ' ')|title }}</strong><br><span class="muted">{{ value }}</span></div>
            {% endfor %}
        </article>

        <article class="panel">
            <h2>Operational Confidence</h2>
            {% for key, value in snapshot.confidence.items() %}
                <div class="result"><strong>{{ key.replace('_', ' ')|title }}</strong><br><span class="muted">{{ value }}</span></div>
            {% endfor %}
        </article>

        <article class="panel">
            <h2>Enterprise Runtime</h2>
            <div class="result"><strong>Universal State</strong><br><span class="muted">{{ snapshot.transaction_states|length }} transaction state record(s), global state handled by runtime APIs.</span></div>
            <div class="result"><strong>Event Bus</strong><br><span class="muted">Barcode, cart, sync, receipt, alert, and recovery events publish through a lightweight runtime bus.</span></div>
            <div class="result"><strong>Resource Priority</strong><br><span class="muted">Checkout, barcode, inventory integrity, sync safety, analytics, and reporting are prioritized in that order.</span></div>
            <div class="result"><strong>Recovery Checkpoints</strong><br><span class="muted">Carts, transactions, reports, sync state, and workflows can checkpoint for replay-safe recovery.</span></div>
        </article>

        <article class="panel">
            <h2>Cashier Productivity</h2>
            {% for tip in snapshot.productivity.coaching %}
                <div class="result">{{ tip }}</div>
            {% endfor %}
        </article>
    </section>

    <section class="panel hil-inline-d6f2af6e0a">
        <h2>Recent POS Latency</h2>
        <table>
            <thead><tr><th>Type</th><th>Average</th><th>Maximum</th><th>Budget</th><th>Status</th></tr></thead>
            <tbody>
            {% for group in snapshot.performance.groups %}
                <tr>
                    <td>{{ group.event_type }}</td>
                    <td>{{ group.avg_latency }}ms</td>
                    <td>{{ group.max_latency }}ms</td>
                    <td>{{ group.budget_ms }}ms</td>
                    <td class="{{ group.budget_status }}">{{ group.budget_status }}</td>
                </tr>
            {% else %}
                <tr><td colspan="5">No latency samples yet. Use POS once and this fills automatically.</td></tr>
            {% endfor %}
            </tbody>
        </table>
        <div class="actions hil-inline-56f4356299">
            <button type="button" onclick="runStressTest()">Run Stress Test</button>
            <button type="button" onclick="runChaosTest()">Run Chaos Test</button>
            <button type="button" onclick="runResilienceValidation()">Validate Resilience</button>
            <button type="button" onclick="regenerateReports()">Regenerate Reports</button>
        </div>
        <div id="pos-speed-output" class="output-panel"></div>
    </section>
</main>

<script>
const results = document.getElementById("pos-speed-results");
const search = document.getElementById("pos-speed-search");
let timer = null;
function csrfToken() {
    return document.querySelector('meta[name="csrf-token"]')?.content || "";
}
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 || {})
    });
}
function escapeHtml(value) {
    return String(value ?? "").replace(/[&<>"']/g, char => ({
        "&": "&amp;",
        "<": "&lt;",
        ">": "&gt;",
        '"': "&quot;",
        "'": "&#39;"
    }[char]));
}
function titleize(value) {
    return String(value || "result").replace(/[_-]+/g, " ").replace(/\b\w/g, char => char.toUpperCase());
}
function flattenMetrics(data) {
    const source = data.stress || data.chaos || data.validation || data.result || data;
    const metrics = [];
    const push = (label, value, suffix) => {
        if (value === undefined || value === null || value === "") return;
        metrics.push({label, value: `${value}${suffix || ""}`});
    };
    push("Status", source.status || (data.ok ? "ok" : "review"));
    push("Cashiers", source.cashiers);
    push("Operations", source.operations || source.queue_length || source.processed);
    push("Average Latency", source.avg_latency_ms, "ms");
    push("P95 Latency", source.p95_latency_ms || source.p95_ms, "ms");
    push("Duration", source.duration_ms, "ms");
    push("Throughput", source.throughput_ops_per_second);
    push("Resilience", source.resilience);
    return {source, metrics};
}
function renderOperationalResult(label, data) {
    const output = document.getElementById("pos-speed-output");
    const {source, metrics} = flattenMetrics(data || {});
    const status = String(source.status || (data && data.ok ? "ok" : "review")).toLowerCase();
    const statusClass = status.includes("fail") || status.includes("error") ? "failed" : status.includes("review") || status.includes("warn") ? "warn" : "";
    const scenarios = Array.isArray(source.scenarios) ? source.scenarios.slice(0, 8) : [];
    const metricHtml = metrics.map(metric => (
        `<div class="output-metric"><span>${escapeHtml(metric.label)}</span><strong>${escapeHtml(metric.value)}</strong></div>`
    )).join("");
    const scenarioHtml = scenarios.length ? (
        `<ul class="scenario-list">${scenarios.map(item => (
            `<li><strong>${escapeHtml(titleize(item.name))}</strong><span>${escapeHtml(item.operations || "")} ops | P95 ${escapeHtml(item.p95_ms || item.p95_latency_ms || "-")}ms</span></li>`
        )).join("")}</ul>`
    ) : "";
    output.innerHTML = `
        <div class="output-head">
            <h3 class="output-title">${escapeHtml(label)}</h3>
            <span class="output-status ${statusClass}">${escapeHtml(status)}</span>
        </div>
        <div class="output-grid">${metricHtml || `<div class="output-metric"><span>Result</span><strong>${data && data.ok ? "Completed" : "Review"}</strong></div>`}</div>
        ${scenarioHtml}
        <details class="raw-output">
            <summary>Raw diagnostics</summary>
            <pre>${escapeHtml(JSON.stringify(data, null, 2))}</pre>
        </details>
    `;
}
async function runOperationalAction(label, url, payload) {
    const output = document.getElementById("pos-speed-output");
    output.innerHTML = `<div class="output-head"><h3 class="output-title">${escapeHtml(label)}</h3><span class="output-status warn">running</span></div><p class="muted">Running validation...</p>`;
    try {
        const res = await postJson(url, payload);
        const data = await res.json();
        renderOperationalResult(label, data);
    } catch (error) {
        renderOperationalResult(label, {ok: false, status: "failed", error: error.message || "Request failed"});
    }
}
search.addEventListener("input", () => {
    clearTimeout(timer);
    const query = search.value.trim();
    if (!query) { results.innerHTML = ""; return; }
    timer = setTimeout(async () => {
        const res = await fetch("/api/pos-acceleration/search?q=" + encodeURIComponent(query));
        const data = await res.json();
        results.innerHTML = (data.results || []).map(item => `<div class="result"><strong>${item.name}</strong><br><span class="muted">${item.item_type} | Stock ${item.stock} | ${item.barcode || "no barcode"} | ${Number(item.price || 0).toFixed(2)}</span></div>`).join("") || "<p class='muted'>No product found.</p>";
    }, 80);
});
async function runStressTest() {
    await runOperationalAction("Stress Test", "/api/pos-acceleration/stress-test", {scans:160,cashiers:5});
}
async function runChaosTest() {
    await runOperationalAction("Chaos Test", "/api/pos-acceleration/chaos-test", {queue_length:260,cashiers:8});
}
async function runResilienceValidation() {
    await runOperationalAction("Resilience Validation", "/api/pos-acceleration/resilience-validation", {});
}
async function regenerateReports() {
    await runOperationalAction("Reporting Docs", "/api/pos-acceleration/reports/regenerate", {});
}
</script>
{% endblock %}