@extends('layouts.admin')

@section('title', 'Gestion des utilisateurs - Admin')

@section('content')
<script>
    window.preloadedRegions = @js(\App\Models\Region::all());
</script>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8" x-data="adminUsersComponent(window.preloadedRegions || [])" x-cloak>
    <!-- En-tête -->
    <div class="flex items-center justify-between mb-8">
        <div>
            <h1 class="text-3xl font-display font-bold text-boulanger-dark">Gestion des utilisateurs</h1>
            <p class="mt-2 text-gray-600">Créer, modifier et gérer les comptes utilisateurs</p>
        </div>
        <button
            x-on:click="openCreate"
            class="inline-flex items-center px-4 py-2 bg-boulanger-orange text-white rounded-lg hover:bg-orange-600 transition-colors">
            <i data-lucide="user-plus" class="w-5 h-5 mr-2"></i>
            Nouvel utilisateur
        </button>
    </div>

    <!-- Filtres -->
    <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <input
                type="text"
                placeholder="Rechercher par nom ou matricule..."
                class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-transparent"
                x-model="filters.search">

            <select
                class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-transparent"
                x-model="filters.role">
                <option value="">Tous les rôles</option>
                <option value="admin">Administrateur</option>
                <option value="user">Utilisateur</option>
            </select>

            <select
                class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-transparent"
                x-model="filters.function">
                <option value="">Toutes les fonctions</option>
                <option value="manager">Manager</option>
                <option value="animateur">Animateur</option>
                <option value="directeur">Directeur</option>
                <option value="vendeur">Vendeur</option>
            </select>

            <select
                class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-transparent"
                x-model="filters.store_id">
                <option value="">Tous les magasins</option>
                <template x-for="store in stores" :key="store.id">
                    <option :value="store.id" x-text="`${store.code} - ${store.name}`"></option>
                </template>
            </select>

            <select
                class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-transparent"
                x-model="filters.status">
                <option value="">Tous les statuts</option>
                <option value="1">Actifs</option>
                <option value="0">Inactifs</option>
            </select>
        </div>
    </div>

    <template x-if="error">
        <div class="bg-red-50 text-red-700 px-4 py-3 rounded mb-4" x-text="error"></div>
    </template>

    <!-- Liste des utilisateurs -->
    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Utilisateur</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Matricule</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rôle</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Magasin</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    <template x-if="isLoading">
                        <tr>
                            <td colspan="6" class="px-6 py-8 text-center text-gray-500">Chargement des utilisateurs...</td>
                        </tr>
                    </template>

                    <template x-if="!isLoading && filteredUsers.length === 0">
                        <tr>
                            <td colspan="6" class="px-6 py-8 text-center text-gray-500">Aucun utilisateur trouvé</td>
                        </tr>
                    </template>

                    <template x-for="user in filteredUsers" :key="user.id">
                        <tr class="hover:bg-gray-50">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-10 w-10">
                                        <div class="h-10 w-10 rounded-full bg-boulanger-orange text-white flex items-center justify-center font-semibold">
                                            <span x-text="`${user.first_name?.charAt(0) || ''}${user.last_name?.charAt(0) || ''}`"></span>
                                        </div>
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900" x-text="`${user.first_name} ${user.last_name}`"></div>
                                        <div class="text-sm text-gray-500" x-text="user.email"></div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-mono text-gray-900" x-text="user.matricule"></div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex flex-col gap-1">
                                    {{-- Rôle système --}}
                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full w-fit"
                                        :class="{
                                            'bg-red-100 text-red-800': user.role === 'admin',
                                            'bg-gray-100 text-gray-800': user.role === 'user',
                                        }"
                                        x-text="user.role === 'admin' ? 'Admin' : 'User'"></span>
                                    {{-- Fonctions métier --}}
                                    <template x-if="user.functions && user.functions.length > 0">
                                        <div class="flex flex-wrap gap-1">
                                            <template x-for="func in user.functions" :key="func">
                                                <span class="px-2 inline-flex text-[10px] leading-4 font-semibold rounded-full"
                                                    :class="{
                                                        'bg-blue-50 text-blue-700': func === 'manager',
                                                        'bg-purple-50 text-purple-700': func === 'animateur',
                                                        'bg-green-50 text-green-700': func === 'vendeur',
                                                        'bg-indigo-50 text-indigo-700': func === 'directeur',
                                                    }"
                                                    x-text="func"></span>
                                            </template>
                                        </div>
                                    </template>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900" x-text="stores.find(s => s.id === user.store_id)?.code || '-'"></div>
                                <div class="text-sm text-gray-500" x-text="stores.find(s => s.id === user.store_id)?.name || 'Non assigné'"></div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
                                      :class="user.is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'"
                                      x-text="user.is_active ? 'Actif' : 'Inactif'"></span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-3">
                                <button x-on:click="openEdit(user)" class="text-boulanger-orange hover:text-orange-600">Modifier</button>
                                <button x-on:click="toggleStatus(user)" class="text-gray-600 hover:text-gray-900"
                                    x-text="user.is_active ? 'Désactiver' : 'Activer'"></button>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Footer -->
    <div class="mt-6 flex items-center justify-between text-sm text-gray-700">
        <div>
            <span x-text="filteredUsers.length"></span> utilisateur(s) affiché(s)
        </div>
    </div>

    <!-- Modal -->
    <div
        x-show="modal.open"
        class="fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center z-50"
        x-transition
        >
        <div class="bg-white rounded-lg shadow-lg w-full max-w-2xl p-6 relative">
            <button class="absolute top-4 right-4 text-gray-400 hover:text-gray-600" x-on:click="modal.open = false"><i data-lucide="x" class="w-6 h-6"></i></button>
            <h3 class="text-xl font-semibold text-boulanger-dark mb-4" x-text="modal.mode === 'create' ? 'Créer un utilisateur' : 'Modifier l\'utilisateur'"></h3>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Prénom</label>
                    <input type="text" class="w-full border rounded-lg px-3 py-2" x-model="modal.form.first_name">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Nom</label>
                    <input type="text" class="w-full border rounded-lg px-3 py-2" x-model="modal.form.last_name">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Matricule</label>
                    <input type="text" class="w-full border rounded-lg px-3 py-2 font-mono" x-model="modal.form.matricule">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                    <input type="email" class="w-full border rounded-lg px-3 py-2" x-model="modal.form.email">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Mot de passe</label>
                    <input type="password" class="w-full border rounded-lg px-3 py-2" x-model="modal.form.password" :placeholder="modal.mode === 'edit' ? 'Laisser vide pour conserver' : ''">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Rôle système</label>
                    <select class="w-full border rounded-lg px-3 py-2" x-model="modal.form.role">
                        <option value="admin">Administrateur</option>
                        <option value="user">Utilisateur</option>
                    </select>
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Fonctions métier</label>
                    <p class="text-xs text-gray-500 mb-2" x-show="modal.form.role === 'admin'">
                        💡 Un admin peut avoir des fonctions métier (ex: vivre l'expérience vendeur)
                    </p>
                    <div class="grid grid-cols-2 gap-3">
                        <label class="flex items-center space-x-2 cursor-pointer">
                            <input type="checkbox" class="rounded border-gray-300 text-boulanger-orange"
                                   value="manager"
                                   x-model="modal.form.functions">
                            <span class="text-sm text-gray-700">Manager</span>
                        </label>
                        <label class="flex items-center space-x-2 cursor-pointer">
                            <input type="checkbox" class="rounded border-gray-300 text-boulanger-orange"
                                   value="animateur"
                                   x-model="modal.form.functions">
                            <span class="text-sm text-gray-700">Animateur</span>
                        </label>
                        <label class="flex items-center space-x-2 cursor-pointer">
                            <input type="checkbox" class="rounded border-gray-300 text-boulanger-orange"
                                   value="directeur"
                                   x-model="modal.form.functions">
                            <span class="text-sm text-gray-700">Directeur</span>
                        </label>
                        <label class="flex items-center space-x-2 cursor-pointer">
                            <input type="checkbox" class="rounded border-gray-300 text-boulanger-orange"
                                   value="vendeur"
                                   x-model="modal.form.functions">
                            <span class="text-sm text-gray-700">Vendeur</span>
                        </label>
                        {{-- Directeur Régional --}}
                        <label class="flex items-center space-x-2 cursor-pointer col-span-2">
                            <input type="checkbox" class="rounded border-gray-300 text-boulanger-orange"
                                   value="directeur_regional"
                                   x-model="modal.form.functions">
                            <span class="text-sm text-gray-700 font-semibold text-boulanger-blue">Directeur Régional</span>
                        </label>
                    </div>
                </div>

                <!-- Sélection Magasin (Si PAS Directeur Régional) -->
                <div x-show="!modal.form.functions.includes('directeur_regional')">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Magasin</label>
                    <select class="w-full border rounded-lg px-3 py-2" x-model="modal.form.store_id">
                        <option value="">-- Sélectionner --</option>
                        <template x-for="store in stores" :key="store.id">
                            <option :value="store.id" x-text="`${store.code} - ${store.name}`"></option>
                        </template>
                    </select>
                </div>

                <!-- Sélection Région (Si Directeur Régional) -->
                <div x-show="modal.form.functions.includes('directeur_regional')">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Région affectée</label>
                    <select class="w-full border rounded-lg px-3 py-2 bg-blue-50" x-model="modal.form.region">
                        <option value="">-- Sélectionner une région --</option>
                        <template x-for="region in regionsData" :key="region.code">
                             <option :value="region.code" x-text="`${region.code} - ${region.libelle}`" :selected="modal.form.region === region.code"></option>
                        </template>
                    </select>
                    <p class="text-xs text-gray-500 mt-1">Le Directeur Régional supervisera tous les magasins de cette région.</p>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Téléphone</label>
                    <input type="text" class="w-full border rounded-lg px-3 py-2" x-model="modal.form.phone">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Avatar (URL)</label>
                    <input type="text" class="w-full border rounded-lg px-3 py-2" x-model="modal.form.avatar" placeholder="https://...">
                </div>
                <div class="flex items-center space-x-2">
                    <input type="checkbox" class="rounded border-gray-300 text-boulanger-orange" id="isActive" x-model="modal.form.is_active">
                    <label for="isActive" class="text-sm text-gray-700">Compte actif</label>
                </div>
            </div>

            <div class="mt-6 flex justify-end space-x-3">
                <button class="px-4 py-2 text-gray-600 hover:text-gray-800" x-on:click="modal.open = false">Annuler</button>
                <button
                    class="px-4 py-2 bg-boulanger-orange text-white rounded-lg hover:bg-orange-600 disabled:opacity-50"
                    x-bind:disabled="isSaving"
                    x-on:click="saveUser()">
                    <span x-show="!isSaving">Enregistrer</span>
                    <span x-show="isSaving">Sauvegarde...</span>
                </button>
            </div>
        </div>
    </div>

    {{-- Toast Notification --}}
    <div x-cloak
         x-show="toast && toast.show"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 translate-y-2"
         x-transition:enter-end="opacity-100 translate-y-0"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100 translate-y-0"
         x-transition:leave-end="opacity-0 translate-y-2"
         class="fixed bottom-4 right-4 z-50 max-w-sm">
        <div class="rounded-lg shadow-lg p-4 border-l-4"
             :class="{
                 'bg-green-50 border-green-500': toast && toast.type === 'success',
                 'bg-red-50 border-red-500': toast && toast.type === 'error'
             }">
            <div class="flex items-center gap-3">
                <div class="flex-shrink-0">
                    <i x-show="toast && toast.type === 'success'" data-lucide="check-circle" class="w-5 h-5 text-green-600"></i>
                    <i x-show="toast && toast.type === 'error'" data-lucide="alert-circle" class="w-5 h-5 text-red-600"></i>
                </div>
                <p class="text-sm font-medium"
                   :class="{
                       'text-green-800': toast && toast.type === 'success',
                       'text-red-800': toast && toast.type === 'error'
                   }"
                   x-text="toast ? toast.message : ''"></p>
            </div>
        </div>
    </div>
</div>
@endsection