@php
    $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';
    }

    $senderName  = $message->sender->name ?? 'غير معروف';
    $senderEmail = $message->sender->email ?? '';
    $subject     = $message->subject ?? 'بدون موضوع';
    $isImportant = (bool)($message->important ?? false);
    $authId      = auth()->id();
@endphp

@extends($layout)

@section('title', 'محادثة الرسالة')

@section('content')
<div class="max-w-7xl mx-auto px-6 py-10 pb-28">

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">

        {{-- ===== Sidebar ===== --}}
        <aside class="lg:col-span-3">
            <div class="pmc-card p-5 md:sticky md:top-24">
                <div class="flex items-center justify-between gap-3">
                    <div>
                        <div class="text-xs font-extrabold text-slate-500 dark:text-white/55">تنقل سريع</div>
                        <div class="text-lg font-extrabold text-slate-900 dark:text-white">المجلدات</div>
                    </div>
                    <div class="h-11 w-11 rounded-2xl bg-slate-100 dark:bg-white/5 flex items-center justify-center">
                        <i class="fa-solid fa-folder-tree text-slate-700 dark:text-white/70"></i>
                    </div>
                </div>

                <div class="mt-4 space-y-2">
                    <a href="{{ route('simple-messages.inbox') }}"
                       class="pmc-nav-item {{ request()->routeIs('simple-messages.inbox') ? 'pmc-nav-active' : '' }}">
                        <i class="fa-solid fa-inbox text-emerald-500"></i>
                        <span>الوارد</span>
                    </a>

                    <a href="{{ route('simple-messages.sent') }}"
                       class="pmc-nav-item {{ request()->routeIs('simple-messages.sent') ? 'pmc-nav-active' : '' }}">
                        <i class="fa-solid fa-paper-plane text-sky-500"></i>
                        <span>الصادر</span>
                    </a>

                    <a href="{{ route('simple-messages.important') }}"
                       class="pmc-nav-item {{ request()->routeIs('simple-messages.important') ? 'pmc-nav-active' : '' }}">
                        <i class="fa-solid fa-star text-amber-500"></i>
                        <span>المهمة</span>
                    </a>

                    <a href="{{ route('simple-messages.archived') }}"
                       class="pmc-nav-item {{ request()->routeIs('simple-messages.archived') ? 'pmc-nav-active' : '' }}">
                        <i class="fa-solid fa-box-archive text-slate-500"></i>
                        <span>المؤرشفة</span>
                    </a>
                </div>

                <div class="mt-5 pt-5 border-t border-slate-200 dark:border-white/10">
                    <div class="text-xs text-slate-500 dark:text-white/55 leading-relaxed">
                        💡 تلميح: استخدم القوالب لتسريع الردود وتوحيد الأسلوب الرسمي.
                    </div>
                </div>
            </div>
        </aside>

        {{-- ===== Main ===== --}}
        <main class="lg:col-span-9 flex flex-col gap-6">

            {{-- ===== HERO / Header ===== --}}
            <div class="pmc-hero">
                <div class="pmc-hero-glow pmc-hero-glow-a"></div>
                <div class="pmc-hero-glow pmc-hero-glow-b"></div>

                <div class="relative p-6 sm:p-8">
                    <div class="flex flex-col lg:flex-row lg:items-center justify-between gap-6">

                        <div class="min-w-0">
                            <div class="text-xs font-extrabold text-white/80">
                                محادثة رسمية — رقم #{{ $message->id }}
                            </div>

                            <h1 class="mt-2 text-2xl sm:text-3xl font-extrabold text-white truncate">
                                {{ $subject }}
                            </h1>

                            <div class="mt-2 text-white/85 text-sm leading-relaxed">
                                <span class="font-extrabold">من:</span> {{ $senderName }}
                                @if($senderEmail)
                                    <span class="text-white/70">({{ $senderEmail }})</span>
                                @endif
                                <span class="mx-2 text-white/50">•</span>
                                <span class="text-white/80">أُرسلت: {{ $message->created_at->format('Y-m-d H:i') }}</span>
                            </div>

                            <div class="mt-4 flex flex-wrap gap-2 text-[12px] font-extrabold">
                                <span class="pmc-chip pmc-chip-white">
                                    <i class="fa-solid fa-reply"></i>
                                    الردود: <span id="pmc-replies-count">{{ $message->replies->count() }}</span>
                                </span>

                                <span class="pmc-chip pmc-chip-white">
                                    <i class="fa-solid fa-circle-info"></i>
                                    السجل محفوظ داخل النظام
                                </span>

                                @if(!$message->read_at)
                                    <span class="pmc-chip pmc-chip-danger">
                                        <i class="fa-solid fa-bolt"></i>
                                        جديد
                                    </span>
                                @endif

                                @if($isImportant)
                                    <span class="pmc-chip pmc-chip-amber">
                                        <i class="fa-solid fa-star"></i>
                                        مهم
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="flex flex-wrap gap-2">
                            <a href="{{ route('simple-messages.inbox') }}" class="pmc-btn pmc-btn-ghost-white">
                                <i class="fa-solid fa-arrow-right"></i>
                                رجوع
                            </a>

                            <button type="button" class="pmc-btn pmc-btn-white" onclick="pmcScrollToReplies()">
                                <i class="fa-solid fa-list"></i>
                                عرض السجل
                            </button>

                            {{-- أدوات (اختيارية إذا الروت موجودة) --}}
                            @if(\Illuminate\Support\Facades\Route::has('simple-messages.toggle-important'))
                                <button type="button"
                                        id="pmc-important-btn"
                                        data-important="{{ $isImportant ? 1 : 0 }}"
                                        class="pmc-btn {{ $isImportant ? 'pmc-btn-amber' : 'pmc-btn-soft-white' }}"
                                        onclick="pmcToggleImportant({{ $message->id }})">
                                    <i class="fa-solid fa-star"></i>
                                    مهم
                                </button>
                            @endif

                            @if(\Illuminate\Support\Facades\Route::has('simple-messages.archive'))
                                <button type="button"
                                        class="pmc-btn pmc-btn-soft-white"
                                        onclick="pmcArchiveMessage({{ $message->id }})">
                                    <i class="fa-solid fa-box-archive"></i>
                                    أرشفة
                                </button>
                            @endif

                            @if(\Illuminate\Support\Facades\Route::has('simple-messages.delete'))
                                <button type="button"
                                        class="pmc-btn pmc-btn-danger"
                                        onclick="pmcDeleteMessage({{ $message->id }})">
                                    <i class="fa-solid fa-trash"></i>
                                    حذف
                                </button>
                            @endif
                        </div>

                    </div>
                </div>

                <div class="h-1 bg-gradient-to-r from-emerald-400 via-teal-300 to-sky-400"></div>
            </div>

            {{-- ===== Reply Composer (TOP) ===== --}}
            <div class="pmc-card p-6">
                <div class="flex flex-col md:flex-row md:items-center justify-between gap-3">
                    <div>
                        <div class="text-xs font-extrabold text-slate-500 dark:text-white/55">الرد</div>
                        <div class="text-lg font-extrabold text-slate-900 dark:text-white">
                            كتابة رد رسمي
                        </div>
                        <div class="mt-1 text-sm text-slate-600 dark:text-white/60">
                            استخدم القوالب لتسريع العمل ثم عدّل النص حسب الحالة.
                        </div>
                    </div>

                    <div class="flex items-center gap-2">
                        <span class="text-xs font-extrabold text-slate-500 dark:text-white/55">
                            <span id="pmc-count">0</span> حرف
                        </span>
                        <button type="button" class="pmc-btn pmc-btn-soft" onclick="pmcClearReply()">
                            <i class="fa-solid fa-eraser"></i>
                            مسح
                        </button>
                    </div>
                </div>

                {{-- Templates --}}
                <div class="mt-4 flex flex-wrap gap-2">
                    <button type="button" class="pmc-template"
                            data-text="تم استلام رسالتكم وسيتم مراجعتها والرد في أقرب وقت ممكن."
                            onclick="pmcUseTemplate(this)">استلام + مراجعة</button>

                    <button type="button" class="pmc-template"
                            data-text="يرجى تزويدنا بتفاصيل إضافية (وقت/اسم/خطوات/صور إن لزم) لإكمال المتابعة."
                            onclick="pmcUseTemplate(this)">طلب تفاصيل</button>

                    <button type="button" class="pmc-template"
                            data-text="تم حل المشكلة. إذا تكرر الأمر يرجى إعلامنا مع ذكر الوقت والتفاصيل اللازمة."
                            onclick="pmcUseTemplate(this)">تم الحل</button>

                    <button type="button" class="pmc-template"
                            data-text="نعتذر عن الإزعاج. نؤكد أنه سيتم التعامل مع الموضوع بأولوية وفق سياسة النظام."
                            onclick="pmcUseTemplate(this)">اعتذار رسمي</button>
                </div>

                <div class="mt-4">
                    <textarea id="pmc-reply-body" rows="5"
                              class="pmc-textarea"
                              placeholder="اكتب ردك هنا... (Ctrl + Enter للإرسال)"></textarea>

                    <div class="mt-2 text-xs text-slate-500 dark:text-white/55 leading-relaxed">
                        ✅ اذكر تفاصيل واضحة وتجنّب مشاركة كلمات مرور/رموز تحقق/معلومات دفع.
                    </div>
                </div>

                <div class="mt-4 flex flex-wrap items-center justify-end gap-2">
                    <button type="button" class="pmc-btn pmc-btn-ghost" onclick="pmcScrollToLatest()">
                        <i class="fa-solid fa-arrow-down"></i>
                        آخر رد
                    </button>

                    <button type="button" id="pmc-reply-btn" class="pmc-btn pmc-btn-primary" onclick="pmcSendReply()">
                        <i class="fa-solid fa-paper-plane"></i>
                        إرسال الرد
                    </button>
                </div>
            </div>

            {{-- ===== Conversation / Logs ===== --}}
            <div id="pmc-logs" class="pmc-card overflow-hidden">
                <div class="p-6 border-b border-slate-200 dark:border-white/10">
                    <div class="flex items-center justify-between gap-3">
                        <div>
                            <div class="text-xs font-extrabold text-slate-500 dark:text-white/55">سجل المحادثة</div>
                            <div class="text-lg font-extrabold text-slate-900 dark:text-white">
                                الرسالة + الردود
                            </div>
                        </div>
                        <div class="text-xs text-slate-500 dark:text-white/55">
                            يتم حفظ السجل للتوثيق والمتابعة
                        </div>
                    </div>
                </div>

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

                    {{-- Original message bubble --}}
                    <div class="pmc-bubble-wrap pmc-bubble-wrap-other">
                        <div class="pmc-bubble pmc-bubble-other">
                            <div class="flex items-start justify-between gap-3">
                                <div class="min-w-0">
                                    <div class="text-sm font-extrabold text-slate-900 dark:text-white">
                                        {{ $senderName }}
                                        <span class="text-xs font-bold text-slate-500 dark:text-white/55">
                                            • الرسالة الأصلية
                                        </span>
                                    </div>
                                    @if($senderEmail)
                                        <div class="text-xs text-slate-500 dark:text-white/55 truncate">{{ $senderEmail }}</div>
                                    @endif
                                </div>

                                <div class="text-xs text-slate-400 dark:text-white/45 whitespace-nowrap">
                                    {{ $message->created_at->format('Y-m-d H:i') }}
                                </div>
                            </div>

                            <div class="mt-3 text-sm text-slate-800 dark:text-white/90 whitespace-pre-line leading-relaxed">
                                {!! nl2br(e($message->body)) !!}
                            </div>
                        </div>
                    </div>

                    {{-- Replies --}}
                    <div class="pt-2">
                        <div class="text-xs font-extrabold text-slate-600 dark:text-white/60 mb-3">
                            الردود ({{ $message->replies->count() }})
                        </div>

                        <div id="pmc-replies-list" class="space-y-3">
                            @if($message->replies->count() === 0)
                                <div id="pmc-empty-replies"
                                     class="pmc-empty">
                                    <div class="h-11 w-11 rounded-2xl bg-slate-100 dark:bg-white/5 flex items-center justify-center">
                                        <i class="fa-regular fa-comment-dots text-slate-600 dark:text-white/60"></i>
                                    </div>
                                    <div>
                                        <div class="font-extrabold text-slate-900 dark:text-white">لا توجد ردود بعد</div>
                                        <div class="text-sm text-slate-500 dark:text-white/55 mt-1">
                                            اكتب ردك من الأعلى، وسيظهر هنا ضمن السجل.
                                        </div>
                                    </div>
                                </div>
                            @endif

                            @foreach($message->replies as $reply)
                                @php
                                    $isMine = ($reply->sender->id ?? null) == $authId;
                                    $rName  = $isMine ? 'أنت' : ($reply->sender->name ?? 'عضو');
                                    $rEmail = $reply->sender->email ?? '';
                                    $isNew  = (bool)($reply->is_new ?? false);
                                @endphp

                                <div class="pmc-bubble-wrap {{ $isMine ? 'pmc-bubble-wrap-mine' : 'pmc-bubble-wrap-other' }}">
                                    <div class="pmc-bubble {{ $isMine ? 'pmc-bubble-mine' : 'pmc-bubble-other' }}">
                                        <div class="flex items-start justify-between gap-3">
                                            <div class="min-w-0">
                                                <div class="text-sm font-extrabold {{ $isMine ? 'text-emerald-950' : 'text-slate-900 dark:text-white' }}">
                                                    {{ $rName }}
                                                    @if($isNew)
                                                        <span class="ms-2 px-2 py-0.5 text-[11px] rounded-full bg-rose-500 text-white font-extrabold">
                                                            جديد
                                                        </span>
                                                    @endif
                                                </div>
                                                @if($rEmail)
                                                    <div class="text-xs {{ $isMine ? 'text-emerald-900/70' : 'text-slate-500 dark:text-white/55' }} truncate">
                                                        {{ $rEmail }}
                                                    </div>
                                                @endif
                                            </div>

                                            <div class="text-xs {{ $isMine ? 'text-emerald-900/70' : 'text-slate-400 dark:text-white/45' }} whitespace-nowrap">
                                                {{ $reply->created_at->format('Y-m-d H:i') }}
                                            </div>
                                        </div>

                                        <div class="mt-2 text-sm {{ $isMine ? 'text-emerald-950' : 'text-slate-800 dark:text-white/90' }} whitespace-pre-line leading-relaxed">
                                            {!! nl2br(e($reply->body)) !!}
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <div id="pmc-latest-anchor"></div>
                    </div>

                </div>
            </div>

            {{-- ===== Security / Policy (Bottom) ===== --}}
            <div class="pmc-card p-6">
                <div class="flex items-start gap-3">
                    <div class="h-11 w-11 rounded-2xl bg-emerald-100 dark:bg-emerald-900/25 text-emerald-700 dark:text-emerald-200 flex items-center justify-center">
                        <i class="fa-solid fa-shield-halved"></i>
                    </div>
                    <div class="min-w-0">
                        <div class="font-extrabold text-slate-900 dark:text-white">الأمن وسياسة الاستخدام</div>
                        <div class="mt-2 text-sm text-slate-600 dark:text-white/65 leading-relaxed">
                            • يمنع نشر كلمات مرور، رموز تحقق، بيانات دفع، أو أي معلومات شخصية حساسة.<br>
                            • بموجب سياسة الاستخدام داخل النظام، يحق للإدارة مراجعة/مراقبة المحادثات عند الحاجة لضمان
                            <span class="font-extrabold">العدالة</span> و<span class="font-extrabold">أمن الأعضاء</span> ومنع إساءة الاستخدام.<br>
                            • قد يتم تحليل الرسائل عبر أدوات آلية (بما فيها تقنيات <span class="font-extrabold">ذكاء اصطناعي</span>)
                            للمساعدة في رصد الإساءة/التهديدات/الاحتيال وتحسين جودة الخدمة.
                        </div>
                        <div class="mt-3 text-xs text-slate-500 dark:text-white/55">
                            باستخدامك نظام الرسائل أنت توافق على الالتزام بسياسات المنصة.
                        </div>
                    </div>
                </div>
            </div>

        </main>
    </div>
</div>

{{-- ===== Toasts ===== --}}
<div id="pmc-toasts" class="fixed bottom-6 left-1/2 -translate-x-1/2 z-[9999] space-y-2 w-[92vw] sm:w-[420px]"></div>

<style>
/* ===== Base ===== */
.pmc-card{
    background:#fff;
    border:1px solid rgba(226,232,240,.9);
    border-radius: 1.5rem;
    box-shadow: 0 24px 60px rgba(2,6,23,.06);
}
.dark .pmc-card{
    background: rgba(2,6,23,.55);
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 24px 60px rgba(0,0,0,.25);
}

/* ===== Sidebar nav ===== */
.pmc-nav-item{
    display:flex; align-items:center; gap:.75rem;
    padding:.8rem 1rem;
    border-radius: 1.1rem;
    font-weight: 900;
    color:#0f172a;
    background: rgba(241,245,249,.7);
    border:1px solid rgba(226,232,240,.9);
    transition: all .15s ease;
}
.pmc-nav-item:hover{ transform: translateY(-1px); box-shadow: 0 14px 26px rgba(2,6,23,.10); }
.dark .pmc-nav-item{
    color: rgba(255,255,255,.9);
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
}
.pmc-nav-active{
    background: rgba(16,185,129,.14);
    border-color: rgba(16,185,129,.25);
}

/* ===== Hero ===== */
.pmc-hero{
    position: relative;
    overflow: hidden;
    border-radius: 1.6rem;
    box-shadow: 0 30px 80px rgba(2,6,23,.14);
    border: 1px solid rgba(15,23,42,.12);
    background: linear-gradient(135deg, rgba(15,23,42,1), rgba(30,41,59,1), rgba(2,132,199,1));
}
.pmc-hero-glow{
    position:absolute; border-radius:9999px; filter: blur(55px); opacity:.25;
    pointer-events:none;
}
.pmc-hero-glow-a{ width:280px; height:280px; right:-90px; top:-90px; background: rgba(255,255,255,.9); }
.pmc-hero-glow-b{ width:280px; height:280px; left:-90px; bottom:-90px; background: rgba(0,0,0,.35); }

/* ===== Chips ===== */
.pmc-chip{
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.3rem .7rem;
    border-radius:9999px;
    font-size:11px;
    font-weight:950;
    border:1px solid rgba(226,232,240,.9);
    background:#fff; color:#0f172a;
}
.pmc-chip-white{
    background: rgba(255,255,255,.90);
    border-color: rgba(255,255,255,.35);
    color: #0f172a;
}
.pmc-chip-danger{
    background: rgba(244,63,94,.95);
    border-color: rgba(244,63,94,.35);
    color:#fff;
}
.pmc-chip-amber{
    background: rgba(251,191,36,.18);
    border-color: rgba(251,191,36,.30);
    color: rgba(120,53,15,1);
}

/* ===== Buttons ===== */
.pmc-btn{
    position: relative; z-index: 10; pointer-events: auto;
    display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
    padding:.75rem 1rem;
    border-radius: 1rem;
    font-weight: 950;
    font-size:.9rem;
    border:1px solid rgba(226,232,240,.9);
    background:#fff;
    color:#0f172a;
    transition: all .15s ease;
}
.pmc-btn:hover{ transform: translateY(-1px); box-shadow: 0 16px 30px rgba(2,6,23,.12); }
.pmc-btn:disabled{ opacity:.60; cursor:not-allowed; transform:none; box-shadow:none; }

.dark .pmc-btn{
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.92);
    border-color: rgba(255,255,255,.10);
}
.dark .pmc-btn:hover{ box-shadow: 0 16px 30px rgba(0,0,0,.25); }

.pmc-btn-white{
    background: rgba(255,255,255,.92);
    border-color: rgba(255,255,255,.35);
}
.pmc-btn-ghost-white{
    background: rgba(15,23,42,.22);
    color: #fff;
    border-color: rgba(255,255,255,.22);
}
.pmc-btn-ghost-white:hover{ background: rgba(15,23,42,.28); }

.pmc-btn-soft-white{
    background: rgba(255,255,255,.16);
    color:#fff;
    border-color: rgba(255,255,255,.22);
}
.pmc-btn-soft-white:hover{ background: rgba(255,255,255,.22); }

.pmc-btn-soft{
    background: rgba(241,245,249,.9);
    border-color: rgba(226,232,240,.9);
}
.dark .pmc-btn-soft{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
}

.pmc-btn-ghost{
    background: rgba(148,163,184,.10);
    border-color: rgba(148,163,184,.25);
}
.dark .pmc-btn-ghost{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }

.pmc-btn-primary{
    background: linear-gradient(90deg, rgba(16,185,129,1), rgba(56,189,248,1));
    border-color: rgba(16,185,129,.35);
    color:#fff;
}
.pmc-btn-danger{
    background: rgba(244,63,94,.14);
    border-color: rgba(244,63,94,.22);
    color: rgba(190,18,60,1);
}
.dark .pmc-btn-danger{
    background: rgba(244,63,94,.18);
    border-color: rgba(244,63,94,.22);
    color: rgba(253,164,175,1);
}
.pmc-btn-amber{
    background: rgba(251,191,36,.18);
    border-color: rgba(251,191,36,.30);
    color: rgba(120,53,15,1);
}
.dark .pmc-btn-amber{
    background: rgba(251,191,36,.16);
    border-color: rgba(251,191,36,.25);
    color: rgba(253,230,138,1);
}

/* ===== Reply textarea ===== */
.pmc-textarea{
    width:100%;
    border-radius: 1.25rem;
    border:1px solid rgba(226,232,240,.9);
    background:#fff;
    color:#0f172a;
    padding: 14px 14px;
    font-size: 14px;
    font-weight: 800;
    box-shadow: inset 0 2px 10px rgba(2,6,23,.06);
    outline: none;
    transition: all .15s ease;
}
.pmc-textarea:focus{
    border-color: rgba(16,185,129,.55);
    box-shadow: 0 0 0 3px rgba(16,185,129,.18);
}
.dark .pmc-textarea{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    color: rgba(255,255,255,.92);
}
.dark .pmc-textarea:focus{
    box-shadow: 0 0 0 3px rgba(16,185,129,.20);
}

/* ===== Templates ===== */
.pmc-template{
    border:1px solid rgba(226,232,240,.9);
    background: rgba(241,245,249,.75);
    color:#0f172a;
    padding:.45rem .75rem;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 950;
    transition: all .15s ease;
}
.pmc-template:hover{
    transform: translateY(-1px);
    background: rgba(16,185,129,.12);
    border-color: rgba(16,185,129,.25);
}
.dark .pmc-template{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    color: rgba(255,255,255,.85);
}

/* ===== Bubbles ===== */
.pmc-bubble-wrap{ display:flex; }
.pmc-bubble-wrap-other{ justify-content:flex-start; }
.pmc-bubble-wrap-mine{ justify-content:flex-end; }

.pmc-bubble{
    width: 100%;
    max-width: 760px;
    border-radius: 1.25rem;
    padding: 14px 14px;
    border: 1px solid rgba(226,232,240,.9);
}
.pmc-bubble-other{
    background:#fff;
    color:#0f172a;
}
.dark .pmc-bubble-other{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    color: rgba(255,255,255,.92);
}
.pmc-bubble-mine{
    background: linear-gradient(135deg, rgba(16,185,129,.14), rgba(56,189,248,.12));
    border-color: rgba(16,185,129,.25);
    color:#052e2b;
}
.dark .pmc-bubble-mine{
    background: linear-gradient(135deg, rgba(16,185,129,.16), rgba(56,189,248,.08));
    border-color: rgba(16,185,129,.22);
}

/* ===== Empty ===== */
.pmc-empty{
    display:flex; align-items:flex-start; gap:12px;
    padding: 14px;
    border-radius: 1.25rem;
    border: 1px dashed rgba(148,163,184,.45);
    background: rgba(241,245,249,.55);
}
.dark .pmc-empty{
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
}
</style>

<script>
const PMC = {
    messageId: @json($message->id),
    authId: @json(auth()->id()),
};

/* ===== Toasts ===== */
function pmcToast(type, message){
    const box = document.getElementById('pmc-toasts');
    if(!box) return;

    const colors = {
        success: 'background: rgba(16,185,129,.95); color:#fff;',
        error:   'background: rgba(244,63,94,.95); color:#fff;',
        warning: 'background: rgba(245,158,11,.95); color:#fff;',
        info:    'background: rgba(15,23,42,.92); color:#fff;'
    };

    const id = 'pmc_t_' + Math.random().toString(16).slice(2);
    const el = document.createElement('div');
    el.id = id;
    el.style = (colors[type] || colors.info) + 'border-radius: 18px; padding: 12px 14px; box-shadow: 0 18px 40px rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:10px; align-items:flex-start;';
    el.innerHTML = `
        <div style="font-weight:900; font-size:13px; line-height:1.5;">${pmcEscapeHtml(message || '—')}</div>
        <button type="button" style="font-weight:900; opacity:.9;" onclick="document.getElementById('${id}')?.remove()">✕</button>
    `;
    box.appendChild(el);
    setTimeout(() => document.getElementById(id)?.remove(), 3500);
}

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

function pmcCsrf(){
    return document.querySelector('meta[name="csrf-token"]')?.content || '';
}

/* ===== Helpers ===== */
function pmcScrollToReplies(){
    document.getElementById('pmc-logs')?.scrollIntoView({behavior:'smooth', block:'start'});
}
function pmcScrollToLatest(){
    document.getElementById('pmc-latest-anchor')?.scrollIntoView({behavior:'smooth', block:'end'});
}
function pmcClearReply(){
    const ta = document.getElementById('pmc-reply-body');
    if(!ta) return;
    ta.value = '';
    pmcUpdateCount();
    ta.focus();
}
function pmcUseTemplate(btn){
    const txt = btn?.getAttribute('data-text') || '';
    const ta = document.getElementById('pmc-reply-body');
    if(!ta) return;
    ta.value = ta.value ? (ta.value.trim() + "\n\n" + txt) : txt;
    pmcUpdateCount();
    ta.focus();
}
function pmcUpdateCount(){
    const ta = document.getElementById('pmc-reply-body');
    const c  = document.getElementById('pmc-count');
    if(!ta || !c) return;
    c.textContent = String((ta.value || '').length);
}

/* ===== Send Reply (robust) ===== */
async function pmcSendReply(){
    const bodyEl = document.getElementById('pmc-reply-body');
    const btn    = document.getElementById('pmc-reply-btn');

    const body = (bodyEl?.value || '').trim();
    if(!body){
        pmcToast('warning', 'يرجى كتابة الرد قبل الإرسال.');
        bodyEl?.focus();
        return;
    }

    try{
        if(btn){
            btn.disabled = true;
            btn.innerHTML = `<i class="fa-solid fa-circle-notch fa-spin"></i> جاري الإرسال...`;
        }

        const res = await fetch(`{{ route('simple-messages.reply', $message->id) }}`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': pmcCsrf(),
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: JSON.stringify({ body })
        });

        // Session expired
        if(res.status === 419){
            pmcToast('error', 'انتهت الجلسة. حدّث الصفحة ثم حاول مجددًا.');
            return;
        }

        // Try JSON, fallback to text
        const ct = (res.headers.get('content-type') || '').toLowerCase();
        let data = null;

        if(ct.includes('application/json')){
            data = await res.json();
        }else{
            // غالباً السيرفر رجع HTML (redirect) — خلينا نعمل reload آمن
            const txt = await res.text();
            console.warn('Non-JSON response (fallback reload).', txt?.slice?.(0,200));
            pmcToast('info', 'تم الإرسال — جاري تحديث السجل...');
            window.location.reload();
            return;
        }

        if(!res.ok || !data || data.success !== true){
            pmcToast('error', data?.message || 'حدث خطأ أثناء الإرسال.');
            return;
        }

        // remove empty placeholder
        document.getElementById('pmc-empty-replies')?.remove();

        // append bubble
        const repliesList = document.getElementById('pmc-replies-list');
        const wrapper = document.createElement('div');
        wrapper.className = 'pmc-bubble-wrap pmc-bubble-wrap-mine';
        wrapper.innerHTML = `
            <div class="pmc-bubble pmc-bubble-mine">
                <div class="flex items-start justify-between gap-3">
                    <div class="min-w-0">
                        <div class="text-sm font-extrabold text-emerald-950">
                            أنت
                            <span class="ms-2 px-2 py-0.5 text-[11px] rounded-full bg-rose-500 text-white font-extrabold">جديد</span>
                        </div>
                        ${data.reply?.sender_email ? `<div class="text-xs text-emerald-900/70 truncate">${pmcEscapeHtml(data.reply.sender_email)}</div>` : ``}
                    </div>
                    <div class="text-xs text-emerald-900/70 whitespace-nowrap">الآن</div>
                </div>
                <div class="mt-2 text-sm text-emerald-950 whitespace-pre-line leading-relaxed">
                    ${pmcEscapeHtml(data.reply?.body ?? body).replace(/\n/g,'<br>')}
                </div>
            </div>
        `;
        repliesList?.appendChild(wrapper);

        // update counter
        const countSpan = document.getElementById('pmc-replies-count');
        if(countSpan){
            countSpan.textContent = String(parseInt(countSpan.textContent || '0', 10) + 1);
        }

        // clear textarea
        if(bodyEl){
            bodyEl.value = '';
            pmcUpdateCount();
        }

        pmcToast('success', data.message || 'تم إرسال الرد ✅');
        pmcScrollToLatest();

    }catch(err){
        console.error(err);
        pmcToast('error', 'حدث خطأ في الاتصال بالخادم.');
    }finally{
        if(btn){
            btn.disabled = false;
            btn.innerHTML = `<i class="fa-solid fa-paper-plane"></i> إرسال الرد`;
        }
    }
}

/* ===== Optional actions (if routes exist) ===== */
async function pmcToggleImportant(messageId){
    const btn = document.getElementById('pmc-important-btn');
    if(!btn) return;

    try{
        btn.disabled = true;

        const res = await fetch(`{{ route('simple-messages.toggle-important', ':id') }}`.replace(':id', messageId), {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': pmcCsrf(),
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
            }
        });

        const data = await res.json().catch(()=>null);
        if(!res.ok || !data?.success){
            pmcToast('error', data?.message || 'تعذر تعديل حالة المهم.');
            return;
        }

        const current = btn.dataset.important === '1';
        const next = !current;
        btn.dataset.important = next ? '1' : '0';

        btn.classList.remove('pmc-btn-amber','pmc-btn-soft-white');
        btn.classList.add(next ? 'pmc-btn-amber' : 'pmc-btn-soft-white');

        pmcToast('success', next ? 'تمت الإضافة للمهم ⭐' : 'تمت الإزالة من المهم');

    }catch(e){
        console.error(e);
        pmcToast('error', 'خطأ أثناء تعديل حالة المهم.');
    }finally{
        btn.disabled = false;
    }
}

async function pmcArchiveMessage(messageId){
    if(!confirm('هل تريد أرشفة هذه الرسالة؟')) return;

    try{
        const res = await fetch(`{{ route('simple-messages.archive', ':id') }}`.replace(':id', messageId), {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': pmcCsrf(),
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
            }
        });

        const data = await res.json().catch(()=>null);
        if(!res.ok || !data?.success){
            pmcToast('error', data?.message || 'تعذر الأرشفة.');
            return;
        }

        pmcToast('success', 'تمت الأرشفة ✅');
        window.location.href = "{{ route('simple-messages.archived') }}";

    }catch(e){
        console.error(e);
        pmcToast('error', 'خطأ أثناء الأرشفة.');
    }
}

async function pmcDeleteMessage(messageId){
    if(!confirm('هل تريد حذف الرسالة؟ سيتم حذفها نهائيًا.')) return;

    try{
        const res = await fetch(`{{ route('simple-messages.delete', ':id') }}`.replace(':id', messageId), {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': pmcCsrf(),
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
            }
        });

        const data = await res.json().catch(()=>null);
        if(!res.ok || !data?.success){
            pmcToast('error', data?.message || 'تعذر الحذف.');
            return;
        }

        pmcToast('success', 'تم الحذف ✅');
        window.location.href = "{{ route('simple-messages.inbox') }}";

    }catch(e){
        console.error(e);
        pmcToast('error', 'خطأ أثناء الحذف.');
    }
}

/* ===== Init ===== */
document.addEventListener('DOMContentLoaded', () => {
    pmcUpdateCount();

    const ta = document.getElementById('pmc-reply-body');
    ta?.addEventListener('input', pmcUpdateCount);

    // Ctrl+Enter send
    ta?.addEventListener('keydown', (e) => {
        if((e.ctrlKey || e.metaKey) && e.key === 'Enter'){
            e.preventDefault();
            pmcSendReply();
        }
    });
});
</script>
@endsection