{% extends 'base.html' %}
{% load static %}
{% block title %}Admin Portal — PickkerMarket{% 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>Catalog management</h1>
            </div>
            <div style="display: flex; gap: 10px;">
                <a href="{% url 'accounts:admin_users' %}" class="btn-small">
                    Manage Users{% if pending_picker_count %} <span class="dropdown-badge">{{ pending_picker_count }}</span>{% endif %}
                </a>
                <a href="{% url 'accounts:admin_stale_orders' %}" class="btn-small">Stale Orders</a>
                <a href="{% url 'accounts:admin_payment_methods' %}" class="btn-small">Payment Methods</a>
                <a href="{% url 'accounts:admin_contact_settings' %}" class="btn-small">Contact Info</a>
                <a href="{% url 'accounts:admin_picker_settings' %}" class="btn-small">Picker Settings</a>
                <a href="{% url 'accounts:admin_fee_settings' %}" class="btn-small">Fee Settings</a>
                <a href="{% url 'accounts:admin_truck_types' %}" class="btn-small">Truck Types</a>
                <a href="{% url 'accounts:admin_known_areas' %}" class="btn-small">Known Areas</a>
                <a href="{% url 'accounts:admin_payouts' %}" class="btn-small">Picker Payouts</a>
                <a href="{% url 'accounts:admin_financial_dashboard' %}" class="btn-small">Financial Dashboard</a>
                <a href="{% url 'accounts:admin_price_trends' %}" class="btn-small">Regional Price Trends</a>
                <a href="{% url 'accounts:product_create' %}" class="btn-cta">Add Product</a>
            </div>
        </div>

        <div class="admin-stats">
            <div class="admin-stat-card">
                <div class="stat-value">{{ product_count }}</div>
                <div class="stat-label">Total products</div>
            </div>
            <div class="admin-stat-card">
                <div class="stat-value">{{ trending_count }}</div>
                <div class="stat-label">Trending on homepage</div>
            </div>
            <div class="admin-stat-card">
                <div class="stat-value">{{ pending_payment_count }}</div>
                <div class="stat-label">Awaiting payment approval</div>
            </div>
        </div>

        <div class="admin-table-wrap">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Category</th>
                        <th>Farm Price</th>
                        <th>Market Price</th>
                        <th>Stock</th>
                        <th>Trending</th>
                        <th>Edit</th>
                    </tr>
                </thead>
                <tbody>
                    {% for product in products %}
                    <tr>
                        <td>{{ product.name }}</td>
                        <td>{{ product.category }}</td>
                        <td>TSh {{ product.farm_price|floatformat:0 }}/{{ product.unit }}</td>
                        <td>TSh {{ product.market_price|floatformat:0 }}/{{ product.unit }}</td>
                        <td>{{ product.stock_qty }}</td>
                        <td>{% if product.is_trending %}Yes ({{ product.trend_direction }} {{ product.trend_change_pct }}%){% else %}—{% endif %}</td>
                        <td><a href="{% url 'accounts:product_edit' product.id %}">Edit</a></td>
                    </tr>
                    {% empty %}
                    <tr><td colspan="7">No products yet — add your first one above.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <div class="admin-header-row" style="margin-top: 40px;">
            <div>
                <span class="section-kicker">Orders</span>
                <h1>All orders</h1>
            </div>
        </div>

        <div class="admin-table-wrap">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Order</th>
                        <th>Customer</th>
                        <th>Picker</th>
                        <th>Delivery</th>
                        <th>Distance / Route</th>
                        <th>Total</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for order in orders %}
                    <tr>
                        <td>#{{ order.id }}</td>
                        <td>{{ order.customer_name }}</td>
                        <td>{{ order.picker_name }}</td>
                        <td>{{ order.delivery_date }}<br><small>{{ order.delivery_time_slot }}</small></td>
                        <td>
                            {{ order.distance_km }} km
                            {% if order.eta_traffic_min %}<br><small>~{{ order.eta_traffic_min }} min (traffic est.)</small>{% endif %}
                            {% if order.route_surface_label %}<br><span class="surface-badge {% if order.route_paved_pct >= 80 %}ok{% elif order.route_paved_pct != None and order.route_paved_pct < 40 %}warn{% endif %}">{{ order.route_surface_label }}</span>{% endif %}
                        </td>
                        <td>TSh {{ order.total_amount|floatformat:0 }}</td>
                        <td><span class="status-badge status-{{ order.status }}">{{ order.status|title }}</span></td>
                        <td>
                            {% if order.status == 'pending_payment' %}
                            <form method="post" action="{% url 'accounts:admin_approve_payment' order.id %}" style="display: inline;">
                                {% csrf_token %}
                                <button type="submit" class="btn-small">Approve Payment</button>
                            </form>
                            {% endif %}
                            <form method="post" action="{% url 'accounts:admin_set_order_status' order.id %}" style="display: inline-flex; gap: 6px; margin-left: 6px;">
                                {% csrf_token %}
                                <select name="status">
                                    {% for value, label in status_choices %}
                                    <option value="{{ value }}" {% if order.status == value %}selected{% endif %}>{{ label }}</option>
                                    {% endfor %}
                                </select>
                                <button type="submit" class="btn-small">Update</button>
                            </form>
                        </td>
                    </tr>
                    {% empty %}
                    <tr><td colspan="8">No orders yet.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</section>
{% endblock %}