{% extends "superadmin/base.html" %}
{% load humanize %}

{% block superadmin_content %}
<!-- Business Filter Bar -->
<div class="card card--flat mb-8" style="background:var(--color-bg-card);border:1px solid var(--color-primary-200);">
    <form method="get" id="bizFilterForm" class="flex items-center justify-between gap-4" style="flex-wrap:wrap;">
        <div class="flex items-center gap-3" style="flex:1;min-width:280px;">
            <label class="form-label mb-0" style="white-space:nowrap;font-weight:700;">Filter Statistics By Business:</label>
            <select name="business_id" class="form-input" onchange="this.form.submit()" style="margin-bottom:0;cursor:pointer;">
                <option value="">-- All Businesses (Platform-Wide) --</option>
                {% for biz in all_businesses %}
                <option value="{{ biz.id }}" {% if selected_business_id == biz.id|stringformat:"s" %}selected{% endif %}>
                    {{ biz.name }} {% if biz.is_verified %}(Trusted){% endif %}
                </option>
                {% endfor %}
            </select>
        </div>
        {% if selected_business %}
        <div class="flex items-center gap-2">
            <span class="badge badge--live">Filtering: {{ selected_business.name }}</span>
            <a href="{% url 'superadmin:overview' %}" class="btn btn--ghost btn--sm">Clear Filter</a>
        </div>
        {% endif %}
    </form>
</div>

<!-- Metrics Grid -->
<div class="grid grid--3 gap-6 mb-8">
    <!-- Platform Earnings Card -->
    <div class="card card--flat" style="border:2px solid var(--color-primary-200);background:var(--color-primary-50);">
        <span class="text-xs uppercase tracking-wider font-bold block mb-1" style="color:var(--color-primary-dark);">Platform Net Earnings</span>
        <div style="font-size: var(--font-size-2xl); font-weight: 900; color: var(--color-primary-dark);">GHS {{ total_platform_earnings|floatformat:2|intcomma }}</div>
        <div class="flex justify-between text-xs text-secondary mt-3 pt-3" style="border-top:1px dashed var(--color-primary-200);">
            <span>Booking Fees: <strong>GHS {{ booking_fee_earnings|floatformat:2|intcomma }}</strong></span>
            <span>5% Commission: <strong>GHS {{ commission_earnings|floatformat:2|intcomma }}</strong></span>
        </div>
    </div>

    <!-- Gross Sales Card -->
    <div class="card card--flat">
        <span class="text-xs text-muted uppercase tracking-wider font-bold block mb-1">Gross Sales Revenue</span>
        <div style="font-size: var(--font-size-2xl); font-weight: 800; color: var(--color-text);">GHS {{ total_gross_sales|floatformat:2|intcomma }}</div>
        <p class="text-xs text-secondary mt-2">
            {% if selected_business %}
            Gross customer payments generated by {{ selected_business.name }}
            {% else %}
            Total gross customer payments generated across platform
            {% endif %}
        </p>
    </div>

    <!-- Activity Stats Card -->
    <div class="card card--flat">
        <span class="text-xs text-muted uppercase tracking-wider font-bold block mb-1">Sales & Orders Activity</span>
        <div class="flex items-center gap-6 mt-2">
            <div>
                <span style="font-size: var(--font-size-xl); font-weight: 800; color: var(--color-primary);">{{ live_sales }}</span>
                <span class="text-xs text-muted block font-semibold">Live Sales</span>
            </div>
            <div style="border-left:1px solid var(--color-border-light);padding-left:16px;">
                <span style="font-size: var(--font-size-xl); font-weight: 800; color: var(--color-text);">{{ total_paid_orders }}</span>
                <span class="text-xs text-muted block font-semibold">Paid Orders</span>
            </div>
        </div>
    </div>
</div>

<div class="grid grid--2 gap-6 mb-8">
    <!-- Recent Businesses -->
    <div class="dash-card">
        <div class="dash-card__header flex justify-between items-center">
            <h3 class="dash-card__title">Registered Businesses</h3>
            <a href="{% url 'superadmin:businesses' %}" class="btn btn--ghost btn--sm">View All &rarr;</a>
        </div>
        <div class="dash-card__body">
            {% if recent_businesses %}
            <div class="flex flex-col gap-4">
                {% for biz in recent_businesses %}
                <div class="card card--flat">
                    <div class="flex justify-between items-start mb-2">
                        <div>
                            <a href="{% url 'superadmin:business_detail' biz.id %}" class="font-semibold text-base" style="color:var(--color-primary);">{{ biz.name }}</a>
                            <p class="text-xs text-muted mt-1">{{ biz.email }} &bull; {{ biz.phone }}</p>
                        </div>
                        <form method="post" action="{% url 'superadmin:business_toggle_verify' biz.id %}">
                            {% csrf_token %}
                            {% if biz.is_verified %}
                            <button type="submit" class="badge badge--live" style="border:none;cursor:pointer;" title="Click to unverify">Trusted Business</button>
                            {% else %}
                            <button type="submit" class="badge badge--ended" style="border:none;cursor:pointer;" title="Click to verify as Trusted">Unverified</button>
                            {% endif %}
                        </form>
                    </div>
                    <div class="flex justify-between text-xs text-secondary pt-2" style="border-top:1px solid var(--color-border-light);">
                        <span>{{ biz.sales_count }} Sales Run</span>
                        <strong>GHS {{ biz.revenue|default:0|floatformat:2|intcomma }} Revenue</strong>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <p class="text-sm text-muted">No businesses registered yet.</p>
            {% endif %}
        </div>
    </div>

    <!-- Recent Payments -->
    <div class="dash-card">
        <div class="dash-card__header flex justify-between items-center">
            <h3 class="dash-card__title">Recent Platform Payments</h3>
            <a href="{% url 'superadmin:payments' %}" class="btn btn--ghost btn--sm">View All &rarr;</a>
        </div>
        <div class="dash-card__body">
            {% if recent_payments %}
            <div class="flex flex-col gap-4">
                {% for pay in recent_payments %}
                <div class="card card--flat">
                    <div class="flex justify-between items-center mb-1">
                        <span class="badge badge--{% if pay.status == 'verified' or pay.status == 'paid' %}live{% elif pay.status == 'initiated' %}upcoming{% else %}ended{% endif %}">
                            {{ pay.get_type_display }} ({{ pay.status }})
                        </span>
                        <strong style="color:var(--color-primary);">GHS {{ pay.amount|floatformat:2 }}</strong>
                    </div>
                    <p class="text-xs text-muted" style="font-family:monospace;">Ref: {{ pay.paystack_reference }}</p>
                    <span class="text-xs text-muted block mt-1">{{ pay.created_at|date:"M d, Y H:i" }}</span>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <p class="text-sm text-muted">No payments recorded yet.</p>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}