@extends('layouts.app')

@section('title', 'Carte - Itinéraires')

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.css" />
<style>
    :root {
        --driver-primary: #10b981;
        --driver-secondary: #059669;
    }

    /* Fix z-index hierarchy - navigation must be on top */
    nav, .nav-container {
        z-index: 9999 !important;
    }

    body {
        overflow: hidden;
    }

    .map-container {
        position: fixed;
        inset: 0;
        top: 48px; /* Space for main nav */
        z-index: 1;
    }
    
    @media (min-width: 640px) {
        .map-container {
            top: 64px;
        }
    }

    #map {
        width: 100%;
        height: 100%;
    }

    .map-header {
        position: fixed;
        top: 48px;
        left: 0;
        right: 0;
        z-index: 40; /* Below main nav */
        background: white;
        padding: 1rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    
    @media (min-width: 640px) {
        .map-header {
            top: 64px;
        }
    }

    .map-header .back-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #f3f4f6;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        cursor: pointer;
    }

    .map-header h5 {
        margin: 0;
        flex: 1;
    }

    .optimize-btn {
        background: var(--driver-primary);
        color: white;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: 50px;
        font-weight: 500;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .optimize-btn:disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }

    .route-info-panel {
        position: fixed;
        bottom: 70px;
        left: 1rem;
        right: 1rem;
        z-index: 40; /* Below main nav */
        background: white;
        border-radius: 16px;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
        max-height: 40vh;
        overflow-y: auto;
    }

    .route-summary {
        display: flex;
        justify-content: space-around;
        padding: 1rem;
        border-bottom: 1px solid #e5e7eb;
    }

    .route-stat {
        text-align: center;
    }

    .route-stat .value {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--driver-primary);
    }

    .route-stat .label {
        font-size: 0.75rem;
        color: #6b7280;
    }

    .waypoint-list {
        padding: 0.5rem;
    }

    .waypoint-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem;
        border-radius: 12px;
        transition: background 0.2s;
    }

    .waypoint-item:hover {
        background: #f9fafb;
    }

    .waypoint-number {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.8rem;
    }

    .waypoint-number.pickup {
        background: var(--driver-primary);
        color: white;
    }

    .waypoint-number.delivery {
        background: #ef4444;
        color: white;
    }

    .waypoint-info {
        flex: 1;
    }

    .waypoint-info .name {
        font-weight: 500;
        margin-bottom: 0.125rem;
    }

    .waypoint-info .address {
        font-size: 0.75rem;
        color: #6b7280;
    }

    .waypoint-action {
        padding: 0.5rem;
        background: #f3f4f6;
        border-radius: 8px;
        border: none;
        cursor: pointer;
    }

    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        background: white;
        border-top: 1px solid #e5e7eb;
        padding: 0.5rem;
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
        z-index: 45; /* Below main nav */
    }

    .bottom-nav a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.5rem;
        color: #9ca3af;
        text-decoration: none;
        font-size: 0.7rem;
        transition: color 0.2s;
    }

    .bottom-nav a.active {
        color: var(--driver-primary);
    }

    .bottom-nav a .icon {
        font-size: 1.25rem;
        margin-bottom: 0.25rem;
    }

    .driver-marker {
        background: var(--driver-primary);
        border: 3px solid white;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }

    .leaflet-routing-container {
        display: none !important;
    }

    .empty-map-state {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 30;
        background: white;
        padding: 2rem;
        border-radius: 16px;
        text-align: center;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    }

    .empty-map-state .icon {
        font-size: 3rem;
        margin-bottom: 1rem;
    }

    .recenter-btn {
        position: fixed;
        bottom: 200px;
        right: 1rem;
        z-index: 35;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: white;
        border: none;
        box-shadow: 0 2px 10px rgba(0,0,0,0.15);
        font-size: 1.5rem;
        cursor: pointer;
    }

    @keyframes pulse-marker {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.2); }
    }
</style>
@endpush

@section('content')
{{-- Section d'aide --}}
<div class="px-4 pt-4 pb-2">
    <x-help-section page="driver.map" />
</div>

<!-- Header -->
<div class="map-header">
    <a href="{{ route('driver.dashboard') }}" class="back-btn">←</a>
    <h5>🗺️ Mes itinéraires</h5>
    @if($activeOrders->count() > 0)
    <button class="optimize-btn" onclick="optimizeRoute()" id="optimizeBtn">
        <span>⚡</span>
        <span>Optimiser</span>
    </button>
    @endif
</div>

<!-- Map -->
<div class="map-container">
    <div id="map"></div>
</div>

<!-- Recenter button -->
<button class="recenter-btn" onclick="recenterMap()">📍</button>

@if($activeOrders->count() === 0)
<!-- Empty state -->
<div class="empty-map-state">
    <div class="icon">📍</div>
    <h5>Aucune livraison en cours</h5>
    <p class="text-muted">Acceptez des commandes pour voir votre itinéraire</p>
    <a href="{{ route('driver.dashboard') }}" class="btn btn-success mt-3">
        Voir les commandes
    </a>
</div>
@else
<!-- Route info panel -->
<div class="route-info-panel">
    <div class="route-summary">
        <div class="route-stat">
            <div class="value" id="totalDistance">-</div>
            <div class="label">km total</div>
        </div>
        <div class="route-stat">
            <div class="value" id="totalTime">-</div>
            <div class="label">min estimées</div>
        </div>
        <div class="route-stat">
            <div class="value">{{ $activeOrders->count() }}</div>
            <div class="label">livraisons</div>
        </div>
    </div>

    <div class="waypoint-list" id="waypointList">
        @php $waypointNumber = 1; @endphp
        @foreach($waypoints as $wp)
        <div class="waypoint-item" data-lat="{{ $wp['lat'] }}" data-lng="{{ $wp['lng'] }}">
            <div class="waypoint-number {{ $wp['type'] }}">{{ $waypointNumber++ }}</div>
            <div class="waypoint-info">
                <div class="name">
                    @if($wp['type'] === 'pickup')
                        📦 {{ $wp['name'] }}
                    @else
                        🏠 {{ $wp['name'] }}
                    @endif
                </div>
                <div class="address">{{ Str::limit($wp['address'], 40) }}</div>
            </div>
            <button class="waypoint-action" onclick="navigateTo({{ $wp['lat'] }}, {{ $wp['lng'] }})">
                🧭
            </button>
        </div>
        @endforeach
    </div>
</div>
@endif

<!-- Bottom Navigation -->
<div class="bottom-nav">
    <a href="{{ route('driver.dashboard') }}">
        <span class="icon">🏠</span>
        Dashboard
    </a>
    <a href="{{ route('driver.map') }}" class="active">
        <span class="icon">🗺️</span>
        Carte
    </a>
    <a href="{{ route('driver.deliveries') }}">
        <span class="icon">📦</span>
        Historique
    </a>
    <a href="{{ route('driver.pricing') }}">
        <span class="icon">💰</span>
        Tarifs
    </a>
    <a href="{{ route('driver.stats') }}">
        <span class="icon">📊</span>
        Stats
    </a>
</div>
@endsection

@push('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.min.js"></script>
<script>
const csrfToken = '{{ csrf_token() }}';
let map;
let driverMarker;
let routingControl;
let markers = [];

// Waypoints data from PHP
const waypoints = @json($waypoints);
const driverLocation = {
    lat: {{ $driver->current_lat ?? 48.8566 }},
    lng: {{ $driver->current_lng ?? 2.3522 }}
};

// Initialize map
function initMap() {
    map = L.map('map', {
        zoomControl: false
    }).setView([driverLocation.lat, driverLocation.lng], 14);

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

    // Add zoom control to bottom left
    L.control.zoom({ position: 'bottomleft' }).addTo(map);

    // Driver marker
    const driverIcon = L.divIcon({
        className: 'driver-marker',
        iconSize: [20, 20],
        iconAnchor: [10, 10]
    });

    driverMarker = L.marker([driverLocation.lat, driverLocation.lng], {
        icon: driverIcon,
        zIndexOffset: 1000
    }).addTo(map).bindPopup('Ma position');

    // Add waypoint markers
    if (waypoints.length > 0) {
        addWaypointMarkers();
        drawRoute();
    }

    // Start tracking location
    startLocationTracking();
}

// Add markers for each waypoint
function addWaypointMarkers() {
    waypoints.forEach((wp, index) => {
        const color = wp.type === 'pickup' ? '#10b981' : '#ef4444';
        const icon = L.divIcon({
            className: 'custom-marker',
            html: `<div style="
                background: ${color};
                color: white;
                width: 30px;
                height: 30px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: bold;
                border: 3px solid white;
                box-shadow: 0 2px 10px rgba(0,0,0,0.3);
            ">${index + 1}</div>`,
            iconSize: [30, 30],
            iconAnchor: [15, 15]
        });

        const marker = L.marker([wp.lat, wp.lng], { icon })
            .addTo(map)
            .bindPopup(`
                <b>${wp.type === 'pickup' ? '📦 Récupérer' : '🏠 Livrer'}</b><br>
                ${wp.name}<br>
                <small>${wp.address}</small><br>
                <button onclick="navigateTo(${wp.lat}, ${wp.lng})" 
                    style="margin-top:8px;padding:4px 12px;background:#10b981;color:white;border:none;border-radius:20px;cursor:pointer">
                    🧭 Y aller
                </button>
            `);

        markers.push(marker);
    });

    // Fit map to show all markers
    if (markers.length > 0) {
        const group = new L.featureGroup([driverMarker, ...markers]);
        map.fitBounds(group.getBounds().pad(0.1));
    }
}

// Draw route between waypoints
function drawRoute() {
    const routePoints = [
        L.latLng(driverLocation.lat, driverLocation.lng),
        ...waypoints.map(wp => L.latLng(wp.lat, wp.lng))
    ];

    if (routingControl) {
        map.removeControl(routingControl);
    }

    routingControl = L.Routing.control({
        waypoints: routePoints,
        routeWhileDragging: false,
        addWaypoints: false,
        show: false,
        createMarker: () => null, // Don't create default markers
        lineOptions: {
            styles: [
                { color: '#10b981', weight: 5, opacity: 0.8 }
            ]
        }
    }).on('routesfound', function(e) {
        const route = e.routes[0];
        const distance = (route.summary.totalDistance / 1000).toFixed(1);
        const time = Math.round(route.summary.totalTime / 60);

        document.getElementById('totalDistance').textContent = distance;
        document.getElementById('totalTime').textContent = time;
    }).addTo(map);
}

// Optimize route using API
async function optimizeRoute() {
    const btn = document.getElementById('optimizeBtn');
    btn.disabled = true;
    btn.innerHTML = '<span>⏳</span><span>Calcul...</span>';

    try {
        const response = await fetch('{{ route("driver.optimize-route") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken
            },
            body: JSON.stringify({ waypoints })
        });

        const data = await response.json();
        
        if (data.success && data.route) {
            // Update route on map with optimized path
            if (data.route.features && data.route.features[0]) {
                const coords = data.route.features[0].geometry.coordinates;
                const latLngs = coords.map(c => L.latLng(c[1], c[0]));
                
                // Draw optimized route
                L.polyline(latLngs, {
                    color: '#3b82f6',
                    weight: 6,
                    opacity: 0.9
                }).addTo(map);

                // Update stats
                const distance = (data.distance / 1000).toFixed(1);
                const time = Math.round(data.duration / 60);
                document.getElementById('totalDistance').textContent = distance;
                document.getElementById('totalTime').textContent = time;
            }
        }
    } catch (error) {
        console.error('Optimization error:', error);
        alert('Erreur lors de l\'optimisation');
    } finally {
        btn.disabled = false;
        btn.innerHTML = '<span>⚡</span><span>Optimiser</span>';
    }
}

// Navigate to a location
function navigateTo(lat, lng) {
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
    const url = isIOS 
        ? `maps://maps.apple.com/?daddr=${lat},${lng}`
        : `https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}&travelmode=driving`;
    window.open(url, '_blank');
}

// Recenter map on driver
function recenterMap() {
    if (driverMarker) {
        map.setView(driverMarker.getLatLng(), 15);
    }
}

// Track driver location
function startLocationTracking() {
    if ('geolocation' in navigator) {
        navigator.geolocation.watchPosition(
            (position) => {
                const { latitude, longitude } = position.coords;
                
                // Update driver marker
                driverMarker.setLatLng([latitude, longitude]);
                
                // Send to server
                fetch('{{ route("driver.update-location") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken
                    },
                    body: JSON.stringify({ lat: latitude, lng: longitude })
                }).catch(console.error);
            },
            (error) => console.error('GPS Error:', error),
            { enableHighAccuracy: true, timeout: 10000, maximumAge: 5000 }
        );
    }
}

// Initialize
document.addEventListener('DOMContentLoaded', initMap);
</script>
@endpush