{{-- Minimal Notifications Style (Mega/Kaiali) --}}
<div class="content-wrapper notifications-minimal" :class="'filter-' + filter" x-data="notificationsManager()">

    {{-- Header --}}
    <div class="header-row">
        <h1>
            الإشعارات
            <span class="unread-badge" x-show="unreadCount > 0" x-text="unreadCount">{{ $unreadCount }}</span>
        </h1>
        <button type="button" class="mark-all"
                @click="markAllAsRead()"
                :disabled="loading || unreadCount === 0"
                x-show="unreadCount > 0">
            تمييز الكل كمقروء
        </button>
    </div>

    {{-- Tabs --}}
    <div class="tabs">
        <button type="button" :class="{ 'active': filter === 'all' }" @click="filter = 'all'">الكل</button>
        <button type="button" :class="{ 'active': filter === 'unread' }" @click="filter = 'unread'">غير مقروء</button>
        <button type="button" :class="{ 'active': filter === 'required' }" @click="filter = 'required'">مهم</button>
    </div>

    {{-- List --}}
    <div class="list">
        @forelse($notifications as $notification)
            <div class="item {{ !$notification->is_read ? 'unread' : '' }} {{ $notification->is_required ? 'required' : '' }}"
                 data-id="{{ $notification->id }}">

                <div class="icon {{ $notification->type }}">
                    @switch($notification->type)
                        @case('error')
                            <x-lucide-x-circle width="20" height="20" />
                            @break
                        @case('warning')
                            <x-lucide-triangle-alert width="20" height="20" />
                            @break
                        @case('success')
                            <x-lucide-check-circle width="20" height="20" />
                            @break
                        @default
                            <x-lucide-info width="20" height="20" />
                    @endswitch
                </div>

                <div class="body">
                    <h4 class="title">
                        @if(!$notification->is_read)
                            <span class="new-tag">جديد</span>
                        @endif
                        @if($notification->is_required)
                            <span class="imp-tag">مهم</span>
                        @endif
                        {{ $notification->title }}
                    </h4>

                    <div class="text">{!! $notification->safe_content !!}</div>

                    @if($notification->related_model_type && $notification->relatedModel)
                        @php
                            $linkHelper = app(\App\Services\Notification\NotificationLinkHelper::class);
                            $relatedLink = $linkHelper->getLinkForPlatform($notification, 'web');
                        @endphp
                        @if($relatedLink && $relatedLink !== '#')
                            <a href="{{ $relatedLink }}" class="link">
                                <x-lucide-arrow-left width="16" height="16" />
                                عرض التفاصيل
                            </a>
                        @endif
                    @endif

                    <div class="meta">
                        <span class="time">{{ $notification->created_at?->diffForHumans() }}</span>
                        @if(!$notification->is_read)
                            <button type="button" class="read-btn" @click="markAsRead({{ $notification->id }})" :disabled="loading">
                                تمييز كمقروء
                            </button>
                        @else
                            <span class="read-btn done">✓ تمت القراءة</span>
                        @endif
                    </div>
                </div>
            </div>
        @empty
            <div class="empty">
                <x-lucide-bell-off width="40" height="40" />
                <h3>لا توجد إشعارات</h3>
                <p>ستظهر الإشعارات هنا عند وصولها</p>
            </div>
        @endforelse
    </div>

    <div class="filter-empty">
        <x-lucide-filter width="16" height="16" />
        لا توجد إشعارات تطابق الفلتر
    </div>
</div>