@extends('layouts.base')

@section('title', 'Mon Équipe')

@section('x-data', "storeTeamComponent(" . ($activeStoreId ?? 'null') . ")")

@section('content')
<div class="max-w-5xl mx-auto p-4 pb-32 space-y-6" x-cloak>
    {{-- * Header avec statistiques magasin --}}
    <section class="bg-gradient-to-br from-boulanger-orange to-orange-500 rounded-2xl shadow-lg p-6 text-white">
        <div class="flex items-start justify-between gap-4">
            <div class="flex-1">
                <div class="flex items-center gap-3 mb-2">
                    @if(optional(auth()->user()->store)->photo_url)
                        <img src="{{ auth()->user()->store->photo_url }}" alt="Photo du magasin"
                             class="w-14 h-14 rounded-xl object-cover border-2 border-white/30 shadow-md">
                    @else
                        <div class="w-14 h-14 rounded-xl bg-white/20 backdrop-blur-sm flex items-center justify-center border-2 border-white/30">
                            <i data-lucide="building-2" class="w-6 h-6"></i>
                        </div>
                    @endif
                    <div>
                        <p class="text-xs text-white/80 uppercase font-semibold tracking-wide">Mon Magasin</p>
                        <h1 class="text-2xl font-display font-bold leading-tight">
                            {{ optional(auth()->user()->store)->name ?? 'Magasin' }}
                        </h1>
                    </div>
                </div>

                <div class="flex items-center gap-3 text-sm mt-3">
                    <span class="px-3 py-1.5 rounded-full bg-white/20 backdrop-blur-sm font-semibold text-xs border border-white/30">
                        Code {{ optional(auth()->user()->store)->code ?? '—' }}
                    </span>
                    <span class="px-3 py-1.5 rounded-full bg-white/20 backdrop-blur-sm font-semibold text-xs flex items-center gap-1.5 border border-white/30">
                        <i data-lucide="map-pin" class="w-3.5 h-3.5"></i>
                        {{ optional(auth()->user()->store)->region ?? 'Région' }}
                    </span>
                </div>
            </div>
        </div>

        {{-- * Statistiques équipe --}}
        <div class="grid grid-cols-3 gap-3 mt-6 pt-6 border-t border-white/20">
            <div class="text-center">
                <p class="text-2xl font-display font-bold" x-text="team.length"></p>
                <p class="text-xs text-white/80 mt-1">Membres</p>
            </div>
            <div class="text-center">
                <p class="text-2xl font-display font-bold" x-text="roleStats.manager + roleStats.animateur + roleStats.admin"></p>
                <p class="text-xs text-white/80 mt-1">Managers</p>
            </div>
            <div class="text-center">
                <p class="text-2xl font-display font-bold" x-text="roleStats.vendeur"></p>
                <p class="text-xs text-white/80 mt-1">Vendeurs</p>
            </div>
        </div>
    </section>

    {{-- * Barre de recherche et filtres --}}
    <section class="bg-white rounded-2xl shadow-sm border border-orange-100 overflow-hidden" x-data="{ expanded: false }">
        {{-- Header compact toujours visible --}}
        <div class="p-3 flex items-center justify-between cursor-pointer" @click="expanded = !expanded">
            <div class="flex items-center gap-3 flex-1">
                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white flex-shrink-0">
                    <i data-lucide="users" class="w-5 h-5"></i>
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-sm font-semibold text-gray-800">
                        <span x-text="filteredTeam.length"></span> membre<span x-show="filteredTeam.length > 1">s</span>
                    </p>
                    <p class="text-xs text-gray-500">
                        <span x-show="!expanded">Rechercher & filtrer</span>
                        <span x-show="expanded">Masquer les filtres</span>
                    </p>
                </div>
            </div>
            <div class="flex items-center gap-2">
                {{-- Badge filtre actif --}}
                <span x-show="filters.search || filters.role"
                      class="px-2 py-1 bg-orange-100 text-orange-700 rounded-lg text-xs font-bold">
                    Actif
                </span>
                {{-- Chevron --}}
                <i data-lucide="chevron-down"
                   class="w-5 h-5 text-gray-400 transition-transform duration-200"
                   :class="expanded && 'rotate-180'"></i>
            </div>
        </div>

        {{-- Contenu expandable --}}
        <div x-show="expanded"
             x-collapse
             class="border-t border-gray-100">
            <div class="p-4 space-y-4">
                {{-- Recherche --}}
                <div class="relative">
                    <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"></i>
                    <input type="text"
                           x-model="filters.search"
                           placeholder="Rechercher un membre (nom, prénom, matricule...)"
                           class="w-full pl-10 pr-4 py-3 border border-gray-200 rounded-xl focus:ring-2 focus:ring-boulanger-orange focus:border-boulanger-orange text-sm min-h-[48px]">
                </div>

                {{-- Filtres rôle avec gradient fade --}}
                <div class="relative">
                    <div class="absolute left-0 top-0 bottom-0 w-4 bg-gradient-to-r from-white to-transparent pointer-events-none z-10"></div>
                    <div class="absolute right-0 top-0 bottom-0 w-4 bg-gradient-to-l from-white to-transparent pointer-events-none z-10"></div>

                    <div class="flex items-center gap-2 overflow-x-auto scroll-smooth pb-2" style="scrollbar-width: none;">
                        <span class="text-xs font-semibold text-gray-500 whitespace-nowrap flex-shrink-0">Filtrer :</span>
                        <button @click="filters.role = ''; expanded = false"
                                class="px-4 py-2.5 rounded-full text-sm font-semibold border transition-all duration-200 whitespace-nowrap flex-shrink-0 touch-target-sm"
                                :class="filters.role === '' ? 'bg-boulanger-orange text-white border-boulanger-orange shadow-md scale-105' : 'bg-white text-gray-600 border-gray-200 hover:border-boulanger-orange hover:shadow-sm'">
                            <span class="flex items-center gap-1.5">
                                <i data-lucide="users" class="w-4 h-4"></i>
                                Tous
                            </span>
                        </button>
                        <button @click="filters.role = 'manager'; expanded = false"
                                class="px-4 py-2.5 rounded-full text-sm font-semibold border transition-all duration-200 whitespace-nowrap flex-shrink-0 touch-target-sm"
                                :class="filters.role === 'manager' ? 'bg-blue-600 text-white border-blue-600 shadow-md scale-105' : 'bg-white text-gray-600 border-gray-200 hover:border-blue-600 hover:shadow-sm'">
                            <span class="flex items-center gap-1.5">
                                <i data-lucide="shield" class="w-4 h-4"></i>
                                Managers
                            </span>
                        </button>
                        <button @click="filters.role = 'animateur'; expanded = false"
                                class="px-4 py-2.5 rounded-full text-sm font-semibold border transition-all duration-200 whitespace-nowrap flex-shrink-0 touch-target-sm"
                                :class="filters.role === 'animateur' ? 'bg-purple-600 text-white border-purple-600 shadow-md scale-105' : 'bg-white text-gray-600 border-gray-200 hover:border-purple-600 hover:shadow-sm'">
                            <span class="flex items-center gap-1.5">
                                <i data-lucide="star" class="w-4 h-4"></i>
                                Animateurs
                            </span>
                        </button>
                        <button @click="filters.role = 'vendeur'; expanded = false"
                                class="px-4 py-2.5 rounded-full text-sm font-semibold border transition-all duration-200 whitespace-nowrap flex-shrink-0 touch-target-sm"
                                :class="filters.role === 'vendeur' ? 'bg-green-600 text-white border-green-600 shadow-md scale-105' : 'bg-white text-gray-600 border-gray-200 hover:border-green-600 hover:shadow-sm'">
                            <span class="flex items-center gap-1.5">
                                <i data-lucide="user" class="w-4 h-4"></i>
                                Vendeurs
                            </span>
                        </button>
                    </div>
                </div>

                {{-- Compteur résultats et reset --}}
                <div class="flex items-center justify-between text-xs text-gray-500 pt-2 border-t border-gray-100">
                    <span>
                        <span class="font-semibold text-boulanger-orange" x-text="filteredTeam.length"></span> résultat<span x-show="filteredTeam.length > 1">s</span>
                    </span>
                    <button @click="filters.search = ''; filters.role = ''"
                            x-show="filters.search || filters.role"
                            class="text-boulanger-orange hover:underline font-semibold min-h-[32px] px-2">
                        Réinitialiser
                    </button>
                </div>
            </div>
        </div>
    </section>

    {{-- * Grille membres --}}
    <section class="space-y-4">
        {{-- Loading state --}}
        <template x-if="isLoading">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                @for($i=0;$i<6;$i++)
                    <div class="bg-white border border-gray-100 rounded-2xl p-5 animate-pulse">
                        <div class="flex items-center gap-3 mb-3">
                            <div class="w-12 h-12 rounded-full bg-gray-200"></div>
                            <div class="flex-1 space-y-2">
                                <div class="h-4 bg-gray-200 rounded w-3/4"></div>
                                <div class="h-3 bg-gray-200 rounded w-1/2"></div>
                            </div>
                        </div>
                        <div class="space-y-2">
                            <div class="h-3 bg-gray-200 rounded"></div>
                            <div class="h-3 bg-gray-200 rounded w-5/6"></div>
                        </div>
                    </div>
                @endfor
            </div>
        </template>

        {{-- Error state --}}
        <template x-if="error">
            <div class="bg-red-50 border border-red-200 text-red-700 rounded-2xl p-5 text-center">
                <i data-lucide="alert-circle" class="w-10 h-10 mx-auto mb-2 text-red-500"></i>
                <p class="font-semibold mb-1">Erreur de chargement</p>
                <p class="text-sm" x-text="error"></p>
            </div>
        </template>

        {{-- Empty state --}}
        <template x-if="!isLoading && filteredTeam.length === 0">
            <div class="bg-white border border-gray-100 rounded-2xl p-8 text-center">
                <i data-lucide="users" class="w-16 h-16 mx-auto mb-3 text-gray-300"></i>
                <p class="font-semibold text-gray-700 mb-1">Aucun membre trouvé</p>
                <p class="text-sm text-gray-500">Essayez de modifier vos filtres de recherche</p>
            </div>
        </template>

        {{-- * Grille membres (cards cliquables) --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            <template x-for="member in filteredTeam" :key="member.id">
                <article @click="openMemberModal(member)"
                         class="bg-white border border-gray-100 rounded-2xl p-5 shadow-sm hover:shadow-md hover:border-boulanger-orange transition-all duration-200 cursor-pointer group">
                    {{-- Header card --}}
                    <div class="flex items-start gap-3 mb-4">
                        {{-- Avatar/Initiales --}}
                        <template x-if="member.avatar">
                            <div class="w-12 h-12 rounded-full overflow-hidden border-2 border-gray-100 group-hover:border-boulanger-orange transition-colors bg-gray-100 flex-shrink-0">
                                <img :src="member.avatar"
                                     :alt="`${member.first_name} ${member.last_name}`"
                                     class="w-full h-full object-cover"
                                     loading="lazy"
                                     decoding="async">
                            </div>
                        </template>
                        <template x-if="!member.avatar">
                            <div class="w-12 h-12 rounded-full font-semibold flex items-center justify-center text-sm border-2 transition-all duration-200 flex-shrink-0"
                                 :class="{
                                    'bg-red-50 text-red-600 border-red-200 group-hover:bg-red-100 group-hover:border-red-400': member.role === 'admin',
                                    'bg-blue-50 text-blue-600 border-blue-200 group-hover:bg-blue-100 group-hover:border-blue-400': member.functions?.includes('manager'),
                                    'bg-purple-50 text-purple-600 border-purple-200 group-hover:bg-purple-100 group-hover:border-purple-400': member.functions?.includes('animateur') && !member.functions?.includes('manager'),
                                    'bg-green-50 text-green-600 border-green-200 group-hover:bg-green-100 group-hover:border-green-400': member.functions?.includes('vendeur') && !member.functions?.includes('manager') && !member.functions?.includes('animateur'),
                                 }">
                                <span x-text="(member.first_name?.charAt(0) || '') + (member.last_name?.charAt(0) || '')"></span>
                            </div>
                        </template>

                        {{-- Nom + Badge fonctions --}}
                        <div class="flex-1 min-w-0">
                            <p class="font-semibold text-boulanger-dark truncate group-hover:text-boulanger-orange transition-colors"
                               x-text="`${member.first_name} ${member.last_name}`"></p>
                            {{-- Affichage des fonctions au lieu du r\u00f4le unique --}}
                            <div class="flex flex-wrap gap-1 mt-1">
                                <template x-if="member.role === 'admin'">
                                    <span class="inline-block px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase tracking-wide bg-red-100 text-red-800 border border-red-200">Admin</span>
                                </template>
                                <template x-if="member.functions && member.functions.length > 0">
                                    <template x-for="func in member.functions" :key="func">
                                        {{-- * Masquer le badge vendeur sauf pour les admins --}}
                                        <template x-if="func !== 'vendeur' || {{ auth()->user()->role === 'admin' ? 'true' : 'false' }}">
                                            <span class="inline-block px-2 py-0.5 rounded-full text-[10px] font-semibold uppercase tracking-wide"
                                                  :class="{
                                                    'bg-blue-100 text-blue-800 border border-blue-200': func === 'manager',
                                                    'bg-purple-100 text-purple-800 border border-purple-200': func === 'animateur',
                                                    'bg-green-100 text-green-800 border border-green-200': func === 'vendeur',
                                                    'bg-indigo-100 text-indigo-800 border border-indigo-200': func === 'directeur',
                                                  }"
                                                  x-text="func"></span>
                                        </template>
                                    </template>
                                </template>
                            </div>
                        </div>
                    </div>

                    {{-- Infos rapides --}}
                    <div class="space-y-1.5 text-xs text-gray-600">
                        <div class="flex items-center gap-2">
                            <i data-lucide="hash" class="w-3.5 h-3.5 text-gray-400"></i>
                            <span x-text="`Matricule ${member.matricule || 'N/A'}`"></span>
                        </div>
                        <div class="flex items-center gap-2 truncate">
                            <i data-lucide="mail" class="w-3.5 h-3.5 text-gray-400 flex-shrink-0"></i>
                            <span class="truncate" x-text="member.email"></span>
                        </div>
                        <template x-if="member.phone">
                            <div class="flex items-center gap-2">
                                <i data-lucide="phone" class="w-3.5 h-3.5 text-gray-400"></i>
                                <span x-text="member.phone"></span>
                            </div>
                        </template>
                    </div>

                    {{-- CTA hover --}}
                    <div class="mt-4 pt-3 border-t border-gray-100 flex items-center justify-between opacity-0 group-hover:opacity-100 transition-opacity">
                        <span class="text-xs text-gray-500">Cliquer pour plus d'infos</span>
                        <i data-lucide="chevron-right" class="w-4 h-4 text-boulanger-orange"></i>
                    </div>
                </article>
            </template>
        </div>
    </section>

    {{-- * Modal détail membre --}}
    <template x-if="selectedMember">
        <div class="fixed inset-0 z-50 flex items-end sm:items-center justify-center p-0 sm:p-4"
             @click.self="closeMemberModal()"
             x-trap.noscroll.inert="selectedMember">
            {{-- Overlay cliquable pour fermer --}}
            <div class="fixed inset-0 bg-black/50 backdrop-blur-sm"
                 @click="closeMemberModal()"
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 x-transition:leave="transition ease-in duration-150"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0"></div>

            {{-- Modal content --}}
            <div class="relative bg-white w-full sm:max-w-lg sm:rounded-2xl rounded-t-3xl shadow-2xl max-h-[90vh] overflow-y-auto"
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0 translate-y-8 sm:translate-y-0 sm:scale-95"
                 x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                 x-transition:leave="transition ease-in duration-150"
                 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                 x-transition:leave-end="opacity-0 translate-y-8 sm:translate-y-0 sm:scale-95">

                {{-- Header modal --}}
                <div class="sticky top-0 bg-gradient-to-br from-boulanger-orange to-orange-500 text-white p-6 rounded-t-3xl sm:rounded-t-2xl z-10">
                    {{-- Bouton fermeture visible avec shadow et contraste WCAG --}}
                    <button @click="closeMemberModal()"
                            type="button"
                            aria-label="Fermer la fenêtre"
                            class="absolute top-4 right-4 w-10 h-10 rounded-full bg-white text-boulanger-orange flex items-center justify-center hover:bg-gray-100 active:scale-95 transition-all duration-200 shadow-lg touch-target z-20">
                        <i data-lucide="x" class="w-6 h-6"></i>
                    </button>

                    <div class="flex items-center gap-4 pr-12">
                        <template x-if="selectedMember.avatar">
                            <div class="w-16 h-16 rounded-full overflow-hidden border-3 border-white shadow-lg bg-white flex-shrink-0">
                                <img :src="selectedMember.avatar"
                                     :alt="`${selectedMember.first_name} ${selectedMember.last_name}`"
                                     class="w-full h-full object-cover"
                                     loading="lazy">
                            </div>
                        </template>
                        <template x-if="!selectedMember.avatar">
                            <div class="w-16 h-16 rounded-full bg-white/20 backdrop-blur-sm border-3 border-white font-bold text-xl flex items-center justify-center shadow-lg flex-shrink-0"
                                 x-text="(selectedMember.first_name?.charAt(0) || '') + (selectedMember.last_name?.charAt(0) || '')"></div>
                        </template>

                        <div class="flex-1 min-w-0">
                            <h2 class="text-xl font-display font-bold truncate" x-text="`${selectedMember.first_name} ${selectedMember.last_name}`"></h2>
                            <div class="flex flex-wrap gap-1 mt-1">
                                <span class="inline-block px-2.5 py-1 rounded-full text-xs font-semibold uppercase tracking-wide bg-white/20 backdrop-blur-sm border border-white/30"
                                      x-text="selectedMember.role"></span>
                                {{-- Badges fonctions (vendeur masqué sauf admin) --}}
                                <template x-if="selectedMember.functions && selectedMember.functions.length > 0">
                                    <template x-for="func in selectedMember.functions" :key="func">
                                        <template x-if="func !== 'vendeur' || {{ auth()->user()->role === 'admin' ? 'true' : 'false' }}">
                                            <span class="inline-block px-2.5 py-1 rounded-full text-xs font-semibold uppercase tracking-wide bg-white/20 backdrop-blur-sm border border-white/30"
                                                  x-text="func"></span>
                                        </template>
                                    </template>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Body modal --}}
                <div class="p-6 space-y-6">
                    {{-- Informations principales --}}
                    <div class="space-y-4">
                        <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide flex items-center gap-2">
                            <i data-lucide="user" class="w-4 h-4"></i>
                            Informations
                        </h3>

                        <div class="space-y-3">
                            <div class="flex items-start gap-3 p-3 bg-gray-50 rounded-xl">
                                <i data-lucide="hash" class="w-5 h-5 text-gray-400 mt-0.5 flex-shrink-0"></i>
                                <div>
                                    <p class="text-xs text-gray-500">Matricule</p>
                                    <p class="font-semibold text-boulanger-dark" x-text="selectedMember.matricule || 'Non renseigné'"></p>
                                </div>
                            </div>

                            <div class="flex items-start gap-3 p-3 bg-gray-50 rounded-xl">
                                <i data-lucide="mail" class="w-5 h-5 text-gray-400 mt-0.5 flex-shrink-0"></i>
                                <div class="flex-1 min-w-0">
                                    <p class="text-xs text-gray-500">Email</p>
                                    <a :href="`mailto:${selectedMember.email}`"
                                       class="font-semibold text-boulanger-orange hover:underline truncate block"
                                       x-text="selectedMember.email"></a>
                                </div>
                            </div>

                            <template x-if="selectedMember.phone">
                                <div class="flex items-start gap-3 p-3 bg-gray-50 rounded-xl">
                                    <i data-lucide="phone" class="w-5 h-5 text-gray-400 mt-0.5 flex-shrink-0"></i>
                                    <div>
                                        <p class="text-xs text-gray-500">Téléphone</p>
                                        <a :href="`tel:${selectedMember.phone}`"
                                           class="font-semibold text-boulanger-orange hover:underline"
                                           x-text="selectedMember.phone"></a>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>

                    {{-- Actions rapides --}}
                    <div class="space-y-3">
                        <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide flex items-center gap-2">
                            <i data-lucide="zap" class="w-4 h-4"></i>
                            Actions rapides
                        </h3>

                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <a :href="`mailto:${selectedMember.email}`"
                               class="flex items-center justify-center gap-2 px-4 py-3 bg-boulanger-orange text-white rounded-xl font-semibold text-sm hover:bg-orange-600 active:scale-95 transition-all touch-target">
                                <i data-lucide="mail" class="w-4 h-4"></i>
                                <span class="hidden xs:inline">Envoyer email</span>
                                <span class="xs:hidden">Email</span>
                            </a>
                            <template x-if="selectedMember.phone">
                                <a :href="`tel:${selectedMember.phone}`"
                                   class="flex items-center justify-center gap-2 px-4 py-3 bg-blue-600 text-white rounded-xl font-semibold text-sm hover:bg-blue-700 active:scale-95 transition-all touch-target">
                                    <i data-lucide="phone" class="w-4 h-4"></i>
                                    <span>Appeler</span>
                                </a>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
</div>
@endsection