@php
    use Illuminate\Support\Carbon;

    $user = auth()->user();
    $role = $user->membership_status ?? $user->role ?? 'member';

    switch ($role) {
        case 'super-admin': $layout = 'layouts.superadmin'; break;
        case 'advisor':     $layout = 'layouts.advisor'; break;
        case 'admin':
        case 'moderator':   $layout = 'layouts.moderator'; break;
        default:            $layout = 'layouts.member';
    }

    $creator = $thread->creator;

    $fmt = function ($dt) {
        try {
            if ($dt instanceof \Carbon\CarbonInterface) return $dt->format('Y-m-d H:i');
            return Carbon::parse($dt)->format('Y-m-d H:i');
        } catch (\Throwable $e) {
            return is_string($dt) ? $dt : '';
        }
    };

    $status = (string)($thread->status ?? 'open');
    $statusLabel = match($status) {
        'open'       => 'مفتوحة',
        'replied'    => 'تم الرد',
        'processing' => 'جاري المعالجة',
        'executing'  => 'قيد التنفيذ',
        'closed'     => 'مغلقة',
        default      => $status,
    };

    // ✅ أبقيناها كما هي (تستخدمها في الكلاسات لو تحب)
    $statusBadge = match($status) {
        'open'       => 'bg-sky-50 text-sky-700 border-sky-200 dark:bg-sky-900/30 dark:text-sky-200 dark:border-sky-700/50',
        'replied'    => 'bg-indigo-50 text-indigo-700 border-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-200 dark:border-indigo-700/50',
        'processing' => 'bg-amber-50 text-amber-800 border-amber-200 dark:bg-amber-900/25 dark:text-amber-100 dark:border-amber-700/50',
        'executing'  => 'bg-violet-50 text-violet-700 border-violet-200 dark:bg-violet-900/30 dark:text-violet-200 dark:border-violet-700/50',
        'closed'     => 'bg-rose-50 text-rose-700 border-rose-200 dark:bg-rose-900/25 dark:text-rose-100 dark:border-rose-700/50',
        default      => 'bg-gray-50 text-gray-700 border-gray-200 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-700',
    };

    $urls = [
        'send'   => route('support.messages.store', $thread->id),
        'poll'   => route('support.poll', $thread->id),
        'typing' => route('support.typing', $thread->id),
        'read'   => route('support.read', $thread->id),
        'back'   => route('support.index'),
    ];

    $meId        = (int)$user->id;
    $othersReadId = (int)($othersReadId ?? 0);
    $lastMsgId   = (int)($lastMsgId ?? ($messages->max('id') ?? 0));

    // ⭐ ستايل سقراط لشارة الحالة (داخل صفحة داكنة)
    $statusPill = match($status) {
        'open'       => 'bg-sky-500/10 text-sky-200 border-sky-400/20',
        'replied'    => 'bg-indigo-500/10 text-indigo-200 border-indigo-400/20',
        'processing' => 'bg-amber-500/10 text-amber-200 border-amber-400/20',
        'executing'  => 'bg-violet-500/10 text-violet-200 border-violet-400/20',
        'closed'     => 'bg-rose-500/10 text-rose-200 border-rose-400/20',
        default      => 'bg-white/5 text-white/70 border-white/10',
    };

    $statusDot = match($status) {
        'open'       => 'bg-sky-400',
        'replied'    => 'bg-indigo-400',
        'processing' => 'bg-amber-400',
        'executing'  => 'bg-violet-400',
        'closed'     => 'bg-rose-400',
        default      => 'bg-slate-400',
    };
@endphp

@extends($layout)
@section('title', 'تذكرة دعم #' . $thread->id)

@push('styles')
<style>
    @keyframes pulse-scale { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
    .animate-pulse-scale { animation: pulse-scale 1.2s ease-in-out infinite; }

    .sc-scrollbar::-webkit-scrollbar{ width:10px; }
    .sc-scrollbar::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); border-radius: 999px; }
    .sc-scrollbar::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 999px; }
    .sc-scrollbar::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.28); }
</style>
@endpush

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-black py-6 sm:py-8 rtl text-white" dir="rtl">
<div class="max-w-6xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6">

    {{-- Alerts --}}
    @if(session('success'))
        <div class="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 text-emerald-200 px-4 py-3 text-sm">
            <i class="fa-solid fa-circle-check ms-2"></i>
            {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
        <div class="rounded-2xl border border-rose-400/20 bg-rose-500/10 text-rose-200 px-4 py-3 text-sm">
            <i class="fa-solid fa-triangle-exclamation ms-2"></i>
            {{ session('error') }}
        </div>
    @endif

    {{-- HEADER (Socratic Hero) --}}
    <section class="relative overflow-hidden rounded-3xl
                    bg-gradient-to-br from-slate-900/95 via-slate-900/98 to-black/98
                    border border-emerald-400/20 shadow-2xl shadow-emerald-500/10">
        <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-emerald-400/20 blur-3xl"></div>
        <div class="pointer-events-none absolute -bottom-28 -left-16 w-80 h-80 rounded-full bg-cyan-500/20 blur-3xl"></div>

        <div class="relative p-5 sm:p-7 lg:p-8 space-y-4">
            <div class="flex items-start justify-between gap-3">
                <div class="min-w-0 space-y-2">
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-emerald-300/25 text-[11px] text-emerald-100">
                        <span class="inline-flex h-6 w-6 rounded-full bg-emerald-500/25 items-center justify-center">
                            <i class="fa-solid fa-ticket text-emerald-100 text-sm"></i>
                        </span>
                        <span>تذكرة دعم #{{ $thread->id }}</span>
                    </div>

                    <h1 class="text-lg sm:text-2xl font-extrabold text-white break-words">
                        {{ $thread->subject }}
                    </h1>

                    <div class="flex flex-wrap items-center gap-2 text-[11px] pt-1">
                        {{-- الحالة --}}
                        <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full border font-extrabold {{ $statusPill }}">
                            <span class="inline-flex w-2 h-2 rounded-full {{ $statusDot }} shadow-[0_0_0_6px_rgba(255,255,255,0.06)]"></span>
                            {{ $statusLabel }}
                        </span>

                        {{-- المُرسل --}}
                        <span class="px-3 py-1 rounded-full bg-white/5 border border-white/10 text-white/80">
                            المُرسل: <span class="font-extrabold text-white">{{ $creator?->name ?? '—' }}</span>
                        </span>

                        {{-- الإسناد --}}
                        @if($thread->assignedTo)
                            <span class="px-3 py-1 rounded-full bg-indigo-500/10 border border-indigo-400/20 text-indigo-200">
                                مُسند إلى: <span class="font-extrabold text-white">{{ $thread->assignedTo->name }}</span>
                            </span>
                        @endif

                        {{-- Presence --}}
                        <span id="presenceBadge"
                              class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full border text-[11px]
                                     bg-black/35 border-white/10 text-white/80">
                            <span id="presenceDot" class="inline-flex w-2 h-2 rounded-full bg-slate-400 shadow-sm"></span>
                            <span id="presenceLabel">{{ ($othersOnline ?? false) ? 'متصل الآن' : 'غير متصل' }}</span>
                        </span>

                        {{-- Typing --}}
                        <span id="typingBadge"
                              class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[11px]
                                     bg-white/5 border border-white/10 text-white/75">
                            <i class="fa-solid fa-pen-fancy text-[10px] text-cyan-300"></i>
                            <span id="typingText" class="hidden"></span>
                            <span id="typingIdle">لا يوجد كتابة حاليًا</span>
                        </span>
                    </div>
                </div>

                <a href="{{ $urls['back'] }}"
                   class="shrink-0 px-4 py-2.5 rounded-2xl bg-white/10 hover:bg-white/15 border border-white/15
                          text-white/90 text-sm font-extrabold transition">
                    <i class="fa-solid fa-arrow-right text-xs ml-1"></i>
                    رجوع
                </a>
            </div>

            {{-- Controls --}}
            <div class="pt-4 border-t border-white/10">
                @if($isStaff)
                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">

                        {{-- status --}}
                        <form method="POST" action="{{ route('support.status', $thread->id) }}" class="flex gap-2">
                            @csrf
                            <select name="status"
                                    class="flex-1 rounded-2xl bg-black/40 border border-white/15 px-3 py-2 text-sm text-white
                                           focus:outline-none focus:ring-2 focus:ring-emerald-500/40">
                                <option value="open"        @selected($status === 'open')>مفتوحة</option>
                                <option value="replied"     @selected($status === 'replied')>تم الرد</option>
                                <option value="processing"  @selected($status === 'processing')>جاري المعالجة</option>
                                <option value="executing"   @selected($status === 'executing')>قيد التنفيذ</option>
                                <option value="closed"      @selected($status === 'closed')>مغلقة</option>
                            </select>
                            <button class="px-4 py-2 rounded-2xl text-sm font-extrabold text-slate-950
                                           bg-gradient-to-r from-emerald-300 via-emerald-200 to-cyan-200
                                           shadow-lg shadow-emerald-500/20 hover:scale-[1.01] active:scale-100 transition">
                                تحديث
                            </button>
                        </form>

                        {{-- assign --}}
                        <form method="POST" action="{{ route('support.assign', $thread->id) }}" class="flex gap-2">
                            @csrf
                            <select name="assigned_to"
                                    class="flex-1 rounded-2xl bg-black/40 border border-white/15 px-3 py-2 text-sm text-white
                                           focus:outline-none focus:ring-2 focus:ring-cyan-500/35">
                                <option value="">بدون إسناد محدد</option>
                                @foreach($staffOptions as $staff)
                                    @php
                                        $labelRole = match($staff->membership_status) {
                                            'super-admin' => 'قائد النظام',
                                            'admin'       => 'إداري',
                                            'moderator'   => 'مشرف',
                                            'advisor'     => 'مستشار',
                                            default       => $staff->membership_status,
                                        };
                                    @endphp
                                    <option value="{{ $staff->id }}" @selected($thread->assigned_to == $staff->id)>
                                        {{ $staff->name ?? $staff->username ?? ('ID#'.$staff->id) }}
                                        ({{ $labelRole }})
                                        @if($staff->username) — {{ '@'.$staff->username }} @endif
                                    </option>
                                @endforeach
                            </select>

                            <button class="px-4 py-2 rounded-2xl bg-indigo-500/15 hover:bg-indigo-500/20 border border-indigo-400/20
                                           text-indigo-100 text-sm font-extrabold transition">
                                حفظ
                            </button>
                        </form>

                        {{-- toggle reply (creator) --}}
                        <form method="POST" action="{{ route('support.toggle_reply', $thread->id) }}" class="flex gap-2">
                            @csrf
                            <input type="hidden" name="target" value="creator">
                            <button class="w-full px-4 py-2 rounded-2xl bg-rose-500/10 hover:bg-rose-500/15 border border-rose-400/20
                                           text-rose-100 text-sm font-extrabold transition">
                                منع/تفعيل رد العضو
                            </button>
                        </form>
                    </div>

                    @if($status !== 'closed')
                        <div class="mt-2 flex justify-end">
                            <form method="POST" action="{{ route('support.claim', $thread->id) }}">
                                @csrf
                                <button class="inline-flex items-center gap-2 px-5 py-2.5 rounded-2xl text-sm font-extrabold text-slate-950
                                               bg-gradient-to-r from-emerald-300 via-emerald-200 to-cyan-200
                                               shadow-lg shadow-emerald-500/20 hover:scale-[1.01] active:scale-100 transition">
                                    <i class="fa-solid fa-hand-holding text-xs"></i>
                                    استلمت التذكرة
                                </button>
                            </form>
                        </div>
                    @endif
                @else
                    <form method="POST" action="{{ route('support.toggle_reply', $thread->id) }}" class="flex gap-2">
                        @csrf
                        <input type="hidden" name="target" value="staff">
                        <button class="px-4 py-2.5 rounded-2xl bg-amber-500/10 hover:bg-amber-500/15 border border-amber-400/20
                                       text-amber-100 text-sm font-extrabold transition">
                            منع/تفعيل رد الإدارة
                        </button>
                    </form>
                @endif
            </div>

        </div>
    </section>

    {{-- CHAT BOX (Socratic) --}}
    <section class="relative overflow-hidden rounded-3xl
                    bg-gradient-to-br from-slate-900/85 via-slate-950/85 to-black/90
                    border border-white/10 shadow-2xl">
        <div class="pointer-events-none absolute -top-20 -left-16 w-72 h-72 rounded-full bg-white/7 blur-3xl"></div>

        <div class="relative px-4 sm:px-6 py-4 border-b border-white/10 flex items-center justify-between">
            <div class="font-extrabold text-white flex items-center gap-2">
                <span class="w-10 h-10 rounded-2xl bg-emerald-500/15 border border-emerald-400/25 grid place-items-center text-emerald-200">
                    <i class="fa-solid fa-comments"></i>
                </span>
                المحادثة
            </div>
            <div class="text-[11px] text-white/55">
                تحديث تلقائي + قراءة + حالة "يكتب الآن"
            </div>
        </div>

        <div id="chatScroll"
             class="relative p-4 sm:p-6 space-y-3 max-h-[62vh] overflow-y-auto
                    bg-gradient-to-b from-slate-950/35 via-slate-950/20 to-black/25 sc-scrollbar">
            <div id="chatList" class="space-y-3">
                @foreach($messages as $m)
                    @php
                        $me     = (int)$m->sender_id === $meId;
                        $sender = $m->sender;
                        $avatar = $sender?->avatar_url ?? asset('images/default-male-avatar.png');
                        $seenByOther = $me && $othersReadId > 0 && (int)$m->id <= $othersReadId;
                    @endphp

                    @if($m->is_system)
                        <div class="text-center">
                            <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px]
                                         bg-black/35 border border-white/10 text-white/80">
                                <i class="fa-solid fa-circle-info text-cyan-300"></i>
                                {{ $m->body }}
                            </span>
                        </div>
                    @else
                        <div class="flex {{ $me ? 'justify-end' : 'justify-start' }}"
                             data-mid="{{ (int)$m->id }}"
                             data-mine="{{ $me ? '1' : '0' }}"
                             data-created="{{ $fmt($m->created_at) }}">
                            <div class="max-w-[88%] flex items-end gap-2 {{ $me ? 'flex-row-reverse' : '' }}">
                                <img src="{{ $avatar }}" alt="avatar"
                                     class="w-9 h-9 rounded-2xl object-cover border border-white/10 ring-1 ring-black/30"
                                     onerror="this.src='{{ asset('images/default-male-avatar.png') }}'">

                                <div class="space-y-1 min-w-0">
                                    <div class="text-[10px] text-white/55 {{ $me ? 'text-left' : 'text-right' }}">
                                        {{ $sender?->name ?? '—' }} • {{ $fmt($m->created_at) }}
                                    </div>

                                    <div class="px-3 py-2 rounded-2xl leading-relaxed text-sm shadow-lg
                                        {{ $me
                                            ? 'bg-gradient-to-br from-emerald-400/90 via-cyan-400/80 to-sky-500/85 text-slate-950 rounded-br-none'
                                            : 'bg-white/5 text-white/90 border border-white/10 rounded-bl-none'
                                        }}">
                                        <div class="{{ $me ? 'font-semibold' : '' }}">{{ $m->body }}</div>
                                    </div>

                                    @if($me)
                                        <div class="text-[10px] text-white/45 {{ $seenByOther ? '' : 'opacity-70' }} text-left">
                                            <span class="msgSeen {{ $seenByOther ? '' : 'hidden' }}">شوهدت ✅</span>
                                            <span class="msgSent {{ $seenByOther ? 'hidden' : '' }}">تم الإرسال</span>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>

            <button id="jumpBtn"
                    class="hidden sticky bottom-2 mx-auto px-4 py-2 rounded-full
                           bg-black/60 border border-white/10 text-white text-[11px] font-extrabold shadow-xl backdrop-blur-xl">
                ⬇️ رسائل جديدة
            </button>
        </div>

        {{-- Reply --}}
        <div class="relative border-t border-white/10 p-4 sm:p-6 bg-black/35 backdrop-blur-xl">
            @if($canReply)
                <form id="sendForm" class="space-y-2">
                    @csrf
                    <textarea id="msgBody" name="body" rows="3" required placeholder="اكتب ردك... (Ctrl + Enter للإرسال)"
                              class="w-full rounded-2xl bg-black/40 border border-white/15 px-3 py-2.5 text-sm text-white
                                     placeholder:text-white/30 focus:outline-none focus:ring-2 focus:ring-emerald-500/40"></textarea>

                    <div class="flex items-center justify-between gap-2">
                        <div class="text-[11px] text-white/55">
                            <i class="fa-solid fa-pen-fancy text-[10px] mr-1 text-cyan-300"></i>
                            <span id="miniTyping" class="hidden">يكتب الآن…</span>
                            <span id="miniIdle">جاهز للرد</span>
                        </div>

                        <button id="sendBtn"
                                class="px-5 py-2.5 rounded-2xl text-sm font-extrabold text-slate-950
                                       bg-gradient-to-r from-emerald-300 via-emerald-200 to-cyan-200
                                       shadow-lg shadow-emerald-500/20 hover:scale-[1.01] active:scale-100 transition">
                            <i class="fa-solid fa-paper-plane text-xs ml-1"></i> إرسال
                        </button>
                    </div>
                </form>
            @else
                <div class="rounded-2xl border border-amber-400/20 bg-amber-500/10 text-amber-100 p-3 text-sm">
                    الرد غير متاح حالياً: إمّا التذكرة مغلقة، أو تم منع الرد.
                </div>
            @endif
        </div>
    </section>

    <div class="pt-3 text-center text-[11px] text-white/45">
        نظام رسائل الدعم — غرفة الصقر 🦅
    </div>
</div>
</div>

<script>
(() => {
    const urls = @json($urls);
    const meId = {{ (int)$meId }};
    let lastId = {{ (int)$lastMsgId }};
    let othersReadId = {{ (int)$othersReadId }};

    const chatScroll    = document.getElementById('chatScroll');
    const chatList      = document.getElementById('chatList');
    const jumpBtn       = document.getElementById('jumpBtn');
    const presenceBadge = document.getElementById('presenceBadge');
    const presenceDot   = document.getElementById('presenceDot');
    const presenceLabel = document.getElementById('presenceLabel');

    const typingText = document.getElementById('typingText');
    const typingIdle = document.getElementById('typingIdle');
    const miniTyping = document.getElementById('miniTyping');
    const miniIdle   = document.getElementById('miniIdle');

    const form   = document.getElementById('sendForm');
    const body   = document.getElementById('msgBody');
    const sendBtn = document.getElementById('sendBtn');
    const csrf   = document.querySelector('input[name="_token"]')?.value || '';

    function isNearBottom() {
        const gap = chatScroll.scrollHeight - chatScroll.scrollTop - chatScroll.clientHeight;
        return gap < 140;
    }

    function scrollToBottom() {
        chatScroll.scrollTop = chatScroll.scrollHeight;
    }

    function clientUUID() {
        if (window.crypto && crypto.randomUUID) return crypto.randomUUID();
        return 'm_' + Date.now() + '_' + Math.random().toString(16).slice(2);
    }

    function setTypingUI(namesArr) {
        const hasTyping = Array.isArray(namesArr) && namesArr.length > 0;
        const label = hasTyping
            ? (namesArr.length === 1
                ? `${namesArr[0]} يكتب الآن…`
                : `${namesArr.join('، ')} يكتبون الآن…`)
            : '';

        typingText.textContent = label;

        typingText.classList.toggle('hidden', !hasTyping);
        miniTyping.classList.toggle('hidden', !hasTyping);

        typingIdle.classList.toggle('hidden', hasTyping);
        miniIdle.classList.toggle('hidden', hasTyping);
    }

    function setPresenceUI(online) {
        presenceLabel.textContent = online ? 'متصل الآن' : 'غير متصل';
        presenceDot.className =
            'inline-flex w-2 h-2 rounded-full ' +
            (online ? 'bg-emerald-400 shadow-[0_0_0_6px_rgba(16,185,129,0.20)] animate-pulse' : 'bg-slate-400');
    }

    function updateSeenFlags() {
        const nodes = chatList.querySelectorAll('[data-mine="1"][data-mid]');
        nodes.forEach(n => {
            const mid  = parseInt(n.getAttribute('data-mid') || '0', 10);
            const seen = othersReadId > 0 && mid <= othersReadId;

            const seenEl = n.querySelector('.msgSeen');
            const sentEl = n.querySelector('.msgSent');

            if (!seenEl || !sentEl) return;

            seenEl.classList.toggle('hidden', !seen);
            sentEl.classList.toggle('hidden', seen);
        });
    }

    function appendMessage(m) {
        if (m.is_system) {
            const wrap = document.createElement('div');
            wrap.className = 'text-center';
            wrap.innerHTML = `
                <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px]
                             bg-black/35 border border-white/10 text-white/80">
                    <i class="fa-solid fa-circle-info text-cyan-300"></i>
                    ${escapeHtml(m.body)}
                </span>
            `;
            chatList.appendChild(wrap);
            return;
        }

        const me = !!m.mine;

        const row = document.createElement('div');
        row.className = `flex ${me ? 'justify-end' : 'justify-start'}`;
        row.setAttribute('data-mid', m.id);
        row.setAttribute('data-mine', me ? '1' : '0');

        row.innerHTML = `
            <div class="max-w-[88%] flex items-end gap-2 ${me ? 'flex-row-reverse' : ''}">
                <img src="${m.avatar || ''}" alt="avatar"
                     class="w-9 h-9 rounded-2xl object-cover border border-white/10 ring-1 ring-black/30"
                     onerror="this.src='{{ asset('images/default-male-avatar.png') }}'">

                <div class="space-y-1 min-w-0">
                    <div class="text-[10px] text-white/55 ${me ? 'text-left' : 'text-right'}">
                        ${escapeHtml(m.sender_name || '—')} • ${escapeHtml(m.time || '')}
                    </div>

                    <div class="px-3 py-2 rounded-2xl leading-relaxed text-sm shadow-lg ${
                        me
                          ? 'bg-gradient-to-br from-emerald-400/90 via-cyan-400/80 to-sky-500/85 text-slate-950 rounded-br-none'
                          : 'bg-white/5 text-white/90 border border-white/10 rounded-bl-none'
                    }">
                        <div class="${me ? 'font-semibold' : ''}">${escapeHtml(m.body)}</div>
                    </div>

                    ${me ? `
                        <div class="text-[10px] text-white/45 text-left">
                            <span class="msgSeen hidden">شوهدت ✅</span>
                            <span class="msgSent">تم الإرسال</span>
                        </div>
                    ` : ``}
                </div>
            </div>
        `;

        chatList.appendChild(row);
    }

    function escapeHtml(str) {
        return (str ?? '').toString()
            .replaceAll('&','&amp;')
            .replaceAll('<','&lt;')
            .replaceAll('>','&gt;')
            .replaceAll('"','&quot;')
            .replaceAll("'","&#039;");
    }

    // ===== send message بدون refresh =====
    async function sendMessage(text) {
        const uuid = clientUUID();

        const now = new Date();
        const pad = n => String(n).padStart(2,'0');
        const time = `${now.getFullYear()}-${pad(now.getMonth()+1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}`;

        appendMessage({
            id: 'tmp_' + uuid,
            mine: true,
            is_system: false,
            body: text,
            time,
            sender_name: 'أنا',
            avatar: '',
        });

        if (isNearBottom()) scrollToBottom();

        const res = await fetch(urls.send, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrf,
            },
            body: JSON.stringify({ body: text, client_uuid: uuid }),
        });

        const data = await res.json();
        if (!data || !data.success) throw new Error(data?.message || 'فشل الإرسال');

        lastId = Math.max(lastId, parseInt(data.message.id, 10) || lastId);
    }

    if (form && body) {
        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            const text = (body.value || '').trim();
            if (!text) return;

            sendBtn.disabled = true;
            try {
                await sendMessage(text);
                body.value = '';
                await pingTyping(false);
                await markRead();
            } catch (err) {
                alert('تعذر الإرسال: ' + (err?.message || err));
            } finally {
                sendBtn.disabled = false;
            }
        });

        body.addEventListener('keydown', (e) => {
            if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
                e.preventDefault();
                form.requestSubmit();
            }
        });
    }

    // ===== typing =====
    let typingTimer = null;
    let typingOn = false;

    async function pingTyping(on) {
        try {
            await fetch(urls.typing, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrf,
                },
                body: JSON.stringify({ typing: on ? 1 : 0 }),
            });
        } catch (e) {}
    }

    if (body) {
        body.addEventListener('input', () => {
            if (!typingOn) {
                typingOn = true;
                pingTyping(true);
            }

            clearTimeout(typingTimer);
            typingTimer = setTimeout(() => {
                typingOn = false;
                pingTyping(false);
            }, 1200);
        });

        body.addEventListener('blur', () => {
            typingOn = false;
            pingTyping(false);
        });
    }

    // ===== mark read =====
    let lastReadSent = 0;

    async function markRead() {
        if (lastId <= 0) return;
        if (lastReadSent >= lastId) return;

        try {
            await fetch(urls.read, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrf,
                },
                body: JSON.stringify({ last_id: lastId }),
            });
            lastReadSent = lastId;
        } catch (e) {}
    }

    // ===== Poll messages / typing / presence =====
    let polling = false;
    let newMsgCount = 0;

    async function poll() {
        if (polling) return;
        polling = true;

        try {
            const res = await fetch(urls.poll + '?after_id=' + encodeURIComponent(lastId), {
                headers: { 'Accept': 'application/json' }
            });
            const data = await res.json();
            if (!data || !data.success) return;

            // presence
            setPresenceUI(!!data.others_online);

            // typing users ⇒ أسماء
            const typing = Array.isArray(data.typing) ? data.typing : [];
            const typingNames = typing.map(t => t.name || 'عضو');
            setTypingUI(typingNames);

            // read receipts
            othersReadId = parseInt(data.others_read_id || '0', 10) || 0;
            updateSeenFlags();

            // can_reply state
            const canReply = !!data.thread?.can_reply;
            if (form && body && sendBtn) {
                body.disabled = !canReply;
                sendBtn.disabled = !canReply;
            }

            // messages
            const msgs = Array.isArray(data.messages) ? data.messages : [];
            if (msgs.length > 0) {
                const wasNearBottom = isNearBottom();

                msgs.forEach(m => {
                    if (typeof m.id === 'number' || (typeof m.id === 'string' && !String(m.id).startsWith('tmp_'))) {
                        lastId = Math.max(lastId, parseInt(m.id, 10) || lastId);
                    }
                    appendMessage(m);
                });

                if (wasNearBottom) {
                    scrollToBottom();
                    await markRead();
                } else {
                    newMsgCount += msgs.length;
                    jumpBtn.classList.remove('hidden');
                    jumpBtn.textContent = `⬇️ رسائل جديدة (${newMsgCount})`;
                }
            }

        } catch (e) {
            // نطنّش
        } finally {
            polling = false;
        }
    }

    if (jumpBtn) {
        jumpBtn.addEventListener('click', async () => {
            newMsgCount = 0;
            jumpBtn.classList.add('hidden');
            scrollToBottom();
            await markRead();
        });
    }

    chatScroll.addEventListener('scroll', async () => {
        if (isNearBottom()) {
            newMsgCount = 0;
            jumpBtn.classList.add('hidden');
            await markRead();
        }
    });

    // init
    scrollToBottom();
    markRead();
    updateSeenFlags();
    setPresenceUI({{ $othersOnline ? 'true' : 'false' }});
    poll();
    setInterval(poll, 1400);
})();
</script>
@endsection