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

{% block title %}Business Activity - 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>Business Activity</h1>
            <div class="ops-subtitle">
                Daily operational dependence, active cashiers, branch activity, uptime, and retention risk indicators.
            </div>
        </div>
        <div class="ops-actions">
            <button onclick="refreshActivity()">Refresh</button>
        </div>
    </header>

    {% if snapshot.current %}
        <section class="ops-grid">
            <div class="ops-panel ops-metric">
                <span class="ops-muted">Health</span>
                <strong>{{ snapshot.current.health_score }}%</strong>
                <span class="ops-badge {{ 'danger' if snapshot.current.retention_risk == 'high' else 'warn' if snapshot.current.retention_risk == 'medium' else '' }}">
                    {{ snapshot.current.retention_risk|title }} Risk
                </span>
            </div>
            <div class="ops-panel ops-metric">
                <span class="ops-muted">Dependency</span>
                <strong>{{ snapshot.current.dependency_score }}%</strong>
            </div>
            <div class="ops-panel ops-metric">
                <span class="ops-muted">Active Days</span>
                <strong>{{ snapshot.current.active_days }}</strong>
            </div>
        </section>

        <section class="ops-panel">
            <h2>Daily Operations</h2>
            <div class="ops-table-wrap">
                <table class="ops-table">
                    <thead>
                    <tr>
                        <th>Date</th>
                        <th>Cashiers</th>
                        <th>Branches</th>
                        <th>Transactions</th>
                        <th>Revenue</th>
                        <th>Uptime</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for row in snapshot.daily_operations %}
                        <tr>
                            <td>{{ row.operation_date }}</td>
                            <td>{{ row.active_cashiers }}</td>
                            <td>{{ row.active_branches }}</td>
                            <td>{{ row.transaction_count }}</td>
                            <td>{{ "%.2f"|format(row.revenue or 0) }}</td>
                            <td>{{ row.uptime_score }}%</td>
                        </tr>
                    {% else %}
                        <tr><td colspan="6">No daily operations yet.</td></tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </section>
    {% else %}
        <section class="ops-grid">
            <div class="ops-panel ops-metric">
                <span class="ops-muted">Daily Shops</span>
                <strong>{{ snapshot.daily_active_shops }}</strong>
            </div>
            <div class="ops-panel ops-metric">
                <span class="ops-muted">Weekly Shops</span>
                <strong>{{ snapshot.weekly_active_shops }}</strong>
            </div>
            <div class="ops-panel ops-metric">
                <span class="ops-muted">Monthly Shops</span>
                <strong>{{ snapshot.monthly_active_shops }}</strong>
            </div>
            <div class="ops-panel ops-metric">
                <span class="ops-muted">Daily Cashiers</span>
                <strong>{{ snapshot.daily_active_cashiers }}</strong>
            </div>
        </section>
    {% endif %}
</main>

<script>
async function refreshActivity() {
    await fetch("/api/business-activity/refresh", {method: "POST"});
    location.reload();
}
</script>
{% endblock %}