@extends('admin.layouts.master')

@section('css')
    {{-- لا يوجد حالياً CSS إضافي، نحافظ على نفس الهيكل مثل صفحة الحظر --}}
@endsection

@section('page-header')
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto">الدردشة الحية</h4>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <div id="chatApp">
        <div class="row">
            <div class="col-md-3 col-xl-3 col-sm-12 mb-3">
                <div class="card h-100">
                    <div class="card-body p-3 d-flex flex-column">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h6 class="mb-0">المحادثات</h6>
                            <div class="btn-group btn-group-sm" role="group">
                                <button type="button" class="btn btn-outline-secondary" id="refreshUsersBtn" title="تحديث القائمة">
                                    <x-lucide-refresh-cw width="20" height="20" />
                                </button>
                            </div>
                        </div>
                        <input type="text" id="chatUserSearch" class="form-control mb-2" placeholder="بحث عن مستخدم...">
                        <div class="flex-grow-1 overflow-auto" style="max-height:60vh">
                            <div class="nav nav-pills flex-column small" id="chatUsers" role="tablist" aria-orientation="vertical"></div>
                        </div>
                        <small class="text-muted mt-2">اختر مستخدم لبدء أو متابعة المحادثة</small>
                    </div>
                </div>
            </div>
            <div class="col-md-9 col-xl-9 col-sm-12 mb-3">
                <div class="card h-100 d-flex flex-column">
                    <div class="card-body pb-2 d-flex flex-column">
                        <div id="chatWindow" class="border rounded p-3 mb-2 overflow-auto bg-light"
                            style="white-space:normal;height:55vh"></div>
                        <form id="chatForm" class="d-flex gap-2 mt-auto" enctype="multipart/form-data">
                            <div class="flex-grow-1 d-flex flex-column gap-2">
                                <textarea id="chatMessage" class="form-control" rows="2" placeholder="اكتب رسالة (اختياري)" style="resize:vertical"></textarea>
                                <div class="d-flex align-items-center gap-2 flex-wrap">
                                    <input type="file" id="chatFiles" name="files[]" multiple class="form-control form-control-sm" style="max-width:260px">
                                    <small class="text-muted">صور أو ملفات 5MB لكل ملف</small>
                                </div>
                                <div id="selectedFiles" class="small"></div>
                            </div>
                            <div class="d-flex flex-column gap-2">
                                <button class="btn btn-primary" type="submit">إرسال</button>
                            </div>
                        </form>
                        <div class="mt-2 d-flex justify-content-between align-items-center small text-muted">
                            <span id="chatStatus">لا يوجد مستخدم محدد</span>
                            <button type="button" id="forceReloadBtn" class="btn btn-sm btn-outline-primary">تحديث يدوي</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/pusher-js@8.4.0/dist/web/pusher.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/laravel-echo@1/dist/echo.iife.js"></script>
    <script>
    if(typeof Pusher !== 'undefined'){ window.Pusher = Pusher; }
    const ABLY_KEY_FULL = @json(config('broadcasting.connections.ably.key'));
    const ABLY_KEY_ID = ABLY_KEY_FULL ? ABLY_KEY_FULL.split(':')[0] : null;
    let currentUserId=null; let lastId=null; let activeChannel=null; let fallbackTimer=null; let echoConnected=false;
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        const chatStatus = document.getElementById('chatStatus');

        function setStatus(txt, type = 'info') {
            if (!chatStatus) return;
            chatStatus.textContent = txt;
        }

        function fetchUsers() {
            const term = document.getElementById('chatUserSearch').value;
            fetch(`{{ route('admin.chat.users') }}?search=${encodeURIComponent(term)}`)
                .then(r => r.ok ? r.json() : Promise.reject(r))
                .then(d => {
                    const container = document.getElementById('chatUsers');
                    container.innerHTML = '';
                    if (!d.data.length) {
                        const empty = document.createElement('div');
                        empty.className = 'text-muted px-2';
                        empty.textContent = 'لا توجد محادثات';
                        container.appendChild(empty);
                        return;
                    }
                    d.data.forEach(u => {
                        const a = document.createElement('button');
                        a.type = 'button';
                        a.className = 'nav-link text-start' + (u.id === currentUserId ? ' active' : '');
                        a.setAttribute('role', 'tab');
                        a.style.whiteSpace = 'nowrap';
                        a.style.overflow = 'hidden';
                        a.style.textOverflow = 'ellipsis';
                        a.title = `${u.name} (#${u.id})`;
                        a.innerHTML = `{!! svg("lucide-user", ["class" => "me-1", "width" => 16, "height" => 16])->toHtml() !!} ${u.name} <span class="text-muted">#${u.id}</span>`;
                        a.onclick = () => selectUser(u.id);
                        container.appendChild(a);
                    });
                })
                .catch(() => setStatus('خطأ في جلب المستخدمين'));
        }

    function selectUser(id){ currentUserId=id; lastId=null; document.getElementById('chatWindow').innerHTML=''; setStatus('جاري التحميل...'); loadMessages(); fetchUsers(); subscribeEchoChannel(); ensureFallback(); }

    function storageUrl(path){ return path.startsWith('http') ? path : ('/' + path); }
    function formatSize(bytes){ if(!bytes) return '0B'; const u=['B','KB','MB','GB']; let i=0,v=bytes; while(v>=1024 && i<u.length-1){v/=1024;i++;} return (v>=10?Math.round(v):v.toFixed(1))+u[i]; }
    function renderAttachments(list){ if(!list||!list.length) return ''; return '<div class="mt-1 d-flex flex-column gap-1">'+list.map(a=>{ const url=storageUrl(a.path); if(a.mime_type && a.mime_type.startsWith('image/')){ return `<a href="${url}" target="_blank"><img src="${url}" alt="${escapeHtml(a.original_name)}" style="max-width:160px;max-height:120px" class="rounded border"></a>`;} return `<a href="${url}" target="_blank" class="d-inline-flex align-items-center gap-1">{!! svg("lucide-paperclip", ["width" => 16, "height" => 16])->toHtml() !!} ${escapeHtml(a.original_name)} <span class=\"text-muted\">(${formatSize(a.size)})</span></a>`; }).join('')+'</div>'; }
    function loadMessages() {
            if (!currentUserId) return;
            let url = `{{ url('admin/chat/messages') }}/${currentUserId}`;
            if (lastId) { url += '?last_id=' + lastId; }
            fetch(url)
                .then(r => r.ok ? r.json() : Promise.reject(r))
                .then(d => {
                    const win = document.getElementById('chatWindow');
                    d.data.forEach(m => {
                        const isAdmin = m.sender_type === 'admin';
                        const wrapper = document.createElement('div');
                        // In RTL flex, start is right; ensure admin (own) messages on right
                        wrapper.className = 'd-flex mb-2 ' + (isAdmin ? 'justify-content-start' : 'justify-content-end');
                        const bubble = document.createElement('div');
                        bubble.className = 'chat-bubble rounded-3 p-2 small ' + (isAdmin ? 'chat-admin' : 'chat-user');
                        const who = isAdmin ? (m.admin_name ? m.admin_name : 'أدمن') : 'مستخدم';
                        bubble.innerHTML = `<div class="fw-bold mb-1 ${isAdmin ? 'text-white' : 'text-primary'}">${who}</div>` +
                            (m.message ? `<div class="chat-text">${escapeHtml(m.message)}</div>` : '') +
                            renderAttachments(m.attachments||[]) +
                            `<div class="text-end mt-1 opacity-75" style="font-size:11px">${m.formatted_time || m.created_at}</div>`;
                        wrapper.appendChild(bubble);
                        win.appendChild(wrapper);
                    });
                    if (d.data.length) {
                        lastId = d.last_id;
                        win.scrollTop = win.scrollHeight;
                    }
                    if (!d.data.length && !lastId) {
                        win.innerHTML = '<div class="text-muted text-center">لا توجد رسائل.</div>';
                    }
                    setStatus('');
                })
                .catch(() => setStatus('خطأ في تحميل الرسائل'));
        }


        function escapeHtml(t) {
            const map = {"&": "&amp;", "<": "&lt;", ">": "&gt;", "\"": "&quot;", "'": "&#039;"};
            return t.replace(/[&<>"']/g, m => map[m]);
        }

        document.getElementById('chatFiles')?.addEventListener('change', e => {
            const list = Array.from(e.target.files||[]);
            const sel = document.getElementById('selectedFiles');
            if(!list.length){ sel.textContent=''; return; }
            sel.innerHTML = list.map(f=>`<span class=\"badge bg-secondary me-1 mb-1\">${escapeHtml(f.name)} (${formatSize(f.size)})</span>`).join('');
        });

    document.getElementById('chatForm').addEventListener('submit',e=>{ e.preventDefault(); if(!currentUserId) return alert('اختر مستخدم'); const ta=document.getElementById('chatMessage'); const fi=document.getElementById('chatFiles'); const msg=ta.value.trim(); const files=[...fi.files]; if(!msg && !files.length){ return alert('أدخل رسالة أو اختر ملفات'); } const fd=new FormData(); if(msg) fd.append('message',msg); files.forEach(f=>fd.append('files[]',f)); fetch(`{{ url('admin/chat/messages') }}/${currentUserId}`,{method:'POST',headers:{'Accept':'application/json','X-CSRF-TOKEN':'{{ csrf_token() }}'},body:fd}).then(r=>r.ok?r.json():r.json().then(j=>Promise.reject(j))).then(resp=>{ ta.value=''; fi.value=''; document.getElementById('selectedFiles').textContent=''; if(resp&&resp.data){ const e=resp.data; const win=document.getElementById('chatWindow'); const wrap=document.createElement('div'); wrap.className='d-flex mb-2 justify-content-start'; const bubble=document.createElement('div'); bubble.className='chat-bubble rounded-3 p-2 small chat-admin'; const who=e.admin_name?e.admin_name:'أدمن'; bubble.innerHTML=`<div class=\"fw-bold mb-1 text-white\">${who}</div>`+(e.message?`<div class=\"chat-text\">${escapeHtml(e.message)}</div>`:'')+renderAttachments(e.attachments||[])+`<div class=\"text-end mt-1 opacity-75\" style=\"font-size:11px\">${e.formatted_time||e.created_at}</div>`; wrap.appendChild(bubble); win.appendChild(wrap); lastId=e.id; win.scrollTop=win.scrollHeight; } }).catch(err=>alert('فشل الإرسال'+(err?.error?': '+err.error:''))); });

        document.getElementById('chatUserSearch').addEventListener('input', fetchUsers);
        document.getElementById('refreshUsersBtn').addEventListener('click', fetchUsers);
    document.getElementById('forceReloadBtn').addEventListener('click', loadMessages);

    function ensureEcho(){ if(!ABLY_KEY_ID) return; try { if(window.Echo && window.Echo.connector){ return; } window.Echo=new Echo({ broadcaster:'pusher', key:ABLY_KEY_ID, wsHost:'realtime.ably.io', wsPort:443, wssPort:443, forceTLS:true, enabledTransports:['ws','wss'], disableStats:true, authEndpoint:'{{ url('/broadcasting/auth') }}', auth:{ headers:{'X-CSRF-TOKEN':csrfToken}} }); } catch(e){ console.error('Echo init failed', e); } }

        function subscribeEchoChannel(){
            ensureEcho();
            if(!window.Echo || !currentUserId || typeof window.Echo.private !== 'function'){
                console.warn('Echo not ready for subscribe; relying on fallback polling');
                return;
            }
            if(activeChannel){ activeChannel.unsubscribe && activeChannel.unsubscribe(); }
            activeChannel=window.Echo.private('chat.user.'+currentUserId)
                .listen('.ChatMessageCreated',e=>{ if(lastId && e.id<=lastId) return; const win=document.getElementById('chatWindow'); const isAdmin=e.sender_type==='admin'; const wrap=document.createElement('div'); wrap.className='d-flex mb-2 '+(isAdmin?'justify-content-start':'justify-content-end'); const bubble=document.createElement('div'); bubble.className='chat-bubble rounded-3 p-2 small '+(isAdmin?'chat-admin':'chat-user'); const who=isAdmin?(e.admin_name?e.admin_name:'أدمن'):'مستخدم'; bubble.innerHTML=`<div class=\"fw-bold mb-1 ${isAdmin?'text-white':'text-primary'}\">${who}</div>`+(e.message?`<div class=\"chat-text\">${escapeHtml(e.message)}</div>`:'')+renderAttachments(e.attachments||[])+`<div class=\"text-end mt-1 opacity-75\" style=\"font-size:11px\">${e.formatted_time||e.created_at}</div>`; wrap.appendChild(bubble); win.appendChild(wrap); lastId=e.id; win.scrollTop=win.scrollHeight; })
                .subscription.on('connected',()=>{ echoConnected=true; if(fallbackTimer){ clearInterval(fallbackTimer); fallbackTimer=null; } });
        }

        function ensureFallback(){
            // إذا لم يتصل Echo خلال 4 ثواني نرجع للاستطلاع كل 6 ثواني
            setTimeout(()=>{
                if(!echoConnected && !fallbackTimer){ fallbackTimer=setInterval(()=>{ if(currentUserId) loadMessages(); },6000); }
            },4000);
        }

    fetchUsers(); ensureEcho(); ensureFallback();
    </script>
    <style>
        .chat-bubble { max-width:70%; direction:rtl; word-wrap:break-word; background:#fff; border:1px solid #e3e6ef; position:relative; }
        .chat-admin { background:#0d6efd; color:#fff; border-color:#0d6efd; }
        .chat-admin .chat-text a { color:#fff; }
        .chat-user { background:#ffffff; }
        .chat-bubble img { max-width:160px; max-height:120px; }
        .chat-bubble:after { content:""; position:absolute; top:10px; width:0; height:0; border:8px solid transparent; }
        .chat-admin:after { right:-16px; border-right:0; border-left-color:#0d6efd; }
        .chat-user:after { left:-16px; border-left:0; border-right-color:#e3e6ef; }
        @media (max-width:576px){ .chat-bubble { max-width:85%; } }
    </style>
@endsection