<div x-data="{ 
    open: @entangle('isOpen'),
    init() {
        window.addEventListener('keydown', (e) => {
            if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
                e.preventDefault();
                this.open = !this.open;
                if (this.open) {
                    this.$nextTick(() => this.$refs.searchInput?.focus());
                }
            }
            if (e.key === 'Escape') {
                this.open = false;
            }
        });
    }
}" @keydown.escape="open = false">
    
    {{-- Trigger Button --}}
    <button @click="open = true" class="flex items-center gap-2 px-3 py-2 text-sm text-gray-500 bg-gray-100 hover:bg-gray-200 rounded-lg transition">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
        </svg>
        <span class="hidden sm:inline">Buscar...</span>
        <kbd class="hidden sm:inline px-1.5 py-0.5 text-xs bg-white border border-gray-300 rounded">⌘K</kbd>
    </button>
    
    {{-- Modal --}}
    <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"
         class="fixed inset-0 z-50 overflow-y-auto" 
         style="display: none;">
        
        {{-- Backdrop --}}
        <div class="fixed inset-0 bg-gray-900/50 backdrop-blur-sm" @click="open = false"></div>
        
        {{-- Search Panel --}}
        <div class="relative min-h-screen flex items-start justify-center pt-20 px-4">
            <div class="relative w-full max-w-xl bg-white rounded-2xl shadow-2xl overflow-hidden"
                 x-transition:enter="ease-out duration-200"
                 x-transition:enter-start="opacity-0 scale-95"
                 x-transition:enter-end="opacity-100 scale-100">
                
                {{-- Search Input --}}
                <div class="flex items-center px-4 border-b border-gray-200">
                    <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                    <input x-ref="searchInput"
                           wire:model.live.debounce.300ms="query"
                           type="text"
                           placeholder="Buscar procesos, clientes, deudores..."
                           class="w-full px-4 py-4 text-gray-900 placeholder-gray-400 border-0 focus:ring-0 focus:outline-none">
                    <kbd class="px-2 py-1 text-xs text-gray-400 bg-gray-100 rounded">ESC</kbd>
                </div>
                
                {{-- Results --}}
                @if(count($results))
                <div class="max-h-96 overflow-y-auto p-2">
                    {{-- Procesos --}}
                    @if(count($results['procesos'] ?? []))
                    <div class="mb-2">
                        <p class="px-3 py-1 text-xs font-semibold text-gray-500 uppercase">Procesos</p>
                        @foreach($results['procesos'] as $proceso)
                            <a href="{{ route('procesos.show', $proceso->id) }}" 
                               class="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-indigo-50 transition"
                               @click="open = false">
                                <div class="w-8 h-8 bg-indigo-100 rounded-lg flex items-center justify-center">
                                    <svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                                    </svg>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-900">{{ $proceso->radicado_interno }}</p>
                                    <p class="text-xs text-gray-500">{{ ucfirst($proceso->estado) }}</p>
                                </div>
                            </a>
                        @endforeach
                    </div>
                    @endif
                    
                    {{-- Clientes --}}
                    @if(count($results['clientes'] ?? []))
                    <div class="mb-2">
                        <p class="px-3 py-1 text-xs font-semibold text-gray-500 uppercase">Clientes</p>
                        @foreach($results['clientes'] as $cliente)
                            <a href="{{ route('clientes.show', $cliente->id) }}" 
                               class="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-green-50 transition"
                               @click="open = false">
                                <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
                                    <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                                    </svg>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-900">{{ $cliente->nombre }}</p>
                                    <p class="text-xs text-gray-500">NIT: {{ $cliente->nit }}</p>
                                </div>
                            </a>
                        @endforeach
                    </div>
                    @endif
                    
                    {{-- Deudores --}}
                    @if(count($results['deudores'] ?? []))
                    <div>
                        <p class="px-3 py-1 text-xs font-semibold text-gray-500 uppercase">Deudores</p>
                        @foreach($results['deudores'] as $deudor)
                            <a href="{{ route('deudores.show', $deudor->id) }}" 
                               class="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-amber-50 transition"
                               @click="open = false">
                                <div class="w-8 h-8 bg-amber-100 rounded-lg flex items-center justify-center">
                                    <svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                    </svg>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-900">{{ $deudor->nombre }} {{ $deudor->apellido }}</p>
                                    <p class="text-xs text-gray-500">{{ $deudor->numero_documento }}</p>
                                </div>
                            </a>
                        @endforeach
                    </div>
                    @endif
                </div>
                @elseif(strlen($query) >= 2)
                <div class="p-8 text-center text-gray-500">
                    <svg class="w-12 h-12 mx-auto text-gray-300 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <p>No se encontraron resultados para "{{ $query }}"</p>
                </div>
                @else
                <div class="p-8 text-center text-gray-500">
                    <p>Escribe al menos 2 caracteres para buscar</p>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
