<flux:dropdown>
    <flux:button variant="ghost" class="relative px-2! py-1! text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200">
        <flux:icon.bell variant="solid" />
        @if ($this->unreadCount > 0)
            <span class="absolute -top-1 -right-1 flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-red-500 rounded-full">
                {{ $this->unreadCount > 9 ? '9+' : $this->unreadCount }}
            </span>
        @endif
    </flux:button>

    <flux:menu class="w-[calc(100vw-2rem)] sm:w-96 max-w-md">
        <!-- Header -->
        <div class="px-3 sm:px-4 py-2.5 sm:py-3 border-b border-zinc-200 dark:border-zinc-400 flex items-center justify-between">
            <flux:heading size="sm" class="text-zinc-900 dark:text-zinc-100">
                Notifications
            </flux:heading>
            @if ($this->unreadCount > 0)
                <flux:button wire:click="markAllAsRead" variant="filled" size="sm" class="text-xs px-2 py-1">
                    Mark all read
                </flux:button>
            @endif
        </div>

        <!-- Notifications List -->
        <div class="max-h-[60vh] sm:max-h-96 overflow-y-auto">
            @forelse ($this->notifications as $notification)
                <flux:menu.item 
                    wire:click="markAsRead('{{ $notification->id }}')"
                    class="flex gap-2.5 sm:gap-3 p-3 sm:p-4 hover:bg-zinc-50 dark:hover:bg-zinc-800 cursor-pointer border-b border-zinc-100 dark:border-zinc-800"
                >
                    <!-- Icon -->
                    <div class="flex-shrink-0">
                        @php
                            $iconName = $notification->data['icon'] ?? 'bell';
                            $iconColor = match($iconName) {
                                'check-circle' => 'text-green-500',
                                'x-circle' => 'text-red-500',
                                'star' => 'text-yellow-500',
                                'calendar' => 'text-cyan-500',
                                default => 'text-zinc-500'
                            };
                        @endphp
                        <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-full bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center {{ $iconColor }}">
                            <flux:icon :name="$iconName" variant="micro" class="w-4 h-4 sm:w-5 sm:h-5" />
                        </div>
                    </div>

                    <!-- Content -->
                    <div class="flex-1 min-w-0">
                        <flux:heading size="sm" class="text-sm text-zinc-900 dark:text-zinc-100 font-semibold mb-0.5">
                            {{ $notification->data['title'] ?? 'Notification' }}
                        </flux:heading>
                        <flux:text class="text-xs sm:text-sm text-zinc-600 dark:text-zinc-400 line-clamp-2">
                            {{ $notification->data['message'] ?? '' }}
                        </flux:text>
                        <flux:text class="text-[10px] sm:text-xs text-zinc-400 dark:text-zinc-500 mt-1">
                            {{ $notification->created_at->diffForHumans() }}
                        </flux:text>
                    </div>

                    <!-- Unread indicator -->
                    <div class="flex-shrink-0 self-start pt-1">
                        <div class="w-2 h-2 bg-cyan-500 rounded-full"></div>
                    </div>
                </flux:menu.item>
            @empty
                <div class="px-3 sm:px-4 py-6 sm:py-8 text-center">
                    <flux:icon.bell variant="outline" class="w-10 h-10 sm:w-12 sm:h-12 mx-auto text-zinc-300 dark:text-zinc-600 mb-2 sm:mb-3" />
                    <flux:text class="text-sm text-zinc-500 dark:text-zinc-400">
                        No new notifications
                    </flux:text>
                </div>
            @endforelse
        </div>

        <!-- Footer -->
        @if ($this->notifications->count() > 0)
            <div class="border-t border-zinc-200 dark:border-zinc-700 p-1.5 sm:p-2">
                <flux:menu.item href="{{ route('notifications') }}" class="text-center text-sm text-cyan-600 dark:text-cyan-400 font-semibold py-2">
                    View all notifications
                </flux:menu.item>
            </div>
        @endif
    </flux:menu>
</flux:dropdown>
