@extends('user.layouts.app')
@section('content')
    <div class="container py-4">
        <h4 class="mb-3">الدردشة مع الدعم</h4>
    <div class="border rounded p-3 mb-2 bg-light" id="chatWindow" style="height:55vh;overflow:auto;white-space:normal"></div>
        <form id="chatForm" class="d-flex gap-2 align-items-start" 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>
                <button type="button" id="manualReload" class="btn btn-outline-secondary btn-sm">تحديث</button>
            </div>
        </form>
    <div class="small mt-2 text-muted" id="chatStatus">جاري التحميل...</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>
// Ensure Pusher global is available for Echo (some builds require explicit assignment)
if(typeof Pusher !== 'undefined'){ window.Pusher = Pusher; }
// Derive public Ably key ID on server (avoid exposing secret part)
const ABLY_KEY_FULL = @json(config('broadcasting.connections.ably.key'));
const ABLY_KEY_ID = ABLY_KEY_FULL ? ABLY_KEY_FULL.split(':')[0] : null;
let lastId = null; let fallbackTimer=null; let echoConnected=false;
const statusEl = document.getElementById('chatStatus');
const chatWindow = document.getElementById('chatWindow');
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
const authUserId = {{ (int)auth()->id() }};

function setStatus(msg, type='muted'){ if(!statusEl) return; statusEl.className='small mt-2 text-'+(type==='error'?'danger':type==='success'?'success':'muted'); statusEl.textContent=msg; }
function storageUrl(p){ return p.startsWith('http')?p:('/'+p); }
function formatSize(b){ if(!b) return '0B'; const u=['B','KB','MB','GB']; let i=0,v=b; while(v>=1024&&i<u.length-1){v/=1024;i++;} return (v>=10?Math.round(v):v.toFixed(1))+u[i]; }
function escapeHtml(t){ const m={"&":"&amp;","<":"&lt;",">":"&gt;","\"":"&quot;","'":"&#039;"}; return t.replace(/[&<>"']/g,ch=>m[ch]); }
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' => 14, 'height' => 14])->toHtml() !!} ${escapeHtml(a.original_name)} <span class=\"text-muted\">(${formatSize(a.size)})</span></a>`; }).join('')+'</div>'; }
function loadMessages(){ fetch('{{ route('chat.messages') }}',{headers:{'Accept':'application/json'}}).then(r=>r.ok?r.json():Promise.reject(r)).then(d=>{ d.data.forEach(m=>appendIncoming(m,false)); if(!chatWindow.children.length){ chatWindow.innerHTML='<div class="text-center text-muted">لا توجد رسائل بعد، ابدأ المحادثة.</div>'; } setStatus(''); }).catch(e=>setStatus('تعذر التحميل','error')); }
function appendIncoming(m,checkDup=true){ if(checkDup && lastId && m.id<=lastId){return;} const isMe=m.sender_type==='user'; const wrap=document.createElement('div'); wrap.className='d-flex mb-2 '+(isMe?'justify-content-start':'justify-content-end'); const bubble=document.createElement('div'); bubble.className='chat-bubble rounded-3 p-2 small '+(isMe?'chat-me':'chat-other'); const who=isMe?'أنا':(m.admin_name?m.admin_name:'الدعم'); bubble.innerHTML=`<div class="fw-bold mb-1 ${isMe?'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>`; wrap.appendChild(bubble); chatWindow.appendChild(wrap); lastId=m.id; chatWindow.scrollTop=chatWindow.scrollHeight; }
document.getElementById('chatFiles').addEventListener('change',e=>{ const list=[...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(); const ta=document.getElementById('chatMessage'); const fi=document.getElementById('chatFiles'); const msg=ta.value.trim(); const files=[...fi.files]; if(!msg && !files.length){ setStatus('أدخل رسالة أو اختر ملفات','error'); return; } setStatus('جارٍ الإرسال...'); const fd=new FormData(); if(msg) fd.append('message',msg); files.forEach(f=>fd.append('files[]',f)); fetch('{{ route('chat.messages.send') }}',{method:'POST',headers:{'Accept':'application/json','X-CSRF-TOKEN':csrfToken},body:fd}).then(r=>r.ok?r.json():r.json().then(j=>Promise.reject(j))).then(res=>{ ta.value=''; fi.value=''; document.getElementById('selectedFiles').textContent=''; setStatus('تم الإرسال','success'); if(res && res.data){ appendIncoming(res.data); } }).catch(err=>setStatus('فشل الإرسال'+(err?.error?': '+err.error:''),'error')); });
document.getElementById('manualReload').addEventListener('click',()=>setStatus(''));
function initEcho(){
    if(!ABLY_KEY_ID){ ensureFallback(); return; }
    // Always instantiate a new Echo instance (previous logic skipped when class existed but not instance)
    try { if(window.Echo && window.Echo.connector) { /* already an instance */ } else { 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); ensureFallback(); return; }
    window.Echo.private('chat.user.'+authUserId)
        .listen('.ChatMessageCreated',e=>appendIncoming(e))
        .subscription.on('connected',()=>{ echoConnected=true; if(fallbackTimer){ clearInterval(fallbackTimer); fallbackTimer=null; } setStatus(''); });
    ensureFallback();
}
function ensureFallback(){ setTimeout(()=>{ if(!echoConnected && !fallbackTimer){ fallbackTimer=setInterval(()=>loadMessages(),6000); } },4000); }
loadMessages(); initEcho();
</script>
</script>
<style>
    .chat-bubble { max-width:70%; direction:rtl; word-wrap:break-word; background:#fff; border:1px solid #e3e6ef; position:relative; }
    .chat-me { background:#0d6efd; color:#fff; border-color:#0d6efd; }
    .chat-me .chat-text a { color:#fff; }
    .chat-other { 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-me:after { right:-16px; border-right:0; border-left-color:#0d6efd; }
    .chat-other:after { left:-16px; border-left:0; border-right-color:#e3e6ef; }
    @media (max-width:576px){ .chat-bubble { max-width:85%; } }
</style>
@endsection