{{--
    Icon Picker Component - LucentUI Theme
    Migrated from AdminLTE to Tailwind
    Modal-based icon picker with search and categories
    
    Usage:
    <x-proxmox::ui.icon-picker :icons="$icons" wire:model="selectedIcon" />
--}}

@props([
    'icons' => [],
    'categories' => [],
    'selected' => null,
])

<div
    x-data="{
        open: false,
        search: '',
        activeCategory: 'all',
        icons: @js($icons),
        selected: @entangle($attributes->wire('model')),
        get filteredIcons() {
            let filtered = this.icons;
            if (this.search) {
                const search = this.search.toLowerCase();
                filtered = filtered.filter(icon => 
                    icon.name.toLowerCase().includes(search) ||
                    (icon.keywords && icon.keywords.some(k => k.toLowerCase().includes(search)))
                );
            }
            if (this.activeCategory !== 'all') {
                filtered = filtered.filter(icon => icon.category === this.activeCategory);
            }
            return filtered;
        }
    }"
    {{ $attributes->whereDoesntStartWith('wire:model') }}
>
    <!-- Trigger Button -->
    <button
        type="button"
        @click="open = true"
        class="flex items-center gap-2 px-3 py-2 bg-background dark:bg-gray-800 border border-neutral dark:border-gray-600 rounded-lg shadow-sm hover:bg-background-secondary dark:hover:bg-gray-700 hover:border-secondary/40 transition-all duration-200"
    >
        <template x-if="selected">
            <x-dynamic-component x-bind:component="selected" class="size-5 text-primary" />
        </template>
        <template x-if="!selected">
            <x-ri-image-add-line class="size-5 text-secondary dark:text-gray-400" />
        </template>
        <span class="text-sm text-secondary dark:text-gray-300">Select Icon</span>
    </button>

    <!-- Modal -->
    <div
        x-show="open"
        x-cloak
        @keydown.escape.window="open = false"
        class="fixed inset-0 z-[1050] overflow-y-auto"
    >
        <div class="flex items-center justify-center min-h-screen p-4">
            <!-- Backdrop -->
            <div 
                x-show="open"
                x-transition:enter="ease-out duration-150"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="ease-in duration-100"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
                @click="open = false"
                class="fixed inset-0 bg-black/50 backdrop-blur-sm"
            ></div>

            <!-- Modal Content -->
            <div
                x-show="open"
                x-transition:enter="ease-out duration-150"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                x-transition:leave="ease-in duration-100"
                x-transition:leave-start="opacity-100 scale-100"
                x-transition:leave-end="opacity-0 scale-95"
                class="relative w-full max-w-2xl bg-background dark:bg-gray-800 border border-neutral dark:border-gray-700 rounded-lg shadow-xl max-h-[80vh] overflow-hidden"
            >
                <!-- Header -->
                <div class="p-4 border-b border-neutral dark:border-gray-700">
                    <div class="flex items-center justify-between mb-3">
                        <h3 class="text-lg font-semibold text-primary dark:text-gray-100">Select Icon</h3>
                        <button 
                            @click="open = false" 
                            class="p-1.5 rounded-md text-secondary dark:text-gray-400 bg-transparent border-none hover:bg-background-secondary dark:hover:bg-gray-700 hover:text-primary dark:hover:text-gray-100 transition-all duration-200 cursor-pointer"
                        >
                            <x-ri-close-line class="size-5" />
                        </button>
                    </div>
                    
                    <!-- Search -->
                    <div class="relative">
                        <x-ri-search-line class="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-secondary dark:text-gray-400" />
                        <input
                            type="text"
                            x-model="search"
                            placeholder="Search icons..."
                            class="w-full pl-10 pr-3 py-2.5 text-sm text-primary dark:text-gray-100 bg-background dark:bg-gray-900 border border-neutral dark:border-gray-600 rounded-lg placeholder:text-secondary/50 dark:placeholder:text-gray-500 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/25 transition-all duration-150"
                        />
                    </div>
                </div>

                <!-- Categories -->
                @if(count($categories) > 0)
                    <div class="flex gap-2 p-4 border-b border-neutral dark:border-gray-700 overflow-x-auto">
                        <button
                            @click="activeCategory = 'all'"
                            :class="activeCategory === 'all' ? 'bg-primary text-white' : 'bg-background-secondary dark:bg-gray-700 text-secondary dark:text-gray-300'"
                            class="px-3 py-1.5 rounded-full text-xs font-medium border-none cursor-pointer whitespace-nowrap transition-all duration-200"
                        >
                            All
                        </button>
                        @foreach($categories as $category)
                            <button
                                @click="activeCategory = '{{ $category['id'] }}'"
                                :class="activeCategory === '{{ $category['id'] }}' ? 'bg-primary text-white' : 'bg-background-secondary dark:bg-gray-700 text-secondary dark:text-gray-300'"
                                class="px-3 py-1.5 rounded-full text-xs font-medium border-none cursor-pointer whitespace-nowrap transition-all duration-200"
                            >
                                {{ $category['name'] }}
                            </button>
                        @endforeach
                    </div>
                @endif

                <!-- Icons Grid -->
                <div class="p-4 overflow-y-auto max-h-80">
                    <div class="grid grid-cols-8 gap-2">
                        <template x-for="icon in filteredIcons" :key="icon.name">
                            <button
                                @click="selected = icon.component; open = false;"
                                :class="selected === icon.component ? 'ring-2 ring-primary bg-primary/10' : 'hover:bg-background-secondary dark:hover:bg-gray-700'"
                                class="flex items-center justify-center p-3 rounded-lg border-none bg-transparent cursor-pointer transition-all duration-150"
                                :title="icon.name"
                            >
                                <x-dynamic-component x-bind:component="icon.component" class="size-6" />
                            </button>
                        </template>
                    </div>
                    
                    <!-- Empty State -->
                    <div x-show="filteredIcons.length === 0" class="py-8 text-center">
                        <x-ri-search-line class="w-12 h-12 mx-auto mb-3 text-neutral" />
                        <p class="text-sm text-secondary dark:text-gray-400">No icons found matching your search.</p>
                    </div>
                </div>

                <!-- Footer -->
                <div class="p-4 border-t border-neutral dark:border-gray-700 flex items-center justify-between">
                    <button
                        @click="selected = null"
                        class="px-3 py-1.5 text-sm text-secondary dark:text-gray-400 bg-transparent border-none cursor-pointer hover:text-primary dark:hover:text-gray-200 transition-colors duration-200"
                    >
                        Clear Selection
                    </button>
                    <button
                        @click="open = false"
                        class="px-4 py-2.5 bg-primary text-white border-none rounded-lg text-sm font-medium cursor-pointer shadow-sm hover:bg-primary-hover transition-all duration-200"
                    >
                        Done
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>