{% extends "base.html" %}

{% block content %}
<main id="delivery-track" class="mx-auto w-full max-w-4xl px-4 py-6 text-foreground sm:py-8" data-plugin="delivery-agent"
      data-order-number="{{ order.order_number | escape }}"
      data-destination-lat="{{ order.geo_latitude | default(value=0) }}"
      data-destination-lng="{{ order.geo_longitude | default(value=0) }}"
      data-rider-lat="{{ agent.latitude | default(value=0) }}"
      data-rider-lng="{{ agent.longitude | default(value=0) }}">
            <div class="mb-4">
                <a href="/plugins/orders/my-order/{{ order.order_number | escape }}" class="inline-flex min-h-11 items-center gap-2 text-sm font-medium text-brand hover:underline focus-visible:outline-2 focus-visible:outline-brand">
                    <i class="fas fa-arrow-left me-2"></i>Back to Order Details
                </a>
            </div>

            <section class="overflow-hidden rounded-2xl border border-divider bg-surface shadow-sm" aria-label="Delivery tracking details">
                    <!-- Map Canvas -->
                    <div id="tracking-map" class="relative h-72 min-h-72 bg-canvas sm:h-[28rem]" role="img" aria-label="Map showing the delivery agent and destination"></div>
                    <p id="tracking-map-status" class="px-4 pt-3 text-sm text-muted" role="status" aria-live="polite">Loading map and delivery estimate…</p>

                    <!-- Details/ETA Pane -->
                    <div class="border-t border-divider p-4 sm:p-7">
                        <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
                            <div>
                                <span class="mb-1 block text-xs font-semibold uppercase tracking-wide text-muted">Order status</span>
                                <h1 class="text-2xl font-bold">
                                    {% if order.status == 'shipped' %}Out for Delivery 🛵{% else %}{{ order.status | title }}{% endif %}
                                </h1>
                            </div>
                            <div id="eta-container" class="hidden">
                                <div class="inline-flex items-center gap-2 rounded-full bg-brand/10 px-4 py-2 text-sm font-semibold text-brand">
                                    <i class="fas fa-clock"></i>
                                    <span id="eta-text">Calculating...</span>
                                </div>
                            </div>
                        </div>

                        <hr class="my-5 border-divider">

                        <div class="grid gap-5 sm:grid-cols-2">
                            <div>
                                <h2 class="mb-3 text-sm font-semibold text-muted">Delivery agent</h2>
                                {% if agent %}
                                <div class="flex items-center gap-4">
                                    <div class="inline-flex size-14 shrink-0 items-center justify-center rounded-full border border-divider bg-canvas text-xl text-muted">
                                        <i class="fas fa-motorcycle"></i>
                                    </div>
                                    <div>
                                        <h3 class="font-semibold">{{ agent.name }}</h3>
                                        <p class="mt-1 text-sm text-muted"><i class="fas fa-phone mr-1" aria-hidden="true"></i> {{ agent.phone | default(value='Not provided') }}</p>
                                    </div>
                                </div>
                                {% else %}
                                <p class="text-sm italic text-muted">No delivery agent assigned yet.</p>
                                {% endif %}
                            </div>
                            <div>
                                <h2 class="mb-3 text-sm font-semibold text-muted">Delivery address</h2>
                                <p class="break-words text-sm" title="{{ order.shipping_address }}">
                                    <i class="fas fa-map-marker-alt mr-2 text-danger" aria-hidden="true"></i>{{ order.shipping_address }}
                                </p>
                            </div>
                        </div>
                    </div>
            </section>
</main>
{% endblock %}

{% block scripts %}
<!-- Load Leaflet via blocks-map global system -->
<script src="/static/js/blocks-map.js"></script>
<script>
document.addEventListener('DOMContentLoaded', async () => {
    const root = document.getElementById('delivery-track');
    const mapStatus = document.getElementById('tracking-map-status');
    if (!root) return;
    const orderNumber = root.dataset.orderNumber || '';

    // Order Destination
    const destLat = Number.parseFloat(root.dataset.destinationLat);
    const destLng = Number.parseFloat(root.dataset.destinationLng);

    // Rider Source
    let riderLat = Number.parseFloat(root.dataset.riderLat);
    let riderLng = Number.parseFloat(root.dataset.riderLng);
    const validPoint = (lat, lng) => Number.isFinite(lat) && Number.isFinite(lng)
        && lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180;

    const hasDestination = validPoint(destLat, destLng);
    const hasRider = validPoint(riderLat, riderLng);

    // Initialize Map using BlocksMaps registry
    let mapInstance = null;
    let riderMarker = null;
    let destMarker = null;
    let routePolyline = null;

    const initialCenter = hasDestination
        ? [destLat, destLng]
        : (hasRider ? [riderLat, riderLng] : [0, 0]);
    try {
        mapInstance = await window.BlocksMaps.init('tracking-map', {
            center: initialCenter,
            zoom: 14,
            dragging: true,
            zoomControl: true,
            scrollWheelZoom: true
        });
    } catch (e) {
        console.error("Map load failed:", e);
        if (mapStatus) mapStatus.textContent = 'The live map is unavailable right now. Order details are still shown below.';
        return;
    }

    const L = window.L;

    // Define custom marker icons
    const riderIcon = L.divIcon({
        className: 'custom-rider-icon',
        html: '<span class="inline-flex size-9 items-center justify-center rounded-full border-[3px] border-white bg-brand text-white shadow-lg"><i class="fas fa-motorcycle" aria-hidden="true"></i></span>',
        iconSize: [36, 36],
        iconAnchor: [18, 18]
    });

    const destIcon = L.divIcon({
        className: 'custom-dest-icon',
        html: '<span class="inline-flex size-9 items-center justify-center rounded-full border-[3px] border-white bg-danger text-white shadow-lg"><i class="fas fa-home" aria-hidden="true"></i></span>',
        iconSize: [36, 36],
        iconAnchor: [18, 18]
    });

    if (hasDestination) {
        destMarker = L.marker([destLat, destLng], { icon: destIcon }).addTo(mapInstance.map)
            .bindPopup("Delivery Address");
    }

    async function calculateRouteAndETA(rLat, rLng, dLat, dLng) {
        if (!validPoint(rLat, rLng) || !validPoint(dLat, dLng)) return;

        try {
            const url = `https://router.project-osrm.org/route/v1/driving/${rLng},${rLat};${dLng},${dLat}?overview=full&geometries=geojson`;
            const response = await fetch(url, { headers: { Accept: 'application/json' } });
            if (!response.ok) throw new Error(`Route service returned ${response.status}`);
            const data = await response.json();

            if (data.routes && data.routes.length > 0) {
                const route = data.routes[0];
                const durationMins = Math.round(route.duration / 60);
                const distanceKm = (route.distance / 1000).toFixed(1);

                // Update text
                document.getElementById('eta-text').textContent = `${durationMins} mins (${distanceKm} km)`;
                document.getElementById('eta-container').classList.remove('hidden');
                if (mapStatus) mapStatus.textContent = 'Showing the latest delivery location and route estimate.';

                // Draw route line
                const coordinates = route.geometry.coordinates.map(coord => [coord[1], coord[0]]);
                
                if (routePolyline) {
                    routePolyline.setLatLngs(coordinates);
                } else {
                    const brand = getComputedStyle(document.documentElement).getPropertyValue('--primary').trim() || '#2563eb';
                    routePolyline = L.polyline(coordinates, { color: brand, weight: 5, opacity: 0.7 }).addTo(mapInstance.map);
                }

                // Adjust map bounds to fit both markers
                const bounds = L.latLngBounds([rLat, rLng], [dLat, dLng]);
                mapInstance.map.fitBounds(bounds, { padding: [50, 50] });
            }
        } catch (e) {
            console.error("Failed to fetch OSRM route:", e);
            if (mapStatus) mapStatus.textContent = 'The route estimate is unavailable. The map and order details remain available.';
        }
    }

    function updateMarkers(rLat, rLng) {
        if (!validPoint(rLat, rLng)) return;

        if (riderMarker) {
            riderMarker.setLatLng([rLat, rLng]);
        } else {
            riderMarker = L.marker([rLat, rLng], { icon: riderIcon }).addTo(mapInstance.map)
                .bindPopup("Rider Location");
        }

        if (hasDestination) {
            calculateRouteAndETA(rLat, rLng, destLat, destLng);
        } else {
            mapInstance.map.setView([rLat, rLng], 15);
        }
    }

    // Initial draw
    if (hasRider) {
        updateMarkers(riderLat, riderLng);
    } else if (hasDestination) {
        mapInstance.map.setView([destLat, destLng], 15);
        if (mapStatus) mapStatus.textContent = 'Waiting for the delivery agent to share a location.';
    } else if (mapStatus) {
        mapStatus.textContent = 'Location coordinates are not available yet.';
    }

    // Periodically poll latest coordinates
    const trackingTimer = setInterval(async () => {
        try {
            const res = await fetch('/plugins/delivery-agent/api/track-status', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
                credentials: 'same-origin',
                body: JSON.stringify({ order_number: orderNumber })
            });
            if (!res.ok) throw new Error(`Tracking request returned ${res.status}`);
            const data = await res.json();
            if (data.success && data.agent) {
                const latestLat = parseFloat(data.agent.latitude);
                const latestLng = parseFloat(data.agent.longitude);
                if (validPoint(latestLat, latestLng)) {
                    updateMarkers(latestLat, latestLng);
                }
            }
        } catch (e) {
            console.error("Polled tracking coordinates error:", e);
        }
    }, 10000);
    window.addEventListener('pagehide', () => clearInterval(trackingTimer), { once: true });
});
</script>
{% endblock %}