{{-- Default Notifications Style --}}
<div class="content-wrapper notifications-page" x-data="notificationsManager()">

    {{-- Page Header --}}
    <div class="page-header">
        <x-lucide-bell width="24" height="24" />
        <h1>الإشعارات</h1>
    </div>

    {{-- Stats Cards --}}
    <div class="notifications-stats">
        <div class="stat-card">
            <div class="stat-icon unread">
                <x-lucide-mail width="20" height="20" />
            </div>
            <div class="stat-info">
                <span class="stat-value" x-text="unreadCount">{{ $unreadCount }}</span>
                <span class="stat-label">غير مقروء</span>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon required">
                <x-lucide-triangle-alert width="20" height="20" />
            </div>
            <div class="stat-info">
                <span class="stat-value">{{ $requiredNotifications->count() }}</span>
                <span class="stat-label">مهم (غير مقروء)</span>
            </div>
        </div>

        <div class="stat-card">
            <div class="stat-icon total">
                <x-lucide-layers width="20" height="20" />
            </div>
            <div class="stat-info">
                <span class="stat-value">{{ $notifications->count() }}</span>
                <span class="stat-label">إجمالي</span>
            </div>
        </div>
    </div>

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

        <button type="button" class="action-btn"
                @click="markAllAsRead()"
                :disabled="loading || unreadCount === 0"
                x-show="unreadCount > 0">
            <x-lucide-check-check width="16" height="16" />
            <span x-show="!loading">تمييز الكل كمقروء</span>
            <span x-show="loading" class="spinner-border spinner-border-sm"></span>
        </button>
    </div>

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

                {{-- Type Icon --}}
                <div class="type-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>

                {{-- Content --}}
                <div class="notification-content">
                    <div class="notification-header">
                        <h4 class="notification-title">
                            {{ $notification->title }}

                            @if(!$notification->is_read)
                                <span class="badge new">جديد</span>
                            @endif

                            @if($notification->is_required)
                                <span class="badge important">مهم</span>
                            @endif
                        </h4>
                    </div>

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

                    {{-- Related Model Info --}}
                    @if($notification->related_model_type && $notification->relatedModel)
                        @php
                            $linkHelper = app(\App\Services\Notification\NotificationLinkHelper::class);
                            $relatedLink = $linkHelper->getLinkForPlatform($notification, 'web');
                        @endphp

                        <div class="related-info">
                            @if(str_contains($notification->related_model_type, 'Order'))
                                <x-lucide-package width="16" height="16" />
                                <span>طلب رقم: {{ $notification->relatedModel->order_number ?? '—' }}</span>
                                @if($relatedLink && $relatedLink !== '#')
                                    <a href="{{ $relatedLink }}" class="related-link">عرض</a>
                                @endif
                            @elseif(str_contains($notification->related_model_type, 'CreditRequest'))
                                <x-lucide-wallet width="16" height="16" />
                                <span>طلب شحن: {{ $notification->relatedModel->operation_number ?? '—' }}</span>
                                @if($relatedLink && $relatedLink !== '#')
                                    <a href="{{ $relatedLink }}" class="related-link">عرض</a>
                                @endif
                            @elseif(str_contains($notification->related_model_type, 'Payment'))
                                <x-lucide-credit-card width="16" height="16" />
                                <span>دفعة: {{ $notification->relatedModel->payment_number ?? '—' }}</span>
                                @if($relatedLink && $relatedLink !== '#')
                                    <a href="{{ $relatedLink }}" class="related-link">عرض</a>
                                @endif
                            @elseif(str_contains($notification->related_model_type, 'IdentityVerification'))
                                <x-lucide-id-card width="16" height="16" />
                                <span>طلب تحقق: #{{ $notification->relatedModel->id ?? '—' }}</span>
                                @if($relatedLink && $relatedLink !== '#')
                                    <a href="{{ $relatedLink }}" class="related-link">عرض</a>
                                @endif
                            @endif
                        </div>
                    @endif

                    {{-- Footer --}}
                    <div class="notification-footer">
                        <div class="notification-time">
                            <x-lucide-clock width="14" height="14" />
                            <span>{{ $notification->created_at?->diffForHumans() }}</span>
                        </div>

                        <div class="notification-actions">
                            @if(!$notification->is_read)
                                <button type="button"
                                        class="mark-read-btn"
                                        @click="markAsRead({{ $notification->id }})"
                                        :disabled="loading">
                                    <x-lucide-check width="14" height="14" /> تمييز كمقروء
                                </button>
                            @else
                                <span class="mark-read-btn read">
                                    <x-lucide-check-circle width="14" height="14" /> تم القراءة
                                </span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="empty-state">
                <div class="empty-icon">
                    <x-lucide-bell-off width="40" height="40" />
                </div>
                <h3>لا توجد إشعارات</h3>
                <p>لم يتم استلام أي إشعارات حتى الآن</p>
            </div>
        @endforelse
    </div>

    {{-- Empty state for filtered results --}}
    <div class="filter-empty-state">
        <div class="empty-icon">
            <x-lucide-filter width="24" height="24" />
        </div>
        <h3>لا توجد نتائج</h3>
        <p>لا توجد إشعارات تطابق الفلتر المحدد</p>
    </div>
</div>