{% extends 'base.html' %}
{% load static %}
{% load static_v %}
{% block title %}{{ t.picker_route_heading }} — {{ 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: 1100px;">
        <p class="auth-switch" style="margin-bottom: 10px;"><a href="{% url 'accounts:picker_home' %}">&larr; {{ t.picker_back_to_dashboard }}</a></p>
        <h1>{{ t.picker_route_heading }}</h1>
        <p style="color: var(--muted); margin-bottom: 16px;">
            {{ t.picker_route_intro }}
        </p>

        {% if total_distance_km is not None %}
        <div class="route-summary-bar" id="route-summary-bar">
            <div>
                <span class="spending-stat-label">{{ t.picker_route_total_distance }}</span>
                <span class="spending-stat-value" id="route-total-distance">{{ total_distance_km }} km</span>
            </div>
            {% if total_duration_min %}
            <div>
                <span class="spending-stat-label">{{ t.picker_route_total_time }}</span>
                <span class="spending-stat-value" id="route-total-time">{{ total_duration_min }} min</span>
            </div>
            {% endif %}
        </div>
        {% endif %}

        <div class="route-map-flex">
            <div id="route-map" class="map-container route-map-primary"></div>
            <div class="route-directions-panel">
                <h4>{{ t.picker_route_directions_title }}</h4>
                <ol id="route-directions-list" class="route-directions-list">
                    <li class="route-directions-empty">{{ t.picker_route_directions_none }}</li>
                </ol>
            </div>
        </div>

        <div id="route-list">
            {% regroup orders by is_delivered as order_groups %}
            {% for group in order_groups %}
            <h3 style="margin: 24px 0 12px;">
                {% if group.grouper %}{{ t.picker_route_delivered_section }}{% else %}{{ t.picker_route_active_section }}{% endif %}
            </h3>
            {% for order in group.list %}
            <div class="order-card{% if order.is_route_start %} route-start-card{% endif %}" id="route-order-{{ order.id }}">
                <div style="display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;">
                    <div>
                        <div class="order-card-badges">
                            <strong>
                                {% if not order.is_delivered %}{{ order.route_position }}. {% endif %}{{ t.order_hash_prefix }}{{ order.id }}
                            </strong>
                            {% if order.is_delivered %}
                            <span class="status-badge status-delivered">{{ t.picker_route_delivered_label }}</span>
                            {% else %}
                            <span class="status-badge status-{{ order.status }}">{{ order.status_label }}</span>
                            {% endif %}
                            {% if order.is_quick %}<span class="surface-badge warn">{{ t.badge_quick_delivery }}</span>{% endif %}
                            {% if order.is_route_start %}<span class="surface-badge route-start-badge">{{ t.picker_route_start_here }}</span>{% endif %}
                        </div>
                        <p style="margin-top: 4px; font-size: 0.9rem;">{{ order.customer_name }} &middot; {{ order.delivery_address }}</p>
                        {% if not order.is_delivered and order.leg_distance_km is not None %}
                        <p style="color: var(--muted); font-size: 0.85rem;">~{{ order.leg_distance_km }} {{ t.picker_km_away }} {% if not order.is_route_start %}(from previous stop){% endif %}</p>
                        {% elif order.distance_from_here_km is not None %}
                        <p style="color: var(--muted); font-size: 0.85rem;">~{{ order.distance_from_here_km }} km {{ t.picker_km_from_position }}</p>
                        {% endif %}
                    </div>
                    <div style="flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-end;">
                        {% if order.is_delivered %}
                        <a href="{% url 'accounts:picker_order_detail' order.id %}" class="btn-small" style="background: var(--muted);">{{ t.picker_route_view_order }}</a>
                        {% elif order.status == 'in_transit' %}
                        <a href="{% url 'accounts:picker_live_navigation' order.id %}" class="btn-small">{{ t.picker_navigate_btn }}</a>
                        {% else %}
                        <form method="post" action="{% url 'accounts:advance_order' order.id %}">
                            {% csrf_token %}
                            <button type="submit" class="btn-small">{{ order.next_action_label|default:t.picker_advance_default }}</button>
                        </form>
                        {% endif %}
                        {% if not order.is_delivered %}
                        <button type="button" class="btn-small route-focus-btn" style="background: var(--muted);" data-order-id="{{ order.id }}">{{ t.picker_route_view_order }}</button>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endfor %}
            {% endfor %}
            {% if not orders %}
            <p style="color: var(--muted);">{{ t.picker_no_active_orders }}</p>
            {% endif %}
        </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('route-map');
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; OpenStreetMap contributors',
        }).addTo(map);
        addTrafficLayer(map);
        {% if current_lat %}addWeatherBadge(map, {{ current_lat }}, {{ current_lng }});{% endif %}

        var currentMarker = null;
        var orderMarkers = {};
        var routeLines = {};
        var dataUrl = '{% url "accounts:picker_delivery_route_data" %}';
        var directionsList = document.getElementById('route-directions-list');
        var directionsNoneText = "{{ t.picker_route_directions_none|escapejs }}";
        var startLabel = "{{ t.picker_route_start_here|escapejs }}";

        var numberedIcon = function (n, isStart) {
            return L.divIcon({
                html: '<span class="route-marker-number' + (isStart ? ' route-marker-start' : '') + '">' + n + '</span>',
                className: 'route-marker',
                iconSize: [28, 28],
            });
        };

        var deliveredIcon = function () {
            return L.divIcon({
                html: '<span class="route-marker-delivered">&#10003;</span>',
                className: 'route-marker',
                iconSize: [24, 24],
            });
        };

        function renderDirections(steps) {
            directionsList.innerHTML = '';
            if (!steps || !steps.length) {
                var li = document.createElement('li');
                li.className = 'route-directions-empty';
                li.textContent = directionsNoneText;
                directionsList.appendChild(li);
                return;
            }
            steps.forEach(function (step) {
                var li = document.createElement('li');
                li.textContent = step;
                directionsList.appendChild(li);
            });
        }

        function render(data) {
            Object.keys(orderMarkers).forEach(function (id) {
                map.removeLayer(orderMarkers[id]);
            });
            orderMarkers = {};
            Object.keys(routeLines).forEach(function (id) {
                map.removeLayer(routeLines[id]);
            });
            routeLines = {};

            var bounds = [];
            if (data.current_lat != null) {
                bounds.push([data.current_lat, data.current_lng]);
                if (currentMarker) {
                    currentMarker.setLatLng([data.current_lat, data.current_lng]);
                } else {
                    currentMarker = L.marker([data.current_lat, data.current_lng], {
                        icon: L.divIcon({ html: '<span class="route-marker-you">{{ t.picker_route_you_marker|escapejs }}</span>', className: 'route-marker-you-wrap', iconSize: [40, 24] }),
                    }).addTo(map);
                }
            }

            var firstStopSteps = null;
            data.orders.forEach(function (order) {
                if (order.lat == null) return;
                bounds.push([order.lat, order.lng]);

                // The actual road-following path for this leg of the
                // picker's route — drawn as a solid line so it's clearly
                // distinguishable from the general live-traffic colors
                // underneath it (Leaflet always draws this vector overlay
                // above the raster tile layers, traffic included, so it can
                // never get hidden behind them).
                if (!order.is_delivered && order.leg_geometry) {
                    var line = L.geoJSON(order.leg_geometry, {
                        style: { color: '#243D91', weight: 5, opacity: 0.85 },
                    }).addTo(map);
                    routeLines[order.id] = line;
                }

                var icon = order.is_delivered
                    ? deliveredIcon()
                    : numberedIcon(order.route_position || '?', order.is_route_start);
                var marker = L.marker([order.lat, order.lng], { icon: icon }).addTo(map);
                var popupBits = [
                    '<strong>#' + order.id + ' — ' + order.customer_name + '</strong><br>' + order.address,
                ];
                if (order.is_delivered) {
                    popupBits.push('{{ t.picker_route_delivered_label|escapejs }}');
                } else {
                    if (order.is_route_start) popupBits.push('<strong>' + startLabel + '</strong>');
                    if (order.leg_distance_km != null) popupBits.push('~' + order.leg_distance_km + ' {{ t.picker_km_away|escapejs }}');
                    popupBits.push(order.status_label);
                }
                marker.bindPopup(popupBits.join('<br>'));
                marker.on('click', function () {
                    if (order.steps) renderDirections(order.steps);
                });
                orderMarkers[order.id] = marker;

                if (order.is_route_start && order.steps) {
                    firstStopSteps = order.steps;
                }
            });

            if (firstStopSteps) {
                renderDirections(firstStopSteps);
            }

            if (bounds.length) {
                map.fitBounds(bounds, { padding: [40, 40] });
            } else {
                map.setView([-6.7924, 39.2083], 12);
            }

            if (data.total_distance_km != null) {
                var distEl = document.getElementById('route-total-distance');
                if (distEl) distEl.textContent = data.total_distance_km + ' km';
            }
            if (data.total_duration_min != null) {
                var timeEl = document.getElementById('route-total-time');
                if (timeEl) timeEl.textContent = data.total_duration_min + ' min';
            }

            // Remove any active-list rows for orders no longer active (they'll
            // reappear correctly grouped as delivered on the next full page load).
            var activeIds = data.orders.map(function (o) { return o.id; });
            document.querySelectorAll('#route-list .order-card').forEach(function (card) {
                var id = parseInt(card.id.replace('route-order-', ''), 10);
                if (activeIds.indexOf(id) === -1) {
                    card.remove();
                }
            });
        }

        function poll() {
            fetch(dataUrl)
                .then(function (r) { return r.json(); })
                .then(render)
                .catch(function () {});
        }

        document.querySelectorAll('.route-focus-btn').forEach(function (btn) {
            btn.addEventListener('click', function () {
                var id = parseInt(btn.getAttribute('data-order-id'), 10);
                var marker = orderMarkers[id];
                if (marker) {
                    map.setView(marker.getLatLng(), 16);
                    marker.openPopup();
                }
            });
        });

        poll();
        setInterval(poll, 15000);
    });
</script>
{% endblock %}