{{-- * Sélecteur de Magasin (Navbar) --}}
{{-- ? Affiche le magasin actuel, permet aux admins de changer de magasin --}}
{{-- ! Non-admins : affichage statique uniquement --}}

@php
    $currentStore = $activeStore ?? auth()->user()?->store;
    $userStore = auth()->user()?->store; // Peut être null pour admin
    $isAdmin = auth()->user()?->isAdmin() ?? false;
    // * Admin sans magasin d'origine : toujours en supervision si un magasin est sélectionné
    $isSupervising = $isAdmin && $currentStore && (!$userStore || $currentStore->id !== $userStore->id);
@endphp

<div x-data="storeSelectorComponent({
    currentStore: @js($currentStore),
    userStore: @js($userStore),
    isAdmin: @js($isAdmin)
})" class="relative">

    {{-- * Badge Magasin --}}
    <button
        @if($isAdmin) @click="toggleModal()" @endif
        type="button"
        :disabled="switching"
        class="flex items-center gap-2 px-3 py-2 rounded-xl transition-all duration-200 group
            @if($isAdmin)
                hover:bg-gray-100 cursor-pointer
            @else
                cursor-default
            @endif
            {{ $isSupervising ? 'bg-orange-50 border-2 border-orange-300' : 'bg-white border border-gray-200' }}"
        :class="switching ? 'opacity-50' : ''"
    >
        {{-- Icône magasin --}}
        <div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0
            {{ $isSupervising ? 'bg-orange-500' : 'bg-gradient-to-br from-boulanger-orange to-orange-600' }}">
            <i data-lucide="store" class="w-4 h-4 text-white"></i>
        </div>

        {{-- Infos magasin --}}
        <div class="text-left hidden md:block">
            <div class="flex items-center gap-1.5">
                @if($isSupervising)
                    <i data-lucide="eye" class="w-3 h-3 text-orange-600"></i>
                @endif
                <p class="text-sm font-bold text-boulanger-dark leading-none">
                    {{ $currentStore ? $currentStore->code : 'N/A' }}
                </p>
            </div>
            <p class="text-xs text-boulanger-gray leading-none mt-0.5">
                {{ $currentStore ? Str::limit($currentStore->name, 20) : 'Aucun magasin' }}
            </p>
        </div>

        {{-- Chevron si admin --}}
        @if($isAdmin)
            <i data-lucide="chevron-down"
               class="w-4 h-4 text-boulanger-gray transition-transform duration-200 ml-1"
               :class="isOpen ? 'rotate-180' : ''"></i>
        @endif

        {{-- Spinner pendant le changement --}}
        <div x-show="switching" x-cloak class="ml-2">
            <div class="w-4 h-4 border-2 border-boulanger-orange border-t-transparent rounded-full animate-spin"></div>
        </div>
    </button>

    {{-- * Badge "Mode Supervision" --}}
    @if($isSupervising)
        <button
            @click="resetStore()"
            type="button"
            class="absolute -top-2 -right-2 bg-orange-500 text-white text-[10px] font-bold px-2 py-0.5 rounded-full
                   hover:bg-orange-600 transition-colors duration-200 shadow-lg z-10"
            title="Retour à mon magasin">
            👁️ Supervision
        </button>
    @endif

    {{-- * Modal de sélection (Admin uniquement) --}}
    @if($isAdmin)
        <div
            x-show="isOpen"
            @click.away="isOpen = false"
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0 scale-95"
            x-transition:enter-end="opacity-100 scale-100"
            x-transition:leave="transition ease-in duration-150"
            x-transition:leave-start="opacity-100 scale-100"
            x-transition:leave-end="opacity-0 scale-95"
            class="absolute right-0 mt-2 w-80 md:w-96 bg-white rounded-2xl shadow-2xl border border-gray-200 z-50 max-h-[600px] flex flex-col"
            x-cloak
        >
            {{-- Header avec recherche --}}
            <div class="p-4 border-b border-gray-100 bg-gradient-to-r from-gray-50 to-white">
                <h3 class="text-lg font-display font-bold text-boulanger-dark mb-3 flex items-center gap-2">
                    <i data-lucide="search" class="w-5 h-5 text-boulanger-orange"></i>
                    Choisir un magasin
                </h3>

                {{-- Barre de recherche --}}
                <div class="relative">
                    <input
                        type="text"
                        x-model="searchQuery"
                        placeholder="Code, nom ou région..."
                        class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-boulanger-orange focus:border-transparent text-sm"
                        @keydown.escape="isOpen = false"
                    >
                    <i data-lucide="search" class="w-4 h-4 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2"></i>
                </div>
            </div>

            {{-- Liste des magasins (scrollable) --}}
            <div class="overflow-y-auto flex-1 p-2">
                <template x-if="loading">
                    <div class="p-8 text-center">
                        <div class="w-8 h-8 border-3 border-boulanger-orange border-t-transparent rounded-full animate-spin mx-auto"></div>
                        <p class="text-sm text-boulanger-gray mt-2">Chargement...</p>
                    </div>
                </template>

                <template x-if="!loading && filteredStores.length === 0">
                    <div class="p-8 text-center">
                        <i data-lucide="inbox" class="w-12 h-12 text-gray-300 mx-auto mb-2"></i>
                        <p class="text-sm text-boulanger-gray">Aucun magasin trouvé</p>
                    </div>
                </template>

                {{-- Desktop : Groupé par région --}}
                <div class="hidden md:block">
                    <template x-for="(stores, region) in storesByRegion" :key="region">
                        <div class="mb-3">
                            <p class="text-xs font-bold text-boulanger-gray uppercase tracking-wider px-3 py-1 bg-gray-50 rounded-lg mb-1" x-text="region"></p>

                            <div class="space-y-1">
                                <template x-for="store in stores" :key="store.id">
                                    <button
                                        @click="switchStore(store.id)"
                                        type="button"
                                        class="w-full flex items-center gap-3 p-3 rounded-xl hover:bg-gradient-to-r hover:from-orange-50 hover:to-white transition-all duration-200 text-left group"
                                        :class="currentStore && store.id === currentStore.id ? 'bg-gradient-to-r from-boulanger-orange to-orange-600 text-white' : ''"
                                    >
                                        {{-- Badge code --}}
                                        <div class="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0 font-bold text-sm"
                                             :class="currentStore && store.id === currentStore.id ? 'bg-white/20 text-white' : 'bg-gray-100 text-boulanger-dark group-hover:bg-boulanger-orange/10'">
                                            <span x-text="store.code"></span>
                                        </div>

                                        {{-- Infos --}}
                                        <div class="flex-1 min-w-0">
                                            <p class="font-bold text-sm leading-tight"
                                               :class="currentStore && store.id === currentStore.id ? 'text-white' : 'text-boulanger-dark'"
                                               x-text="store.name"></p>
                                            <p class="text-xs mt-0.5 leading-tight"
                                               :class="currentStore && store.id === currentStore.id ? 'text-white/80' : 'text-boulanger-gray'"
                                               x-text="store.region || 'Non défini'"></p>
                                        </div>

                                        {{-- Check actif --}}
                                        <template x-if="currentStore && store.id === currentStore.id">
                                            <i data-lucide="check" class="w-5 h-5 text-white flex-shrink-0"></i>
                                        </template>
                                    </button>
                                </template>
                            </div>
                        </div>
                    </template>
                </div>

                {{-- Mobile : Liste simple sans groupement --}}
                <div class="md:hidden space-y-1">
                    <template x-for="store in filteredStores" :key="store.id">
                        <button
                            @click="switchStore(store.id)"
                            type="button"
                            class="w-full flex items-center gap-3 p-3 rounded-xl hover:bg-orange-50 transition-all duration-200 text-left"
                            :class="currentStore && store.id === currentStore.id ? 'bg-gradient-to-r from-boulanger-orange to-orange-600 text-white' : 'bg-white'"
                        >
                            {{-- Code compact --}}
                            <div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 font-bold text-xs"
                                 :class="currentStore && store.id === currentStore.id ? 'bg-white/20 text-white' : 'bg-gray-100 text-boulanger-dark'">
                                <span x-text="store.code"></span>
                            </div>

                            {{-- Nom simple --}}
                            <div class="flex-1 min-w-0">
                                <p class="font-semibold text-sm truncate"
                                   :class="currentStore && store.id === currentStore.id ? 'text-white' : 'text-boulanger-dark'"
                                   x-text="store.name"></p>
                            </div>

                            {{-- Check actif --}}
                            <template x-if="currentStore && store.id === currentStore.id">
                                <i data-lucide="check" class="w-5 h-5 text-white flex-shrink-0"></i>
                            </template>
                        </button>
                    </template>
                </div>
            </div>

            {{-- Footer avec bouton reset --}}
            @if($isSupervising)
                <div class="p-3 border-t border-gray-100 bg-gray-50">
                    <button
                        @click="resetStore()"
                        type="button"
                        class="w-full px-4 py-2 bg-gray-200 hover:bg-gray-300 text-boulanger-dark font-semibold rounded-xl transition-colors duration-200 flex items-center justify-center gap-2"
                    >
                        <i data-lucide="rotate-ccw" class="w-4 h-4"></i>
                        <span>Retour à mon magasin</span>
                    </button>
                </div>
            @endif>
        </div>
    @endif
</div>