{% extends 'base.html' %}
{% block title %}My Spending — PickkerMarket{% endblock %}
{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 900px;">
        <span class="section-kicker">{{ t.spending_kicker }}</span>
        <h1>{{ t.spending_title }}</h1>
        <p style="color: var(--muted); margin-bottom: 20px;">
            {{ t.spending_intro }}
        </p>

        <div class="spending-range-tabs">
            <a href="?days=30" class="{% if days == 30 %}active{% endif %}">{{ t.spending_last_30 }}</a>
            <a href="?days=90" class="{% if days == 90 %}active{% endif %}">{{ t.spending_last_90 }}</a>
            <a href="?days=365" class="{% if days == 365 %}active{% endif %}">{{ t.spending_last_year }}</a>
        </div>

        <div class="spending-summary-grid">
            <div class="spending-stat-card">
                <span class="spending-stat-label">{{ t.spending_total_spent }}</span>
                <span class="spending-stat-value">TSh {{ summary.total_spent|floatformat:0 }}</span>
            </div>
            <div class="spending-stat-card">
                <span class="spending-stat-label">{{ t.spending_orders_placed }}</span>
                <span class="spending-stat-value">{{ summary.order_count }}</span>
            </div>
            <div class="spending-stat-card">
                <span class="spending-stat-label">{{ t.spending_average_order }}</span>
                <span class="spending-stat-value">TSh {{ summary.avg_order|floatformat:0 }}</span>
            </div>
        </div>

        <h3 style="margin: 30px 0 12px;">{{ t.spending_weekly_trend }}</h3>
        {% if trend %}
        <div class="spending-trend-chart">
            {% for week in trend %}
            <div class="spending-trend-bar-wrap">
                <span class="spending-trend-value">{% if week.total > 0 %}{{ week.total|floatformat:0 }}{% endif %}</span>
                <div class="spending-trend-bar" style="height: {{ week.bar_height_px }}px;"></div>
                <span class="spending-trend-label">{{ week.label }}</span>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        <h3 style="margin: 30px 0 12px;">{{ t.spending_top_products }}</h3>
        <p style="color: var(--muted); font-size: 0.88rem; margin-top: -8px; margin-bottom: 14px;">
            {{ t.spending_top_products_tip }}
        </p>
        {% if top_products %}
        <div class="admin-table-wrap">
            <table class="admin-table">
                <thead><tr><th>{{ t.spending_th_product }}</th><th>{{ t.spending_th_total_spend }}</th><th>{{ t.spending_th_quantity }}</th><th>{{ t.spending_th_frequency }}</th></tr></thead>
                <tbody>
                    {% for p in top_products %}
                    <tr>
                        <td>{{ p.name }}</td>
                        <td>TSh {{ p.spend|floatformat:0 }}</td>
                        <td>{{ p.quantity }}</td>
                        <td>{{ p.order_frequency }} order{{ p.order_frequency|pluralize }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <p style="color: var(--muted);">{{ t.spending_empty }}</p>
        {% endif %}
    </div>
</section>
{% endblock %}