<div class="relative" x-data="{ open: @entangle('open') }" @click.outside="open = false">
    <button
        wire:click="toggle"
        class="w-8 h-8 flex items-center justify-center rounded-lg text-t2 hover:text-t1 hover:bg-s2 transition-colors"
        aria-label="Notifications"
    >
        <svg class="w-4 h-4" fill="none" viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8 1.5a5 5 0 00-5 5v2.5l-1 1.5h12l-1-1.5V6.5a5 5 0 00-5-5zM6.5 13.5a1.5 1.5 0 003 0"/>
        </svg>
    </button>

    @if($this->unreadCount > 0)
    <span class="absolute top-1 right-1 w-3.5 h-3.5 bg-blue rounded-full text-white text-[9px] font-medium flex items-center justify-center leading-none pointer-events-none">
        {{ $this->unreadCount > 9 ? '9+' : $this->unreadCount }}
    </span>
    @endif

    <div
        x-show="open"
        x-transition:enter="transition ease-out duration-100"
        x-transition:enter-start="opacity-0 scale-95 translate-y-1"
        x-transition:enter-end="opacity-100 scale-100 translate-y-0"
        x-transition:leave="transition ease-in duration-75"
        x-transition:leave-start="opacity-100 scale-100 translate-y-0"
        x-transition:leave-end="opacity-0 scale-95 translate-y-1"
        class="absolute right-0 top-10 w-80 bg-s2 border border-white/[.06] rounded-xl shadow-xl z-50"
    >
        <div class="flex items-center justify-between px-4 py-3 border-b border-white/[.06]">
            <span class="text-sm font-medium text-t1">Notifications</span>
            @if($this->unreadCount > 0)
            <button wire:click="markAllRead" class="text-xs text-blue hover:opacity-75 transition-opacity">
                Mark all read
            </button>
            @endif
        </div>

        <div class="max-h-80 overflow-y-auto divide-y divide-white/[.04]">
            @forelse($this->notifications as $n)
            <div
                wire:click="markRead('{{ $n->id }}')"
                class="flex items-start gap-3 px-4 py-3 hover:bg-s3 transition-colors cursor-pointer {{ $n->read_at ? 'opacity-60' : '' }}"
            >
                <div class="w-1.5 h-1.5 rounded-full mt-1.5 flex-shrink-0 {{ $n->read_at ? 'bg-transparent' : 'bg-blue' }}"></div>
                <div class="flex-1 min-w-0">
                    <p class="text-sm text-t1 leading-snug">{{ $n->data['message'] ?? $n->type }}</p>
                    <p class="text-xs text-t3 mt-0.5">{{ $n->created_at->diffForHumans() }}</p>
                </div>
            </div>
            @empty
            <div class="px-4 py-8 text-center text-sm text-t3">No notifications</div>
            @endforelse
        </div>
    </div>
</div>
