@props([
    'name' => 'users_assigned_ids', 
    'users' => collect(), 
    'selected' => []
])

@php
    $usersCollection = collect($users);
    $hasUsers = $usersCollection->isNotEmpty();
    
    $allUsersJson = $hasUsers 
        ? $usersCollection->map(fn($u) => [
            'id' => $u->id, 
            'full_name' => $u->full_name, 
            'role' => $u->roles->first()->display_name ?? 'Staff',
            'photo' => $u->profile_photo_url
        ])->toJson() 
        : json_encode([]);

    $selectedIdsJson = json_encode(array_values(old($name, $selected ?? [])));
@endphp

<div class="w-full max-w-md">
    @if(!$hasUsers)
        <div class="mt-4 p-3 bg-orange-50 border border-orange-100 text-orange-400 rounded-lg text-size-small-heading">
            <div class="flex">
                <span>
                    <x-icons.warning />
                </span>
                <p class="ml-3 text-orange-700 font-medium">
                    Atención: Debes tener al menos un staft para ser asignado.
                </p>
            </div>
        </div>
    @else
        <div x-data="userAssignment({ 
            allUsers: {{ $allUsersJson }},
            selectedIds: {{ $selectedIdsJson }}
        })" class="bg-white p-6 rounded-lg border border-complement100">
            <div class="mb-4">
                <label class="block text-parrafo text-black font-bold uppercase tracking-wider mb-3">Elige el staft</label>
                <div class="relative">
                    <div class="absolute text-accent inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <x-icons.search />
                    </div>
                    <input type="text" x-model="search" 
                        placeholder="Filtrar por nombre..." 
                        class="block w-full pl-10 pr-4 py-2 bg-slate-50 border border-slate-100 rounded-lg text-parrafo focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all">
                </div>
            </div>
            <div class="relative">
                <div class="max-h-72 overflow-y-auto pr-2 custom-scrollbar space-y-2">
                    <template x-for="user in filteredUsers" :key="user.id">
                        <label 
                            :class="isAssigned(user.id) ? 'border-primary bg-primary/5' : 'border-complement100 bg-white'"
                            class="flex items-center justify-between p-3 border rounded-xl cursor-pointer transition-all group"
                        >
                            <div class="flex items-center">
                                <div class="relative">
                                    <img :src="user.photo" class="h-10 w-10 rounded-full object-cover border border-white shadow-sm">
                                    <div x-show="isAssigned(user.id)" class="absolute -top-1 -right-1 bg-primary rounded-full p-0.5 border-2 border-white">
                                        <svg class="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 20 20"><path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/></path></svg>
                                    </div>
                                </div>
                                <div class="ml-3">
                                    <p class="text-parrafo font-bold text-black" x-text="user.full_name"></p>
                                    <p class="text-size-small-heading text-accent" x-text="user.role"></p>
                                </div>
                            </div>

                            <div class="flex items-center">
                                <input 
                                    type="checkbox" 
                                    :name="'{{ $name }}[]'" 
                                    :value="user.id" 
                                    :checked="isAssigned(user.id)"
                                    @change="toggleUser(user.id)"
                                    class="w-4 h-4 text-blue-600 border-slate-300 rounded focus:ring-blue-500/20"
                                >
                            </div>
                        </label>
                    </template>
                </div>
            </div>
            <div class="mt-4 pt-4 border-t border-complement100 text-accent flex justify-between items-center text-xs font-bold uppercase tracking-widest">
                <span>Seleccionados</span>
                <span class="text-white bg-primary px-2 py-1 rounded" x-text="assignedIds.length"></span>
            </div>
            @error($name)
                <span class="error-text">{{ $message }}</span>
            @enderror
        </div>
    @endif
</div>

<style>
    .custom-scrollbar::-webkit-scrollbar { width: 4px; }
    .custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
</style>

<script>
function userAssignment(data) {
    return {
        search: '',
        allUsers: data.allUsers || [],
        assignedIds: [],

        init() {
            if(data.selectedIds) {
                this.assignedIds = data.selectedIds.map(id => String(id));
            }
        },

        get filteredUsers() {
            if (this.search === '') return this.allUsers;
            const term = this.search.toLowerCase();
            return this.allUsers.filter(u => 
                u.full_name.toLowerCase().includes(term) || 
                u.role.toLowerCase().includes(term)
            );
        },

        isAssigned(id) {
            return this.assignedIds.includes(String(id));
        },

        toggleUser(id) {
            id = String(id);
            if (this.isAssigned(id)) {
                this.assignedIds = this.assignedIds.filter(i => i !== id);
            } else {
                this.assignedIds.push(id);
            }
        }
    }
}
</script>