@extends('layouts.admin', ['title' => 'Live Dashboard'])

@push('head')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
@endpush

@section('content')
    <div class="mb-6">
        <h1 class="text-2xl font-semibold">Live dashboard</h1>
        <p class="text-sm text-zinc-600">Active trucks refresh every 5 seconds. Stale means no update for over 2 minutes.</p>
    </div>

    <div class="grid gap-6 lg:grid-cols-[1fr_320px]">
        <div id="map" class="h-[70vh] min-h-[420px] rounded-lg border border-zinc-200 bg-white shadow-sm"></div>
        <aside class="rounded-lg border border-zinc-200 bg-white shadow-sm">
            <div class="border-b border-zinc-200 px-4 py-3 font-semibold">Trucks</div>
            <div id="truck-list" class="divide-y divide-zinc-100"></div>
        </aside>
    </div>
@endsection

@push('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
const map = L.map('map').setView([43.6532, -79.3832], 11);
const markers = new Map();
const endpoint = @json(route('admin.api.trucks.latest'));

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap contributors',
}).addTo(map);

function markerIcon(isStale) {
    return L.divIcon({
        className: '',
        html: `<div class="h-4 w-4 rounded-full border-2 border-white shadow ${isStale ? 'bg-amber-500' : 'bg-emerald-500'}"></div>`,
        iconSize: [16, 16],
        iconAnchor: [8, 8],
    });
}

function popup(truck) {
    const location = truck.latest_location;
    return `
        <div class="space-y-1 text-sm">
            <strong>${truck.name}</strong><br>
            Plate: ${truck.plate_number || '-'}<br>
            Speed: ${location.speed_kmh ?? '-'} km/h<br>
            Accuracy: ${location.accuracy ?? '-'} m<br>
            Last update: ${new Date(location.tracked_at).toLocaleString()}
        </div>
    `;
}

function renderList(trucks) {
    const list = document.getElementById('truck-list');
    list.innerHTML = trucks.map((truck) => {
        const location = truck.latest_location;
        const status = location ? (location.is_stale ? 'Stale' : 'Live') : 'No data';
        const statusClass = location?.is_stale ? 'text-amber-700' : (location ? 'text-emerald-700' : 'text-zinc-500');
        return `
            <div class="px-4 py-3">
                <div class="flex items-center justify-between gap-3">
                    <div class="font-medium">${truck.name}</div>
                    <div class="text-xs font-semibold ${statusClass}">${status}</div>
                </div>
                <div class="mt-1 text-sm text-zinc-500">${truck.plate_number || 'No plate'}</div>
                <div class="mt-1 text-xs text-zinc-500">${location ? new Date(location.tracked_at).toLocaleString() : 'Waiting for first location'}</div>
            </div>
        `;
    }).join('');
}

async function loadTrucks() {
    const response = await fetch(endpoint, { headers: { Accept: 'application/json' } });
    const data = await response.json();
    const bounds = [];

    data.trucks.forEach((truck) => {
        const location = truck.latest_location;
        if (!location) {
            return;
        }

        const latLng = [location.latitude, location.longitude];
        bounds.push(latLng);

        if (!markers.has(truck.id)) {
            markers.set(truck.id, L.marker(latLng).addTo(map));
        }

        markers.get(truck.id)
            .setLatLng(latLng)
            .setIcon(markerIcon(location.is_stale))
            .bindPopup(popup(truck));
    });

    renderList(data.trucks);

    if (bounds.length && !map._truckTrackerFit) {
        map.fitBounds(bounds, { padding: [40, 40], maxZoom: 14 });
        map._truckTrackerFit = true;
    }
}

loadTrucks();
setInterval(loadTrucks, 5000);
</script>
@endpush