<div class="relative"
     x-data="{ open: false }"
     @click.outside="open = false"
     @keydown.escape.window="open = false">

    <button type="button"
            @click="open = !open"
            class="relative p-2 rounded-xl hover:bg-ink-100/60 transition"
            aria-label="Notificaciones">
        <svg class="w-5 h-5 text-ink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  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 ($unread > 0)
            <span class="absolute top-1 right-1 min-w-[18px] h-[18px] px-1 rounded-full bg-rose-500 text-white text-[10px] font-bold flex items-center justify-center ring-2 ring-white animate-pulse-soft">
                {{ $unread > 9 ? '9+' : $unread }}
            </span>
        @endif
    </button>

    <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"
         x-transition:leave-end="opacity-0"
         class="absolute right-0 top-full mt-2 w-80 bg-white rounded-2xl shadow-soft-lg border border-ink-100 z-50 overflow-hidden">

        <div class="px-4 py-3 border-b border-ink-100 flex items-center justify-between">
            <div>
                <p class="text-sm font-semibold text-ink-900">Notificaciones</p>
                <p class="text-xs text-ink-500">{{ $unread }} sin leer</p>
            </div>
            <button @click="open = false" class="text-ink-400 hover:text-ink-700 p-1 rounded-lg hover:bg-ink-100" aria-label="Cerrar">
                <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="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>

        <div class="max-h-96 overflow-y-auto scroll-area">
            @forelse ($items as $n)
                @php
                    $colors = [
                        'indigo' => 'bg-brand-50 text-brand-600',
                        'emerald'=> 'bg-emerald-50 text-emerald-600',
                        'amber'  => 'bg-amber-50 text-amber-600',
                        'rose'   => 'bg-rose-50 text-rose-600',
                    ];
                    $colorClass = $colors[$n->color] ?? 'bg-ink-100 text-ink-600';
                @endphp
                <a href="{{ route('tenant.notifications.read', $n->id) }}"
                   class="flex items-start gap-3 px-4 py-3 hover:bg-ink-50 border-b border-ink-100/60 last:border-0 transition {{ $n->read_at ? 'opacity-60' : '' }}">
                    <div class="w-9 h-9 rounded-xl {{ $colorClass }} flex items-center justify-center flex-shrink-0">
                        <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-medium text-ink-900">{{ $n->title }}</p>
                        @if ($n->message)
                            <p class="text-xs text-ink-500 mt-0.5 line-clamp-2">{{ $n->message }}</p>
                        @endif
                        <p class="text-[10px] text-ink-400 mt-1">{{ $n->created_at?->diffForHumans() }}</p>
                    </div>
                    @if (! $n->read_at)
                        <span class="w-2 h-2 rounded-full bg-brand-500 mt-2 flex-shrink-0"></span>
                    @endif
                </a>
            @empty
                <div class="px-4 py-12 text-center">
                    <div class="mx-auto w-12 h-12 rounded-full bg-ink-100 flex items-center justify-center mb-2">
                        <svg class="w-6 h-6 text-ink-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
                    </div>
                    <p class="text-sm text-ink-500">Sin notificaciones</p>
                </div>
            @endforelse
        </div>
    </div>
</div>
