{% 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>
            <button type="button" id="admin-nav-toggle" class="admin-nav-toggle-btn" aria-label="Open admin menu" aria-expanded="false">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
                Menu{% if pending_picker_count %} <span class="dropdown-badge">{{ pending_picker_count }}</span>{% endif %}
            </button>
        </div>

        <div class="admin-nav-backdrop" id="admin-nav-backdrop"></div>
        <aside class="admin-nav-drawer" id="admin-nav-drawer">
            <div class="admin-nav-drawer-head">
                <span>Admin Sections</span>
                <button type="button" id="admin-nav-close" class="admin-nav-close-btn" aria-label="Close admin menu">&times;</button>
            </div>
            <div class="admin-nav-drawer-links">
                <a href="{% url 'accounts:product_create' %}" class="admin-nav-cta">Add Product</a>
                <a href="{% url 'accounts:admin_users' %}">
                    Manage Users{% if pending_picker_count %} <span class="dropdown-badge">{{ pending_picker_count }}</span>{% endif %}
                </a>
                <a href="{% url 'accounts:admin_stale_orders' %}">Stale Orders</a>
                <a href="{% url 'accounts:admin_payment_methods' %}">Payment Methods</a>
                <a href="{% url 'accounts:admin_contact_settings' %}">Contact Info</a>
                <a href="{% url 'accounts:admin_home_content' %}">Home Page Content</a>
                <a href="{% url 'accounts:admin_legal_policies' %}">Legal Policies</a>
                <a href="{% url 'accounts:admin_picker_settings' %}">Picker Settings</a>
                <a href="{% url 'accounts:admin_fee_settings' %}">Fee Settings</a>
                <a href="{% url 'accounts:admin_truck_types' %}">Truck Types</a>
                <a href="{% url 'accounts:admin_known_areas' %}">Known Areas</a>
                <a href="{% url 'accounts:admin_markets' %}">Markets</a>
                <a href="{% url 'accounts:admin_delivered_map' %}">Order Locations Map</a>
                <a href="{% url 'accounts:admin_payouts' %}">Picker Payouts</a>
                <a href="{% url 'accounts:admin_financial_dashboard' %}">Financial Dashboard</a>
                <a href="{% url 'accounts:admin_analytics' %}">Market &amp; Customer Insights</a>
                <a href="{% url 'accounts:admin_price_trends' %}">Regional Price Trends</a>
                <a href="{% url 'accounts:admin_broadcast' %}">Send Update (SMS/Email)</a>
            </div>
        </aside>

        <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>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for product in products %}
                    <tr>
                        <td>{{ product.name }}{% if not product.is_active %} <span class="surface-badge warn">Hidden</span>{% endif %}</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
                                {% if product.trend_badge and product.trend_badge.change_pct != None %}
                                    ({{ product.trend_badge.direction }} {{ product.trend_badge.change_pct }}%)
                                {% else %}
                                    <span style="color: var(--muted); font-size: 0.85rem;">(no price data recorded yet)</span>
                                {% endif %}
                            {% else %}—{% endif %}
                        </td>
                        <td style="display: flex; gap: 8px;">
                            <a href="{% url 'accounts:product_edit' product.id %}">Edit</a>
                            {% if product.is_active %}
                            <form method="post" action="{% url 'accounts:product_delete' product.id %}" onsubmit="return confirm('Delete {{ product.name|escapejs }}? Products with order history are hidden instead of removed.');">
                                {% csrf_token %}
                                <button type="submit" class="btn-small" style="background: var(--muted);">Delete</button>
                            </form>
                            {% else %}
                            <form method="post" action="{% url 'accounts:product_restore' product.id %}">
                                {% csrf_token %}
                                <button type="submit" class="btn-small">Restore</button>
                            </form>
                            {% endif %}
                        </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>{% if order.is_quick %}<span class="surface-badge warn">Quick</span><br>{% endif %}{{ 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 %}
                            {% if order.picking_duration_min %}<br><small>Picked in {{ order.picking_duration_min }} min</small>{% 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 %}
                            {% if order.picker_id and order.delivery_lat and order.status != 'pending_payment' %}
                            <a href="{% url 'accounts:admin_track_order' order.id %}" class="btn-small">Track</a>
                            {% 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>
                    {% if order.required_markets %}
                    <tr>
                        <td colspan="8" style="white-space: normal; background: var(--surface-alt, rgba(0,0,0,0.02));">
                            {% if order.shop_payment_complete %}
                            <span class="surface-badge ok">Shop payment recorded</span>
                            {% for m in order.required_markets %}<small style="color: var(--muted); margin-left: 6px;">{{ m.name }}</small>{% endfor %}
                            {% else %}
                            <span class="surface-badge warn">Shop payment pending — picker can't start picking yet</span>
                            {% for m in order.unpaid_markets %}
                            <form method="post" action="{% url 'accounts:admin_mark_shop_payment' order.id %}" style="display: inline-flex; align-items: center; gap: 6px; margin: 6px 6px 0 0;">
                                {% csrf_token %}
                                <input type="hidden" name="market_id" value="{{ m.id }}">
                                <small style="color: var(--muted);">{{ m.name }}</small>
                                <input type="number" step="0.01" min="0" name="amount" placeholder="Amount paid (TSh)" required style="width: 140px;">
                                <input type="text" name="reference_note" placeholder="Reference (optional)" style="width: 160px;">
                                <button type="submit" class="btn-small">Mark Paid</button>
                            </form>
                            {% endfor %}
                            {% endif %}
                        </td>
                    </tr>
                    {% endif %}
                    {% empty %}
                    <tr><td colspan="8">No orders yet.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var toggle = document.getElementById('admin-nav-toggle');
        var closeBtn = document.getElementById('admin-nav-close');
        var drawer = document.getElementById('admin-nav-drawer');
        var backdrop = document.getElementById('admin-nav-backdrop');
        if (!toggle || !drawer || !backdrop) return;

        function setOpen(isOpen) {
            drawer.classList.toggle('open', isOpen);
            backdrop.classList.toggle('open', isOpen);
            toggle.setAttribute('aria-expanded', isOpen);
            document.body.classList.toggle('admin-nav-scroll-lock', isOpen);
        }

        toggle.addEventListener('click', function () { setOpen(true); });
        if (closeBtn) closeBtn.addEventListener('click', function () { setOpen(false); });
        backdrop.addEventListener('click', function () { setOpen(false); });
        document.addEventListener('keydown', function (e) {
            if (e.key === 'Escape') setOpen(false);
        });
    });
</script>
{% endblock %}