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

{% block title %}Barcode Intelligence{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/barcode/barcode.css">
<link rel="stylesheet" href="/static/hil-pages/barcode/intelligence.css">
{% endblock %}
{% block content %}
<header>
    <h1>Barcode Intelligence</h1>
    <nav>
        <a href="/barcode">Barcode Hub</a>
        <a href="/barcode/training">Training Mode</a>
        <a href="/sales">POS</a>
        <a href="/admin">Admin</a>
    </nav>
</header>
<main>
    <section class="grid">
        <div class="panel">
            <h2>Anomaly Alerts</h2>
            <div class="metric">{{ anomaly.recent|length }}</div>
            <p>recent scan alerts for manager review.</p>
            <button id="stress-test" type="button">Run Retail Stress Test</button>
        </div>
        <div class="panel">
            <h2>Reliability</h2>
            <pre>{{ reliability.statuses|tojson(indent=2) }}</pre>
        </div>
        <div class="panel">
            <h2>Recommendations</h2>
            <ul>
            {% for item in recommendations.suggestions %}
                <li>{{ item }}</li>
            {% endfor %}
            </ul>
        </div>
    </section>

    <section class="panel">
        <h2>Recent Anomalies</h2>
        <table>
            <thead><tr><th>Type</th><th>Severity</th><th>Score</th><th>Barcode</th><th>Status</th><th>Time</th></tr></thead>
            <tbody>
            {% for item in anomaly.recent %}
                <tr>
                    <td>{{ item.anomaly_type }}</td>
                    <td>{{ item.severity }}</td>
                    <td>{{ "%.1f"|format(item.score) }}</td>
                    <td><code>{{ item.barcode or "" }}</code></td>
                    <td>{{ item.status }}</td>
                    <td>{{ item.created_at }}</td>
                </tr>
            {% else %}
                <tr><td colspan="6">No scan anomalies recorded.</td></tr>
            {% endfor %}
            </tbody>
        </table>
    </section>

    <section class="panel">
        <h2>Stress Test Result</h2>
        <pre id="stress-result">Ready.</pre>
    </section>
</main>
<script>
function csrfToken(){return document.querySelector('meta[name="csrf-token"]')?.content || "";}
document.getElementById("stress-test").addEventListener("click", function(){
    fetch("/api/barcode/stress-test", {
        method:"POST",
        headers:{"Content-Type":"application/json","X-CSRF-Token":csrfToken()},
        body:JSON.stringify({iterations:500})
    }).then(res => res.json()).then(data => {
        document.getElementById("stress-result").textContent = JSON.stringify(data, null, 2);
    });
});
</script>
{% endblock %}