{{-- resources/views/components/mobile-bottom-nav.blade.php --}}
@php
use Illuminate\Support\Facades\Route;

$user = auth()->user();
$homeRoute = Route::has('home') ? route('home') : url('/');
$servicesRoute = Route::has('services.index') ? route('services.index') : null;
$equipmentRoute = Route::has('equipment.index') ? route('equipment.index') : null;
$videosFeedRoute = Route::has('videos.feed') ? route('videos.feed') : null;

// Messagerie - détermine l'endpoint basé sur le rôle
$messagingRoute = null;
if ($user) {
    if ($user->hasRole('client') && Route::has('client.messaging.index')) {
        $messagingRoute = route('client.messaging.index');
    } elseif ($user->hasRole('prestataire') && Route::has('prestataire.prestataire.messages.index')) {
        $messagingRoute = route('prestataire.prestataire.messages.index');
    }
}

$prestataireAgendaRoute = null;
$prestataireVideosManage = null;
if ($user && $user->hasRole('prestataire')) {
    if (Route::has('prestataire.agenda.index')) {
        $prestataireAgendaRoute = route('prestataire.agenda.index');
    }
    if (Route::has('prestataire.videos.manage')) {
        $prestataireVideosManage = route('prestataire.videos.manage');
    }
}

$unreadMessagesCount = 0;
if ($user && method_exists($user, 'receivedMessages')) {
    try {
        $unreadMessagesCount = $user->receivedMessages()->whereNull('read_at')->count();
    } catch (\Throwable $e) {
        $unreadMessagesCount = 0;
    }
}

$currentRoute = request()->route()?->getName() ?? '';
@endphp

<!-- Bottom Navigation Mobile - Only on mobile -->
<nav class="sm:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-slate-200 z-40 backdrop-filter backdrop-blur-md bg-opacity-95" style="padding-bottom: env(safe-area-inset-bottom);">
    <div class="flex justify-around items-center h-16 px-2">
        <!-- Home -->
        <a href="{{ $homeRoute }}"
            class="flex flex-col items-center justify-center flex-1 h-full py-2 rounded-lg transition-all duration-200 {{ request()->routeIs('home') ? 'text-blue-600 bg-blue-50' : 'text-slate-600 hover:text-blue-600' }}">
            <svg class="w-6 h-6" fill="{{ request()->routeIs('home') ? 'currentColor' : 'none' }}" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-3m0 0l7-4 7 4M5 7v10a1 1 0 001 1h5v-5h2v5h5a1 1 0 001-1V7M9 9h6m-6 4h6"></path>
            </svg>
            <span class="text-xs mt-1 font-medium">Accueil</span>
        </a>

        <!-- Services -->
        @if($servicesRoute)
        <a href="{{ $servicesRoute }}"
            class="flex flex-col items-center justify-center flex-1 h-full py-2 rounded-lg transition-all duration-200 {{ request()->routeIs('services.*') ? 'text-blue-600 bg-blue-50' : 'text-slate-600 hover:text-blue-600' }}">
            <svg class="w-6 h-6" fill="{{ request()->routeIs('services.*') ? 'currentColor' : 'none' }}" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15a23.931 23.931 0 01-9-1.745M12 3v12m9-8a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <span class="text-xs mt-1 font-medium">Services</span>
        </a>
        @endif

        <!-- Videos -->
        @if($videosFeedRoute)
        <a href="{{ $videosFeedRoute }}"
            class="flex flex-col items-center justify-center flex-1 h-full py-2 rounded-lg transition-all duration-200 {{ request()->routeIs('videos.feed') ? 'text-purple-600 bg-purple-50' : 'text-slate-600 hover:text-purple-600' }}">
            <svg class="w-6 h-6" fill="{{ request()->routeIs('videos.feed') ? 'currentColor' : 'none' }}" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
            </svg>
            <span class="text-xs mt-1 font-medium">Vidéos</span>
        </a>
        @endif

        <!-- Messages -->
        @if($messagingRoute && $user)
        <a href="{{ $messagingRoute }}"
            class="flex flex-col items-center justify-center flex-1 h-full py-2 rounded-lg transition-all duration-200 relative {{ request()->routeIs('client.messaging.*', 'prestataire.*.messages.*') ? 'text-green-600 bg-green-50' : 'text-slate-600 hover:text-green-600' }}">
            <svg class="w-6 h-6" fill="{{ request()->routeIs('client.messaging.*', 'prestataire.*.messages.*') ? 'currentColor' : 'none' }}" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
            </svg>
            @if($unreadMessagesCount > 0)
            <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-bold">
                {{ $unreadMessagesCount > 99 ? '99+' : $unreadMessagesCount }}
            </span>
            @endif
            <span class="text-xs mt-1 font-medium">Messages</span>
        </a>
        @endif

        <!-- Prestataire Agenda -->
        @if($user && $user->hasRole('prestataire') && $prestataireAgendaRoute)
        <a href="{{ $prestataireAgendaRoute }}"
            class="flex flex-col items-center justify-center flex-1 h-full py-2 rounded-lg transition-all duration-200 {{ request()->routeIs('prestataire.agenda*') ? 'text-orange-600 bg-orange-50' : 'text-slate-600 hover:text-orange-600' }}">
            <svg class="w-6 h-6" fill="{{ request()->routeIs('prestataire.agenda*') ? 'currentColor' : 'none' }}" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
            </svg>
            <span class="text-xs mt-1 font-medium">Agenda</span>
        </a>
        @endif

        <!-- Prestataire Videos -->
        @if($user && $user->hasRole('prestataire') && $prestataireVideosManage)
        <a href="{{ $prestataireVideosManage }}"
            class="flex flex-col items-center justify-center flex-1 h-full py-2 rounded-lg transition-all duration-200 {{ request()->routeIs('prestataire.videos*') ? 'text-red-600 bg-red-50' : 'text-slate-600 hover:text-red-600' }}">
            <svg class="w-6 h-6" fill="{{ request()->routeIs('prestataire.videos*') ? 'currentColor' : 'none' }}" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.172l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"></path>
            </svg>
            <span class="text-xs mt-1 font-medium">Vidéos</span>
        </a>
        @endif

        <!-- User Menu -->
        @if($user)
        <div x-data="{ open: false }" class="flex flex-col items-center justify-center flex-1 h-full py-2 rounded-lg relative">
            <button @click="open = !open" 
                class="flex flex-col items-center justify-center w-full h-full text-slate-600 hover:text-blue-600 transition-all duration-200">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 12a3 3 0 100-6 3 3 0 000 6z"></path>
                    <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18a8 8 0 100-16 8 8 0 000 16zm0-12a2 2 0 100 4 2 2 0 000-4z"></path>
                </svg>
                <span class="text-xs mt-1 font-medium">Compte</span>
            </button>

            <!-- Dropdown menu -->
            <div x-show="open" @click.outside="open = false"
                x-transition
                class="absolute bottom-full mb-2 w-48 bg-white rounded-lg shadow-2xl border border-slate-200 py-2 z-50">
                
                @if($user->hasRole('client'))
                    <a href="{{ route('client.profile.edit') }}" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">Profil</a>
                    <a href="{{ route('client.bookings.index') }}" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">Mes Réservations</a>
                    <a href="{{ route('client.favorites') }}" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">Favoris</a>
                @elseif($user->hasRole('prestataire'))
                    <a href="{{ route('prestataire.profile.edit') }}" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">Profil</a>
                    <a href="{{ route('prestataire.dashboard') }}" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">Tableau de bord</a>
                    <a href="{{ route('prestataire.services.index') }}" class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50">Mes Services</a>
                @endif

                <hr class="my-1 border-slate-200">
                
                <form method="POST" action="{{ route('logout') }}" class="px-4 py-2">
                    @csrf
                    <button type="submit" class="w-full text-left text-sm text-red-600 hover:text-red-700">
                        Déconnexion
                    </button>
                </form>
            </div>
        </div>
        @else
        <!-- Login/Register for non-authenticated users -->
        <a href="{{ route('login') }}"
            class="flex flex-col items-center justify-center flex-1 h-full py-2 rounded-lg transition-all duration-200 text-slate-600 hover:text-blue-600">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path>
            </svg>
            <span class="text-xs mt-1 font-medium">Connexion</span>
        </a>
        @endif
    </div>
</nav>

<style>
    @media (max-width: 640px) {
        /* Adjust bottom padding for main content */
        main {
            padding-bottom: calc(64px + env(safe-area-inset-bottom));
        }

        /* Smooth icon transitions */
        nav a, nav button {
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        nav a:active, nav button:active {
            transform: scale(0.95);
        }

        /* Better badge positioning */
        nav a .absolute {
            right: 4px;
            top: -4px;
        }
    }
</style>