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

{% block title %}Real-World Operations - Gvelo Enterprise Platform{% endblock %}
{% block body_class %}operational-page ops-page{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/operational-experience.css">
{% endblock %}
{% block content %}
<main class="ops-shell">
    <header class="ops-header">
        <div>
            <h1>Real-World Operations</h1>
            <div class="ops-subtitle">Production readiness, demo businesses, workflow presets, and cashier simulations.</div>
        </div>
        <div class="ops-actions">
            <a class="ops-button secondary" href="/admin">Admin</a>
            <a class="ops-button secondary" href="/onboarding">Onboarding</a>
            <a class="ops-button secondary" href="/trust">Trust</a>
        </div>
    </header>

    <section class="ops-grid">
        <div class="ops-panel ops-metric">
            <span class="ops-muted">Readiness</span>
            <strong>{{ snapshot.readiness.score }}%</strong>
            <span class="ops-badge {{ '' if snapshot.readiness.ok else 'warn' }}">{{ 'Ready' if snapshot.readiness.ok else 'Review' }}</span>
        </div>
        <div class="ops-panel ops-metric">
            <span class="ops-muted">Workflow Presets</span>
            <strong>{{ snapshot.workflow_presets|length }}</strong>
            <span>Retail modes prepared</span>
        </div>
        <div class="ops-panel ops-metric">
            <span class="ops-muted">Simulations</span>
            <strong>{{ snapshot.simulation_runs|length }}</strong>
            <span>Recent cashier tests</span>
        </div>
    </section>

    <section class="ops-panel">
        <h2>Launch A Demo Business</h2>
        <form class="ops-form-grid" method="post" action="/api/operations-mode/demo-business" onsubmit="submitAndReload(event)">
            <label>Workflow
                <select name="workflow_type">
                    {% for key in snapshot.workflow_presets.keys() %}
                    <option value="{{ key }}">{{ key|title }}</option>
                    {% endfor %}
                </select>
            </label>
            <button type="submit">Generate Demo</button>
        </form>
    </section>

    <section class="ops-panel">
        <h2>Cashier Simulation</h2>
        <form class="ops-form-grid" method="post" action="/api/operations-mode/cashier-simulation" onsubmit="submitAndReload(event)">
            <label>Workflow
                <select name="workflow_type">
                    {% for key in snapshot.workflow_presets.keys() %}
                    <option value="{{ key }}">{{ key|title }}</option>
                    {% endfor %}
                </select>
            </label>
            <label>Transactions
                <input name="transactions" type="number" min="1" max="500" value="24">
            </label>
            <button type="submit">Run Simulation</button>
        </form>
    </section>

    <section class="ops-grid">
        {% for key, workflows in snapshot.workflow_presets.items() %}
        <div class="ops-panel">
            <h3>{{ key|title }}</h3>
            <div class="ops-list">
                {% for workflow in workflows %}
                <div class="ops-list-item">{{ workflow }}</div>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </section>

    <section class="ops-panel">
        <h2>Recent Simulation Runs</h2>
        <div class="ops-table-wrap">
            <table class="ops-table">
                <thead><tr><th>Workflow</th><th>Transactions</th><th>Average Checkout</th><th>Failed</th><th>Created</th></tr></thead>
                <tbody>
                {% for run in snapshot.simulation_runs %}
                <tr><td>{{ run.workflow_type }}</td><td>{{ run.simulated_transactions }}</td><td>{{ run.average_checkout_seconds }}s</td><td>{{ run.failed_checkouts }}</td><td>{{ run.created_at }}</td></tr>
                {% else %}
                <tr><td colspan="5">No simulations yet.</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
</main>
<script>
async function submitAndReload(event) {
  event.preventDefault();
  const form = event.target;
  await fetch(form.action, { method: "POST", body: new FormData(form) });
  location.reload();
}
</script>
{% endblock %}