{% extends 'base.html' %}
{% load static %}
{% load static_v %}
{% block title %}{{ t.title_navigate }} — {{ t.title_order_hash }}{{ order.id }} — {{ t.title_picker_suffix }}{% 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;">
        <p class="auth-switch" style="margin-bottom: 10px;"><a href="{% url 'accounts:picker_order_detail' order.id %}">&larr; {{ t.picker_back_to_order }}{{ order.id }}</a></p>
        <h1>{{ t.picker_delivering_order }}{{ order.id }}</h1>
        <p style="color: var(--muted); margin-bottom: 16px;">{{ t.picker_live_deliver_to }} {{ order.delivery_address }}</p>

        <div id="live-nav-map" class="map-container" style="height: 420px;"></div>
        <p id="amenities-status" style="color: var(--muted); font-size: 0.82rem;"></p>
        <div class="map-search-wrap" style="margin-bottom: 16px;">
            <input type="text" id="amenity-search" placeholder="{{ t.amenity_search_placeholder }}">
            <div class="geocode-results" id="amenity-search-results"></div>
        </div>

        <div class="cart-summary" style="margin-left: 0; max-width: 100%;">
            <div class="cart-summary-row">
                <span>{{ t.picker_distance_remaining }}</span>
                <span id="live-distance">{{ route_distance_km|default:'—' }} km</span>
            </div>
            <div class="cart-summary-row">
                <span>{{ t.picker_eta }}</span>
                <span id="live-eta">{% if route_duration_min %}~{{ route_duration_min|floatformat:0 }} min{% else %}—{% endif %}</span>
            </div>
        </div>

        <p id="live-nav-status" style="color: var(--muted); font-size: 0.85rem; margin-top: 10px;">
            {{ t.picker_enable_location }}
        </p>
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="{% static_v 'js/amenities.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('live-nav-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 }}];
        var pickerLatLng = [{{ start_lat }}, {{ start_lng }}];

        var destMarker = L.marker(destLatLng, { icon: circlePointIcon({}) }).addTo(map)
            .bindTooltip('{{ t.picker_delivery_destination_popup|escapejs }}', { permanent: true, direction: 'top', offset: [0, -14], className: 'picker-tag' })
            .bindPopup('{{ t.picker_delivery_destination_popup|escapejs }}');

        {% 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 %}{{ t.picker_popup_pickup_stop|escapejs }}{% else %}{{ t.picker_popup_suggested_stop|escapejs }}{% endif %} {{ m.name|escapejs }}');
        {% endfor %}

        // Marker matches the picker's own actual vehicle (motorcycle/car/
        // bicycle, or their B2B truck's icon) and turns to face the
        // direction of travel as their position updates.
        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;
        }

        var currentBearing = 0;
        var pickerMarker = L.marker(pickerLatLng, { icon: carIcon(currentBearing) }).addTo(map).bindPopup('{{ t.picker_you_popup|escapejs }}');

        function movePickerMarker(lat, lng) {
            var prev = pickerMarker.getLatLng();
            if (prev.lat !== lat || prev.lng !== lng) {
                currentBearing = bearingBetween(prev.lat, prev.lng, lat, lng);
                pickerMarker.setIcon(carIcon(currentBearing));
            }
            pickerMarker.setLatLng([lat, lng]);
        }

        var routeLine = null;

        // Nearby landmarks are indexed for search in the background — not
        // drawn on the map until searched for, so the route stays legible.
        syncNearbyAmenities({{ start_lat }}, {{ start_lng }}, document.getElementById('amenities-status'));
        syncNearbyAmenities({{ order.delivery_lat }}, {{ order.delivery_lng }}, null);
        enableAmenitySearch(map, 'amenity-search', 'amenity-search-results', {{ order.delivery_lat }}, {{ order.delivery_lng }});

        function drawRoute(geometry) {
            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 {
                var bounds = L.latLngBounds([pickerMarker.getLatLng(), destLatLng]);
                routeLine = L.polyline([pickerMarker.getLatLng(), destLatLng], { color: '#1c3fd6', weight: 3, dashArray: '6 8' }).addTo(map);
                map.fitBounds(bounds, { padding: [30, 30] });
            }
        }

        drawRoute({% if route_geometry_json %}{{ route_geometry_json|safe }}{% else %}null{% endif %});
        map.fitBounds(L.latLngBounds([pickerLatLng, destLatLng]), { padding: [30, 30] });

        var statusEl = document.getElementById('live-nav-status');
        var distanceEl = document.getElementById('live-distance');
        var etaEl = document.getElementById('live-eta');
        var updateUrl = '{% url "accounts:picker_update_location" order.id %}';
        // This page has no form, so pull the CSRF token straight from the cookie.
        function getCsrfToken() {
            var match = document.cookie.match(/csrftoken=([^;]+)/);
            return match ? match[1] : '';
        }

        var lastSent = 0;
        var MIN_INTERVAL_MS = 5000; // don't flood the server — one update per 5s at most

        function sendPosition(lat, lng) {
            var body = new URLSearchParams();
            body.set('lat', lat);
            body.set('lng', lng);
            fetch(updateUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-CSRFToken': getCsrfToken(),
                },
                body: body.toString(),
            })
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    if (!data.ok) return;
                    movePickerMarker(lat, lng);
                    if (data.route) {
                        drawRoute(data.route.geometry);
                        distanceEl.textContent = data.route.distance_km + ' km';
                        etaEl.textContent = data.route.duration_min ? ('~' + Math.round(data.route.duration_min) + ' min') : '—';
                    }
                })
                .catch(function () {});
        }

        if (!navigator.geolocation) {
            statusEl.textContent = '{{ t.picker_no_geolocation|escapejs }}';
        } else {
            // Grab the picker's real current position right away — the
            // marker starts at the order's last-saved position (which can
            // be stale), so get a fresh fix immediately rather than
            // waiting for the first watchPosition callback.
            statusEl.textContent = '{{ t.picker_locating|escapejs }}';
            navigator.geolocation.getCurrentPosition(
                function (position) {
                    statusEl.textContent = '{{ t.picker_tracking_live|escapejs }}';
                    sendPosition(position.coords.latitude, position.coords.longitude);
                },
                function () {
                    statusEl.textContent = '{{ t.picker_location_failed|escapejs }}';
                },
                { enableHighAccuracy: true, maximumAge: 0, timeout: 15000 }
            );

            navigator.geolocation.watchPosition(
                function (position) {
                    var now = Date.now();
                    if (now - lastSent < MIN_INTERVAL_MS) return;
                    lastSent = now;
                    statusEl.textContent = '{{ t.picker_tracking_live|escapejs }}';
                    sendPosition(position.coords.latitude, position.coords.longitude);
                },
                function () {
                    statusEl.textContent = '{{ t.picker_location_failed_permissions|escapejs }}';
                },
                { enableHighAccuracy: true, maximumAge: 5000, timeout: 15000 }
            );
        }
    });
</script>
{% endblock %}