@extends('layouts.app')

@section('title', 'Suivi - Commande #' . $foodOrder->order_number)

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>
    .pulse-ring {
        animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    }
    @keyframes pulse-ring {
        0% { transform: scale(0.9); opacity: 1; }
        50% { transform: scale(1.1); opacity: 0.5; }
        100% { transform: scale(0.9); opacity: 1; }
    }
    .bounce-icon {
        animation: bounce 2s ease-in-out infinite;
    }
    @keyframes bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    .shimmer {
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
        background-size: 200% 100%;
        animation: shimmer 2s infinite;
    }
    @keyframes shimmer {
        0% { background-position: -200% 0; }
        100% { background-position: 200% 0; }
    }
    .status-glow {
        box-shadow: 0 0 40px rgba(249, 115, 22, 0.3);
    }
    .glass-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
    }
    #trackingMap {
        height: 200px;
        border-radius: 0;
    }
    .live-indicator {
        animation: blink 1.5s ease-in-out infinite;
    }
    @keyframes blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.3; }
    }
</style>
@endpush

@section('content')
<div class="min-h-screen bg-gradient-to-br from-orange-50 via-amber-50 to-yellow-50">
    <div class="container mx-auto px-4 py-6">
        
        {{-- Header avec retour --}}
        <div class="flex items-center justify-between mb-6">
            <a href="{{ route('food.orders.show', $foodOrder) }}" 
               class="flex items-center gap-2 text-gray-600 hover:text-orange-600 transition">
                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
                <span class="font-medium">Retour</span>
            </a>
            <div class="flex items-center gap-2 text-sm text-gray-500">
                <span class="w-2 h-2 bg-green-500 rounded-full live-indicator"></span>
                <span>Suivi en direct</span>
            </div>
        </div>

        <div class="max-w-lg mx-auto">
            
            {{-- Carte de statut principal --}}
            @php
                $statusConfig = [
                    'pending' => [
                        'gradient' => 'from-amber-400 to-orange-500',
                        'icon' => '⏳',
                        'title' => 'En attente',
                        'message' => 'Le prestataire va bientôt confirmer votre commande',
                        'emoji' => '🔔'
                    ],
                    'accepted' => [
                        'gradient' => 'from-blue-400 to-indigo-500',
                        'icon' => '✅',
                        'title' => 'Acceptée !',
                        'message' => 'Votre commande a été acceptée et va être préparée',
                        'emoji' => '👍'
                    ],
                    'preparing' => [
                        'gradient' => 'from-purple-400 to-pink-500',
                        'icon' => '👨‍🍳',
                        'title' => 'En préparation',
                        'message' => 'Le chef prépare votre commande avec soin',
                        'emoji' => '🍳'
                    ],
                    'ready' => [
                        'gradient' => 'from-green-400 to-emerald-500',
                        'icon' => $foodOrder->delivery_type === 'pickup' ? '🎉' : '🚚',
                        'title' => $foodOrder->delivery_type === 'pickup' ? 'Prête !' : 'En route !',
                        'message' => $foodOrder->delivery_type === 'pickup' 
                            ? 'Votre commande vous attend ! Venez la récupérer' 
                            : 'Votre commande est en cours de livraison',
                        'emoji' => $foodOrder->delivery_type === 'pickup' ? '📍' : '🏃'
                    ],
                    'delivered' => [
                        'gradient' => 'from-green-500 to-teal-500',
                        'icon' => '📦',
                        'title' => 'Livrée',
                        'message' => 'Votre commande a été livrée. Bon appétit !',
                        'emoji' => '🍽️'
                    ],
                    'completed' => [
                        'gradient' => 'from-green-500 to-emerald-600',
                        'icon' => '⭐',
                        'title' => 'Terminée',
                        'message' => 'Merci pour votre commande !',
                        'emoji' => '💚'
                    ],
                    'cancelled' => [
                        'gradient' => 'from-red-400 to-rose-500',
                        'icon' => '❌',
                        'title' => 'Annulée',
                        'message' => 'Cette commande a été annulée',
                        'emoji' => '😔'
                    ],
                    'rejected' => [
                        'gradient' => 'from-red-400 to-rose-500',
                        'icon' => '❌',
                        'title' => 'Refusée',
                        'message' => 'Cette commande a été refusée par le prestataire',
                        'emoji' => '😔'
                    ],
                ];
                $config = $statusConfig[$foodOrder->status] ?? $statusConfig['pending'];
            @endphp

            <div class="glass-card rounded-3xl shadow-2xl overflow-hidden mb-6 status-glow" id="statusCard">
                {{-- Header animé --}}
                <div class="bg-gradient-to-r {{ $config['gradient'] }} p-8 text-white text-center relative overflow-hidden">
                    <div class="absolute inset-0 shimmer opacity-30"></div>
                    
                    {{-- Icône principale --}}
                    <div class="relative z-10">
                        <div class="w-24 h-24 mx-auto bg-white/20 rounded-full flex items-center justify-center mb-4 pulse-ring">
                            <span class="text-5xl bounce-icon">{{ $config['icon'] }}</span>
                        </div>
                        
                        <h2 class="text-3xl font-bold mb-2" id="statusTitle">{{ $config['title'] }}</h2>
                        <p class="text-white/90 text-lg" id="statusMessage">{{ $config['message'] }}</p>
                        
                        {{-- Numéro de commande --}}
                        <div class="mt-4 inline-flex items-center gap-2 bg-white/20 px-4 py-2 rounded-full">
                            <span class="text-sm font-medium">Commande</span>
                            <span class="font-bold">#{{ $foodOrder->order_number }}</span>
                        </div>
                    </div>
                </div>

                {{-- Temps estimé --}}
                @if(!in_array($foodOrder->status, ['cancelled', 'rejected', 'completed', 'delivered']))
                    <div class="bg-orange-50 border-b border-orange-100 p-4">
                        <div class="flex items-center justify-center gap-3">
                            <span class="text-2xl">⏱️</span>
                            <div class="text-center">
                                <p class="text-sm text-gray-600">Temps estimé</p>
                                <p class="text-xl font-bold text-orange-600" id="estimatedTime">
                                    @if($foodOrder->status === 'pending')
                                        En attente de confirmation
                                    @elseif($foodOrder->status === 'accepted' || $foodOrder->status === 'preparing')
                                        {{ $foodOrder->prestataire->food_estimated_prep_time ?? 30 }} min
                                    @elseif($foodOrder->status === 'ready')
                                        {{ $foodOrder->delivery_type === 'pickup' ? 'Prête à récupérer' : '10-15 min' }}
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>
                @endif

                {{-- Timeline de progression --}}
                <div class="p-6">
                    <h3 class="font-bold text-gray-800 mb-6 flex items-center gap-2">
                        <span>📋</span> Progression
                    </h3>
                    
                    @php
                        $steps = [
                            ['key' => 'created', 'label' => 'Commande passée', 'time' => $foodOrder->created_at, 'icon' => '🛒', 'completed' => true],
                            ['key' => 'accepted', 'label' => 'Acceptée', 'time' => $foodOrder->accepted_at, 'icon' => '✓', 'completed' => $foodOrder->accepted_at !== null],
                            ['key' => 'preparing', 'label' => 'En préparation', 'time' => $foodOrder->preparing_at, 'icon' => '👨‍🍳', 'completed' => $foodOrder->preparing_at !== null],
                            ['key' => 'ready', 'label' => 'Prête', 'time' => $foodOrder->ready_at, 'icon' => '✨', 'completed' => $foodOrder->ready_at !== null],
                            ['key' => 'delivered', 'label' => $foodOrder->delivery_type === 'pickup' ? 'Récupérée' : 'Livrée', 'time' => $foodOrder->delivered_at, 'icon' => '🎉', 'completed' => $foodOrder->delivered_at !== null],
                        ];
                        
                        // Trouver l'étape active
                        $currentStepIndex = 0;
                        foreach($steps as $i => $step) {
                            if ($step['completed']) {
                                $currentStepIndex = $i;
                            }
                        }
                    @endphp

                    <div class="space-y-0">
                        @foreach($steps as $index => $step)
                            <div class="relative flex items-start gap-4 pb-6">
                                {{-- Ligne de connexion --}}
                                @if($index < count($steps) - 1)
                                    <div class="absolute left-5 top-12 bottom-0 w-0.5 
                                        {{ $step['completed'] && isset($steps[$index + 1]) && $steps[$index + 1]['completed'] ? 'bg-green-400' : 'bg-gray-200' }}">
                                    </div>
                                @endif
                                
                                {{-- Cercle --}}
                                <div class="relative z-10 flex-shrink-0">
                                    <div class="w-10 h-10 rounded-full flex items-center justify-center text-lg shadow-md transition-all
                                        {{ $step['completed'] 
                                            ? 'bg-gradient-to-br from-green-400 to-emerald-500 text-white' 
                                            : ($index === $currentStepIndex + 1 && !in_array($foodOrder->status, ['cancelled', 'rejected'])
                                                ? 'bg-gradient-to-br from-orange-400 to-amber-500 text-white animate-pulse' 
                                                : 'bg-gray-100 text-gray-400') }}">
                                        @if($step['completed'])
                                            <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
                                            </svg>
                                        @else
                                            {{ $step['icon'] }}
                                        @endif
                                    </div>
                                </div>
                                
                                {{-- Contenu --}}
                                <div class="flex-1 pt-1.5">
                                    <p class="font-semibold {{ $step['completed'] ? 'text-gray-900' : 'text-gray-400' }}">
                                        {{ $step['label'] }}
                                    </p>
                                    @if($step['time'])
                                        <p class="text-sm text-green-600 font-medium">
                                            {{ $step['time']->format('H:i') }} • {{ $step['time']->diffForHumans() }}
                                        </p>
                                    @elseif($index === $currentStepIndex + 1 && !in_array($foodOrder->status, ['cancelled', 'rejected']))
                                        <p class="text-sm text-orange-500 font-medium">En cours...</p>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            {{-- Carte du lieu --}}
            @if($foodOrder->delivery_type === 'pickup' && $foodOrder->prestataire->latitude && $foodOrder->prestataire->longitude)
                <div class="glass-card rounded-2xl shadow-xl overflow-hidden mb-6">
                    <div class="p-4 border-b border-gray-100 flex items-center justify-between">
                        <h3 class="font-bold text-gray-900 flex items-center gap-2">
                            <span>📍</span> Adresse de retrait
                        </h3>
                        <a href="https://www.google.com/maps/dir/?api=1&destination={{ $foodOrder->prestataire->latitude }},{{ $foodOrder->prestataire->longitude }}" 
                           target="_blank"
                           class="text-sm text-orange-600 hover:text-orange-700 font-medium flex items-center gap-1">
                            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                            </svg>
                            Itinéraire
                        </a>
                    </div>
                    <div id="trackingMap"></div>
                    <div class="p-4 bg-gray-50">
                        <p class="text-gray-700 font-medium">{{ $foodOrder->prestataire->company_name ?? $foodOrder->prestataire->business_name }}</p>
                        <p class="text-gray-500 text-sm">{{ $foodOrder->prestataire->address }}, {{ $foodOrder->prestataire->postal_code }} {{ $foodOrder->prestataire->city }}</p>
                    </div>
                </div>
            @elseif($foodOrder->delivery_type === 'delivery' && $foodOrder->delivery_lat && $foodOrder->delivery_lng)
                <div class="glass-card rounded-2xl shadow-xl overflow-hidden mb-6">
                    <div class="p-4 border-b border-gray-100 flex items-center justify-between">
                        <h3 class="font-bold text-gray-900 flex items-center gap-2">
                            <span>🏠</span> Adresse de livraison
                        </h3>
                    </div>
                    <div id="trackingMap"></div>
                    <div class="p-4 bg-gray-50">
                        <p class="text-gray-700 font-medium">{{ $foodOrder->delivery_address }}</p>
                        @if($foodOrder->delivery_floor)
                            <p class="text-gray-500 text-sm">Étage: {{ $foodOrder->delivery_floor }}</p>
                        @endif
                    </div>
                </div>
            @endif

            {{-- Infos prestataire --}}
            <div class="glass-card rounded-2xl shadow-xl p-5 mb-6">
                <h3 class="font-bold text-gray-900 mb-4 flex items-center gap-2">
                    <span>👨‍🍳</span> Votre prestataire
                </h3>
                <div class="flex items-center gap-4">
                    @if($foodOrder->prestataire->profile_image)
                        <img src="{{ asset('storage/' . $foodOrder->prestataire->profile_image) }}" 
                             class="w-16 h-16 rounded-xl object-cover shadow-lg">
                    @else
                        <div class="w-16 h-16 rounded-xl bg-gradient-to-br from-orange-100 to-amber-100 flex items-center justify-center text-3xl shadow-lg">
                            👨‍🍳
                        </div>
                    @endif
                    <div class="flex-1 min-w-0">
                        <h4 class="font-bold text-gray-900 truncate">{{ $foodOrder->prestataire->company_name ?? $foodOrder->prestataire->business_name }}</h4>
                        <p class="text-gray-500 text-sm">{{ $foodOrder->prestataire->city }}</p>
                    </div>
                </div>
                
                @if($foodOrder->prestataire->phone)
                    <a href="tel:{{ $foodOrder->prestataire->phone }}" 
                       class="mt-4 w-full flex items-center justify-center gap-2 py-3.5 bg-gradient-to-r from-green-500 to-emerald-500 text-white font-bold rounded-xl shadow-lg hover:shadow-xl transition">
                        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                        </svg>
                        Appeler le prestataire
                    </a>
                @endif
            </div>

            {{-- Résumé commande --}}
            <div class="glass-card rounded-2xl shadow-xl overflow-hidden mb-6">
                <div class="p-4 border-b border-gray-100 bg-gradient-to-r from-orange-50 to-amber-50">
                    <h3 class="font-bold text-gray-900 flex items-center gap-2">
                        <span>🛒</span> Résumé
                    </h3>
                </div>
                <div class="p-4">
                    <div class="space-y-3">
                        @foreach($foodOrder->items as $item)
                            <div class="flex justify-between items-center">
                                <div class="flex items-center gap-3">
                                    <span class="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center text-sm font-bold text-orange-600">
                                        {{ $item->quantity }}x
                                    </span>
                                    <span class="text-gray-700">{{ $item->product_name }}</span>
                                </div>
                                <span class="font-semibold text-gray-900">{{ number_format($item->total_price, 2) }} €</span>
                            </div>
                        @endforeach
                    </div>
                    
                    <div class="border-t border-gray-100 mt-4 pt-4">
                        @if($foodOrder->service_fee > 0)
                            <div class="flex justify-between text-sm text-gray-500 mb-2">
                                <span>Frais de service</span>
                                <span>{{ number_format($foodOrder->service_fee, 2) }} €</span>
                            </div>
                        @endif
                        @if($foodOrder->delivery_fee > 0)
                            <div class="flex justify-between text-sm text-gray-500 mb-2">
                                <span>Frais de livraison</span>
                                <span>{{ number_format($foodOrder->delivery_fee, 2) }} €</span>
                            </div>
                        @endif
                        <div class="flex justify-between items-center">
                            <span class="text-lg font-bold text-gray-900">Total</span>
                            <span class="text-2xl font-bold bg-gradient-to-r from-orange-500 to-amber-500 bg-clip-text text-transparent">
                                {{ number_format($foodOrder->total, 2) }} €
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Actions --}}
            <div class="space-y-3 mb-8">
                @if($foodOrder->isDelivered() && !$foodOrder->client_confirmed)
                    <form action="{{ route('food.orders.confirm', $foodOrder) }}" method="POST">
                        @csrf
                        <button type="submit" 
                                class="w-full py-4 bg-gradient-to-r from-green-500 to-emerald-500 text-white font-bold text-lg rounded-xl shadow-lg hover:shadow-xl transition flex items-center justify-center gap-2">
                            <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            Confirmer la réception
                        </button>
                    </form>
                @endif

                <a href="{{ route('food.orders.show', $foodOrder) }}" 
                   class="w-full py-4 bg-white border-2 border-gray-200 text-gray-700 font-semibold rounded-xl hover:bg-gray-50 transition flex items-center justify-center gap-2">
                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                    Voir les détails complets
                </a>

                @if($foodOrder->canBeCancelled())
                    <button onclick="document.getElementById('cancelModal').classList.remove('hidden')" 
                            class="w-full py-3 text-red-500 hover:text-red-600 font-medium transition">
                        Annuler la commande
                    </button>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- Modal annulation --}}
<div id="cancelModal" class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
    <div class="bg-white rounded-2xl shadow-2xl p-6 max-w-md w-full">
        <h3 class="font-bold text-xl text-gray-900 mb-2">Annuler la commande ?</h3>
        <p class="text-gray-500 mb-4">Cette action ne peut pas être annulée.</p>
        <form action="{{ route('food.orders.cancel', $foodOrder) }}" method="POST">
            @csrf
            <textarea name="reason" rows="3" class="w-full rounded-xl border-gray-300 focus:border-orange-500 focus:ring-orange-500 mb-4" 
                      placeholder="Raison de l'annulation (optionnel)"></textarea>
            <div class="flex gap-3">
                <button type="button" onclick="document.getElementById('cancelModal').classList.add('hidden')" 
                        class="flex-1 py-3 bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold rounded-xl transition">
                    Non, garder
                </button>
                <button type="submit" class="flex-1 py-3 bg-red-500 hover:bg-red-600 text-white font-semibold rounded-xl transition">
                    Oui, annuler
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
// Initialiser la carte si les coordonnées sont disponibles
document.addEventListener('DOMContentLoaded', function() {
    const mapContainer = document.getElementById('trackingMap');
    if (mapContainer) {
        @if($foodOrder->delivery_type === 'pickup' && $foodOrder->prestataire->latitude && $foodOrder->prestataire->longitude)
            const lat = {{ $foodOrder->prestataire->latitude }};
            const lng = {{ $foodOrder->prestataire->longitude }};
            const title = "{{ addslashes($foodOrder->prestataire->company_name ?? $foodOrder->prestataire->business_name) }}";
        @elseif($foodOrder->delivery_type === 'delivery' && $foodOrder->delivery_lat && $foodOrder->delivery_lng)
            const lat = {{ $foodOrder->delivery_lat ?? 0 }};
            const lng = {{ $foodOrder->delivery_lng ?? 0 }};
            const title = "Adresse de livraison";
        @else
            const lat = null;
            const lng = null;
            const title = "";
        @endif
        
        if (lat && lng) {
            const map = L.map('trackingMap').setView([lat, lng], 15);
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© OpenStreetMap'
            }).addTo(map);
            
            L.marker([lat, lng]).addTo(map)
                .bindPopup(title)
                .openPopup();
        }
    }
});

// Auto-refresh status toutes les 10 secondes
let lastStatus = '{{ $foodOrder->status }}';

function checkStatus() {
    fetch('{{ route('food.orders.status', $foodOrder) }}')
        .then(response => response.json())
        .then(data => {
            if (data.status !== lastStatus) {
                // Jouer un son de notification
                playNotificationSound();
                // Recharger la page pour afficher le nouveau statut
                location.reload();
            }
        })
        .catch(error => console.log('Erreur de vérification:', error));
}

function playNotificationSound() {
    try {
        const audioContext = new (window.AudioContext || window.webkitAudioContext)();
        const oscillator = audioContext.createOscillator();
        const gainNode = audioContext.createGain();
        
        oscillator.connect(gainNode);
        gainNode.connect(audioContext.destination);
        
        oscillator.frequency.value = 800;
        oscillator.type = 'sine';
        gainNode.gain.value = 0.3;
        
        oscillator.start();
        setTimeout(() => oscillator.stop(), 200);
    } catch (e) {
        console.log('Audio non supporté');
    }
}

// Vérifier le statut toutes les 10 secondes
setInterval(checkStatus, 10000);
</script>
@endpush