{% extends 'base.html' %}
{% block title %}Market & Customer Insights — Admin{% endblock %}
{% block content %}
<section class="content-section">
    <div class="content-inner" style="max-width: 1100px;">
        <div class="admin-header-row">
            <div>
                <span class="section-kicker">Admin Portal</span>
                <h1>Market &amp; Customer Insights</h1>
            </div>
            <a href="{% url 'accounts:admin_portal' %}" class="btn-small">&larr; Back to portal</a>
        </div>
        <p style="color: var(--muted); margin: -6px 0 20px;">
            Window: last {{ days }} days &middot;
            <a href="?days=90">90 days</a> &middot;
            <a href="?days=180">180 days</a> &middot;
            <a href="?days=365">365 days</a> &middot;
            <a href="?days=3650">All time</a>
        </p>

        <h3 style="margin: 0 0 10px;">Overview</h3>
        <div class="spending-summary-grid">
            <div class="spending-stat-card">
                <span class="spending-stat-label">Total orders</span>
                <span class="spending-stat-value">{{ data.overview.total_orders }}</span>
                <span style="font-size: 0.78rem; color: var(--muted);">{{ data.overview.unique_customers }} unique customers</span>
            </div>
            <div class="spending-stat-card">
                <span class="spending-stat-label">Delivered</span>
                <span class="spending-stat-value">{{ data.overview.delivered_count }}</span>
            </div>
            <div class="spending-stat-card">
                <span class="spending-stat-label">Revenue (delivered)</span>
                <span class="spending-stat-value">TSh {{ data.overview.total_revenue|floatformat:0 }}</span>
            </div>
            <div class="spending-stat-card">
                <span class="spending-stat-label">Avg order value</span>
                <span class="spending-stat-value">TSh {{ data.overview.avg_order_value|floatformat:0 }}</span>
            </div>
        </div>

        <h3 style="margin: 30px 0 10px;">Top products (by revenue)</h3>
        <div class="admin-table-wrap">
            <table class="admin-table">
                <thead><tr><th>Product</th><th>Qty sold</th><th>Orders</th><th>Revenue</th><th>% of revenue</th><th>Stock left</th></tr></thead>
                <tbody>
                    {% for p in data.top_products %}
                    <tr>
                        <td>{{ p.name }}</td>
                        <td>{{ p.quantity }}</td>
                        <td>{{ p.order_count }}</td>
                        <td>TSh {{ p.revenue|floatformat:0 }}</td>
                        <td>{{ p.pct_of_revenue }}%</td>
                        <td>{% if p.stock_qty is not None %}{{ p.stock_qty }}{% if p.stock_qty < 10 %} <span class="surface-badge warn">low</span>{% endif %}{% else %}&mdash;{% endif %}</td>
                    </tr>
                    {% empty %}
                    <tr><td colspan="6">No completed orders in this window yet.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="analytics-two-col" style="margin-top: 30px;">
            <div>
                <h3 style="margin: 0 0 10px;">Orders &amp; spend by area</h3>
                <p style="color: var(--muted); font-size: 0.82rem; margin: -6px 0 10px;">
                    Matched to the nearest known area for each delivery pin — the closest proxy this app has for
                    demand/population by neighborhood.{% if data.unmatched_area_count %} {{ data.unmatched_area_count }} order{{ data.unmatched_area_count|pluralize }} had no delivery pin to match.{% endif %}
                </p>
                <div class="admin-table-wrap">
                    <table class="admin-table">
                        <thead><tr><th>Area</th><th>Orders</th><th>Revenue</th></tr></thead>
                        <tbody>
                            {% for a in data.spend_by_area %}
                            <tr><td>{{ a.area }}</td><td>{{ a.order_count }}</td><td>TSh {{ a.revenue|floatformat:0 }}</td></tr>
                            {% empty %}
                            <tr><td colspan="3">No geolocated orders yet.</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div>
                <h3 style="margin: 0 0 10px;">Orders by source market</h3>
                <p style="color: var(--muted); font-size: 0.82rem; margin: -6px 0 10px;">
                    Derived from the assigned picker's registered market — a proxy, not a direct order field.
                </p>
                <div class="admin-table-wrap">
                    <table class="admin-table">
                        <thead><tr><th>Market</th><th>Orders</th><th>Revenue</th></tr></thead>
                        <tbody>
                            {% for m in data.orders_by_market %}
                            <tr><td>{{ m.market }}</td><td>{{ m.order_count }}</td><td>TSh {{ m.revenue|floatformat:0 }}</td></tr>
                            {% empty %}
                            <tr><td colspan="3">No orders yet.</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <h3 style="margin: 30px 0 10px;">Which days customers order</h3>
        <div class="spending-trend-chart">
            {% for d in data.day_pattern %}
            <div class="spending-trend-bar-wrap">
                <span class="spending-trend-value">{% if d.count > 0 %}{{ d.count }}{% endif %}</span>
                <div class="spending-trend-bar" style="height: {{ d.bar_height_px }}px;"></div>
                <span class="spending-trend-label">{{ d.label }}</span>
            </div>
            {% endfor %}
        </div>

        <h3 style="margin: 30px 0 10px;">What time of day (East Africa Time)</h3>
        <div class="spending-trend-chart">
            {% for h in data.hour_pattern %}
            <div class="spending-trend-bar-wrap">
                <span class="spending-trend-value">{% if h.count > 0 %}{{ h.count }}{% endif %}</span>
                <div class="spending-trend-bar" style="height: {{ h.bar_height_px }}px;"></div>
                <span class="spending-trend-label">{{ h.label }}</span>
            </div>
            {% endfor %}
        </div>

        <h3 style="margin: 30px 0 10px;">Monthly / seasonal trend</h3>
        <div class="spending-trend-chart" style="overflow-x: auto;">
            {% for m in data.monthly_trend %}
            <div class="spending-trend-bar-wrap">
                <span class="spending-trend-value">{% if m.order_count > 0 %}{{ m.order_count }}{% endif %}</span>
                <div class="spending-trend-bar" style="height: {{ m.bar_height_px }}px;"></div>
                <span class="spending-trend-label">{{ m.label }}</span>
            </div>
            {% endfor %}
        </div>

        <h3 style="margin: 30px 0 10px;">New vs. returning customers (per month)</h3>
        <div class="admin-table-wrap">
            <table class="admin-table">
                <thead><tr><th>Month</th><th>New customers</th><th>Returning customers</th></tr></thead>
                <tbody>
                    {% for c in data.customer_trend %}
                    <tr><td>{{ c.label }}</td><td>{{ c.new_customers }}</td><td>{{ c.returning_customers }}</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <h3 style="margin: 30px 0 10px;">Delivery cost analysis</h3>
        {% if data.delivery_cost %}
        <div class="spending-summary-grid">
            <div class="spending-stat-card">
                <span class="spending-stat-label">Avg delivery fee</span>
                <span class="spending-stat-value">TSh {{ data.delivery_cost.avg_delivery_fee|floatformat:0 }}</span>
            </div>
            <div class="spending-stat-card">
                <span class="spending-stat-label">Avg distance</span>
                <span class="spending-stat-value">{{ data.delivery_cost.avg_distance_km|floatformat:1 }} km</span>
            </div>
            <div class="spending-stat-card">
                <span class="spending-stat-label">Realized fee / km</span>
                <span class="spending-stat-value">TSh {{ data.delivery_cost.fee_per_km|floatformat:0 }}</span>
            </div>
            <div class="spending-stat-card">
                <span class="spending-stat-label">Avg picking fee</span>
                <span class="spending-stat-value">TSh {{ data.delivery_cost.avg_picking_fee|floatformat:0 }}</span>
            </div>
            <div class="spending-stat-card">
                <span class="spending-stat-label">Avg package fee</span>
                <span class="spending-stat-value">TSh {{ data.delivery_cost.avg_package_fee|floatformat:0 }}</span>
            </div>
            <div class="spending-stat-card">
                <span class="spending-stat-label">Quick delivery share</span>
                <span class="spending-stat-value">{{ data.delivery_cost.quick_delivery_pct }}%</span>
            </div>
        </div>
        {% else %}
        <p style="color: var(--muted);">No delivered orders in this window yet.</p>
        {% endif %}

        <div class="analytics-two-col" style="margin-top: 30px;">
            <div>
                <h3 style="margin: 0 0 10px;">Picker ratings ({{ data.rating_breakdown.total_ratings }} total)</h3>
                {% for r in data.rating_breakdown.distribution reversed %}
                <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 4px;">
                    <span style="width: 40px; font-size: 0.82rem;">{{ r.stars }}&#9733;</span>
                    <div style="flex: 1; background: #f0f0f0; border-radius: 4px; height: 14px; overflow: hidden;">
                        <div style="width: {{ r.pct }}%; background: var(--blue); height: 100%;"></div>
                    </div>
                    <span style="width: 60px; font-size: 0.78rem; color: var(--muted); text-align: right;">{{ r.count }} ({{ r.pct }}%)</span>
                </div>
                {% endfor %}
            </div>
            <div>
                <h3 style="margin: 0 0 10px;">Pickers needing improvement</h3>
                <div class="admin-table-wrap">
                    <table class="admin-table">
                        <thead><tr><th>Picker</th><th>Avg rating</th><th>Ratings</th></tr></thead>
                        <tbody>
                            {% for p in data.rating_breakdown.needs_improvement %}
                            <tr><td>{{ p.name }}</td><td>&#9733; {{ p.average }}</td><td>{{ p.count }}</td></tr>
                            {% empty %}
                            <tr><td colspan="3">Not enough rating data yet.</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <h3 style="margin: 30px 0 10px;">Product demand signals — what to add / restock</h3>
        <div class="analytics-two-col">
            <div>
                <p style="color: var(--muted); font-size: 0.82rem; margin: 0 0 8px;">Most-searched terms that returned zero results</p>
                <div class="admin-table-wrap">
                    <table class="admin-table">
                        <thead><tr><th>Search term</th><th>Times searched</th></tr></thead>
                        <tbody>
                            {% for s in data.demand_signals.top_zero_result_searches %}
                            <tr><td>{{ s.query }}</td><td>{{ s.count }}</td></tr>
                            {% empty %}
                            <tr><td colspan="2">No zero-result searches logged yet.</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            <div>
                <p style="color: var(--muted); font-size: 0.82rem; margin: 0 0 8px;">Most-searched terms overall</p>
                <div class="admin-table-wrap">
                    <table class="admin-table">
                        <thead><tr><th>Search term</th><th>Times searched</th></tr></thead>
                        <tbody>
                            {% for s in data.demand_signals.top_searches %}
                            <tr><td>{{ s.query }}</td><td>{{ s.count }}</td></tr>
                            {% empty %}
                            <tr><td colspan="2">No searches logged yet.</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <h3 style="margin: 24px 0 10px;">Recent "Contact Us" messages</h3>
        <div class="admin-table-wrap">
            <table class="admin-table">
                <thead><tr><th>From</th><th>Message</th><th>When</th></tr></thead>
                <tbody>
                    {% for m in data.demand_signals.recent_contact_messages %}
                    <tr>
                        <td>{{ m.name }}<br><span style="color: var(--muted); font-size: 0.78rem;">{{ m.email }}</span></td>
                        <td style="max-width: 400px; white-space: normal;">{{ m.message }}</td>
                        <td style="white-space: nowrap;">{{ m.created_at|slice:":10" }}</td>
                    </tr>
                    {% empty %}
                    <tr><td colspan="3">No contact messages yet.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</section>
{% endblock %}