{{-- resources/views/messenger/inbox.blade.php --}}
<x-app-layout>
    <x-slot name="title">صندوق الوارد - Facebook Messenger</x-slot>

<div class="p-6 space-y-6">

<!-- رأس الصفحة -->
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
    <div>
        <h1 class="text-3xl font-bold text-foreground flex items-center gap-2">
            <div class="w-8 h-8 bg-gradient-to-r from-blue-600 to-cyan-600 rounded-lg flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
                    <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/>
                </svg>
            </div>
            صندوق الوارد
        </h1>
        <p class="text-muted-foreground">إدارة رسائل فيسبوك الخاصة بك بكفاءة</p>
    </div>

    <!-- شريط الأدوات العلوي -->
    <div class="flex items-center gap-2 flex-wrap">
        <!-- مؤشر الحالة المباشرة -->
        <div class="flex items-center gap-2 text-sm px-3 py-2 bg-green-50 border border-green-200 rounded-lg">
            <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
            <span class="text-green-700 font-medium">متصل</span>
        </div>

        <!-- زر التحديث -->
        <button id="refresh-btn" class="inline-flex items-center gap-2 px-3 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-all text-sm font-medium">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="refresh-icon">
                <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
                <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
            </svg>
            تحديث
        </button>
    </div>
</div>

<!-- شريط الفلاتر والبحث المحسن -->
<div class="bg-card rounded-xl border shadow-sm p-4">
    <div class="flex flex-col lg:flex-row gap-4 items-center justify-between">
        <!-- فلاتر الصفحة والحالة -->
        <div class="flex items-center gap-3 w-full lg:w-auto">
            <form method="GET" class="flex items-center gap-2">
                <input type="hidden" name="status" value="{{ $status }}">
                
                <!-- فلتر الصفحة -->
                <div class="relative">
                    <select name="page_id" class="flex h-10 w-full min-w-48 rounded-md border border-input bg-background px-3 py-2 text-sm focus:border-primary focus:ring-2 focus:ring-primary/20" 
                            onchange="this.form.submit()">
                        <option value="">جميع الصفحات ({{ $stats['total'] ?? 0 }})</option>
                        @foreach($pages as $page)
                            <option value="{{ $page->id }}" {{ $pageId == $page->id ? 'selected' : '' }}>
                                {{ $page->name }}
                                @if(isset($pageStats[$page->id]))
                                    ({{ $pageStats[$page->id] }})
                                @endif
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- فلتر سريع بالحالة -->
                <div class="flex items-center bg-muted rounded-lg p-1">
                    <input type="radio" id="status-all" name="status_filter" value="active" class="sr-only status-radio" {{ $status === 'active' ? 'checked' : '' }}>
                    <label for="status-all" class="status-btn px-3 py-1.5 text-sm font-medium rounded cursor-pointer transition-all">الكل</label>
                    
                    <input type="radio" id="status-unread" name="status_filter" value="unread" class="sr-only status-radio" {{ $status === 'unread' ? 'checked' : '' }}>
                    <label for="status-unread" class="status-btn px-3 py-1.5 text-sm font-medium rounded cursor-pointer transition-all">غير مقروء</label>
                    
                    <input type="radio" id="status-archived" name="status_filter" value="archived" class="sr-only status-radio" {{ $status === 'archived' ? 'checked' : '' }}>
                    <label for="status-archived" class="status-btn px-3 py-1.5 text-sm font-medium rounded cursor-pointer transition-all">مؤرشف</label>
                </div>
            </form>
        </div>
        
        <!-- شريط البحث المتقدم -->
        <div class="relative flex-1 max-w-md">
            <div class="relative">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground">
                    <circle cx="11" cy="11" r="8"></circle>
                    <path d="m21 21-4.3-4.3"></path>
                </svg>
                <input type="text" id="search-input" placeholder="البحث في المحادثات والرسائل..." 
                       class="flex h-10 w-full rounded-md border border-input bg-background px-10 py-2 text-sm placeholder:text-muted-foreground focus:border-primary focus:ring-2 focus:ring-primary/20" />
                <div id="search-loading" class="absolute left-3 top-1/2 transform -translate-y-1/2 hidden">
                    <div class="w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin"></div>
                </div>
                <button type="button" id="clear-search" class="absolute left-3 top-1/2 transform -translate-y-1/2 p-1 hover:bg-accent rounded text-muted-foreground hidden">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M18 6 6 18"/>
                        <path d="m6 6 12 12"/>
                    </svg>
                </button>
            </div>
            
            <!-- اقتراحات البحث -->
            <div id="search-suggestions" class="absolute top-full left-0 right-0 mt-1 bg-card border border-border rounded-lg shadow-lg z-20 hidden max-h-60 overflow-y-auto">
                <!-- ستملأ بـ JavaScript -->
            </div>
        </div>
    </div>
</div>

<!-- بطاقات الإحصائيات المحسنة -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
    <!-- محادثات نشطة -->
    <a href="{{ route('messenger.inbox', ['status' => 'active'] + request()->only(['page_id'])) }}" 
       class="group block transition-all hover:scale-105 hover:shadow-lg">
        <div class="bg-gradient-to-br from-blue-50 to-cyan-50 border-2 {{ $status === 'active' ? 'border-primary' : 'border-transparent' }} rounded-xl p-6 transition-all">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
                        <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/>
                    </svg>
                </div>
                @if($status === 'active')
                    <div class="w-3 h-3 bg-primary rounded-full animate-pulse"></div>
                @endif
            </div>
            <div class="text-2xl font-bold text-blue-700 mb-1">{{ number_format($stats['total'] ?? 0) }}</div>
            <div class="text-sm font-medium text-blue-600">محادثات نشطة</div>
        </div>
    </a>

    <!-- غير مقروءة -->
    <a href="{{ route('messenger.inbox', ['status' => 'unread'] + request()->only(['page_id'])) }}" 
       class="group block transition-all hover:scale-105 hover:shadow-lg">
        <div class="bg-gradient-to-br from-yellow-50 to-orange-50 border-2 {{ $status === 'unread' ? 'border-yellow-500' : 'border-transparent' }} rounded-xl p-6 transition-all">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 bg-gradient-to-br from-yellow-500 to-orange-500 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
                        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
                        <polyline points="22,6 12,13 2,6"/>
                    </svg>
                </div>
                @if(($stats['unread'] ?? 0) > 0)
                    <div class="flex items-center gap-1">
                        <div class="w-2 h-2 bg-red-500 rounded-full animate-bounce"></div>
                        <div class="w-2 h-2 bg-red-500 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
                        <div class="w-2 h-2 bg-red-500 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
                    </div>
                @endif
            </div>
            <div class="text-2xl font-bold text-yellow-700 mb-1">{{ number_format($stats['unread'] ?? 0) }}</div>
            <div class="text-sm font-medium text-yellow-600">غير مقروءة</div>
        </div>
    </a>

    <!-- مؤرشفة -->
    <a href="{{ route('messenger.inbox', ['status' => 'archived'] + request()->only(['page_id'])) }}" 
       class="group block transition-all hover:scale-105 hover:shadow-lg">
        <div class="bg-gradient-to-br from-gray-50 to-slate-50 border-2 {{ $status === 'archived' ? 'border-gray-500' : 'border-transparent' }} rounded-xl p-6 transition-all">
            <div class="flex items-center justify-between mb-4">
                <div class="w-12 h-12 bg-gradient-to-br from-gray-500 to-slate-500 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
                        <rect width="20" height="5" x="2" y="3" rx="1"/>
                        <path d="m4 8 16 0"/>
                        <path d="m6 21 12 0"/>
                        <path d="M12 8v13"/>
                        <path d="m8 8 4 4 4-4"/>
                    </svg>
                </div>
            </div>
            <div class="text-2xl font-bold text-gray-700 mb-1">{{ number_format($stats['archived'] ?? 0) }}</div>
            <div class="text-sm font-medium text-gray-600">مؤرشفة</div>
        </div>
    </a>

    <!-- إحصائية اليوم -->
    <div class="bg-gradient-to-br from-green-50 to-emerald-50 border border-green-200 rounded-xl p-6">
        <div class="flex items-center justify-between mb-4">
            <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-500 rounded-xl flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white">
                    <circle cx="12" cy="12" r="10"/>
                    <polyline points="12 6 12 12 16 14"/>
                </svg>
            </div>
            <div class="text-xs text-green-600 font-medium" id="current-time">{{ now()->format('H:i') }}</div>
        </div>
        <div class="text-2xl font-bold text-green-700 mb-1">{{ $stats['today'] ?? 0 }}</div>
        <div class="text-sm font-medium text-green-600">رسائل اليوم</div>
    </div>
</div>

<!-- قائمة المحادثات المحسنة -->
<div class="bg-card rounded-xl border shadow-sm overflow-hidden">
    <!-- رأس قائمة المحادثات -->
    <div class="px-6 py-4 border-b border-border bg-muted/30">
        <div class="flex items-center justify-between">
            <h3 class="font-semibold text-lg flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-primary">
                    <rect width="20" height="16" x="2" y="4" rx="2"/>
                    <path d="m22 7-10 5L2 7"/>
                </svg>
                المحادثات
                @if($status === 'unread')
                    - غير المقروءة ({{ number_format($stats['unread'] ?? 0) }})
                @elseif($status === 'archived')
                    - المؤرشفة ({{ number_format($stats['archived'] ?? 0) }})
                @else
                    - النشطة ({{ number_format($stats['total'] ?? 0) }})
                @endif
            </h3>
            
            <!-- أدوات إضافية -->
            <div class="flex items-center gap-2">
                @if($status !== 'unread' && ($stats['unread'] ?? 0) > 0)
                    <a href="{{ route('messenger.inbox', ['status' => 'unread'] + request()->only(['page_id'])) }}" 
                       class="inline-flex items-center gap-1 px-2 py-1 bg-yellow-100 text-yellow-700 rounded-md text-xs font-medium hover:bg-yellow-200 transition-colors">
                        <span class="w-2 h-2 bg-yellow-500 rounded-full"></span>
                        {{ $stats['unread'] }} غير مقروء
                    </a>
                @endif
                
                <button id="mark-all-read" class="inline-flex items-center gap-1 px-3 py-1 bg-green-100 text-green-700 rounded-md text-xs font-medium hover:bg-green-200 transition-colors" title="وضع علامة مقروء على الكل">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="20 6 9 17 4 12"/>
                    </svg>
                    تحديد الكل كمقروء
                </button>
            </div>
        </div>
    </div>
    
    <!-- قائمة المحادثات -->
    <div class="divide-y divide-border" id="conversations-container">
       
@forelse($conversations as $conversation)
    {{-- محتوى المحادثات هنا --}}
    <div class="conversation-item group p-4...">
        {{-- كل كود المحادثة --}}
    </div>

@empty
    {{-- حالة عدم وجود محادثات مع مؤشرات الفلاتر --}}
    <div class="text-center py-16">
        <div class="w-24 h-24 mx-auto mb-6 bg-muted/30 rounded-full flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" 
                 stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" 
                 class="text-muted-foreground">
                <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/>
            </svg>
        </div>

        <h5 class="text-xl font-semibold text-muted-foreground mb-3">
            لا توجد محادثات لهذه التصفية
        </h5>

        {{-- عرض معلومات الفلاتر الحالية --}}
        <div class="mb-6 inline-block">
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 text-sm">
                <div class="flex items-center justify-center gap-4 text-blue-700">
                    <div class="flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" 
                             fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" 
                             stroke-linejoin="round">
                            <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
                        </svg>
                        <span class="font-medium">الحالة:</span>
                        <span class="font-bold">
                            @if($status === 'active')
                                نشطة
                            @elseif($status === 'unread')
                                غير مقروءة
                            @elseif($status === 'archived')
                                مؤرشفة
                            @else
                                {{ $status }}
                            @endif
                        </span>
                    </div>
                    
                    <div class="w-px h-4 bg-blue-300"></div>
                    
                    <div class="flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" 
                             fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" 
                             stroke-linejoin="round" class="text-blue-600">
                            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
                            <circle cx="12" cy="5" r="1"/>
                        </svg>
                        <span class="font-medium">الصفحة:</span>
                        <span class="font-bold">
                            @if($pageId)
                                {{ $pages->firstWhere('id', $pageId)?->name ?? 'غير محددة' }}
                            @else
                                جميع الصفحات
                            @endif
                        </span>
                    </div>
                </div>
            </div>
        </div>

        {{-- رسائل توضيحية حسب نوع الفلتر --}}
        @if($status === 'unread')
            <p class="text-muted-foreground mb-4">
                لا توجد محادثات غير مقروءة حالياً 🎉
            </p>
            <a href="{{ route('messenger.inbox', ['status' => 'active'] + request()->only('page_id')) }}" 
               class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" 
                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" 
                     stroke-linejoin="round">
                    <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/>
                </svg>
                عرض جميع المحادثات النشطة
            </a>

        @elseif($status === 'archived')
            <p class="text-muted-foreground mb-4">
                لا توجد محادثات مؤرشفة
            </p>
            <a href="{{ route('messenger.inbox', ['status' => 'active'] + request()->only('page_id')) }}" 
               class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" 
                     fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" 
                     stroke-linejoin="round">
                    <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/>
                </svg>
                عرض المحادثات النشطة
            </a>

        @else
            {{-- حالة Active لكن لا توجد محادثات --}}
            <p class="text-muted-foreground mb-4">
                @if($pageId)
                    لا توجد محادثات لهذه الصفحة حالياً
                @else
                    لا توجد محادثات متاحة حالياً
                @endif
            </p>

            <div class="flex justify-center gap-3">
                {{-- زر المزامنة --}}
                <button id="sync-messages" 
                        class="inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" 
                         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" 
                         stroke-linejoin="round">
                        <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
                        <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
                    </svg>
                    مزامنة الرسائل
                </button>

                @if($pageId)
                    {{-- زر إعادة تعيين فلتر الصفحة --}}
                    <a href="{{ route('messenger.inbox', ['status' => $status]) }}" 
                       class="inline-flex items-center gap-2 px-4 py-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground rounded-lg transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" 
                             fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" 
                             stroke-linejoin="round">
                            <path d="M3 6h18"/>
                            <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/>
                            <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>
                            <line x1="10" x2="10" y1="11" y2="17"/>
                            <line x1="14" x2="14" y1="11" y2="17"/>
                        </svg>
                        عرض جميع الصفحات
                    </a>
                @endif
            </div>
        @endif

        {{-- زر إعادة تعيين جميع الفلاتر --}}
        @if($pageId || $status !== 'active')
            <div class="mt-4">
                <a href="{{ route('messenger.inbox') }}" 
                   class="inline-flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground hover:text-foreground border border-dashed border-muted-foreground/30 hover:border-foreground/50 rounded-lg transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" 
                         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" 
                         stroke-linejoin="round">
                        <polyline points="1 4 1 10 7 10"/>
                        <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
                    </svg>
                    إعادة تعيين جميع الفلاتر
                </a>
            </div>
        @endif
    </div>
@endforelse
    </div>

    <!-- تذييل قائمة المحادثات مع ترقيم الصفحات -->
    @if($conversations->hasPages())
        <div class="border-t border-border p-6 bg-muted/30">
            <div class="flex items-center justify-between">
                <div class="text-sm text-muted-foreground">
                    عرض {{ $conversations->firstItem() ?? 0 }} - {{ $conversations->lastItem() ?? 0 }} من أصل {{ $conversations->total() ?? 0 }} محادثة
                </div>
                <div class="flex items-center gap-2">
                    {{ $conversations->appends(request()->query())->links() }}
                </div>
            </div>
        </div>
    @endif
</div>

</div>

<!-- نافذة البحث المتقدم -->
<div id="searchModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 hidden">
    <div class="bg-card rounded-xl border shadow-2xl w-full max-w-3xl mx-4 max-h-[85vh] overflow-hidden">
        <!-- رأس النافذة -->
        <div class="flex items-center justify-between p-6 border-b border-border">
            <h4 class="text-lg font-semibold flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-primary">
                    <circle cx="11" cy="11" r="8"></circle>
                    <path d="m21 21-4.3-4.3"></path>
                </svg>
                نتائج البحث
            </h4>
            <button type="button" class="p-2 hover:bg-accent rounded-lg transition-colors" onclick="closeSearchModal()">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M18 6 6 18"/>
                    <path d="m6 6 12 12"/>
                </svg>
            </button>
        </div>
        
        <!-- محتوى النافذة -->
        <div class="p-6 max-h-[calc(85vh-8rem)] overflow-auto" id="search-results">
            <!-- نتائج البحث ستظهر هنا -->
            <div class="text-center py-12 text-muted-foreground">
                <div class="w-16 h-16 mx-auto mb-4 bg-muted/30 rounded-full flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="11" cy="11" r="8"></circle>
                        <path d="m21 21-4.3-4.3"></path>
                    </svg>
                </div>
                <p>ابدأ بالكتابة للبحث في المحادثات...</p>
            </div>
        </div>
    </div>
</div>

<!-- مكان للتنبيهات -->
<div id="notifications-container" class="fixed top-4 left-4 z-50 space-y-2"></div>

<!-- تحميل مكتبة Pusher -->
<script src="https://js.pusher.com/8.2.0/pusher.min.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    // ===== متغيرات عامة =====
    let searchTimeout;
    let pusher = null;
    let searchController;

    // ===== تحديث الوقت الحالي =====
    function updateCurrentTime() {
        const timeElement = document.getElementById('current-time');
        if (timeElement) {
            const now = new Date();
            timeElement.textContent = now.toLocaleTimeString('ar-SA', { 
                hour12: false, 
                hour: '2-digit', 
                minute: '2-digit' 
            });
        }
    }
    
    updateCurrentTime();
    setInterval(updateCurrentTime, 60000);

    // ===== إدارة أزرار الفلاتر =====
    function updateFilterButtons() {
        document.querySelectorAll('.status-btn').forEach(btn => {
            btn.classList.remove('bg-primary', 'text-primary-foreground');
            btn.classList.add('text-muted-foreground');
        });
        
        const activeRadio = document.querySelector('.status-radio:checked');
        if (activeRadio) {
            const btn = activeRadio.nextElementSibling;
            btn.classList.add('bg-primary', 'text-primary-foreground');
            btn.classList.remove('text-muted-foreground');
        }
    }

    document.querySelectorAll('.status-radio').forEach(radio => {
        radio.addEventListener('change', function() {
            updateFilterButtons();
            // إعادة توجيه لصفحة جديدة
            const status = this.value;
            const currentUrl = new URL(window.location);
            currentUrl.searchParams.set('status', status);
            window.location.href = currentUrl.toString();
        });
    });

    updateFilterButtons();

    // ===== إعداد Pusher للتحديثات المباشرة =====
    try {
        const pusherConfig = {
            key: '{{ config("broadcasting.connections.pusher.key") }}',
            cluster: '{{ config("broadcasting.connections.pusher.options.cluster") }}'
        };
        
        if (pusherConfig.key && pusherConfig.key !== '') {
            pusher = new Pusher(pusherConfig.key, {
                cluster: pusherConfig.cluster,
                encrypted: true
            });

            const userChannel = pusher.subscribe('user.{{ auth()->id() }}');
            
            userChannel.bind('message.received', function(data) {
                console.log('New message received:', data);
                updateConversationItem(data.conversation_id, data.message);
                showNotification('رسالة جديدة من ' + data.sender_name, 'success');
                
                // تحديث الإحصائيات
                updateStats();
            });

            userChannel.bind('message.read', function(data) {
                console.log('Message marked as read:', data);
                markConversationAsRead(data.conversation_id);
            });
        }
    } catch (e) {
        console.log('Pusher not configured or unavailable:', e);
    }

    // ===== وظائف البحث المحسنة =====
    const searchInput = document.getElementById('search-input');
    const searchSuggestions = document.getElementById('search-suggestions');
    const clearSearchBtn = document.getElementById('clear-search');
    const searchLoading = document.getElementById('search-loading');

    searchInput.addEventListener('input', function() {
        const query = this.value.trim();
        
        // إظهار/إخفاء زر المسح
        clearSearchBtn.classList.toggle('hidden', query.length === 0);
        
        if (query.length === 0) {
            hideSuggestions();
            return;
        }

        clearTimeout(searchTimeout);
        
        if (query.length >= 2) {
            searchTimeout = setTimeout(() => {
                performSearch(query, true); // البحث مع الاقتراحات
            }, 300);
        }
    });

    searchInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            const query = this.value.trim();
            if (query.length >= 2) {
                performSearch(query, false); // البحث الكامل
                showSearchModal();
            }
        }
    });

    clearSearchBtn.addEventListener('click', function() {
        searchInput.value = '';
        this.classList.add('hidden');
        hideSuggestions();
        searchInput.focus();
    });

    function performSearch(query, suggestions = false) {
        // إلغاء البحث السابق
        if (searchController) {
            searchController.abort();
        }
        
        searchController = new AbortController();
        
        // إظهار مؤشر التحميل
        if (!suggestions) {
            searchLoading.classList.remove('hidden');
        }

        const url = new URL('{{ route("messenger.search") }}');
        url.searchParams.set('q', query);
        url.searchParams.set('page_id', '{{ $pageId }}');
        if (suggestions) url.searchParams.set('suggestions', '1');

        fetch(url, {
            signal: searchController.signal,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
        .then(response => {
            if (!response.ok) throw new Error('Network response was not ok');
            return response.json();
        })
        .then(data => {
            if (suggestions) {
                displaySearchSuggestions(data.conversations);
            } else {
                displaySearchResults(data.conversations);
            }
        })
        .catch(error => {
            if (error.name !== 'AbortError') {
                console.error('Search error:', error);
                showNotification('حدث خطأ أثناء البحث', 'error');
            }
        })
        .finally(() => {
            searchLoading.classList.add('hidden');
        });
    }

    function displaySearchSuggestions(conversations) {
        if (conversations.length === 0) {
            hideSuggestions();
            return;
        }

        let html = conversations.slice(0, 5).map(conv => `
            <div class="suggestion-item p-3 hover:bg-accent cursor-pointer transition-colors border-b border-border last:border-b-0" 
                 onclick="goToConversation('${conv.id}')">
                <div class="flex items-center gap-3">
                    <img src="${conv.participant_profile_pic || 'https://ui-avatars.com/api/?name=' + encodeURIComponent(conv.participant_name || 'User')}" 
                         class="w-8 h-8 rounded-full object-cover">
                    <div class="flex-1 min-w-0">
                        <div class="text-sm font-medium truncate">${conv.participant_name || 'مستخدم فيسبوك'}</div>
                        <div class="text-xs text-muted-foreground truncate">${conv.facebook_page.name}</div>
                    </div>
                    ${conv.has_unread ? '<div class="w-2 h-2 bg-primary rounded-full"></div>' : ''}
                </div>
            </div>
        `).join('');

        if (conversations.length > 5) {
            html += `
                <div class="p-3 text-center border-t border-border">
                    <button onclick="performFullSearch()" class="text-sm text-primary hover:underline">
                        عرض جميع النتائج (${conversations.length})
                    </button>
                </div>
            `;
        }

        searchSuggestions.innerHTML = html;
        searchSuggestions.classList.remove('hidden');
    }

    function displaySearchResults(conversations) {
        let html = '';
        
        if (conversations.length === 0) {
            html = `
                <div class="text-center py-16">
                    <div class="w-16 h-16 mx-auto mb-4 bg-muted/30 rounded-full flex items-center justify-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground">
                            <circle cx="11" cy="11" r="8"></circle>
                            <path d="m21 21-4.3-4.3"></path>
                        </svg>
                    </div>
                    <h5 class="text-lg font-medium text-muted-foreground mb-2">لا توجد نتائج</h5>
                    <p class="text-muted-foreground">جرب استخدام كلمات مختلفة أو تحقق من الإملاء</p>
                </div>
            `;
        } else {
            html = `
                <div class="mb-4 p-3 bg-muted/30 rounded-lg">
                    <div class="text-sm font-medium text-muted-foreground">
                        تم العثور على ${conversations.length} نتيجة للبحث عن "${searchInput.value}"
                    </div>
                </div>
            `;

            html += conversations.map(conv => `
                <div class="border-b border-border last:border-b-0 p-4 hover:bg-muted/30 transition-colors cursor-pointer" 
                     onclick="goToConversation('${conv.id}')">
                    <div class="flex items-start gap-4">
                        <div class="relative">
                            <img src="${conv.participant_profile_pic || 'https://ui-avatars.com/api/?name=' + encodeURIComponent(conv.participant_name || 'User')}" 
                                 class="w-12 h-12 rounded-full object-cover">
                            ${conv.has_unread ? '<div class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 border-2 border-white rounded-full"></div>' : ''}
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center justify-between mb-1">
                                <h6 class="font-medium text-foreground">${conv.participant_name || 'مستخدم فيسبوك'}</h6>
                                <div class="text-xs text-muted-foreground">${conv.last_message_time_human || 'غير محدد'}</div>
                            </div>
                            <div class="text-xs text-muted-foreground mb-2 flex items-center gap-1">
                                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-blue-600">
                                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
                                    <circle cx="12" cy="5" r="1"/>
                                </svg>
                                ${conv.facebook_page.name}
                            </div>
                            ${conv.latest_message ? `<p class="text-sm text-muted-foreground line-clamp-2">${conv.latest_message}</p>` : ''}
                            <div class="flex items-center justify-between mt-2">
                                <div class="text-xs text-muted-foreground">
                                    ${conv.message_count || 0} رسالة
                                </div>
                                <div class="flex items-center gap-1">
                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium ${conv.has_unread ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800'}">
                                        ${conv.has_unread ? 'غير مقروء' : 'مقروء'}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `).join('');
        }
        
        document.getElementById('search-results').innerHTML = html;
    }

    function hideSuggestions() {
        searchSuggestions.classList.add('hidden');
    }

    function showSearchModal() {
        document.getElementById('searchModal').classList.remove('hidden');
        document.body.style.overflow = 'hidden';
    }

    function closeSearchModal() {
        document.getElementById('searchModal').classList.add('hidden');
        document.body.style.overflow = '';
    }

    window.closeSearchModal = closeSearchModal;

    function goToConversation(id) {
        window.location.href = `/messenger/conversation/${id}`;
    }

    window.goToConversation = goToConversation;

    function performFullSearch() {
        const query = searchInput.value.trim();
        if (query.length >= 2) {
            hideSuggestions();
            performSearch(query, false);
            showSearchModal();
        }
    }

    window.performFullSearch = performFullSearch;

    // إخفاء الاقتراحات عند النقر خارجها
    document.addEventListener('click', function(e) {
        if (!searchInput.contains(e.target) && !searchSuggestions.contains(e.target)) {
            hideSuggestions();
        }
    });

    // ===== إدارة القوائم المنسدلة =====
    document.addEventListener('click', function(e) {
        // فتح/إغلاق قوائم المحادثات
        if (e.target.closest('.conversation-menu-btn')) {
            e.preventDefault();
            e.stopPropagation();
            
            const conversationId = e.target.closest('.conversation-menu-btn').dataset.conversationId;
            const menu = document.querySelector(`.conversation-menu[data-conversation-id="${conversationId}"]`);
            
            // إخفاء جميع القوائم الأخرى
            document.querySelectorAll('.conversation-menu').forEach(m => {
                if (m !== menu) m.classList.add('hidden');
            });
            
            menu.classList.toggle('hidden');
            return;
        }

        // إخفاء القوائم عند النقر خارجها
        if (!e.target.closest('.conversation-menu')) {
            document.querySelectorAll('.conversation-menu').forEach(menu => {
                menu.classList.add('hidden');
            });
        }
    });

    // ===== إجراءات المحادثات =====
    
    // وضع علامة مقروء
    document.addEventListener('click', function(e) {
        if (e.target.closest('.mark-as-read')) {
            e.preventDefault();
            e.stopPropagation();
            
            const conversationId = e.target.closest('.mark-as-read').dataset.conversationId;
            markConversationAsRead(conversationId);
        }
    });

    function markConversationAsRead(conversationId) {
        fetch(`/messenger/conversation/${conversationId}/mark-read`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const conversationItem = document.querySelector(`[data-conversation-id="${conversationId}"]`);
                if (conversationItem) {
                    // إزالة تمييز عدم القراءة
                    conversationItem.classList.remove('bg-blue-50/50', 'border-r-4', 'border-r-primary');
                    
                    // إزالة عداد الرسائل غير المقروءة
                    const badge = conversationItem.querySelector('.bg-red-500');
                    if (badge) badge.remove();
                }
                showNotification('تم وضع علامة مقروء على المحادثة', 'success');
                updateStats();
            }
        })
        .catch(error => {
            console.error('Mark as read error:', error);
            showNotification('حدث خطأ أثناء تحديث حالة القراءة', 'error');
        });
    }

    // وضع علامة مقروء على الكل
    document.getElementById('mark-all-read').addEventListener('click', function() {
        if (confirm('هل تريد وضع علامة مقروء على جميع المحادثات؟')) {
            fetch('/messenger/mark-all-read', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    page_id: '{{ $pageId }}'
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // تحديث جميع المحادثات
                    document.querySelectorAll('.conversation-item').forEach(item => {
                        item.classList.remove('bg-blue-50/50', 'border-r-4', 'border-r-primary');
                        const badge = item.querySelector('.bg-red-500');
                        if (badge) badge.remove();
                    });
                    
                    showNotification(`تم وضع علامة مقروء على ${data.count || 0} محادثة`, 'success');
                    
                    // تحديث الإحصائيات
                    setTimeout(() => {
                        updateStats();
                    }, 1000);
                }
            })
            .catch(error => {
                console.error('Mark all as read error:', error);
                showNotification('حدث خطأ أثناء تحديث حالة القراءة', 'error');
            });
        }
    });

    // أرشفة المحادثة
    document.addEventListener('click', function(e) {
        if (e.target.closest('.archive-conversation')) {
            e.preventDefault();
            e.stopPropagation();
            
            const conversationId = e.target.closest('.archive-conversation').dataset.conversationId;
            const conversationItem = document.querySelector(`.conversation-item[data-conversation-id="${conversationId}"]`);
            
            fetch(`/messenger/conversation/${conversationId}/archive`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    conversationItem.style.opacity = '0';
                    conversationItem.style.transform = 'translateX(100%)';
                    setTimeout(() => {
                        conversationItem.remove();
                        updateStats();
                    }, 300);
                    showNotification('تم أرشفة المحادثة بنجاح', 'success');
                } else {
                    showNotification(data.message || 'حدث خطأ أثناء الأرشفة', 'error');
                }
            })
            .catch(error => {
                console.error('Archive error:', error);
                showNotification('حدث خطأ أثناء الأرشفة', 'error');
            });
        }
    });

    // إلغاء أرشفة المحادثة
    document.addEventListener('click', function(e) {
        if (e.target.closest('.unarchive-conversation')) {
            e.preventDefault();
            e.stopPropagation();
            
            const conversationId = e.target.closest('.unarchive-conversation').dataset.conversationId;
            const conversationItem = document.querySelector(`.conversation-item[data-conversation-id="${conversationId}"]`);
            
            fetch(`/messenger/conversation/${conversationId}/unarchive`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    conversationItem.style.opacity = '0';
                    conversationItem.style.transform = 'translateX(100%)';
                    setTimeout(() => {
                        conversationItem.remove();
                        updateStats();
                    }, 300);
                    showNotification('تم إلغاء أرشفة المحادثة بنجاح', 'success');
                } else {
                    showNotification(data.message || 'حدث خطأ أثناء إلغاء الأرشفة', 'error');
                }
            })
            .catch(error => {
                console.error('Unarchive error:', error);
                showNotification('حدث خطأ أثناء إلغاء الأرشفة', 'error');
            });
        }
    });

    // تعيين/إلغاء الأولوية
    document.addEventListener('click', function(e) {
        if (e.target.closest('.set-priority')) {
            e.preventDefault();
            e.stopPropagation();
            
            const conversationId = e.target.closest('.set-priority').dataset.conversationId;
            
            fetch(`/messenger/conversation/${conversationId}/toggle-priority`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const conversationItem = document.querySelector(`.conversation-item[data-conversation-id="${conversationId}"]`);
                    const button = e.target.closest('.set-priority');
                    
                    // تحديث النص والأيقونة
                    const icon = button.querySelector('svg');
                    const text = button.querySelector('svg').nextSibling;
                    
                    if (data.is_priority) {
                        icon.classList.add('text-orange-500');
                        button.innerHTML = button.innerHTML.replace('وضع كأولوية', 'إلغاء الأولوية');
                        
                        // إضافة أيقونة النجمة للمحادثة
                        const nameContainer = conversationItem.querySelector('h6');
                        if (!nameContainer.querySelector('.text-orange-500')) {
                            const starIcon = document.createElement('svg');
                            starIcon.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
                            starIcon.setAttribute('width', '16');
                            starIcon.setAttribute('height', '16');
                            starIcon.setAttribute('viewBox', '0 0 24 24');
                            starIcon.setAttribute('fill', 'none');
                            starIcon.setAttribute('stroke', 'currentColor');
                            starIcon.setAttribute('stroke-width', '2');
                            starIcon.setAttribute('stroke-linecap', 'round');
                            starIcon.setAttribute('stroke-linejoin', 'round');
                            starIcon.className = 'text-orange-500';
                            starIcon.innerHTML = '<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>';
                            nameContainer.appendChild(starIcon);
                        }
                    } else {
                        button.innerHTML = button.innerHTML.replace('إلغاء الأولوية', 'وضع كأولوية');
                        
                        // إزالة أيقونة النجمة
                        const starIcon = conversationItem.querySelector('h6 .text-orange-500');
                        if (starIcon) starIcon.remove();
                    }
                    
                    showNotification(data.message, 'success');
                } else {
                    showNotification(data.message || 'حدث خطأ أثناء تعديل الأولوية', 'error');
                }
            })
            .catch(error => {
                console.error('Priority toggle error:', error);
                showNotification('حدث خطأ أثناء تعديل الأولوية', 'error');
            });
        }
    });

    // حذف المحادثة
    document.addEventListener('click', function(e) {
        if (e.target.closest('.delete-conversation')) {
            e.preventDefault();
            e.stopPropagation();
            
            const conversationId = e.target.closest('.delete-conversation').dataset.conversationId;
            const conversationItem = document.querySelector(`.conversation-item[data-conversation-id="${conversationId}"]`);
            const participantName = conversationItem.querySelector('h6').textContent.trim();
            
            if (confirm(`هل أنت متأكد من حذف المحادثة مع "${participantName}"؟\n\nتحذير: لن يمكن التراجع عن هذا الإجراء وستفقد جميع الرسائل نهائياً.`)) {
                fetch(`/messenger/conversation/${conversationId}`, {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        conversationItem.style.opacity = '0';
                        conversationItem.style.transform = 'translateX(100%)';
                        setTimeout(() => {
                            conversationItem.remove();
                            updateStats();
                        }, 300);
                        showNotification('تم حذف المحادثة بنجاح', 'success');
                    } else {
                        showNotification(data.message || 'حدث خطأ أثناء الحذف', 'error');
                    }
                })
                .catch(error => {
                    console.error('Delete error:', error);
                    showNotification('حدث خطأ أثناء حذف المحادثة', 'error');
                });
            }
        }
    });

    // مزامنة الرسائل
    document.getElementById('sync-messages').addEventListener('click', function() {
        const btn = this;
        const originalText = btn.innerHTML;
        
        btn.disabled = true;
        btn.innerHTML = `
            <div class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>
            جارٍ المزامنة...
        `;
        
        fetch('/messenger/sync', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification(`تم العثور على ${data.new_messages || 0} رسالة جديدة`, 'success');
                if (data.new_messages > 0) {
                    setTimeout(() => location.reload(), 2000);
                }
            } else {
                showNotification(data.message || 'حدث خطأ أثناء المزامنة', 'error');
            }
        })
        .catch(error => {
            console.error('Sync error:', error);
            showNotification('حدث خطأ أثناء مزامنة الرسائل', 'error');
        })
        .finally(() => {
            btn.disabled = false;
            btn.innerHTML = originalText;
        });
    });

    // تحديث المحادثة عند وصول رسالة جديدة
    function updateConversationItem(conversationId, message) {
        const item = document.querySelector(`.conversation-item[data-conversation-id="${conversationId}"]`);
        if (item) {
            // تحديث آخر رسالة
            const messageEl = item.querySelector('.text-muted-foreground.text-sm.mb-3');
            if (messageEl) {
                messageEl.textContent = message.message || message;
                messageEl.classList.remove('italic');
            }
            
            // إضافة/تحديث عداد الرسائل غير المقروءة
            let badge = item.querySelector('.bg-red-500');
            if (badge) {
                const currentCount = parseInt(badge.textContent) || 0;
                badge.textContent = currentCount + 1 > 9 ? '9+' : (currentCount + 1);
            } else {
                // إنشاء badge جديد
                const avatar = item.querySelector('img');
                if (avatar) {
                    const newBadge = document.createElement('div');
                    newBadge.className = 'absolute -top-2 -left-2 w-6 h-6 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center border-2 border-white';
                    newBadge.textContent = '1';
                    avatar.parentElement.appendChild(newBadge);
                }
            }
            
            // إضافة تمييز عدم القراءة
            item.classList.add('bg-blue-50/50', 'border-r-4', 'border-r-primary');
            
            // تحديث الوقت
            const timeEl = item.querySelector('.text-xs.text-muted-foreground');
            if (timeEl) {
                timeEl.textContent = 'الآن';
            }
            
            // نقل المحادثة إلى الأعلى
            const container = item.parentNode;
            container.insertBefore(item, container.firstChild);
            
            // تأثير بصري
            item.style.backgroundColor = '#eff6ff';
            setTimeout(() => {
                item.style.backgroundColor = '';
            }, 3000);
        }
    }

    // تحديث الإحصائيات
    function updateStats() {
        fetch(window.location.href, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.stats) {
                // تحديث بطاقات الإحصائيات
                Object.keys(data.stats).forEach(key => {
                    const statCard = document.querySelector(`[href*="status=${key}"] .text-2xl`);
                    if (statCard) {
                        statCard.textContent = new Intl.NumberFormat('ar-SA').format(data.stats[key]);
                    }
                });
            }
        })
        .catch(error => {
            console.error('Stats update error:', error);
        });
    }

    // زر التحديث
    document.getElementById('refresh-btn').addEventListener('click', function() {
        const btn = this;
        const icon = btn.querySelector('.refresh-icon');
        
        // تأثير الدوران
        icon.style.animation = 'spin 1s linear infinite';
        btn.disabled = true;
        
        // تحديث الإحصائيات
        updateStats();
        
        setTimeout(() => {
            icon.style.animation = '';
            btn.disabled = false;
            showNotification('تم تحديث البيانات بنجاح', 'success');
        }, 1000);
    });

    // ===== نظام التنبيهات المحسن =====
    function showNotification(message, type = 'info', duration = 5000) {
        const container = document.getElementById('notifications-container');
        if (!container) return;
        
        const notification = document.createElement('div');
        
        const styles = {
            success: {
                bg: 'bg-green-500',
                icon: '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>',
                border: 'border-green-400'
            },
            error: {
                bg: 'bg-red-500',
                icon: '<circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>',
                border: 'border-red-400'
            },
            info: {
                bg: 'bg-blue-500',
                icon: '<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>',
                border: 'border-blue-400'
            },
            warning: {
                bg: 'bg-yellow-500',
                icon: '<path d="m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>',
                border: 'border-yellow-400'
            }
        };
        
        const style = styles[type] || styles.info;
        
        notification.className = `${style.bg} ${style.border} border text-white px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 min-w-80 max-w-md transform translate-x-full opacity-0 transition-all duration-300`;
        notification.innerHTML = `
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0">
                ${style.icon}
            </svg>
            <span class="flex-1 text-sm font-medium">${message}</span>
            <button type="button" class="text-white/80 hover:text-white transition-colors p-1 rounded-full hover:bg-white/20" onclick="removeNotification(this)">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M18 6 6 18"/>
                    <path d="m6 6 12 12"/>
                </svg>
            </button>
        `;
        
        container.appendChild(notification);
        
        // تأثير الظهور
        requestAnimationFrame(() => {
            notification.style.transform = 'translateX(0)';
            notification.style.opacity = '1';
        });
        
        // الإزالة التلقائية
        if (duration > 0) {
            setTimeout(() => {
                removeNotification(notification.querySelector('button'));
            }, duration);
        }
    }

    window.showNotification = showNotification;

    function removeNotification(button) {
        const notification = button.closest('div');
        if (notification) {
            notification.style.transform = 'translateX(100%)';
            notification.style.opacity = '0';
            setTimeout(() => {
                if (notification.parentNode) {
                    notification.remove();
                }
            }, 300);
        }
    }

    window.removeNotification = removeNotification;

    // ===== تحسينات الأداء =====
    
    // Lazy loading للصور
    const imageObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                if (img.dataset.src) {
                    img.src = img.dataset.src;
                    img.removeAttribute('data-src');
                    imageObserver.unobserve(img);
                }
            }
        });
    });

    document.querySelectorAll('img[data-src]').forEach(img => {
        imageObserver.observe(img);
    });

    // تحسين النقر على المحادثات
    document.addEventListener('click', function(e) {
        const conversationItem = e.target.closest('.conversation-item');
        if (conversationItem && !e.target.closest('.conversation-menu-btn, .conversation-menu')) {
            const conversationId = conversationItem.dataset.conversationId;
            window.location.href = `/messenger/conversation/${conversationId}`;
        }
    });

    // ===== إغلاق النوافذ المشروطة =====
    
    // إغلاق نافذة البحث بالضغط على Escape
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeSearchModal();
            hideSuggestions();
        }
    });

    // إغلاق النافذة عند النقر خارجها
    window.addEventListener('click', function(e) {
        if (e.target === document.getElementById('searchModal')) {
            closeSearchModal();
        }
    });

    // تحسين أداء المزامنة التلقائية
    let syncInterval;
    
    function startAutoSync() {
        // مزامنة تلقائية كل 30 ثانية
        syncInterval = setInterval(() => {
            fetch('/messenger/check-new-messages', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.new_messages && data.new_messages.length > 0) {
                    data.new_messages.forEach(msg => {
                        updateConversationItem(msg.conversation_id, msg);
                    });
                    updateStats();
                }
            })
            .catch(error => {
                console.log('Auto-sync error (silent):', error);
            });
        }, 30000);
    }

    function stopAutoSync() {
        if (syncInterval) {
            clearInterval(syncInterval);
        }
    }

    // بدء المزامنة التلقائية
    startAutoSync();

    // إيقاف المزامنة عند مغادرة الصفحة
    window.addEventListener('beforeunload', stopAutoSync);

    // استئناف المزامنة عند العودة للصفحة
    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            stopAutoSync();
        } else {
            startAutoSync();
            updateStats(); // تحديث فوري عند العودة
        }
    });

    console.log('📬 Messenger inbox initialized successfully');
});

</script>




</x-app-layout>