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

{% block title %}Commercial Billing - 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>Commercial Billing</h1>
            <div class="ops-subtitle">
                Plans, trials, lifecycle events, cashier/branch limits, usage metrics, and feature gating.
            </div>
        </div>
    </header>

    <section class="ops-grid">
        <div class="ops-panel ops-metric">
            <span class="ops-muted">Plan</span>
            <strong>{{ snapshot.subscription.plan_code|title }}</strong>
            <span>{{ snapshot.subscription.status }}</span>
        </div>
        <div class="ops-panel ops-metric">
            <span class="ops-muted">AI</span>
            <strong>{{ 'On' if snapshot.plan_features.ai_forecasting else 'Off' }}</strong>
        </div>
        <div class="ops-panel ops-metric">
            <span class="ops-muted">Analytics</span>
            <strong>{{ 'On' if snapshot.plan_features.advanced_analytics else 'Off' }}</strong>
        </div>
    </section>

    <section class="ops-panel">
        <h2>Change Plan</h2>
        <form class="ops-form-grid" method="post" action="/commercial-billing/plan">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <label>
                Plan
                <select name="plan_code">
                    <option value="starter">Starter</option>
                    <option value="professional">Professional</option>
                    <option value="enterprise">Enterprise</option>
                </select>
            </label>
            <label>Reason<input name="reason" value="commercial_update"></label>
            <button type="submit">Apply Plan</button>
        </form>
    </section>

    <section class="ops-panel">
        <h2>Usage</h2>
        <div class="ops-list">
            {% for item in snapshot.usage %}
                <div class="ops-list-item">
                    <strong>{{ item.metric|title }}</strong> {{ item.value }} / {{ item.limit or 'unlimited' }}
                    {% if item.billable_overage %}
                        <span class="ops-badge warn">Over {{ item.billable_overage }}</span>
                    {% endif %}
                </div>
            {% endfor %}
        </div>
    </section>
</main>
{% endblock %}