{% extends 'base.html' %}
{% block title %}Financial Dashboard — Admin{% endblock %}
{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 1000px;">
        <div class="admin-header-row">
            <div>
                <span class="section-kicker">Admin Portal</span>
                <h1>Financial Dashboard</h1>
            </div>
            <a href="{% url 'accounts:admin_portal' %}" class="btn-small">&larr; Back to portal</a>
        </div>

        <div class="spending-summary-grid">
            <div class="spending-stat-card">
                <span class="spending-stat-label">Revenue (delivered orders)</span>
                <span class="spending-stat-value">TSh {{ total_revenue|floatformat:0 }}</span>
                <span style="font-size: 0.78rem; color: var(--muted);">{{ delivered_count }} delivered order{{ delivered_count|pluralize }}</span>
            </div>
            <div class="spending-stat-card">
                <span class="spending-stat-label">Delivery fees collected</span>
                <span class="spending-stat-value">TSh {{ total_delivery_fees|floatformat:0 }}</span>
            </div>
            <div class="spending-stat-card">
                <span class="spending-stat-label">Picking fees collected</span>
                <span class="spending-stat-value">TSh {{ total_picking_fees|floatformat:0 }}</span>
            </div>
            <div class="spending-stat-card">
                <span class="spending-stat-label">Picker payouts pending</span>
                <span class="spending-stat-value">TSh {{ total_pending_payouts|floatformat:0 }}</span>
            </div>
            <div class="spending-stat-card">
                <span class="spending-stat-label">Picker payouts paid</span>
                <span class="spending-stat-value">TSh {{ total_paid_payouts|floatformat:0 }}</span>
            </div>
            <div class="spending-stat-card">
                <span class="spending-stat-label">Payment issues</span>
                <span class="spending-stat-value">{{ pending_payment_count }}</span>
                <span style="font-size: 0.78rem; color: var(--muted);">TSh {{ pending_payment_total|floatformat:0 }} unpaid &middot; <a href="{% url 'accounts:admin_stale_orders' %}">review stale orders</a></span>
            </div>
            <div class="spending-stat-card">
                <span class="spending-stat-label">Platform picker rating</span>
                <span class="spending-stat-value">
                    {% if platform_rating.average %}&#9733; {{ platform_rating.average }}{% else %}No ratings yet{% endif %}
                </span>
                {% if platform_rating.count %}<span style="font-size: 0.78rem; color: var(--muted);">from {{ platform_rating.count }} rating{{ platform_rating.count|pluralize }}</span>{% endif %}
            </div>
        </div>

        <div class="admin-header-row" style="margin-top: 36px;">
            <h3 style="margin: 0;">Picker earnings breakdown</h3>
            <a href="{% url 'accounts:admin_payouts' %}" class="btn-small">Go to Payouts &rarr;</a>
        </div>
        <div class="admin-table-wrap">
            <table class="admin-table">
                <thead><tr><th>Picker</th><th>Cadence</th><th>Pending</th><th>Paid</th></tr></thead>
                <tbody>
                    {% for p in pickers_overview %}
                    <tr>
                        <td>{{ p.name }}</td>
                        <td style="text-transform: capitalize;">{{ p.payout_frequency }}</td>
                        <td>TSh {{ p.pending_amount|floatformat:0 }}</td>
                        <td>TSh {{ p.paid_amount|floatformat:0 }}</td>
                    </tr>
                    {% empty %}
                    <tr><td colspan="4">No picker earnings recorded yet.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</section>
{% endblock %}