<div>
    {{-- Header --}}
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
        <div class="flex items-center gap-3">
            <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('الإشعارات') }}</h1>
            @if($unreadCount > 0)
            <span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700">
                {{ $unreadCount }}
            </span>
            @endif
        </div>
        @if($unreadCount > 0)
        <button wire:click="markAllAsRead" wire:loading.attr="disabled" wire:target="markAllAsRead"
                class="inline-flex items-center gap-2 px-4 py-2.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium transition-colors w-full sm:w-auto justify-center">
            <span wire:loading.remove wire:target="markAllAsRead">
                <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="M5 13l4 4L19 7"/></svg>
            </span>
            <span wire:loading wire:target="markAllAsRead">
                <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
            </span>
            {{ __('قراءة الكل') }}
        </button>
        @endif
    </div>

    {{-- Filter Tabs --}}
    <div class="flex gap-2 mb-4">
        <button wire:click="$set('filter', 'all')"
                class="px-4 py-2.5 rounded-lg text-sm font-medium transition-colors {{ $filter === 'all' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 border border-gray-200 hover:bg-gray-50' }}">
            {{ __('الكل') }}
        </button>
        <button wire:click="$set('filter', 'unread')"
                class="px-4 py-2.5 rounded-lg text-sm font-medium transition-colors {{ $filter === 'unread' ? 'bg-blue-600 text-white' : 'bg-white text-gray-700 border border-gray-200 hover:bg-gray-50' }}">
            {{ __('غير مقروء') }}
            @if($unreadCount > 0)
            <span class="inline-flex items-center justify-center ms-1 px-1.5 py-0.5 rounded-full text-xs {{ $filter === 'unread' ? 'bg-blue-500 text-white' : 'bg-red-100 text-red-700' }}">
                {{ $unreadCount }}
            </span>
            @endif
        </button>
    </div>

    {{-- Notification List --}}
    <div class="space-y-3" wire:loading.class="opacity-50 pointer-events-none">
        @forelse($notifications as $notification)
        <div wire:click="markAsRead({{ $notification->id }})"
             class="bg-white rounded-xl border {{ $notification->status->value === 'sent' ? 'border-blue-200 bg-blue-50/30' : 'border-gray-200' }} p-3 sm:p-4 cursor-pointer hover:shadow-sm transition-all">
            <div class="flex items-start gap-2 sm:gap-3">
                {{-- Unread Indicator --}}
                <div class="flex-shrink-0 pt-1">
                    @if($notification->status->value === 'sent')
                    <span class="block w-2.5 h-2.5 rounded-full bg-blue-500"></span>
                    @else
                    <span class="block w-2.5 h-2.5 rounded-full bg-gray-300"></span>
                    @endif
                </div>

                {{-- Content --}}
                <div class="flex-1 min-w-0">
                    <div class="flex flex-wrap items-center gap-1.5 sm:gap-2 mb-1">
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-600">
                            {{ $notification->event_type }}
                        </span>
                        <span class="text-xs text-gray-400">
                            {{ $notification->created_at->diffForHumans() }}
                        </span>
                    </div>
                    @if($notification->subject)
                    <p class="text-sm font-medium text-gray-800 mb-0.5">{{ $notification->subject }}</p>
                    @endif
                    <p class="text-sm text-gray-600 leading-relaxed">{{ $notification->body }}</p>
                </div>

                {{-- Loading for this item --}}
                <div wire:loading wire:target="markAsRead({{ $notification->id }})" class="flex-shrink-0">
                    <svg class="w-4 h-4 animate-spin text-blue-500" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                    </svg>
                </div>
            </div>
        </div>
        @empty
        <div class="bg-white rounded-xl border border-gray-200 p-8 sm:p-12 text-center">
            <svg class="w-12 h-12 sm:w-16 sm:h-16 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
            <p class="text-gray-500 text-sm">{{ $filter === 'unread' ? __('لا توجد إشعارات غير مقروءة') : __('لا توجد إشعارات') }}</p>
        </div>
        @endforelse
    </div>

    {{-- Pagination --}}
    @if($notifications->hasPages())
    <div class="mt-4">
        {{ $notifications->links() }}
    </div>
    @endif
</div>
