{% extends 'base.html' %}
{% load static %}
{% load static_v %}
{% block title %}Track Order #{{ order.id }} — Admin{% endblock %}
{% block content %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<section class="content-section">
    <div class="content-inner" style="max-width: 900px;">
        <div class="admin-header-row">
            <div>
                <span class="section-kicker">Admin Portal</span>
                <h1>Tracking Order #{{ order.id }}</h1>
            </div>
            <a href="{% url 'accounts:admin_portal' %}" class="btn-small">&larr; Back to portal</a>
        </div>
        <p style="color: var(--muted); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
            {% if picker_photo_url %}<img src="{{ picker_photo_url }}" alt="" style="width: 28px; height: 28px; border-radius: 50%; object-fit: cover;">{% endif %}
            <span>
                Picker: {{ picker_name|default:"—" }} &middot; Deliver to: {{ order.delivery_address }}
                &middot; <span class="status-badge status-{{ order.status }}" id="order-status-badge">{{ order.status|title }}</span>
            </span>
        </p>

        <div id="track-map" class="map-container" style="height: 420px;"></div>

        <div class="cart-summary" style="margin-left: 0; max-width: 100%;">
            <div class="cart-summary-row">
                <span>Distance remaining (at last update)</span>
                <span id="live-distance">{{ route_distance_km|default:'—' }} km</span>
            </div>
            <div class="cart-summary-row">
                <span>ETA (at last update)</span>
                <span id="live-eta">{% if route_duration_min %}~{{ route_duration_min|floatformat:0 }} min{% else %}—{% endif %}</span>
            </div>
            <div class="cart-summary-row">
                <span>Time spent picking</span>
                <span>{% if picking_duration_min %}{{ picking_duration_min }} min{% else %}—{% endif %}</span>
            </div>
            <div class="cart-summary-row">
                <span>Nearest registered market</span>
                <span>
                    {% if nearest_market %}{{ nearest_market.name }} (~{{ nearest_market.distance_km }} km){% else %}—{% endif %}
                </span>
            </div>
        </div>

        {% if far_from_market %}
        <div class="approval-pending-banner" style="margin-top: 12px;">
            <strong>⚠ Far from any registered market</strong>
            <p>This picker set off from a location more than 2 km from the nearest registered market — worth a quick check that the order was actually sourced from a designated market and meets quality standards.</p>
        </div>
        {% endif %}

        <p id="track-status" style="color: var(--muted); font-size: 0.85rem; margin-top: 10px;">Waiting for the picker's live location…</p>
        <div id="delivered-banner" class="order-card" style="display: none; text-align: center; margin-top: 16px;">
            <span class="status-badge status-delivered">Delivered</span>
            <p style="margin-top: 8px;">This order has reached its destination.</p>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="{% static_v 'js/vehicle-icons.js' %}"></script>
<script src="{% static_v 'js/map-intelligence.js' %}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var map = L.map('track-map');
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; OpenStreetMap contributors',
        }).addTo(map);
        addTrafficLayer(map);
        addWeatherBadge(map, {{ order.delivery_lat }}, {{ order.delivery_lng }});

        var destLatLng = [{{ order.delivery_lat }}, {{ order.delivery_lng }}];
        L.marker(destLatLng, { icon: circlePointIcon({}) }).addTo(map)
            .bindTooltip('Order #{{ order.id }}', { permanent: true, direction: 'top', offset: [0, -14], className: 'picker-tag' })
            .bindPopup('Delivery destination — Order #{{ order.id }}');

        {% for m in remaining_markets %}
        L.marker([{{ m.lat }}, {{ m.lng }}], { icon: circlePointIcon({ color: '{% if m.requires_payment %}#e08a00{% else %}#1c7ed6{% endif %}' }) }).addTo(map)
            .bindTooltip('{{ forloop.counter }}. {{ m.name|escapejs }}', { permanent: true, direction: 'top', offset: [0, -14], className: 'picker-tag' })
            .bindPopup('{% if m.requires_payment %}Pending pickup stop{% else %}Suggested stop for other items (no shop payment){% endif %}: {{ m.name|escapejs }}');
        {% endfor %}

        var vehicleType = '{{ picker_vehicle_type|default:"car"|escapejs }}';
        var truckEmoji = {% if picker_truck_icon %}'{{ picker_truck_icon|escapejs }}'{% else %}null{% endif %};
        function carIcon(bearingDeg) {
            return vehicleMarkerIcon(vehicleType, { bearingDeg: bearingDeg || 0, truckEmoji: truckEmoji });
        }
        function bearingBetween(lat1, lng1, lat2, lng2) {
            var toRad = function (d) { return d * Math.PI / 180; };
            var toDeg = function (r) { return r * 180 / Math.PI; };
            var y = Math.sin(toRad(lng2 - lng1)) * Math.cos(toRad(lat2));
            var x = Math.cos(toRad(lat1)) * Math.sin(toRad(lat2)) -
                Math.sin(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.cos(toRad(lng2 - lng1));
            return (toDeg(Math.atan2(y, x)) + 360) % 360;
        }

        {% if start_lat %}
        var pickerMarker = L.marker([{{ start_lat }}, {{ start_lng }}], { icon: carIcon(0) }).addTo(map).bindPopup('Picker');
        {% else %}
        var pickerMarker = null;
        {% endif %}

        var routeLine = null;
        function drawRoute(geometry, pickerLatLng) {
            if (routeLine) {
                map.removeLayer(routeLine);
                routeLine = null;
            }
            if (geometry) {
                routeLine = L.geoJSON(geometry, { style: { color: '#1c3fd6', weight: 5, opacity: 0.8 } }).addTo(map);
                map.fitBounds(routeLine.getBounds(), { padding: [30, 30] });
            } else if (pickerLatLng) {
                routeLine = L.polyline([pickerLatLng, destLatLng], { color: '#1c3fd6', weight: 3, dashArray: '6 8' }).addTo(map);
                map.fitBounds(L.latLngBounds([pickerLatLng, destLatLng]), { padding: [30, 30] });
            }
        }

        {% if start_lat %}
        drawRoute({% if route_geometry_json %}{{ route_geometry_json|safe }}{% else %}null{% endif %}, [{{ start_lat }}, {{ start_lng }}]);
        {% else %}
        map.setView(destLatLng, 13);
        {% endif %}

        var statusEl = document.getElementById('track-status');
        var statusBadge = document.getElementById('order-status-badge');
        var deliveredBanner = document.getElementById('delivered-banner');
        var distanceEl = document.getElementById('live-distance');
        var etaEl = document.getElementById('live-eta');
        var dataUrl = '{% url "accounts:admin_track_order_data" order.id %}';
        var stopped = false;

        function poll() {
            if (stopped) return;
            fetch(dataUrl)
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    statusBadge.textContent = data.status_label;
                    statusBadge.className = 'status-badge status-' + data.status;

                    if (data.location) {
                        var pos = [data.location.lat, data.location.lng];
                        var bearing = pickerMarker ? bearingBetween(pickerMarker.getLatLng().lat, pickerMarker.getLatLng().lng, pos[0], pos[1]) : 0;
                        if (pickerMarker) {
                            pickerMarker.setIcon(carIcon(bearing));
                            pickerMarker.setLatLng(pos);
                        } else {
                            pickerMarker = L.marker(pos, { icon: carIcon(0) }).addTo(map).bindPopup('Picker');
                        }
                        drawRoute(data.route ? data.route.geometry : null, pos);
                        if (data.route) {
                            distanceEl.textContent = data.route.distance_km + ' km';
                            etaEl.textContent = data.route.duration_min ? ('~' + Math.round(data.route.duration_min) + ' min') : '—';
                        }
                        statusEl.textContent = 'Live — updates automatically.';
                    }

                    if (data.delivered) {
                        deliveredBanner.style.display = 'block';
                        statusEl.textContent = 'Delivered — tracking stopped.';
                        stopped = true;
                        return;
                    }
                })
                .catch(function () {});
        }

        poll();
        var pollTimer = setInterval(poll, 8000);
        window.addEventListener('beforeunload', function () { clearInterval(pollTimer); });
    });
</script>
{% endblock %}