@props([
    'alerts' => [],
])

@php
    $severityConfig = [
        'critical' => [
            'bg'     => 'bg-red-500/10',
            'border' => 'border-red-500/30',
            'icon'   => 'fas fa-exclamation-circle text-red-400',
            'badge'  => 'bg-red-500/20 text-red-300',
            'label'  => 'Critical',
        ],
        'warning' => [
            'bg'     => 'bg-amber-500/10',
            'border' => 'border-amber-500/30',
            'icon'   => 'fas fa-exclamation-triangle text-amber-400',
            'badge'  => 'bg-amber-500/20 text-amber-300',
            'label'  => 'Warning',
        ],
        'info' => [
            'bg'     => 'bg-blue-500/10',
            'border' => 'border-blue-500/30',
            'icon'   => 'fas fa-info-circle text-blue-400',
            'badge'  => 'bg-blue-500/20 text-blue-300',
            'label'  => 'Info',
        ],
    ];

    $criticalCount = count(array_filter($alerts, fn($a) => ($a['severity'] ?? '') === 'critical'));
    $totalCount    = count($alerts);
@endphp

<div x-data="{ open: false }" class="relative">
    {{-- Trigger button --}}
    <button @click="open = !open"
            class="relative flex items-center gap-2 px-4 py-2 bg-gray-700 hover:bg-gray-600 border border-gray-600 rounded-lg text-sm text-white transition-colors">
        <i class="fas fa-bell text-amber-400"></i>
        <span>System Alerts</span>
        @if($totalCount > 0)
            <span class="inline-flex items-center justify-center w-5 h-5 rounded-full text-xs font-bold
                         {{ $criticalCount > 0 ? 'bg-red-500 text-white' : 'bg-amber-500 text-white' }}">
                {{ $totalCount }}
            </span>
        @endif
        <i class="fas fa-chevron-down text-gray-400 text-xs transition-transform" :class="open ? 'rotate-180' : ''"></i>
    </button>

    {{-- Dropdown panel --}}
    <div x-show="open"
         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"
         @click.outside="open = false"
         class="absolute right-0 mt-2 w-80 bg-gray-800 border border-gray-700 rounded-xl shadow-2xl z-50"
         style="display: none;">

        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-700">
            <span class="text-sm font-semibold text-white">System Alerts</span>
            <span class="text-xs text-gray-400">{{ $totalCount }} alert{{ $totalCount !== 1 ? 's' : '' }}</span>
        </div>

        <div class="max-h-72 overflow-y-auto divide-y divide-gray-700/50">
            @forelse($alerts as $alert)
                @php
                    $sev = $alert['severity'] ?? 'info';
                    $cfg = $severityConfig[$sev] ?? $severityConfig['info'];
                @endphp
                <div class="flex items-start gap-3 px-4 py-3 {{ $cfg['bg'] }} border-l-2 {{ $cfg['border'] }}">
                    <i class="{{ $cfg['icon'] }} mt-0.5 flex-shrink-0"></i>
                    <div class="flex-1 min-w-0">
                        <p class="text-sm text-gray-200 leading-snug">{{ $alert['message'] }}</p>
                        <div class="flex items-center gap-2 mt-1">
                            <span class="text-xs px-1.5 py-0.5 rounded {{ $cfg['badge'] }} font-medium">
                                {{ $cfg['label'] }}
                            </span>
                            @if(!empty($alert['type']))
                                <span class="text-xs text-gray-500 capitalize">{{ $alert['type'] }}</span>
                            @endif
                        </div>
                    </div>
                    @if(!empty($alert['count']))
                        <span class="text-xs font-bold text-gray-300 flex-shrink-0">×{{ $alert['count'] }}</span>
                    @endif
                </div>
            @empty
                <div class="flex flex-col items-center justify-center py-8 text-gray-500">
                    <i class="fas fa-check-circle text-3xl mb-2 text-green-500/50"></i>
                    <p class="text-sm">All systems normal</p>
                </div>
            @endforelse
        </div>

        @if($totalCount > 0)
            <div class="px-4 py-2 border-t border-gray-700 text-center">
                <span class="text-xs text-gray-500">Alerts refresh on page reload</span>
            </div>
        @endif
    </div>
</div>
