@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50 dark:from-gray-900 dark:via-purple-900/20 dark:to-blue-900/20">
    <div class="max-w-5xl mx-auto p-4 sm:p-6 lg:p-8" dir="rtl">
        <!-- Enhanced Header -->
        <header class="mb-6 relative overflow-hidden bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 rounded-3xl p-6 shadow-2xl">
            <div class="absolute inset-0 bg-black opacity-10"></div>
            <div class="relative z-10 flex items-center justify-between">
                <div class="flex items-center gap-4">
                    @php
                        $avatar = $user->avatar ? basename($user->avatar) : null;
                        $avatarKey = $avatar ? ('avatars/' . $avatar) : null;
                        $avatarUrl = ($avatarKey && \Illuminate\Support\Facades\Storage::disk('public')->exists($avatarKey))
                            ? \Illuminate\Support\Facades\Storage::disk('public')->url($avatarKey)
                            : asset('images/default-avatar.png');
                    @endphp
                    <div class="w-16 h-16 rounded-full overflow-hidden border-4 border-white/30 shadow-lg">
                        <img src="{{ $avatarUrl }}" class="w-full h-full object-cover" alt="{{ $user->name }}" />
                    </div>
                    <div>
                        <h1 class="text-2xl font-black text-white mb-1">الدردشة مع
                            <a href="{{ route('profile.show', $user->id) }}" class="text-white/90 hover:text-white underline transition-colors">{{ $user->name }}</a>
                        </h1>
                        <div class="text-white/80" id="typing-indicator" style="display:none">يكتب الآن...</div>
                    </div>
                </div>
                <div class="flex items-center gap-3">
                    <span class="inline-flex items-center gap-2 px-4 py-2 bg-white/20 backdrop-blur-sm rounded-xl text-white font-semibold" title="رصيدك">
                        🪙 <span id="coins-header">{{ (int)(auth()->user()->coins ?? 0) }}</span>
                    </span>
                    <a href="{{ route('wallet.topup.form') }}" class="px-4 py-2 bg-gradient-to-r from-emerald-500 to-teal-500 text-white rounded-xl hover:from-emerald-600 hover:to-teal-600 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105">شحن</a>
                    <button id="search-toggle" class="px-4 py-2 bg-gradient-to-r from-blue-500 to-indigo-500 text-white rounded-xl hover:from-blue-600 hover:to-indigo-600 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105">بحث</button>
                    <button id="call-btn" class="px-4 py-2 bg-gradient-to-r from-emerald-500 to-teal-500 text-white rounded-xl hover:from-emerald-600 hover:to-teal-600 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105">اتصال صوتي</button>
                    <button id="video-btn" class="px-4 py-2 bg-gradient-to-r from-rose-500 to-pink-500 text-white rounded-xl hover:from-rose-600 hover:to-pink-600 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105">مكالمة فيديو</button>
                    @if(auth()->user()->hasBlocked($user))
                        <form action="{{ route('chat.unblock', $user->id) }}" method="POST" class="inline">@csrf
                            <button type="submit" class="px-4 py-2 bg-gradient-to-r from-green-500 to-emerald-500 text-white rounded-xl hover:from-green-600 hover:to-emerald-600 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105">إلغاء الحظر</button>
                        </form>
                    @else
                        <form action="{{ route('chat.block', $user->id) }}" method="POST" class="inline">@csrf
                            <button type="submit" class="px-4 py-2 bg-gradient-to-r from-red-500 to-rose-500 text-white rounded-xl hover:from-red-600 hover:to-rose-600 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105">حظر</button>
                        </form>
                    @endif
                </div>
            </div>
        </header>

        <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl border border-gray-100 dark:border-gray-700 overflow-hidden">
            <!-- Search Bar -->
            <div id="search-bar" class="hidden px-6 py-4 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800 border-b border-gray-200 dark:border-gray-600">
                <input type="text" id="search-input" class="w-full border-2 border-gray-200 dark:border-gray-600 rounded-xl px-4 py-3 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300" placeholder="ابحث في الرسائل..." />
            </div>

            <!-- Messages -->
            <div id="chat-box" class="h-[60vh] overflow-y-auto p-6 space-y-4 bg-gradient-to-b from-white to-gray-50 dark:from-gray-800 dark:to-gray-900 relative">
                @php
                    $lastDate = null;
                @endphp
                @foreach($messages as $message)
                    @php $currentDate = $message->created_at->toDateString(); @endphp
                    @if($lastDate !== $currentDate)
                        @php
                            $humanDay = $message->created_at->isToday() ? 'اليوم' : ($message->created_at->isYesterday() ? 'أمس' : $message->created_at->translatedFormat('Y-m-d'));
                        @endphp
                        <div class="text-center text-[11px] font-semibold tracking-wide text-gray-500 dark:text-gray-400 select-none py-1 opacity-80 relative">
                            <span class="bg-white dark:bg-gray-800 px-3 py-1 rounded-full border border-gray-200 dark:border-gray-600 shadow-sm">{{ $humanDay }}</span>
                        </div>
                        @php $lastDate = $currentDate; @endphp
                    @endif
                    <div class="flex group {{ $message->sender_id === auth()->id() ? 'justify-end' : 'justify-start' }}" data-msg-id="{{ $message->id }}">
                        <div class="relative max-w-xs md:max-w-md p-4 rounded-2xl shadow-lg {{ $message->sender_id === auth()->id() ? 'bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-br-sm' : 'bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-bl-sm border-2 border-gray-200 dark:border-gray-600' }}">
                            <p class="font-semibold mb-2 text-sm opacity-90">{{ $message->sender->name }}</p>
                            @php
                                $att = $message->attachment;
                                $isImg = false; $isAudio = false; $attUrl = null; $ext = null;
                                if($att){
                                    $attUrl = \Illuminate\Support\Facades\Storage::disk('public')->url($att);
                                    $ext = strtolower(pathinfo($att, PATHINFO_EXTENSION));
                                    $isImg = in_array($ext, ['jpg','jpeg','png','gif','webp','avif']);
                                    $isAudio = in_array($ext, ['webm','ogg','mp3','wav','m4a']);
                                }
                            @endphp
                            @if($message->message)
                              @php
                                $viewer = auth()->user();
                                $viewerLevel = (string) ($viewer->membership_level ?? 'free');
                                $senderLevel = (string) ($message->sender->membership_level ?? 'free');
                                $text = $message->message;
                                // Free viewer viewing message from free sender: show first 10 chars only
                                if($viewerLevel === 'free' && $senderLevel === 'free'){
                                    $text = mb_substr($text,0,10) . (mb_strlen($text) > 10 ? ' …' : '');
                                }
                              @endphp
                              <p class="text-sm leading-relaxed">{{ $text }}</p>
                            @endif
                            @if($att && $isImg)
                              <img src="{{ $attUrl }}" class="mt-3 max-w-full rounded-xl cursor-zoom-in chat-image shadow-lg" alt="attachment" data-full="{{ $attUrl }}" loading="lazy" />
                            @elseif($att && $isAudio)
                              <audio controls class="mt-3 w-full rounded-xl"><source src="{{ $attUrl }}" type="audio/{{ $ext }}" /></audio>
                            @elseif($att)
                              <a href="{{ $attUrl }}" target="_blank" class="inline-flex items-center gap-2 mt-3 px-3 py-2 bg-gray-100 dark:bg-gray-600 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-500 transition-colors">
                                  <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="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                                  </svg>
                                  <span class="text-sm">فتح المرفق ({{ strtoupper($ext) }})</span>
                              </a>
                            @endif
                            <span class="text-xs flex items-center gap-1 mt-3 opacity-70" title="{{ $message->created_at->format('Y-m-d H:i') }}">
                                <span>{{ $message->created_at->format('H:i') }}</span>
                                                                @if($message->sender_id === auth()->id())
                                                                    <span class="read-indicator" data-read="{{ $message->is_read ? '1':'0' }}" title="{{ $message->is_read ? 'مقروءة':'مرسلة' }}">
                                                                        @if($message->is_read)
                                                                            ✓✓
                                                                        @else
                                                                            ✓
                                                                        @endif
                                                                    </span>
                                                                @endif
                                                        </span>
                            @if($message->sender_id === auth()->id())
                            <button data-id="{{ $message->id }}" class="delete-msg hidden group-hover:inline-flex absolute -top-2 -left-2 text-xs bg-gradient-to-r from-red-500 to-rose-500 text-white px-2 py-1 rounded-lg shadow-lg hover:from-red-600 hover:to-rose-600 transition-all duration-300">حذف</button>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
            <!-- Scroll to bottom button -->
            <button id="scroll-bottom" type="button" class="hidden fixed bottom-28 right-6 z-40 px-4 py-2 rounded-full shadow-lg bg-gradient-to-r from-purple-600 to-pink-600 text-white hover:from-purple-700 hover:to-pink-700 transition-all">
                <span>الأسفل</span>
                <span id="new-msg-count" class="ml-2 inline-block min-w-[1.5rem] text-center text-xs bg-white/20 rounded-full px-2 py-0.5">0</span>
            </button>

            <!-- Composer -->
            <form id="chat-form" class="flex items-end gap-3 p-6 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-700 dark:to-gray-800 border-t border-gray-200 dark:border-gray-600 relative" action="{{ route('chat.send', $conversation->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="absolute left-6 -top-10 flex items-center gap-2 text-xs text-gray-500">
                    <input id="enter-send" type="checkbox" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                    <label for="enter-send">إرسال عند الضغط على Enter (سطر جديد: Shift+Enter)</label>
                </div>
                <textarea name="message" id="message-input" rows="1"
                    class="flex-1 resize-none border-2 border-gray-200 dark:border-gray-600 rounded-2xl p-4 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300"
                    placeholder="اكتب رسالتك..."></textarea>
                <!-- AI Assistant button and panel -->
                <div class="relative">
                    <button type="button" id="ai-btn" class="px-4 py-3 bg-gradient-to-r from-emerald-500 to-teal-500 text-white rounded-2xl hover:from-emerald-600 hover:to-teal-600 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105">🤖</button>
                    <div id="ai-panel" class="hidden absolute bottom-full mb-2 right-0 w-[28rem] max-w-[95vw] bg-white dark:bg-gray-700 border-2 border-gray-200 dark:border-gray-600 rounded-2xl shadow-2xl p-4 text-sm">
                        <div class="flex items-center justify-between mb-2">
                            <div class="font-semibold text-gray-700 dark:text-gray-200">مساعد الدردشة</div>
                            <button type="button" id="ai-close" class="text-gray-500 hover:text-gray-800 dark:text-gray-300">✕</button>
                        </div>
                        <div class="space-y-4">
                            <div>
                                <div class="flex items-center justify-between mb-2">
                                    <span class="font-semibold text-gray-700 dark:text-gray-200">اقتراح ردود</span>
                                    <button type="button" id="ai-suggest-btn" class="px-3 py-1 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700">اقترح</button>
                                </div>
                                <div id="ai-suggest-list" class="flex flex-wrap gap-2"></div>
                            </div>
                            <hr class="border-gray-200 dark:border-gray-600" />
                            <div class="grid grid-cols-3 gap-2 items-end">
                                <div class="col-span-2">
                                    <label class="block text-gray-600 dark:text-gray-300 mb-1">نبرة الكتابة</label>
                                    <select id="ai-tone" class="w-full border-2 border-gray-200 dark:border-gray-600 rounded-xl px-3 py-2 bg-white dark:bg-gray-600 text-gray-700 dark:text-gray-200">
                                        <option value="polite">مهذبة</option>
                                        <option value="friendly">ودّية</option>
                                        <option value="formal">رسمية</option>
                                        <option value="romantic">رومانسية</option>
                                    </select>
                                </div>
                                <div class="text-left">
                                    <button type="button" id="ai-rewrite-btn" class="px-3 py-2 rounded-lg bg-purple-600 text-white hover:bg-purple-700">إعادة الصياغة</button>
                                </div>
                            </div>
                            <hr class="border-gray-200 dark:border-gray-600" />
                            <div class="grid grid-cols-3 gap-2 items-end">
                                <div class="col-span-2">
                                    <label class="block text-gray-600 dark:text-gray-300 mb-1">اللغة الهدف</label>
                                    <select id="ai-target" class="w-full border-2 border-gray-200 dark:border-gray-600 rounded-xl px-3 py-2 bg-white dark:bg-gray-600 text-gray-700 dark:text-gray-200">
                                        <option value="ar">العربية</option>
                                        <option value="en">English</option>
                                        <option value="fr">Français</option>
                                    </select>
                                </div>
                                <div class="text-left">
                                    <button type="button" id="ai-translate-btn" class="px-3 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700">ترجمة</button>
                                </div>
                            </div>
                            <hr class="border-gray-200 dark:border-gray-600" />
                            <div>
                                <div class="flex items-center justify-between mb-2">
                                    <span class="font-semibold text-gray-700 dark:text-gray-200">تلخيص المحادثة</span>
                                    <button type="button" id="ai-summarize-btn" class="px-3 py-1 rounded-lg bg-emerald-600 text-white hover:bg-emerald-700">تلخيص</button>
                                </div>
                                <textarea readonly id="ai-summary" rows="3" class="w-full border-2 border-gray-200 dark:border-gray-600 rounded-xl px-3 py-2 bg-gray-50 dark:bg-gray-600 text-gray-700 dark:text-gray-200" placeholder="سيظهر الملخص هنا..."></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="relative flex items-center gap-2">
                    <button type="button" id="emoji-btn" class="px-4 py-3 bg-gradient-to-r from-yellow-400 to-orange-400 text-white rounded-2xl hover:from-yellow-500 hover:to-orange-500 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105">😀</button>
                    <div id="emoji-panel" class="hidden absolute bottom-full mb-2 right-0 w-80 bg-white dark:bg-gray-700 border-2 border-gray-200 dark:border-gray-600 rounded-2xl shadow-2xl p-4">
                        <input id="emoji-search" type="text" class="w-full border-2 border-gray-200 dark:border-gray-600 rounded-xl px-3 py-2 mb-3 bg-white dark:bg-gray-600 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="ابحث عن إيموجي..." />
                        <div id="emoji-recent" class="flex flex-wrap gap-2 mb-3 text-2xl"></div>
                        <div id="emoji-tabs" class="flex items-center gap-2 mb-3 text-sm overflow-auto"></div>
                        <div id="emoji-content" class="grid grid-cols-8 gap-2 text-2xl"></div>
                    </div>
                    <button type="button" id="gift-btn" class="px-4 py-3 bg-gradient-to-r from-pink-500 to-rose-500 text-white rounded-2xl hover:from-pink-600 hover:to-rose-600 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105">🎁</button>
                    <div id="gift-panel" class="hidden absolute bottom-full mb-2 right-16 w-[22rem] max-h-80 overflow-auto bg-white dark:bg-gray-700 border-2 border-gray-200 dark:border-gray-600 rounded-2xl shadow-2xl p-4">
                        <div class="grid grid-cols-3 gap-3" id="gift-grid"></div>
                        <div class="mt-3 text-xs text-gray-500">رصيدك: <span id="coins">{{ (int)(auth()->user()->coins ?? 0) }}</span></div>
                    </div>
                </div>
                <div id="attach-preview" class="hidden absolute -top-16 right-6 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-xl shadow-xl p-2 pl-3 pr-2 flex items-center gap-3 text-sm">
                    <img id="attach-thumb" src="" alt="" class="hidden w-10 h-10 object-cover rounded-lg border" />
                    <span id="attach-name" class="max-w-[14rem] truncate"></span>
                    <button type="button" id="attach-clear" class="px-2 py-1 text-white bg-rose-600 hover:bg-rose-700 rounded-lg">إزالة</button>
                </div>
                <label for="attachment" class="px-4 py-3 bg-gradient-to-r from-blue-500 to-indigo-500 text-white rounded-2xl hover:from-blue-600 hover:to-indigo-600 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105 cursor-pointer">
                    📎
                </label>
                <input type="file" id="attachment" name="attachment" class="hidden" accept="image/*,audio/*,.pdf,.doc,.docx" />
                <button type="submit" class="px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-600 text-white font-bold rounded-2xl hover:from-purple-700 hover:to-pink-700 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105">
                    إرسال
                </button>
            </form>
        </div>

        <!-- Rating Form -->
        <div class="mt-8 bg-white dark:bg-gray-800 rounded-3xl shadow-xl p-8 border border-gray-100 dark:border-gray-700">
            <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-6 text-center">تقييم المحادثة</h3>
            <form action="{{ route('user.rate', $user->id) }}" method="POST" class="max-w-md mx-auto space-y-6">
                @csrf
                <div>
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">التقييم</label>
                    <div class="flex items-center gap-2">
                        @for($i = 1; $i <= 5; $i++)
                            <input type="radio" name="rating" value="{{ $i }}" id="rating-{{ $i }}" class="w-5 h-5 text-purple-600 bg-gray-100 border-gray-300 focus:ring-purple-500 dark:focus:ring-purple-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
                            <label for="rating-{{ $i }}" class="text-2xl cursor-pointer hover:scale-110 transition-transform">{{ $i === 1 ? '😞' : ($i === 2 ? '😕' : ($i === 3 ? '😐' : ($i === 4 ? '🙂' : '😊'))) }}</label>
                        @endfor
                    </div>
                </div>
                <div>
                    <label for="comment" class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">تعليق (اختياري)</label>
                    <textarea name="comment" id="comment" rows="3" class="w-full border-2 border-gray-200 dark:border-gray-600 rounded-xl px-4 py-3 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300" placeholder="اكتب تعليقك هنا..."></textarea>
                </div>
                <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-green-600 to-emerald-600 text-white font-bold rounded-2xl hover:from-green-700 hover:to-emerald-700 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105">
                    إرسال التقييم
                </button>
            </form>
        </div>
    </div>
</div>
@endsection

@push('body-end')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const chatBox = document.getElementById('chat-box');
        const messageInput = document.getElementById('message-input');
        const chatForm = document.getElementById('chat-form');
        const sendBtn = document.querySelector('#chat-form button[type="submit"]');
        const typingEl = document.getElementById('typing-indicator');
        const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
        const OTHER_AVATAR = @json($avatarUrl);
        const OTHER_NAME = @json($user->name);
        const ME = @json(auth()->id());
        const CONV = @json($conversation->id);
        let COINS = parseInt(@json((int)(auth()->user()->coins ?? 0)), 10) || 0;
        const coinsHeader = document.getElementById('coins-header');
        const coinsComposer = document.getElementById('coins-composer'); // This element is removed from HTML, so this line is no longer relevant.
        const coinsGiftpanel = document.getElementById('coins-giftpanel'); // This element is removed from HTML, so this line is no longer relevant.
        function setCoins(n){ COINS = Math.max(0, parseInt(n||0,10)); if(coinsHeader) coinsHeader.textContent = COINS; // if(coinsComposer) coinsComposer.textContent = COINS; // if(coinsGiftpanel) coinsGiftpanel.textContent = COINS; }

        // ===== Helpers =====
        function scrollToBottom(){ chatBox.scrollTop = chatBox.scrollHeight; }
        function isAtBottom(){ return Math.abs(chatBox.scrollHeight - chatBox.scrollTop - chatBox.clientHeight) < 4; }
        const scrollBtn = document.getElementById('scroll-bottom');
        const newCountEl = document.getElementById('new-msg-count');
        let newMsgCount = 0;
        function showScrollBtn(){ scrollBtn?.classList?.remove('hidden'); }
        function hideScrollBtn(){ scrollBtn?.classList?.add('hidden'); }
        function resetNewCount(){ newMsgCount = 0; if(newCountEl) newCountEl.textContent = '0'; }
        scrollBtn?.addEventListener('click', ()=>{ scrollToBottom(); hideScrollBtn(); resetNewCount(); });
        chatBox.addEventListener('scroll', ()=>{
            if(isAtBottom()){ hideScrollBtn(); resetNewCount(); }
        });
        // ===== Infinite Scroll (load older) =====
        let oldestMessageId = (function(){ const first = chatBox.querySelector('[data-msg-id]'); return first ? parseInt(first.getAttribute('data-msg-id')) : null; })();
        let loadingOlder=false, noMoreOlder=false;
        const topLoader = document.createElement('div');
        topLoader.id='chat-top-loader';
        topLoader.className='text-center text-xs text-gray-500 py-2 hidden';
        topLoader.innerHTML='<span class="inline-flex items-center gap-2"><svg class="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor"><circle cx="12" cy="12" r="10" stroke-width="2" class="opacity-25"/><path d="M4 12a8 8 0 018-8" stroke-width="2" stroke-linecap="round" class="opacity-75"/></svg> تحميل رسائل أقدم...</span>';
        chatBox.prepend(topLoader);
        async function loadOlder(){
            if(loadingOlder||noMoreOlder||!oldestMessageId) return;
            loadingOlder=true; topLoader.classList.remove('hidden');
            const prevHeight = chatBox.scrollHeight;
            try{
                const res = await fetch(`/api/chat/${CONV}/messages?before=${oldestMessageId}`, {headers:{'Accept':'application/json'}, credentials:'same-origin'});
                if(res.status===401){ location.href='/login'; return; }
                if(!res.ok) throw new Error('http '+res.status);
                const data = await res.json();
                const list = data.data || [];
                if(!list.length){ noMoreOlder=true; topLoader.textContent='لا توجد رسائل أقدم'; }
                else {
                    list.forEach(msg=>{
                        const align = msg.sender_id === ME ? 'right':'left';
                        // day separator (prepend mode because older messages inserted at top)
                        const day = msg.created_at ? msg.created_at.slice(0,10) : null;
                        // placeholder ensureDaySeparator (defined later if not yet)
                        if(typeof ensureDaySeparator === 'function' && day){ ensureDaySeparator(day,'prepend'); }
                        const node = createBubble(msg.message, align, {name: msg.sender?.name||'', time: msg.created_at ? new Date(msg.created_at).toLocaleTimeString('ar-EG',{hour:'2-digit',minute:'2-digit'}) : '—', attachment: msg.attachment});
                        node.firstChild?.setAttribute('data-msg-id', msg.id);
                        chatBox.insertBefore(node, topLoader.nextSibling);
                        if(msg.gift){ node.querySelector('div').insertAdjacentHTML('beforeend', `<div class=\"mt-2 text-3xl\">${msg.gift}</div>`); }
                    });
                    // update oldest id (first element after loader)
                    const firstEl = chatBox.querySelector('[data-msg-id]');
                    if(firstEl) oldestMessageId = parseInt(firstEl.getAttribute('data-msg-id'));
                    const newHeight = chatBox.scrollHeight;
                    chatBox.scrollTop = newHeight - prevHeight;
                }
            }catch(err){
                topLoader.textContent='تعذر تحميل الرسائل';
                setTimeout(()=>{ if(!noMoreOlder) topLoader.innerHTML='<span class=\"inline-flex items-center gap-2\"><svg class=\"w-4 h-4 animate-spin\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"><circle cx=\"12\" cy=\"12\" r=\"10\" stroke-width=\"2\" class=\"opacity-25\"/><path d=\"M4 12a8 8 0 018-8\" stroke-width=\"2\" stroke-linecap=\"round\" class=\"opacity-75\"/></svg> إعادة المحاولة لاحقاً</span>'; },2500);
            }finally{
                loadingOlder=false; if(!noMoreOlder) topLoader.classList.add('hidden');
            }
        }
        chatBox.addEventListener('scroll', ()=>{ if(chatBox.scrollTop <= 40){ loadOlder(); } });
        function isImagePath(p){ return /\.(jpe?g|png|gif|webp|avif)$/i.test(p||''); }
        function isAudioPath(p){ return /\.(webm|ogg|mp3|wav|m4a)$/i.test(p||''); }
        function ensureDaySeparator(dateStr, placement='append'){
            if(!dateStr) return; if(chatBox.querySelector(`[data-day-separator='${dateStr}']`)) return;
            const todayIso = new Date().toISOString().slice(0,10);
            const yestIso = new Date(Date.now()-86400000).toISOString().slice(0,10);
            let label = dateStr===todayIso ? 'اليوم' : (dateStr===yestIso ? 'أمس' : dateStr);
            const el = document.createElement('div'); el.dataset.daySeparator=dateStr;
            el.className='text-center text-[11px] font-semibold tracking-wide text-gray-500 dark:text-gray-400 select-none py-1 opacity-80 relative';
            el.innerHTML = `<span class="bg-white dark:bg-gray-800 px-3 py-1 rounded-full border border-gray-200 dark:border-gray-600 shadow-sm">${label}</span>`;
            if(placement==='prepend'){
                const loader = chatBox.querySelector('#chat-top-loader');
                if(loader && loader.nextSibling) chatBox.insertBefore(el, loader.nextSibling); else chatBox.insertBefore(el, chatBox.firstChild);
            } else { chatBox.appendChild(el); }
        }

        function createBubble(message, align, meta){
            const wrap = document.createElement('div');
            wrap.className = 'flex group ' + (align==='right'?'justify-end':'justify-start');
            const bubble = document.createElement('div');
            bubble.className = 'relative max-w-xs md:max-w-md p-3 rounded-2xl shadow-sm ' + (align==='right'?'bg-blue-600 text-white rounded-br-sm':'bg-white text-brand-text rounded-bl-sm border border-brand-light-gray');
            if(meta?.pending){ bubble.classList.add('opacity-70'); }
            const name = document.createElement('p'); name.className='font-semibold mb-1 text-[13px] opacity-90'; name.textContent = meta?.name || '';
            const body = document.createElement('div'); body.className='text-sm leading-relaxed';
            if(message){ const p = document.createElement('p'); p.textContent = message; body.appendChild(p); }
            if(meta?.attachment){
                const att = meta.attachment; const attUrl = `${location.origin}/storage/${String(att).replace(/^\//,'')}`;
                if(isImagePath(att)){
                    const img = document.createElement('img'); img.src = attUrl; img.className='mt-2 max-w-full rounded-lg cursor-zoom-in chat-image'; img.loading='lazy'; img.dataset.full = attUrl; body.appendChild(img);
                } else if(isAudioPath(att)){
                    const audio = document.createElement('audio'); audio.controls = true; audio.className='mt-2 w-full'; const src = document.createElement('source'); src.src = attUrl; audio.appendChild(src); body.appendChild(audio);
                } else {
                    const a = document.createElement('a'); a.href=attUrl; a.target='_blank'; a.className='text-xs underline mt-2 inline-flex items-center gap-1'; a.textContent='فتح المرفق'; body.appendChild(a);
                }
            }
            const timeWrap = document.createElement('span'); timeWrap.className='text-[10px] flex items-center gap-1 mt-1 opacity-70';
            const time = document.createElement('span'); time.textContent = meta?.time || 'الآن';
            timeWrap.appendChild(time);
            if(align==='right'){
                const read = document.createElement('span'); read.className='read-indicator'; read.dataset.read = meta?.is_read ? '1':'0'; read.title = meta?.is_read ? 'مقروءة':'مرسلة'; read.textContent = meta?.is_read ? '✓✓' : '✓'; timeWrap.appendChild(read);
            }
            bubble.append(name, body, timeWrap); wrap.appendChild(bubble); return wrap;
        }

        // ===== Echo subscription (guarded) =====
        try {
            if(window.Echo){
                window.Echo.private(`conversation.${CONV}`)
                    .listen('MessageSent', (e) => {
                        const m = e?.message; if(!m) return;
                        if (m.sender_id === ME) return; // skip echo of own message
                        const day = m.created_at ? m.created_at.slice(0,10) : null; if(day) ensureDaySeparator(day,'append');
                        const node = createBubble(m.message, 'left', {name: m.sender?.name || '', time: (m.created_at? new Date(m.created_at).toLocaleTimeString('ar-EG',{hour:'2-digit',minute:'2-digit'}):'الآن'), attachment: m.attachment});
                        if(m.gift){ node.querySelector('div').insertAdjacentHTML('beforeend', `<div class=\"mt-2 text-3xl\">${m.gift}</div>`); }
                        chatBox.appendChild(node);
                        if(isAtBottom()) { scrollToBottom(); hideScrollBtn(); }
                        else { newMsgCount++; if(newCountEl) newCountEl.textContent = String(newMsgCount); showScrollBtn(); }
                        typingEl.style.display='none';
                        if(document.hidden && 'Notification' in window && Notification.permission==='granted'){
                            const body = (m.message && m.message.trim() !== '') ? m.message : (m.attachment? 'أرسل مرفقاً':'رسالة جديدة');
                            const n = new Notification(OTHER_NAME, { body, icon: OTHER_AVATAR }); setTimeout(()=>n.close(), 4000);
                        }
                    })
                    .listen('MessagesRead', (e)=>{
                        if(!e || e.reader_id === ME) return; // only care if other user read my messages
                        const ids = new Set(e.messages||[]);
                        chatBox.querySelectorAll('[data-msg-id] .read-indicator[data-read="0"]').forEach(ind=>{
                            const msgWrap = ind.closest('[data-msg-id]');
                            if(!msgWrap) return; const id = parseInt(msgWrap.getAttribute('data-msg-id'));
                            if(ids.has(id)){
                                ind.dataset.read='1'; ind.textContent='✓✓'; ind.title='مقروءة';
                            }
                        });
                    })
                    .listenForWhisper('typing', (e)=>{
                        typingEl.style.display = 'block'; clearTimeout(window.__typingHide); window.__typingHide = setTimeout(()=> typingEl.style.display='none', 2000);
                    });
            }
        } catch(_) {}

        // ===== Typing indicator (debounced) =====
        let lastTyping = 0; let typingTimer = null;
        function emitTyping(){
            const now = Date.now();
            if(now - lastTyping < 400) return; // debounce client
            lastTyping = now;
            try { window.Echo && window.Echo.private(`conversation.${CONV}`).whisper('typing', {user: ME}); } catch(_) {}
        }
        messageInput.addEventListener('input', ()=>{ emitTyping(); autoResize(messageInput); });

        function autoResize(el){ el.style.height = 'auto'; el.style.height = Math.min(140, el.scrollHeight) + 'px'; }
        // ===== Emoji picker =====
        const emojiBtn = document.getElementById('emoji-btn');
        const emojiPanel = document.getElementById('emoji-panel');
        let caret = 0;
        messageInput.addEventListener('keyup', ()=> caret = messageInput.selectionStart);
        messageInput.addEventListener('click', ()=> caret = messageInput.selectionStart);
        function insertAtCursor(txt){
            const start = messageInput.selectionStart ?? caret;
            const end = messageInput.selectionEnd ?? caret;
            const before = messageInput.value.slice(0,start);
            const after = messageInput.value.slice(end);
            messageInput.value = before + txt + after;
            const pos = start + txt.length; messageInput.setSelectionRange(pos,pos); messageInput.focus(); autoResize(messageInput);
        }
        // Emoji limits per membership level
        const MY_LEVEL = @json((string)(auth()->user()->membership_level ?? 'free'));
        const EMOJI_LIMITS = { free: 5, basic: 10, gold: 20, premium: 999999 };
        let emojiUsed = 0;
        function canUseEmoji(){ return emojiUsed < (EMOJI_LIMITS[MY_LEVEL] || 0); }
        function countEmojis(str){ return (str.match(/\p{Emoji_Presentation}|\p{Extended_Pictographic}/gu) || []).length; }
        messageInput.addEventListener('input', ()=>{ emojiUsed = countEmojis(messageInput.value); });
        // Build extended emoji (lazy) from unified sets
        const EMOJI_SETS = {
            'ابتسامات': '😀 😁 😂 🤣 😊 🙂 🙃 😉 😍 😘 😚 😋 😜 🤪 🤩 🥰 😎 😏 😌 🤗 😴 😪 😢 😭 😤 😡 🤔 🤨 😐 😶 🙄 😬 🤐 🤒 🤕 🤧 🥵 🥶 🥳 🤯 🤠'.split(' '),
            'أيدٍ': '👋 🤚 ✋ 🖐 🖖 👌 🤌 🤏 ✌ 🤞 🤟 🤘 👍 👎 👊 👏 🙌 👐 🤲 🙏 💪'.split(' '),
            'قلوب': '❤️ 🧡 💛 💚 💙 💜 🤍 🤎 🖤 💔 💖 💗 💓 💞 💕 💘 💝'.split(' '),
            'طعام': '🍏 🍎 🍐 🍊 🍋 🍌 🍉 🍇 🍓 🫐 🍈 🍒 🍑 🥭 🍍 🥝 🍅 🥥 🥑 🥦 🥕 🌽 🧄 🧅 🥔 🥒'.split(' '),
            'حيوانات': '🐶 🐱 🐭 🐹 🐰 🦊 🐻 🐼 🐨 🐯 🦁 🐮 🐷 🐸 🐵 🐔 🕊 🐧 🐦 🐤 🐣'.split(' '),
            'سفر': '✈️ 🚗 🚌 🚕 🚙 🚲 🛵 🏍 🚂 🚆 🚇 ⛴ 🚢 🚤 🛳 🚁 🗺 🗽 🗼 🗻 🏝'.split(' '),
            'رموز': '⭐️ ✨ 💥 💫 🔥 🌟 ⚡️ 💯 ♻️ ✅ ❌ ❗️ ❓ ⛔️ 🚫 🔞'.split(' ')
        };
        const MOST_TAB = 'الأكثر استخدامًا';
        const emojiTabs = document.getElementById('emoji-tabs');
        const emojiContent = document.getElementById('emoji-content');
        const emojiSearch = document.getElementById('emoji-search');
        const emojiRecent = document.getElementById('emoji-recent');
        function getFreq(){ try{ return JSON.parse(localStorage.getItem('emoji.freq')||'{}'); }catch(_){ return {}; } }
        function saveFreq(map){ try{ localStorage.setItem('emoji.freq', JSON.stringify(map)); }catch(_){ } }
        function recordEmoji(ch){ const map=getFreq(); map[ch]=(map[ch]||0)+1; saveFreq(map); }
        function topMost(n=64){ const map=getFreq(); const arr=Object.entries(map).sort((a,b)=>b[1]-a[1]).map(x=>x[0]); return arr.slice(0,n); }
        function renderRecent(){ const list=topMost(10); emojiRecent.innerHTML=''; if(list.length){ list.forEach(e=>{ const b=document.createElement('button'); b.type='button'; b.className='emoji-item hover:bg-brand-light-gray rounded'; b.textContent=e; emojiRecent.appendChild(b); }); } }

        function renderEmojiSet(active){
            emojiTabs.innerHTML=''; emojiContent.innerHTML='';
            const names=[MOST_TAB, ...Object.keys(EMOJI_SETS)];
            names.forEach((name,idx)=>{
                const b=document.createElement('button'); b.type='button'; b.textContent=name; b.className='emoji-tab px-2 py-1 rounded border text-xs '+(name===active?'bg-brand-light-gray':''); b.dataset.cat=name; emojiTabs.appendChild(b);
            });
            const wrap=document.createElement('div'); wrap.className='grid grid-cols-8 gap-1 text-xl';
            let list = [];
            if(active===MOST_TAB){ list = topMost(); if(list.length===0){ active = Object.keys(EMOJI_SETS)[0]; } }
            if(list.length===0){ list = EMOJI_SETS[active] || []; }
            list.forEach(e=>{ const btn=document.createElement('button'); btn.type='button'; btn.className='emoji-item hover:bg-brand-light-gray rounded'; btn.textContent=e; wrap.appendChild(btn); });
            emojiContent.appendChild(wrap);
        }
        let activeSet = MOST_TAB; renderEmojiSet(activeSet); renderRecent();
        emojiTabs.addEventListener('click', (e)=>{ const t=e.target.closest('.emoji-tab'); if(!t) return; activeSet=t.dataset.cat; renderEmojiSet(activeSet); });
        function onEmojiClick(e){ const btn=e.target.closest('.emoji-item'); if(!btn) return; const ch=btn.textContent||''; if(!canUseEmoji()){ alert('بلغت حد استخدام الإيموجي وفق خطتك.'); return; } insertAtCursor(ch); emojiUsed++; recordEmoji(ch); renderRecent(); }
        emojiContent.addEventListener('click', onEmojiClick);
        emojiRecent.addEventListener('click', onEmojiClick);
        emojiBtn?.addEventListener('click', (e)=>{ e.stopPropagation(); emojiPanel.classList.toggle('hidden'); emojiSearch?.focus(); });
        emojiSearch?.addEventListener('input', ()=>{
            const q=emojiSearch.value.trim(); const items=emojiContent.querySelectorAll('.emoji-item'); items.forEach(b=> b.classList.remove('hidden')); if(q==='') return; items.forEach(b=>{ if(!(b.textContent||'').includes(q)) b.classList.add('hidden'); });
        });
        document.addEventListener('click', (e)=>{ if(!e.target.closest('#emoji-btn') && !e.target.closest('#emoji-panel')){ emojiPanel?.classList.add('hidden'); } });

        // ===== AI Assistant helpers =====
        const aiBtn = document.getElementById('ai-btn');
        const aiPanel = document.getElementById('ai-panel');
        const aiClose = document.getElementById('ai-close');
        const aiSuggestBtn = document.getElementById('ai-suggest-btn');
        const aiSuggestList = document.getElementById('ai-suggest-list');
        const aiRewriteBtn = document.getElementById('ai-rewrite-btn');
        const aiTone = document.getElementById('ai-tone');
        const aiTranslateBtn = document.getElementById('ai-translate-btn');
        const aiTarget = document.getElementById('ai-target');
        const aiSummarizeBtn = document.getElementById('ai-summarize-btn');
        const aiSummary = document.getElementById('ai-summary');

        function getCookie(name){
            const v = document.cookie.split(';').map(s=>s.trim());
            for(const p of v){ if(p.startsWith(name+'=')) return decodeURIComponent(p.split('=')[1]); }
            return '';
        }
        function xsrfHeader(){
            const h = {};
            const token = getCookie('XSRF-TOKEN');
            if(token) h['X-XSRF-TOKEN'] = token;
            if(csrfToken) h['X-CSRF-TOKEN'] = csrfToken;
            return h;
        }
        async function apiPost(url, payload){
            const res = await fetch(url, { method:'POST', credentials:'same-origin', headers: { 'Content-Type':'application/json','Accept':'application/json', ...xsrfHeader() }, body: JSON.stringify(payload||{}) });
            if(res.status===401){ location.href='/login'; throw new Error('Unauthorized'); }
            if(!res.ok) throw new Error('HTTP '+res.status);
            return await res.json();
        }
        function gatherContext(maxChars=1000, maxMsgs=20){
            const items = Array.from(chatBox.querySelectorAll('[data-msg-id]'));
            const last = items.slice(-maxMsgs);
            const lines = [];
            last.forEach(w=>{
                const isMe = w.classList.contains('justify-end');
                const bubble = w.querySelector('.relative');
                let text = '';
                if(bubble){ text = (bubble.innerText||'').trim(); }
                if(text){ lines.push((isMe?'أنا':OTHER_NAME)+': '+text); }
            });
            let ctx = lines.join('\n');
            if(messageInput.value.trim()) ctx += (ctx?'\n':'') + 'أنا (مسودة): ' + messageInput.value.trim();
            if(ctx.length > maxChars){ ctx = ctx.slice(-maxChars); }
            return ctx;
        }
        aiBtn?.addEventListener('click', (e)=>{ e.stopPropagation(); aiPanel?.classList.toggle('hidden'); });
        aiClose?.addEventListener('click', ()=> aiPanel?.classList.add('hidden'));
        document.addEventListener('click', (e)=>{ if(!e.target.closest('#ai-panel') && !e.target.closest('#ai-btn')){ aiPanel?.classList.add('hidden'); } });

        aiSuggestBtn?.addEventListener('click', async ()=>{
            aiSuggestBtn.disabled = true; aiSuggestBtn.textContent = '...';
            aiSuggestList.innerHTML = '';
            try{
                const context = gatherContext({{ (int) config('ai.limits.max_input_chars', 1000) }});
                const data = await apiPost('/api/ai/chat/suggest', { context, count: {{ (int) config('ai.limits.suggestions', 3) }} });
                const arr = data?.data || [];
                if(!arr.length){ aiSuggestList.innerHTML = '<span class="text-gray-500">لا توجد اقتراحات حالياً</span>'; }
                arr.forEach(txt=>{
                    const b = document.createElement('button'); b.type='button'; b.className='px-3 py-1 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-800'; b.textContent=txt;
                    b.addEventListener('click', ()=>{ messageInput.value = txt; autoResize(messageInput); messageInput.focus(); });
                    aiSuggestList.appendChild(b);
                });
            }catch(err){ aiSuggestList.innerHTML = '<span class="text-rose-600">تعذر جلب الاقتراحات</span>'; }
            finally{ aiSuggestBtn.disabled=false; aiSuggestBtn.textContent='اقترح'; }
        });

        aiRewriteBtn?.addEventListener('click', async ()=>{
            const text = messageInput.value.trim(); if(!text){ alert('اكتب رسالة أولاً لإعادة صياغتها.'); return; }
            aiRewriteBtn.disabled=true; const old=aiRewriteBtn.textContent; aiRewriteBtn.textContent='...';
            try{
                const data = await apiPost('/api/ai/chat/rewrite', { text, tone: aiTone?.value||'polite' });
                const out = data?.text || text; messageInput.value = out; autoResize(messageInput); messageInput.focus();
            }catch(_){ alert('تعذر إعادة الصياغة حالياً'); }
            finally{ aiRewriteBtn.disabled=false; aiRewriteBtn.textContent=old; }
        });

        aiTranslateBtn?.addEventListener('click', async ()=>{
            const text = messageInput.value.trim(); if(!text){ alert('اكتب رسالة أولاً لترجمتها.'); return; }
            aiTranslateBtn.disabled=true; const old=aiTranslateBtn.textContent; aiTranslateBtn.textContent='...';
            try{
                const data = await apiPost('/api/ai/chat/translate', { text, target: aiTarget?.value||'ar' });
                const out = data?.text || text; messageInput.value = out; autoResize(messageInput); messageInput.focus();
            }catch(_){ alert('تعذر الترجمة حالياً'); }
            finally{ aiTranslateBtn.disabled=false; aiTranslateBtn.textContent=old; }
        });

        aiSummarizeBtn?.addEventListener('click', async ()=>{
            aiSummarizeBtn.disabled=true; const old=aiSummarizeBtn.textContent; aiSummarizeBtn.textContent='...'; aiSummary.value='';
            try{
                const context = gatherContext({{ (int) config('ai.limits.max_input_chars', 1000) }}, 40);
                const data = await apiPost('/api/ai/chat/summarize', { text: context });
                aiSummary.value = data?.text || '';
            }catch(_){ aiSummary.value = 'تعذر التلخيص حالياً'; }
            finally{ aiSummarizeBtn.disabled=false; aiSummarizeBtn.textContent=old; }
        });

        // ===== Send (optimistic) =====
    chatForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            const text = messageInput.value.trim();
            const fileInput = document.getElementById('attachment');
            const file = fileInput?.files?.[0] || null;
            if(!text && !file) return;
            // Client-side moderation (best-effort)
            try{
                if(text){
                    const mod = await apiPost('/api/ai/chat/moderate', { text });
                    if(mod?.flagged){
                        const cats = Array.isArray(mod.categories)? mod.categories.join(', ') : '';
                        const ok = confirm('قد تحتوي رسالتك على محتوى غير مناسب ('+cats+'). هل تريد الإرسال على أي حال؟');
                        if(!ok) return; // abort
                    }
                }
            }catch(_){ /* ignore */ }
            sendBtn.disabled = true;
            const optimistic = createBubble(text, 'right', {name: @json(auth()->user()->name), time: 'إرسال...', pending: true, is_read:false});
            chatBox.appendChild(optimistic); scrollToBottom(); hideScrollBtn(); resetNewCount();
            const fd = new FormData();
            fd.append('message', text);
            if(file){ fd.append('attachment', file); }
            // files.forEach(f=> fd.append('attachments[]', f)); // This line is no longer relevant.
            messageInput.value=''; autoResize(messageInput); if(fileInput){ fileInput.value=''; }
            try{
                const res = await fetch(chatForm.action, { method:'POST', headers:{'X-CSRF-TOKEN':csrfToken,'Accept':'application/json'}, credentials:'same-origin', body: fd });
                if(!res.ok){
                    let msg = 'تعذر الإرسال ('+res.status+')';
                    try{
                        const j = await res.json();
                        if(j && typeof j.message === 'string'){ msg = j.message; }
                        else if(j && j.errors){
                            const all = Object.values(j.errors).flat().filter(Boolean);
                            if(all.length){ msg = all.join('\n'); }
                        }
                    }catch(_){ /* ignore parse errors */ }
                    throw new Error(msg);
                }
                optimistic.querySelector('span').textContent = 'تم الإرسال';
                optimistic.querySelector('div')?.classList?.remove('opacity-70');
            }catch(err){
                optimistic.querySelector('span').textContent = 'فشل الإرسال';
                optimistic.querySelector('div')?.classList?.add('border','border-red-300');
                try{ alert(err?.message || 'تعذر الإرسال'); }catch(_){ /* ignore */ }
            }finally{
                sendBtn.disabled = false; scrollToBottom();
            }
        });

        // ===== Attachment preview & clear =====
        (function(){
            const fileInput = document.getElementById('attachment');
            const wrap = document.getElementById('attach-preview');
            const thumb = document.getElementById('attach-thumb');
            const nameEl = document.getElementById('attach-name');
            const clearBtn = document.getElementById('attach-clear');
            function hide(){ wrap?.classList.add('hidden'); thumb?.classList.add('hidden'); nameEl.textContent=''; if(fileInput) fileInput.value=''; }
            function show(){ wrap?.classList.remove('hidden'); }
            function onFile(){ const f=fileInput?.files?.[0]; if(!f){ hide(); return; } nameEl.textContent=f.name; if(/^image\//.test(f.type)){ const url=URL.createObjectURL(f); thumb.src=url; thumb.classList.remove('hidden'); } else { thumb.classList.add('hidden'); thumb.removeAttribute('src'); } show(); }
            fileInput?.addEventListener('change', onFile);
            clearBtn?.addEventListener('click', hide);
        })();

        // ===== Gifts =====
        const giftBtn = document.getElementById('gift-btn');
        const giftPanel = document.getElementById('gift-panel');
        const giftGrid = document.getElementById('gift-grid');
        function setCoins(v){ const el=document.getElementById('coins'); if(el) el.textContent=String(v); }
        const GIFTS = @json(config('gifts.items'));
        const GIFT_IMAGES = @json(config('gifts.images'));
        const GIFT_NAMES = @json(config('gifts.names'));
        function renderGifts(){
            if(!giftGrid) return;
            giftGrid.innerHTML='';
            Object.entries(GIFTS||{}).forEach(([code, cost])=>{
                const img = GIFT_IMAGES?.[code] || '';
                const name = GIFT_NAMES?.[code] || code;
                const btn = document.createElement('button');
                btn.type='button';
                btn.className='gift-item border rounded-xl p-2 hover:bg-gray-50 dark:hover:bg-gray-600 text-center';
                btn.dataset.code = code; btn.dataset.cost = String(cost);
                btn.innerHTML = `
                    <div class="w-full aspect-square flex items-center justify-center text-3xl">${img?`<img src="${img}" alt="${name}" class="w-16 h-16 object-contain">`:`${code}`}</div>
                    <div class="mt-1 text-xs text-gray-700 dark:text-gray-200">${name}</div>
                    <div class="text-sm font-bold text-amber-600">${cost} نقطة</div>`;
                giftGrid.appendChild(btn);
            });
        }
        renderGifts();
        giftBtn?.addEventListener('click', (e)=>{ e.stopPropagation(); giftPanel?.classList.toggle('hidden'); });
        giftPanel?.addEventListener('click', async (e)=>{
            const btn = e.target.closest('.gift-item'); if(!btn) return;
            const code = btn.dataset.code; const cost = parseInt(btn.dataset.cost||'0',10)||0;
            const node = createBubble('', 'right', {name: @json(auth()->user()->name), time:'هدية', pending:true});
            const img = GIFT_IMAGES?.[code]; const label = GIFT_NAMES?.[code] || code;
            node.querySelector('div').insertAdjacentHTML('beforeend', `<div class=\"mt-2 text-center\">${img?`<img src="\${img}" alt="\${label}" class="w-20 h-20 object-contain mx-auto">`:"<span class=\"text-4xl\">\${code}</span>"}<div class="text-xs text-gray-500 mt-1">\${label}</div></div>`);
            chatBox.appendChild(node); scrollToBottom();
            try{
                const fd = new FormData(); fd.append('gift', code);
                const res = await fetch(chatForm.action, { method:'POST', headers:{'X-CSRF-TOKEN':csrfToken,'Accept':'application/json'}, credentials:'same-origin', body: fd });
                if(res.status===402){ const j=await res.json().catch(()=>({})); alert('رصيدك غير كافٍ لإرسال الهدية.'); node.remove(); return; }
                if(!res.ok){ const j=await res.json().catch(()=>({})); throw new Error(j?.message || 'فشل إرسال الهدية'); }
                const j=await res.json().catch(()=>({}));
                node.querySelector('span').textContent='تم الإرسال'; node.querySelector('div')?.classList?.remove('opacity-70');
                try{ const left = (j && j.data && j.data.coins_left) ? parseInt(j.data.coins_left,10) : null; if(left!==null) setCoins(left); }catch(_){ }
            }catch(err){ node.querySelector('span').textContent='فشل الإرسال'; node.querySelector('div')?.classList?.add('border','border-red-300'); }
        });
        document.addEventListener('click', (e)=>{ if(!e.target.closest('#gift-btn') && !e.target.closest('#gift-panel')){ giftPanel?.classList.add('hidden'); } });

        // ===== Analytics: conversation opened =====
    fetch('/api/analytics', {method:'POST', headers:{'Content-Type':'application/json','Accept':'application/json','X-CSRF-TOKEN':csrfToken}, credentials:'same-origin', body: JSON.stringify({event:'conversation_opened', context:{conversation_id:CONV}})}).catch(()=>{});

        // ===== Read receipts trigger (initial + visibility change) =====
        async function markReadBase(){
            try {
                const res = await fetch(`/api/chat/${CONV}/read`, {method:'POST', headers:{'Accept':'application/json'}, credentials:'same-origin'});
                if(res.status===401){ /* ignore */ }
            } catch(_){ }
        }
        async function markRead(){
            await markReadBase();
            // analytics message_read (debounced by server duplicate prevention short-term)
            fetch('/api/analytics', {method:'POST', headers:{'Content-Type':'application/json','Accept':'application/json','X-CSRF-TOKEN':csrfToken}, credentials:'same-origin', body: JSON.stringify({event:'message_read', context:{conversation_id:CONV}})}).catch(()=>{});
        }
        document.addEventListener('visibilitychange', ()=>{ if(!document.hidden){ markRead(); } });
        setTimeout(markRead, 600);

        // initial
        scrollToBottom(); autoResize(messageInput);

        // ===== Enter to send toggle =====
        (function(){
            const toggle = document.getElementById('enter-send');
            const KEY = 'chat.enterSend';
            try{ toggle.checked = (localStorage.getItem(KEY) || '1') === '1'; }catch(_){ toggle.checked = true; }
            toggle?.addEventListener('change', ()=>{ try{ localStorage.setItem(KEY, toggle.checked ? '1':'0'); }catch(_){ } });
            messageInput.addEventListener('keydown', (e)=>{
                if(e.key === 'Enter' && !e.shiftKey && toggle.checked){ e.preventDefault(); chatForm.requestSubmit(); }
            });
        })();

        // ===== Drag & Drop attach =====
        (function(){
            const form = document.getElementById('chat-form');
            const fileInput = document.getElementById('attachment');
            if(!form || !fileInput) return;
            let dragDepth = 0;
            const onDragEnter = (e)=>{ e.preventDefault(); e.stopPropagation(); dragDepth++; form.classList.add('ring-2','ring-blue-400'); };
            const onDragOver = (e)=>{ e.preventDefault(); e.stopPropagation(); };
            const onDragLeave = (e)=>{ e.preventDefault(); e.stopPropagation(); dragDepth=Math.max(0, dragDepth-1); if(dragDepth===0) form.classList.remove('ring-2','ring-blue-400'); };
            const onDrop = (e)=>{ e.preventDefault(); e.stopPropagation(); dragDepth=0; form.classList.remove('ring-2','ring-blue-400'); const dt = e.dataTransfer; if(!dt || !dt.files || !dt.files.length) return; const f = dt.files[0]; fileInput.files = dt.files; fileInput.dispatchEvent(new Event('change')); };
            form.addEventListener('dragenter', onDragEnter);
            form.addEventListener('dragover', onDragOver);
            form.addEventListener('dragleave', onDragLeave);
            form.addEventListener('drop', onDrop);
        })();

        // delete message (delegation for rendered list)
        chatBox.addEventListener('click', async (e)=>{
            const btn = e.target.closest('.delete-msg');
            if(!btn) return;
            const id = btn.dataset.id;
            if(!confirm('حذف الرسالة؟')) return;
            try{
                const res = await fetch(`{{ route('chat.message.destroy', ['message'=>'__ID__']) }}`.replace('__ID__', id), {method:'DELETE', headers:{'X-CSRF-TOKEN':csrfToken, 'Accept':'application/json'}, credentials:'same-origin'});
                if(res.ok){ btn.closest('.group').remove(); }
            }catch(_){}
        });

        // lightbox for images
        chatBox.addEventListener('click', (e)=>{
            const img = e.target.closest('.chat-image');
            if(!img) return;
            const src = img.dataset.full || img.src;
            const overlay = document.createElement('div'); overlay.className='fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4';
            overlay.innerHTML = `<img src="${src}" class="max-h-[90vh] max-w-[90vw] rounded-lg" /><button class="absolute top-4 left-4 text-white text-xl">✕</button>`;
            overlay.addEventListener('click', ()=> overlay.remove());
            document.body.appendChild(overlay);
        });

        // ask notification permission once
        if('Notification' in window && Notification.permission==='default'){
            try{ Notification.requestPermission(); }catch(_){ }
        }

        // in-room search
        const searchToggle = document.getElementById('search-toggle');
        const searchBar = document.getElementById('search-bar');
        const searchInput = document.getElementById('search-input');
        function clearHighlights(){ chatBox.querySelectorAll('mark.chat-h').forEach(m=>{ const t=m.textContent; m.replaceWith(document.createTextNode(t)); }); }
        function doSearch(q){
            clearHighlights(); if(!q) return;
            const walker = document.createTreeWalker(chatBox, NodeFilter.SHOW_TEXT, null);
            const matches = []; const re = new RegExp(q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi');
            while(walker.nextNode()){
                const node = walker.currentNode;
                if(!node.nodeValue.trim()) continue; if(node.parentElement.closest('.chat-image')) continue;
                if(re.test(node.nodeValue)){
                    const span = document.createElement('span');
                    span.innerHTML = node.nodeValue.replace(re, (m)=>`<mark class="chat-h bg-yellow-200">${m}</mark>`);
                    node.parentNode.replaceChild(span, node); matches.push(span);
                }
            }
            if(matches.length){ const el = matches[0]; el.scrollIntoView({behavior:'smooth', block:'center'}); }
        }
        searchToggle?.addEventListener('click',()=>{ searchBar.classList.toggle('hidden'); if(!searchBar.classList.contains('hidden')){ searchInput.focus(); }else{ clearHighlights(); } });
        searchInput?.addEventListener('input', ()=> doSearch(searchInput.value.trim()));

        // ===== Voice recording =====
        const recordBtn = document.getElementById('record-btn'); // This element is removed from HTML, so this line is no longer relevant.
        let mediaRecorder=null, chunks=[]; let isRecording=false; let audioCtx=null, analyser=null, vuTimer=null; // This line is no longer relevant.
        async function initRecorder(){ // This line is no longer relevant.
            if(!('MediaRecorder' in window)) return; // This line is no longer relevant.
            try{ // This line is no longer relevant.
                const stream = await navigator.mediaDevices.getUserMedia({audio:true}); // This line is no longer relevant.
                mediaRecorder = new MediaRecorder(stream); // This line is no longer relevant.
                mediaRecorder.ondataavailable = e=>{ if(e.data && e.data.size>0) chunks.push(e.data); }; // This line is no longer relevant.
                mediaRecorder.onstop = async ()=>{ // This line is no longer relevant.
                    if(!chunks.length) return; const blob = new Blob(chunks, {type:'audio/webm'}); chunks=[]; // This line is no longer relevant.
                    const file = new File([blob], `voice_${Date.now()}.webm`, {type:'audio/webm'}); // This line is no longer relevant.
                    const opt = createBubble('', 'right', {name: @json(auth()->user()->name), time:'إرسال...', pending:true, attachment:file.name}); chatBox.appendChild(opt); scrollToBottom(); // This line is no longer relevant.
                    const fd = new FormData(); fd.append('attachments[]', file); // This line is no longer relevant.
                    try{ // This line is no longer relevant.
                        const res = await fetch(chatForm.action, { method:'POST', headers:{'X-CSRF-TOKEN':csrfToken,'Accept':'application/json'}, body: fd }); // This line is no longer relevant.
                        if(!res.ok) throw 0; opt.querySelector('span').textContent='تم الإرسال'; opt.querySelector('div')?.classList?.remove('opacity-70'); // This line is no longer relevant.
                    }catch(_){ opt.querySelector('span').textContent='فشل الإرسال'; opt.querySelector('div')?.classList?.add('border','border-red-300'); } // This line is no longer relevant.
                }; // This line is no longer relevant.
                // VU meter // This line is no longer relevant.
                const vu = document.getElementById('vu'); const vuFill = document.getElementById('vu-fill'); // This line is no longer relevant.
                audioCtx = new (window.AudioContext||window.webkitAudioContext)(); // This line is no longer relevant.
                analyser = audioCtx.createAnalyser(); const source = audioCtx.createMediaStreamSource(stream); source.connect(analyser); // This line is no longer relevant.
                analyser.fftSize = 256; const data = new Uint8Array(analyser.frequencyBinCount); vu.classList.remove('hidden'); // This line is no longer relevant.
                vuTimer = setInterval(()=>{ analyser.getByteTimeDomainData(data); let rms=0; for(let i=0;i<data.length;i++){ const v=(data[i]-128)/128; rms+=v*v; } rms=Math.sqrt(rms/data.length); vuFill.style.width=(Math.min(1, rms*3)*100)+'%'; }, 100); // This line is no longer relevant.
                recordBtn.classList.remove('hidden'); // This line is no longer relevant.
            }catch(_){ /* mic denied */ } // This line is no longer relevant.
        } // This line is no longer relevant.
        initRecorder(); // This line is no longer relevant.
        recordBtn?.addEventListener('click', ()=>{ // This line is no longer relevant.
            if(!mediaRecorder) return; // This line is no longer relevant.
            if(!isRecording){ mediaRecorder.start(); isRecording=true; recordBtn.textContent='إيقاف'; recordBtn.classList.replace('bg-rose-600','bg-amber-600'); } // This line is no longer relevant.
            else { mediaRecorder.stop(); isRecording=false; recordBtn.textContent='تسجيل صوت'; recordBtn.classList.replace('bg-amber-600','bg-rose-600'); try{ clearInterval(vuTimer); }catch(_){} } // This line is no longer relevant.
        }); // This line is no longer relevant.

        // audio settings: reopen permission prompt // This line is no longer relevant.
        document.getElementById('audio-settings')?.addEventListener('click', async ()=>{ // This line is no longer relevant.
            try{ await navigator.mediaDevices.getUserMedia({audio:true}); alert('تم تهيئة الميكروفون. يمكنك الآن التسجيل.'); }catch(_){ alert('فضلاً فعّل إذن الميكروفون من المتصفح ثم أعد المحاولة.'); } // This line is no longer relevant.
        }); // This line is no longer relevant.

        // ===== Audio Call (WebRTC minimal signalling via Echo) =====
        const callBtn = document.getElementById('call-btn');
        const videoBtn = document.getElementById('video-btn');
        const callPanel = document.getElementById('call-panel'); // This element is removed from HTML, so this line is no longer relevant.
        const callStatus = document.getElementById('call-status'); // This element is removed from HTML, so this line is no longer relevant.
        const endCallBtn = document.getElementById('end-call'); // This element is removed from HTML, so this line is no longer relevant.
        const remoteAudio = document.getElementById('remote-audio'); // This element is removed from HTML, so this line is no longer relevant.
        const remoteVideo = document.getElementById('remote-video'); // This element is removed from HTML, so this line is no longer relevant.
        const localVideo = document.getElementById('local-video'); // This element is removed from HTML, so this line is no longer relevant.
        const videoWrap = document.getElementById('video-wrap'); // This element is removed from HTML, so this line is no longer relevant.
        let pc=null, localStream=null, inCall=false;
        const rtcCfg = { iceServers:[{urls:'stun:stun.l.google.com:19302'}] };
        function showPanel(){ callPanel.classList.remove('hidden'); callPanel.classList.add('flex'); } // This line is no longer relevant.
        function hidePanel(){ callPanel.classList.add('hidden'); callPanel.classList.remove('flex'); } // This line is no longer relevant.
        async function startCall(mode='audio'){
            if(!window.Echo) return alert('الاتصال غير متاح حالياً');
            showPanel(); callStatus.textContent='جاري طلب الإذن...'; // This line is no longer relevant.
            localStream = await navigator.mediaDevices.getUserMedia(mode==='video'? {audio:true, video:true} : {audio:true});
            if(mode==='video'){ videoWrap.classList.remove('hidden'); localVideo.srcObject = localStream; remoteAudio.classList.add('hidden'); } // This line is no longer relevant.
            pc = new RTCPeerConnection(rtcCfg); localStream.getTracks().forEach(t=>pc.addTrack(t, localStream));
            pc.ontrack = (e)=>{ const s=e.streams[0]; if(mode==='video'){ remoteVideo.srcObject=s; } else { remoteAudio.srcObject=s; } };
            pc.onicecandidate = (e)=>{ if(e.candidate){ window.Echo.private(`conversation.${CONV}`).whisper('rtc', {type:'candidate', candidate:e.candidate}); } };
            const offer = await pc.createOffer(); await pc.setLocalDescription(offer);
            callStatus.textContent='جاري الاتصال...'; inCall=true;
            window.Echo.private(`conversation.${CONV}`).whisper('rtc', {type:'offer', sdp:offer.sdp, mode});
        }
        async function handleOffer(sdp, mode){ if(inCall) return; showPanel(); localStream = await navigator.mediaDevices.getUserMedia(mode==='video'? {audio:true, video:true} : {audio:true}); if(mode==='video'){ videoWrap.classList.remove('hidden'); localVideo.srcObject = localStream; remoteAudio.classList.add('hidden'); } pc = new RTCPeerConnection(rtcCfg); localStream.getTracks().forEach(t=>pc.addTrack(t, localStream)); pc.ontrack=(e)=>{ const s=e.streams[0]; if(mode==='video'){ remoteVideo.srcObject=s; } else { remoteAudio.srcObject=s; } }; pc.onicecandidate=(e)=>{ if(e.candidate){ window.Echo.private(`conversation.${CONV}`).whisper('rtc', {type:'candidate', candidate:e.candidate}); } }; await pc.setRemoteDescription({type:'offer', sdp}); const ans = await pc.createAnswer(); await pc.setLocalDescription(ans); inCall=true; window.Echo.private(`conversation.${CONV}`).whisper('rtc', {type:'answer', sdp:ans.sdp}); }
        async function handleAnswer(sdp){ if(!pc) return; await pc.setRemoteDescription({type:'answer', sdp}); }
        async function handleCandidate(c){ if(!pc) return; try{ await pc.addIceCandidate(c); }catch(_){} }
        function endCall(){ try{ pc&&pc.close(); }catch(_){} pc=null; try{ localStream&&localStream.getTracks().forEach(t=>t.stop()); }catch(_){} localStream=null; inCall=false; hidePanel(); try{ window.Echo&&window.Echo.private(`conversation.${CONV}`).whisper('rtc',{type:'end'}); }catch(_){} }
        callBtn?.addEventListener('click', ()=> startCall('audio'));
        videoBtn?.addEventListener('click', ()=> startCall('video'));
        // auto-start from query
        const AUTO = @json($start ?? null);
        if(AUTO==='audio'||AUTO==='video'){ setTimeout(()=> startCall(AUTO), 400); }
        endCallBtn?.addEventListener('click', ()=> endCall()); // This line is no longer relevant.
        try{ window.Echo && window.Echo.private(`conversation.${CONV}`).listenForWhisper('rtc', async (e)=>{ if(!e||!e.type) return; if(e.type==='offer') await handleOffer(e.sdp, e.mode||'audio'); else if(e.type==='answer') await handleAnswer(e.sdp); else if(e.type==='candidate') await handleCandidate(e.candidate); else if(e.type==='end') endCall(); }); }catch(_){} // This line is no longer relevant.
    });
</script>
@endpush