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

{% block title %}Operations Center - Gvelo Enterprise Platform{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/hil-pages/operations_center.css">
{% endblock %}
{% block content %}
<main class="ops-center">
    <div class="topbar">
        <div>
            <h1 class="brand">Operations Center</h1>
            <div class="muted">Live command room for sales, branches, inventory pressure, AI risk, payments, backups, and alerts.</div>
        </div>
        <div>
            {{ ui.button('Admin', '/admin') }}
            {{ ui.button('Transformation', '/business-transformation') }}
            <button type="button" onclick="refreshAI()">Refresh AI</button>
        </div>
    </div>

    <section class="grid">
        <div class="panel metric"><span class="muted">Today Sales</span><strong>{{ snapshot.sales.count }}</strong><span>Revenue {{ "%.2f"|format(snapshot.sales.revenue) }}</span></div>
        <div class="panel metric"><span class="muted">Efficiency</span><strong>{{ snapshot.ai.efficiency_score }}</strong><span class="badge {{ 'warn' if snapshot.ai.efficiency_score < 75 else '' }}">AI Score</span></div>
        <div class="panel metric"><span class="muted">Payment Health</span><strong>{{ 'OK' if snapshot.payment_health.ok else 'Check' }}</strong><span>{{ snapshot.payment_health.failed_recent }} failed recently</span></div>
        <div class="panel metric"><span class="muted">Backup Health</span><strong>{{ 'OK' if snapshot.backup_health.ok else 'Check' }}</strong><span>{{ snapshot.backup_health.latest.created_at if snapshot.backup_health.latest else 'No backup' }}</span></div>
    </section>

    <section class="panel">
        <h2>AI Operational Intelligence</h2>
        <div class="grid">
            {% for insight in snapshot.ai.insights[:8] %}
                <div class="panel insight {{ insight.severity }}">
                    <span class="badge {{ 'critical' if insight.severity == 'critical' else 'warn' if insight.severity == 'warning' else '' }}">{{ insight.severity|upper }}</span>
                    <h3>{{ insight.title }}</h3>
                    <p>{{ insight.summary }}</p>
                    <div class="muted">Confidence {{ "%.0f"|format((insight.confidence or 0) * 100) }}%</div>
                </div>
            {% else %}
                <div class="panel">No AI warnings right now.</div>
            {% endfor %}
        </div>
    </section>

    <section class="grid">
        <div class="panel">
            <h2>Inventory Pressure</h2>
            {% for item in snapshot.inventory_pressure[:10] %}
                <p><strong>{{ item.name }}</strong> <span class="badge {{ 'critical' if item.stock <= 3 else 'warn' if item.stock <= 10 else '' }}">{{ item.stock }}</span></p>
            {% endfor %}
        </div>
        <div class="panel">
            <h2>Realtime Activity</h2>
            {% for event in snapshot.realtime_events[-8:] %}
                <p><strong>{{ event.event_type }}</strong> <span class="muted">{{ event.created_at }}</span></p>
            {% else %}
                <p>No recent realtime events.</p>
            {% endfor %}
        </div>
    </section>

    <section class="panel">
        <h2>Branch Command</h2>
        <div class="table-wrap">
            <table>
                <thead><tr><th>Branch</th><th>Sales</th><th>Revenue</th><th>Status</th></tr></thead>
                <tbody>
                {% for branch in snapshot.branches %}
                    <tr><td>{{ branch.name }}</td><td>{{ branch.sales_count }}</td><td>{{ "%.2f"|format(branch.revenue or 0) }}</td><td>{{ 'Active' if branch.active else 'Inactive' }}</td></tr>
                {% else %}
                    <tr><td colspan="4">No branches configured.</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </section>

    <section class="panel">
        <h2>Cashier Activity</h2>
        <div class="table-wrap">
            <table>
                <thead><tr><th>Cashier</th><th>Sales</th><th>Revenue</th><th>Status</th></tr></thead>
                <tbody>
                {% for cashier in snapshot.cashiers %}
                    <tr><td>{{ cashier.full_name or cashier.username }}</td><td>{{ cashier.sales_count }}</td><td>{{ "%.2f"|format(cashier.revenue or 0) }}</td><td>{{ 'Active' if cashier.active else 'Inactive' }}</td></tr>
                {% else %}
                    <tr><td colspan="4">No cashier activity found.</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
</main>
<script>
async function refreshAI() {
  const res = await fetch("/api/operations-center/ai/refresh", {method: "POST", headers: {"X-CSRF-Token": document.querySelector('meta[name="csrf-token"]')?.content || ""}});
  if (res.ok) location.reload();
}
</script>
{% endblock %}