{{-- * Sélecteur de Magasin - Version Mobile (Dans le menu) --}}
{{-- ? Version compacte pour affichage dans le menu utilisateur --}}

@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)
})">

    {{-- * Badge Magasin Actuel --}}
    <div class="flex items-center gap-3 p-3 bg-white rounded-xl border {{ $isSupervising ? 'border-orange-300' : 'border-gray-200' }}">
        <div class="w-10 h-10 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-5 h-5 text-white"></i>
        </div>

        <div class="flex-1 min-w-0">
            <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">
                    {{ $currentStore ? $currentStore->code : 'N/A' }}
                </p>
            </div>
            <p class="text-xs text-boulanger-gray truncate">
                {{ $currentStore ? $currentStore->name : 'Aucun magasin' }}
            </p>
        </div>

        @if($isAdmin)
            <button @click="toggleModal()"
                    type="button"
                    class="p-2 rounded-lg hover:bg-gray-100 transition-colors">
                <i data-lucide="chevron-down" class="w-4 h-4 text-boulanger-gray"></i>
            </button>
        @endif
    </div>

    {{-- * 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="fixed inset-0 z-[100] flex items-end sm:items-center justify-center p-4"
            style="display: none;"
            x-cloak
        >
            {{-- Backdrop --}}
            <div class="absolute inset-0 bg-black/50" @click="isOpen = false"></div>

            {{-- Modal --}}
            <div class="relative w-full max-w-md bg-white rounded-t-2xl sm:rounded-2xl shadow-2xl max-h-[80vh] flex flex-col">
                {{-- Header --}}
                <div class="p-4 border-b border-gray-100 flex items-center justify-between">
                    <h3 class="text-lg font-display font-bold text-boulanger-dark flex items-center gap-2">
                        <i data-lucide="store" class="w-5 h-5 text-boulanger-orange"></i>
                        Choisir un magasin
                    </h3>
                    <button @click="isOpen = false" class="p-2 hover:bg-gray-100 rounded-lg transition-colors">
                        <i data-lucide="x" class="w-5 h-5 text-gray-500"></i>
                    </button>
                </div>

                {{-- Recherche --}}
                <div class="p-4 border-b border-gray-100">
                    <div class="relative">
                        <input
                            type="text"
                            x-model="searchQuery"
                            placeholder="Rechercher par code ou nom..."
                            class="w-full pl-10 pr-4 py-2.5 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 --}}
                <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>

                    {{-- Liste simple --}}
                    <div class="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 transition-colors text-left"
                                :class="currentStore && store.id === currentStore.id ? 'bg-gradient-to-r from-boulanger-orange to-orange-600 text-white' : 'hover:bg-gray-50'"
                            >
                                <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>

                                <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>

                                <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 reset --}}
                @if($isSupervising)
                    <div class="p-3 border-t border-gray-100">
                        <button
                            @click="resetStore()"
                            type="button"
                            class="w-full px-4 py-2.5 bg-gray-100 hover:bg-gray-200 text-boulanger-dark font-semibold rounded-xl transition-colors 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>
        </div>
    @endif
</div>