@extends('admin.layouts.app')

@section('title', 'نقشه آنلاین رانندگان')

@section('content')
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">ردیابی رانندگان</h5>
    </div>

    <div class="card-body p-0" style="position: relative;">
        <div id="mapLoadingOverlay" style="
            position:absolute;top:0;left:0;right:0;bottom:0;
            background:rgba(255,255,255,0.88);
            display:flex;align-items:center;justify-content:center;
            z-index:1000;
        ">
            <div class="text-center">
                <div class="spinner-border text-primary mb-3" role="status"></div>
                <div class="text-muted">در حال بارگذاری نقشه...</div>
            </div>
        </div>

        <div id="driversMap"></div>

        <div id="driverPopup">
            <button class="close-btn" onclick="closePopup()">✕</button>
            <div id="driverPopupInner"></div>
        </div>

        <div class="legend">
            <div class="legend-item"><div class="legend-dot" style="background:#22c55e;"></div> آنلاین</div>
            <div class="legend-item"><div class="legend-dot" style="background:#fbbf24;"></div> مشغول</div>
            <div class="legend-item"><div class="legend-dot" style="background:#6b7280;"></div> آفلاین</div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/vendor/geobox/geobox-gl.min.css') }}">
<style>
    #driversMap {
        width: calc(100% - 28px);
        margin-left: 28px;
        height: 560px;
    }

    @media (max-width: 768px) {
        #driversMap {
            width: calc(100% - 12px);
            margin-left: 12px;
        }
    }

    .legend {
        display: flex;
        gap: 16px;
        padding: 10px 14px;
        background: #f8f9fa;
        border-top: 1px solid #e9ecef;
        flex-wrap: wrap;
        font-size: 0.82rem;
    }
    .legend-item { display: flex; align-items: center; gap: 6px; }
    .legend-dot {
        width: 13px;
        height: 13px;
        border-radius: 50%;
        border: 2px solid #fff;
        box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
    }

    #driverPopup {
        display: none;
        position: absolute;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 6px 24px rgba(0,0,0,0.18);
        padding: 14px 16px;
        min-width: 220px;
        z-index: 999;
        font-size: 13px;
        line-height: 1.6;
    }
    #driverPopup .close-btn {
        position: absolute;
        top: 7px;
        left: 10px;
        background: none;
        border: none;
        font-size: 15px;
        cursor: pointer;
        color: #888;
    }
    .driver-badge {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 600;
        color: #fff;
    }
    .badge-online { background: #22c55e; }
    .badge-busy { background: #fbbf24; color: #333; }
    .badge-offline { background: #6b7280; }
</style>
@endpush

@push('scripts')
<script>
    const APIKEY = 'FU32zBV1A3DT0ta1daCF6OUcTbqLG4v_J8kZHVCZBrM';
    const MAP_ID = '181ccc1f-3cc0-436b-85ea-0808f44cfb91';
    const ORIGIN = 'https://geoportal.rmto.ir';

    const rawDrivers = {!! json_encode($drivers ?? []) !!};

    const fallbackDrivers = [
        { id: 1, name: 'علی محمدی', phone: '09121234567', lat: 35.7006, lng: 51.3373, status: 'online', plate: '22ب345-11' }, // میدان آزادی
        { id: 2, name: 'حسن رضایی', phone: '09132345678', lat: 35.6892, lng: 51.3890, status: 'busy', plate: '44د678-33' }, // چهارراه ولیعصر
        { id: 3, name: 'محمد کریمی', phone: '09143456789', lat: 35.7547, lng: 51.3763, status: 'online', plate: '11ط901-55' }, // سیدخندان
        { id: 4, name: 'رضا احمدی', phone: '09154567890', lat: 35.7320, lng: 51.4220, status: 'offline', plate: '77ج234-88' } // تهرانپارس
    ];

    const TEST_DRIVERS = (Array.isArray(rawDrivers) ? rawDrivers : [])
        .map(driver => ({
            id: driver.id,
            name: driver.name || 'راننده',
            phone: driver.phone || '-',
            lat: Number(driver.latitude ?? driver.lat),
            lng: Number(driver.longitude ?? driver.lng),
            status: ['online', 'busy', 'offline'].includes(driver.driver_status) ? driver.driver_status : 'offline',
            plate: driver.vehicle_plate || driver.plate || ''
        }))
        .filter(driver => Number.isFinite(driver.lat) && Number.isFinite(driver.lng));

    const DRIVERS = TEST_DRIVERS.length ? TEST_DRIVERS : fallbackDrivers;

    const STATUS_COLOR = { online: '#22c55e', busy: '#fbbf24', offline: '#6b7280' };
    const STATUS_LABEL = { online: 'آنلاین', busy: 'مشغول', offline: 'آفلاین' };
    const DRIVER_SOURCE_ID = 'test-drivers';
    const DRIVER_LAYER_HALO_ID = 'drivers-halo';
    const DRIVER_LAYER_DOT_ID = 'drivers-dot';
    const DRIVER_LAYER_LABEL_ID = 'drivers-label';

    let driversLibMap;

    async function loadExternalScript(src) {
        return new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = src;
            script.async = true;
            script.onload = () => resolve(src);
            script.onerror = () => reject(new Error('Failed to load: ' + src));
            document.head.appendChild(script);
        });
    }

    function withTimeout(promise, ms, label) {
        return Promise.race([
            promise,
            new Promise((_, reject) => setTimeout(() => reject(new Error(label + ' timeout after ' + ms + 'ms')), ms))
        ]);
    }

    async function ensureGeoboxLoaded() {
        const geoboxCandidates = [
            '{{ asset('assets/vendor/geobox/geobox.min.js') }}'
        ];
        const geoboxGlCandidates = [
            '{{ asset('assets/vendor/geobox/geobox-gl.min.js') }}'
        ];

        const hasGeoboxGl = () => !!(window.geoboxgl || window.GeoboxGL || window.GeoboxGl);

        if (!window.Geobox) {
            let loaded = false;
            for (const src of geoboxCandidates) {
                try {
                    await loadExternalScript(src);
                    if (window.Geobox) {
                        loaded = true;
                        break;
                    }
                } catch (_) {}
            }
            if (!loaded) throw new Error('Geobox library failed to load from known URLs.');
        }

        if (!hasGeoboxGl()) {
            let loaded = false;
            for (const src of geoboxGlCandidates) {
                try {
                    await loadExternalScript(src);
                    if (hasGeoboxGl()) {
                        loaded = true;
                        break;
                    }
                } catch (_) {}
            }
            if (!loaded) throw new Error('geoboxgl library failed to load.');
        }

        if (!window.geoboxgl) {
            window.geoboxgl = window.GeoboxGL || window.GeoboxGl;
        }
    }

    async function initDriversMap() {
        const server = new Geobox.Server({ origin: ORIGIN });
        server.apikey = APIKEY;

        const dMap = new geoboxgl.Map('driversMap', server);
        const mapObj = await server.getMap(MAP_ID);
        await dMap.openMap(mapObj);

        driversLibMap = dMap.LibreMap;
        await new Promise(resolve => driversLibMap.isStyleLoaded() ? resolve() : driversLibMap.once('load', resolve));

        function buildDriversGeoJson() {
            return {
                type: 'FeatureCollection',
                features: DRIVERS.map(driver => ({
                    type: 'Feature',
                    geometry: { type: 'Point', coordinates: [driver.lng, driver.lat] },
                    properties: {
                        id: driver.id,
                        name: driver.name,
                        phone: driver.phone,
                        plate: driver.plate,
                        status: driver.status,
                        color: STATUS_COLOR[driver.status] || '#6b7280',
                        initials: (driver.name || '؟').charAt(0)
                    }
                }))
            };
        }

        function ensureDriversVisualization() {
            const geojson = buildDriversGeoJson();
            const existingSource = driversLibMap.getSource(DRIVER_SOURCE_ID);

            if (!existingSource) {
                driversLibMap.addSource(DRIVER_SOURCE_ID, { type: 'geojson', data: geojson });
            } else if (typeof existingSource.setData === 'function') {
                existingSource.setData(geojson);
            }

            if (!driversLibMap.getLayer(DRIVER_LAYER_HALO_ID)) {
                driversLibMap.addLayer({
                    id: DRIVER_LAYER_HALO_ID,
                    type: 'circle',
                    source: DRIVER_SOURCE_ID,
                    paint: { 'circle-radius': 18, 'circle-color': ['get', 'color'], 'circle-opacity': 0.22 }
                });
            }

            if (!driversLibMap.getLayer(DRIVER_LAYER_DOT_ID)) {
                driversLibMap.addLayer({
                    id: DRIVER_LAYER_DOT_ID,
                    type: 'circle',
                    source: DRIVER_SOURCE_ID,
                    paint: {
                        'circle-radius': 11,
                        'circle-color': ['get', 'color'],
                        'circle-stroke-width': 2.5,
                        'circle-stroke-color': '#ffffff'
                    }
                });
            }

            if (!driversLibMap.getLayer(DRIVER_LAYER_LABEL_ID)) {
                driversLibMap.addLayer({
                    id: DRIVER_LAYER_LABEL_ID,
                    type: 'symbol',
                    source: DRIVER_SOURCE_ID,
                    layout: {
                        'text-field': ['get', 'initials'],
                        'text-size': 12,
                        'text-anchor': 'center'
                    },
                    paint: {
                        'text-color': '#ffffff',
                        'text-halo-color': 'rgba(0,0,0,0.3)',
                        'text-halo-width': 1
                    }
                });
            }
        }

        ensureDriversVisualization();
        driversLibMap.on('styledata', () => {
            if (driversLibMap.isStyleLoaded()) {
                ensureDriversVisualization();
            }
        });

        driversLibMap.on('mouseenter', DRIVER_LAYER_DOT_ID, () => driversLibMap.getCanvas().style.cursor = 'pointer');
        driversLibMap.on('mouseleave', DRIVER_LAYER_DOT_ID, () => driversLibMap.getCanvas().style.cursor = '');

        driversLibMap.on('click', DRIVER_LAYER_DOT_ID, function(event) {
            const properties = event.features[0].properties;
            const point = driversLibMap.project(event.features[0].geometry.coordinates);
            const mapElement = document.getElementById('driversMap');
            const popupElement = document.getElementById('driverPopup');
            const badgeClass = { online: 'badge-online', busy: 'badge-busy', offline: 'badge-offline' };

            document.getElementById('driverPopupInner').innerHTML = `
                <div style="display:flex;align-items:center;gap:10px;margin-bottom:8px;">
                    <div style="
                        width:38px;height:38px;border-radius:50%;
                        background:${properties.color};color:#fff;
                        display:flex;align-items:center;justify-content:center;
                        font-weight:bold;font-size:16px;flex-shrink:0;
                    ">${properties.initials}</div>
                    <div>
                        <strong>${properties.name}</strong><br>
                        <span class="driver-badge ${badgeClass[properties.status] || 'badge-offline'}">${STATUS_LABEL[properties.status] || 'نامشخص'}</span>
                    </div>
                </div>
                <div style="margin-bottom:4px;">📞 ${properties.phone}</div>
                ${properties.plate ? `<div>🚛 ${properties.plate}</div>` : ''}
            `;

            const popupWidth = 240;
            const popupHeight = 150;
            let left = point.x + 14;
            let top = point.y - 70;

            if (left + popupWidth > mapElement.offsetWidth) left = point.x - popupWidth - 14;
            if (top < 0) top = point.y + 20;
            if (top + popupHeight > mapElement.offsetHeight) top = mapElement.offsetHeight - popupHeight - 8;

            popupElement.style.left = left + 'px';
            popupElement.style.top = top + 'px';
            popupElement.style.display = 'block';
        });

        driversLibMap.on('movestart', closePopup);

        const lats = DRIVERS.map(driver => Number(driver.lat)).filter(Number.isFinite);
        const lngs = DRIVERS.map(driver => Number(driver.lng)).filter(Number.isFinite);

        if (lats.length && lngs.length) {
            driversLibMap.fitBounds(
                [
                    [Math.min(...lngs), Math.min(...lats)],
                    [Math.max(...lngs), Math.max(...lats)]
                ],
                { padding: 70, maxZoom: 13 }
            );
        } else {
            // Fallback to Tehran extent if no valid points are available.
            driversLibMap.fitBounds(
                [[51.27, 35.64], [51.50, 35.80]],
                { padding: 50, maxZoom: 12 }
            );
        }

        document.getElementById('mapLoadingOverlay').style.display = 'none';
    }

    function closePopup() {
        document.getElementById('driverPopup').style.display = 'none';
    }

    async function bootstrapDriversMap() {
        try {
            await withTimeout(ensureGeoboxLoaded(), 20000, 'library load');
            await withTimeout(initDriversMap(), 30000, 'drivers map init');
        } catch (error) {
            console.error('Drivers map bootstrap failed:', error);
            const overlay = document.getElementById('mapLoadingOverlay');
            overlay.innerHTML = `
                <div class="text-center text-danger p-4">
                    <div style="font-weight:bold;">خطا در بارگذاری نقشه رانندگان</div>
                    <small class="text-muted">${error.message || ''}</small>
                </div>
            `;
        }
    }

    $(document).ready(function() {
        bootstrapDriversMap();
    });
</script>
@endpush