{{--
    Icon Picker Component - AdminLTE style
    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"
        style="padding: .5rem .75rem; border-radius: .375rem; border: 1px solid #ced4da; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: background .2s ease, border-color .2s ease;"
        onmouseover="this.style.background='#f8f9fa'; this.style.borderColor='#adb5bd'"
        onmouseout="this.style.background='#fff'; this.style.borderColor='#ced4da'"
    >
        <template x-if="selected">
            <x-dynamic-component x-bind:component="selected" class="size-5" style="color: #0d6efd;" />
        </template>
        <template x-if="!selected">
            <x-ri-image-add-line class="size-5" style="color: #6c757d;" />
        </template>
        <span style="font-size: .875rem; color: #495057;">Select Icon</span>
    </button>

    <!-- Modal -->
    <div
        x-show="open"
        x-cloak
        @keydown.escape.window="open = false"
        class="fixed inset-0 overflow-y-auto"
        style="z-index: 1050;"
    >
        <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"
                style="background: rgba(0, 0, 0, 0.5);"
            ></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="modal-lte relative w-full max-w-2xl"
                style="background: #fff; border-radius: .375rem; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); max-height: 80vh; overflow: hidden;"
            >
                <!-- Header -->
                <div style="padding: 1rem; border-bottom: 1px solid #dee2e6;">
                    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem;">
                        <h3 style="font-size: 1.125rem; font-weight: 600; color: #212529; margin: 0;">Select Icon</h3>
                        <button @click="open = false" style="padding: .375rem; border-radius: .25rem; color: #6c757d; background: transparent; border: none; cursor: pointer; transition: background .2s ease, color .2s ease;" onmouseover="this.style.background='#f8f9fa'; this.style.color='#495057'" onmouseout="this.style.background='transparent'; this.style.color='#6c757d'">
                            <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" style="color: #6c757d;" />
                        <input
                            type="text"
                            x-model="search"
                            placeholder="Search icons..."
                            class="form-control-lte w-full"
                            style="padding-left: 2.5rem; padding: .625rem .75rem .625rem 2.5rem; border: 1px solid #ced4da; border-radius: .375rem; font-size: .875rem; color: #212529; background: #fff; transition: border-color .15s ease, box-shadow .15s ease;"
                            onfocus="this.style.borderColor='#86b7fe'; this.style.boxShadow='0 0 0 .25rem rgba(13, 110, 253, .25)'"
                            onblur="this.style.borderColor='#ced4da'; this.style.boxShadow='none'"
                        />
                    </div>
                </div>

                <!-- Categories -->
                @if(count($categories) > 0)
                    <div style="display: flex; gap: .5rem; padding: 1rem; border-bottom: 1px solid #dee2e6; overflow-x: auto;">
                        <button
                            @click="activeCategory = 'all'"
                            :style="activeCategory === 'all' ? 'background: #0d6efd; color: #fff;' : 'background: #e9ecef; color: #495057;'"
                            style="padding: .375rem .75rem; border-radius: 1rem; font-size: .75rem; font-weight: 500; border: none; cursor: pointer; white-space: nowrap; transition: background .2s ease, color .2s ease;"
                        >
                            All
                        </button>
                        @foreach($categories as $category)
                            <button
                                @click="activeCategory = '{{ $category['id'] }}'"
                                :style="activeCategory === '{{ $category['id'] }}' ? 'background: #0d6efd; color: #fff;' : 'background: #e9ecef; color: #495057;'"
                                style="padding: .375rem .75rem; border-radius: 1rem; font-size: .75rem; font-weight: 500; border: none; cursor: pointer; white-space: nowrap; transition: background .2s ease, color .2s ease;"
                            >
                                {{ $category['name'] }}
                            </button>
                        @endforeach
                    </div>
                @endif

                <!-- Icons Grid -->
                <div style="padding: 1rem; overflow-y: auto; max-height: 20rem;">
                    <div class="grid grid-cols-8 gap-2">
                        <template x-for="icon in filteredIcons" :key="icon.name">
                            <button
                                @click="selected = icon.component; open = false;"
                                :style="selected === icon.component ? 'box-shadow: 0 0 0 2px #0d6efd; background: rgba(13, 110, 253, 0.1);' : ''"
                                style="display: flex; align-items: center; justify-content: center; padding: .75rem; border-radius: .375rem; border: none; background: transparent; cursor: pointer; transition: background .15s ease;"
                                onmouseover="if(!this.style.boxShadow.includes('#0d6efd')) this.style.background='#f8f9fa'"
                                onmouseout="if(!this.style.boxShadow.includes('#0d6efd')) this.style.background='transparent'"
                                :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" style="padding: 2rem; text-align: center;">
                        <x-ri-search-line style="width: 3rem; height: 3rem; margin: 0 auto .75rem; color: #ced4da;" />
                        <p style="font-size: .875rem; color: #6c757d; margin: 0;">No icons found matching your search.</p>
                    </div>
                </div>

                <!-- Footer -->
                <div style="padding: 1rem; border-top: 1px solid #dee2e6; display: flex; align-items: center; justify-content: space-between;">
                    <button
                        @click="selected = null"
                        style="padding: .375rem .75rem; font-size: .875rem; color: #6c757d; background: transparent; border: none; cursor: pointer; transition: color .2s ease;"
                        onmouseover="this.style.color='#495057'"
                        onmouseout="this.style.color='#6c757d'"
                    >
                        Clear Selection
                    </button>
                    <button
                        @click="open = false"
                        class="btn-lte-primary"
                        style="padding: .625rem 1rem; background: #0d6efd; color: #fff; border: none; border-radius: .375rem; font-size: .875rem; font-weight: 500; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: background .2s ease;"
                        onmouseover="this.style.background='#0b5ed7'"
                        onmouseout="this.style.background='#0d6efd'"
                    >
                        Done
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>