{{-- B5.4-fix: Resumen Dropdown --}}
<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative" wire:poll.60s="refresh">
    {{-- BOTÓN BELL --}}
    <button type="button" @click="open = !open"
        class="relative inline-flex items-center p-2 text-gray-500 hover:text-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
        title="Resumen de alertas">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
        </svg>
        @if($count > 0)
        <span class="absolute -top-0.5 -right-0.5 inline-flex items-center justify-center min-w-[18px] h-[18px] text-[10px] font-bold text-white bg-red-500 rounded-full px-1">
            {{ $count > 99 ? '99+' : $count }}
        </span>
        @endif
    </button>

    {{-- DROPDOWN PANEL RESUMEN --}}
    <div x-show="open" x-cloak
        x-transition:enter="transition ease-out duration-150"
        x-transition:enter-start="opacity-0 translate-y-1"
        x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-100"
        x-transition:leave-start="opacity-100 translate-y-0"
        x-transition:leave-end="opacity-0 translate-y-1"
        class="absolute right-0 mt-2 w-96 max-w-[calc(100vw-2rem)] bg-white rounded-lg shadow-xl ring-1 ring-black/5 z-50 overflow-hidden"
        style="display: none;">

        {{-- HEADER --}}
        <div class="px-4 py-3 border-b border-gray-100 bg-gray-50">
            <div class="flex items-center justify-between">
                <h3 class="text-sm font-semibold text-gray-900">🔔 Resumen de alertas</h3>
                <span class="text-xs text-gray-500">
                    @if($count == 0)
                        Sin pendientes
                    @elseif($count == 1)
                        1 pendiente
                    @else
                        {{ $count }} pendientes
                    @endif
                </span>
            </div>
        </div>

        @if($count == 0)
            {{-- ESTADO VACÍO --}}
            <div class="px-4 py-10 text-center">
                <div class="text-4xl mb-2">✓</div>
                <p class="text-sm text-gray-500">Sin alertas pendientes</p>
                <p class="text-xs text-gray-400 mt-1">Estás al día</p>
            </div>
        @else
            {{-- SECCIÓN 1: POR PRIORIDAD --}}
            <div class="px-4 py-3 border-b border-gray-100">
                <h4 class="text-[10px] font-semibold text-gray-400 uppercase tracking-wide mb-2">Por prioridad</h4>
                <div class="space-y-1.5">
                    <div class="flex items-center justify-between text-sm">
                        <span class="flex items-center gap-2 text-gray-700">
                            <span class="h-2 w-2 rounded-full bg-red-600"></span>
                            Crítica
                        </span>
                        <span class="font-semibold text-gray-900">{{ $resumen['prioridades']['critica'] ?? 0 }}</span>
                    </div>
                    <div class="flex items-center justify-between text-sm">
                        <span class="flex items-center gap-2 text-gray-700">
                            <span class="h-2 w-2 rounded-full bg-orange-500"></span>
                            Alta
                        </span>
                        <span class="font-semibold text-gray-900">{{ $resumen['prioridades']['alta'] ?? 0 }}</span>
                    </div>
                    <div class="flex items-center justify-between text-sm">
                        <span class="flex items-center gap-2 text-gray-700">
                            <span class="h-2 w-2 rounded-full bg-amber-400"></span>
                            Media
                        </span>
                        <span class="font-semibold text-gray-900">{{ $resumen['prioridades']['media'] ?? 0 }}</span>
                    </div>
                    <div class="flex items-center justify-between text-sm">
                        <span class="flex items-center gap-2 text-gray-700">
                            <span class="h-2 w-2 rounded-full bg-emerald-500"></span>
                            Baja
                        </span>
                        <span class="font-semibold text-gray-900">{{ $resumen['prioridades']['baja'] ?? 0 }}</span>
                    </div>
                </div>
            </div>

            {{-- SECCIÓN 2: POR TIPO (top 5, dinámicas) --}}
            @if(!empty($resumen['tipos']))
            <div class="px-4 py-3 border-b border-gray-100">
                <h4 class="text-[10px] font-semibold text-gray-400 uppercase tracking-wide mb-2">Tipos más frecuentes</h4>
                <div class="space-y-1.5">
                    @foreach($resumen['tipos'] as $tipoKey => $cnt)
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-gray-700 truncate pr-2">
                                {{ \App\Models\Alerta::TIPOS[$tipoKey] ?? ucfirst(str_replace('_', ' ', $tipoKey)) }}
                            </span>
                            <span class="font-semibold text-gray-900 flex-shrink-0">{{ $cnt }}</span>
                        </div>
                    @endforeach
                </div>
            </div>
            @endif
        @endif

        {{-- FOOTER: VER TODAS --}}
        <a href="{{ route('alertas.index') }}" wire:navigate
            class="block px-4 py-3 text-center text-sm font-medium text-indigo-600 hover:bg-indigo-50 transition-colors">
            Ver todas las alertas →
        </a>
    </div>
</div>
