{{--
    Icon Picker Component - TailServer Theme
    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-neutral/5 hover:bg-neutral/10 rounded-lg border border-neutral/20 transition-colors"
    >
        <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-base/40" />
        </template>
        <span class="text-sm text-base">Select Icon</span>
    </button>

    <!-- Modal -->
    <div
        x-show="open"
        x-cloak
        @keydown.escape.window="open = false"
        class="fixed inset-0 z-50 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-200"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="ease-in duration-150"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
                @click="open = false"
                class="fixed inset-0 bg-black/50"
            ></div>

            <!-- Modal Content -->
            <div
                x-show="open"
                x-transition:enter="ease-out duration-200"
                x-transition:enter-start="opacity-0 scale-95"
                x-transition:enter-end="opacity-100 scale-100"
                x-transition:leave="ease-in duration-150"
                x-transition:leave-start="opacity-100 scale-100"
                x-transition:leave-end="opacity-0 scale-95"
                class="relative bg-background rounded-xl shadow-2xl w-full max-w-2xl max-h-[80vh] overflow-hidden"
            >
                <!-- Header -->
                <div class="p-4 border-b border-neutral/10">
                    <div class="flex items-center justify-between mb-3">
                        <h3 class="text-lg font-semibold text-base">Select Icon</h3>
                        <button @click="open = false" class="p-1 rounded hover:bg-neutral/10 text-base/40 hover:text-base">
                            <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-base/40" />
                        <input
                            type="text"
                            x-model="search"
                            placeholder="Search icons..."
                            class="w-full pl-10 pr-4 py-2 bg-neutral/5 border border-neutral/20 rounded-lg text-sm text-base placeholder:text-base/40 focus:outline-none focus:ring-2 focus:ring-primary/50"
                        />
                    </div>
                </div>

                <!-- Categories -->
                @if(count($categories) > 0)
                    <div class="flex gap-2 p-4 border-b border-neutral/10 overflow-x-auto">
                        <button
                            @click="activeCategory = 'all'"
                            :class="activeCategory === 'all' ? 'bg-primary text-white' : 'bg-neutral/5 text-base hover:bg-neutral/10'"
                            class="px-3 py-1 rounded-full text-xs font-medium transition-colors whitespace-nowrap"
                        >
                            All
                        </button>
                        @foreach($categories as $category)
                            <button
                                @click="activeCategory = '{{ $category['id'] }}'"
                                :class="activeCategory === '{{ $category['id'] }}' ? 'bg-primary text-white' : 'bg-neutral/5 text-base hover:bg-neutral/10'"
                                class="px-3 py-1 rounded-full text-xs font-medium transition-colors whitespace-nowrap"
                            >
                                {{ $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-neutral/10'"
                                class="flex items-center justify-center p-3 rounded-lg transition-colors"
                                :title="icon.name"
                            >
                                <x-dynamic-component x-bind:component="icon.component" class="size-6 text-base" />
                            </button>
                        </template>
                    </div>
                    
                    <!-- Empty State -->
                    <div x-show="filteredIcons.length === 0" class="py-8 text-center">
                        <x-ri-search-line class="size-12 mx-auto text-base/20 mb-3" />
                        <p class="text-sm text-base/50">No icons found matching your search.</p>
                    </div>
                </div>

                <!-- Footer -->
                <div class="p-4 border-t border-neutral/10 flex items-center justify-between">
                    <button
                        @click="selected = null"
                        class="px-3 py-1.5 text-sm text-base/60 hover:text-base"
                    >
                        Clear Selection
                    </button>
                    <button
                        @click="open = false"
                        class="px-4 py-2 bg-primary text-white rounded-lg text-sm font-medium hover:bg-primary/90 transition-colors"
                    >
                        Done
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>