@props(['notifications' => [], 'unreadCount' => 0])

<div x-data="{ open: false }" class="relative">
    <button @click="open = !open" class="relative p-2 text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors" aria-label="Notifications">
        <svg class="w-5 h-5" 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($unreadCount > 0)
            <span class="absolute -top-1 -right-1 h-5 w-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center font-medium">{{ $unreadCount > 9 ? '9+' : $unreadCount }}</span>
        @endif
    </button>

    <div x-show="open" @click.away="open = false" x-transition class="absolute right-0 mt-2 w-80 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded-xl shadow-lg z-50 max-h-96 overflow-hidden">
        <div class="px-4 py-3 border-b border-slate-200 dark:border-slate-700 flex items-center justify-between">
            <h3 class="text-sm font-semibold text-slate-900 dark:text-slate-100">{{ __('Notifications') }}</h3>
            @if($unreadCount > 0)
                <button class="text-xs text-primary-600 hover:text-primary-700 font-medium">{{ __('Mark all read') }}</button>
            @endif
        </div>
        <div class="overflow-y-auto max-h-72">
            @forelse($notifications as $notification)
                <div class="px-4 py-3 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors border-b border-slate-100 dark:border-slate-700 {{ ($notification['read'] ?? false) ? '' : 'bg-primary-50/50 dark:bg-primary-900/10' }}">
                    <div class="flex items-start gap-3">
                        <span class="text-lg flex-shrink-0 mt-0.5">{{ $notification['icon'] ?? '🔔' }}</span>
                        <div class="flex-1 min-w-0">
                            <p class="text-sm font-medium text-slate-700 dark:text-slate-300">{{ $notification['title'] ?? '' }}</p>
                            <p class="text-xs text-slate-500 dark:text-slate-400 mt-0.5 line-clamp-2">{{ $notification['message'] ?? '' }}</p>
                            <p class="text-xs text-slate-400 mt-1">{{ $notification['time'] ?? '' }}</p>
                        </div>
                        @if(!($notification['read'] ?? false))
                            <span class="h-2 w-2 rounded-full bg-primary-500 flex-shrink-0 mt-2"></span>
                        @endif
                    </div>
                </div>
            @empty
                <div class="px-4 py-8 text-center">
                    <p class="text-sm text-slate-500">{{ __('No notifications') }}</p>
                </div>
            @endforelse
        </div>
        <div class="px-4 py-2 border-t border-slate-200 dark:border-slate-700 text-center">
            <a href="{{ url('/notifications') }}" class="text-xs text-primary-600 hover:text-primary-700 font-medium">{{ __('View All Notifications') }}</a>
        </div>
    </div>
</div>