@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;

        case 'official':
        case 'beta':
        case 'member':
        default:
            $layout = 'layouts.member';
            break;
    }
@endphp

@extends($layout)

@section('title', 'الرسائل الخاصة')

@push('styles')
<style>
    /* ====== Epic small helpers (no breaking) ====== */
    .pm-scrollbar::-webkit-scrollbar{ width:6px; height:6px; }
    .pm-scrollbar::-webkit-scrollbar-thumb{ background: rgba(16,185,129,.65); border-radius: 9999px; }
    .dark .pm-scrollbar::-webkit-scrollbar-thumb{ background: rgba(16,185,129,.45); }

    .pm-chip{
        display:inline-flex; align-items:center; gap:.4rem;
        padding:.2rem .6rem; border-radius:9999px;
        font-size:11px; font-weight:800;
        border:1px solid rgba(148,163,184,.25);
        background: rgba(255,255,255,.7);
    }
    .dark .pm-chip{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); color: rgba(255,255,255,.85); }

    .pm-skeleton{
        background: linear-gradient(90deg, rgba(148,163,184,.18) 25%, rgba(148,163,184,.28) 37%, rgba(148,163,184,.18) 63%);
        background-size: 400% 100%;
        animation: pm-shimmer 1.2s ease infinite;
        border-radius: 12px;
    }
    .dark .pm-skeleton{
        background: linear-gradient(90deg, rgba(255,255,255,.06) 25%, rgba(255,255,255,.10) 37%, rgba(255,255,255,.06) 63%);
        background-size: 400% 100%;
    }
    @keyframes pm-shimmer { 0%{background-position:100% 0} 100%{background-position:0 0} }

    .pm-btn{
        position: relative;
        z-index: 10;
        pointer-events: auto;
    }
</style>
@endpush

@section('content')
<div class="container mx-auto px-4 py-8 pb-24">
    <div class="max-w-6xl mx-auto">

        {{-- ===== Hero / Header ===== --}}
        <div class="relative overflow-hidden rounded-3xl shadow-2xl ring-1 ring-slate-900/10 dark:ring-white/10
                    bg-gradient-to-br from-emerald-600 via-teal-500 to-cyan-600 text-white">
            <div class="absolute -top-24 -right-24 h-64 w-64 rounded-full bg-white/15 blur-2xl"></div>
            <div class="absolute -bottom-24 -left-24 h-64 w-64 rounded-full bg-black/10 blur-2xl"></div>

            <div class="relative px-6 sm:px-8 py-7 sm:py-8">
                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                    <div class="min-w-0">
                        <h1 class="text-2xl sm:text-3xl font-extrabold tracking-tight truncate">
                            الرسائل الخاصة
                        </h1>
                        <p class="mt-2 text-white/85 text-sm sm:text-base">
                            لوحة احترافية لإدارة محادثاتك مع الفريق — بحث، فلترة، ترتيب، وتحويل العرض إلى كروت.
                        </p>

                        <div class="mt-4 flex flex-wrap gap-2">
                            <span class="pm-chip text-slate-900">
                                <i class="fas fa-bolt text-emerald-600"></i>
                                تحديث سريع
                            </span>
                            <span class="pm-chip text-slate-900">
                                <i class="fas fa-layer-group text-cyan-600"></i>
                                وضع كروت
                            </span>
                            <span class="pm-chip text-slate-900">
                                <i class="fas fa-magnifying-glass text-teal-600"></i>
                                بحث ذكي
                            </span>
                        </div>
                    </div>

                    <div class="flex items-center gap-3">
                        {{-- زر تبديل حالة الرسائل --}}
                        <form action="{{ route('member.messages.toggle') }}" method="POST" class="inline">
                            @csrf
                            <button type="submit"
                                    class="pm-btn px-4 py-2 rounded-xl font-extrabold transition-all shadow-lg
                                           {{ auth()->user()->allow_private_messages
                                              ? 'bg-white/90 hover:bg-white text-rose-700'
                                              : 'bg-white/90 hover:bg-white text-emerald-700' }}">
                                <i class="fas fa-{{ auth()->user()->allow_private_messages ? 'lock' : 'unlock' }} ml-2"></i>
                                {{ auth()->user()->allow_private_messages ? 'إغلاق الرسائل' : 'فتح الرسائل' }}
                            </button>
                        </form>

                        {{-- زر بدء محادثة جديدة --}}
                        <button type="button" onclick="openNewMessageModal()"
                                class="pm-btn px-4 py-2 rounded-xl font-extrabold bg-slate-950/20 hover:bg-slate-950/30
                                       ring-1 ring-white/25 transition-all shadow-lg">
                            <i class="fas fa-plus ml-2"></i>
                            محادثة جديدة
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {{-- ===== Simple Help / Explanation ===== --}}
        <div class="mt-6 rounded-2xl border border-slate-200 dark:border-white/10 bg-white dark:bg-slate-800 shadow p-5">
            <div class="flex items-start gap-3">
                <div class="h-10 w-10 rounded-xl bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center">
                    <i class="fas fa-circle-info text-emerald-700 dark:text-emerald-300"></i>
                </div>
                <div class="min-w-0">
                    <div class="font-extrabold text-slate-900 dark:text-white">
                        شرح سريع 👇
                    </div>
                    <div class="mt-1 text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
                        • استخدم البحث والفلاتر لتحديد محادثات معيّنة بسرعة. <br>
                        • جرّب <span class="font-bold">وضع الكروت</span> على الموبايل (أريح وأوضح). <br>
                        • “غير المقروء” يعرض المحادثات اللي فيها رسائل جديدة، و“الترتيب” يغيّر أولويتها.
                    </div>
                </div>
            </div>
        </div>

        {{-- ===== Stats ===== --}}
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-6">
            <div class="bg-white dark:bg-slate-800 rounded-2xl p-4 shadow ring-1 ring-slate-900/5 dark:ring-white/10">
                <div class="flex items-center">
                    <div class="h-12 w-12 rounded-xl bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center mr-3">
                        <i class="fas fa-comments text-emerald-600 dark:text-emerald-300"></i>
                    </div>
                    <div>
                        <p class="text-sm text-slate-600 dark:text-slate-400">إجمالي المحادثات</p>
                        <p class="text-2xl font-extrabold text-slate-900 dark:text-white" id="total-conversations">0</p>
                    </div>
                </div>
            </div>

            <div class="bg-white dark:bg-slate-800 rounded-2xl p-4 shadow ring-1 ring-slate-900/5 dark:ring-white/10">
                <div class="flex items-center">
                    <div class="h-12 w-12 rounded-xl bg-sky-100 dark:bg-sky-900/30 flex items-center justify-center mr-3">
                        <i class="fas fa-envelope-open-text text-sky-600 dark:text-sky-300"></i>
                    </div>
                    <div>
                        <p class="text-sm text-slate-600 dark:text-slate-400">المقروء</p>
                        <p class="text-2xl font-extrabold text-slate-900 dark:text-white" id="read-conversations">0</p>
                    </div>
                </div>
            </div>

            <div class="bg-white dark:bg-slate-800 rounded-2xl p-4 shadow ring-1 ring-slate-900/5 dark:ring-white/10">
                <div class="flex items-center">
                    <div class="h-12 w-12 rounded-xl bg-amber-100 dark:bg-amber-900/30 flex items-center justify-center mr-3">
                        <i class="fas fa-bell text-amber-600 dark:text-amber-300"></i>
                    </div>
                    <div>
                        <p class="text-sm text-slate-600 dark:text-slate-400">غير المقروء</p>
                        <p class="text-2xl font-extrabold text-slate-900 dark:text-white" id="unread-conversations">0</p>
                    </div>
                </div>
            </div>
        </div>

        {{-- ===== Search + Filters + View Toggle ===== --}}
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow ring-1 ring-slate-900/5 dark:ring-white/10 mb-6 p-4 mt-6">
            <div class="flex flex-col lg:flex-row gap-4 lg:items-center">
                <div class="flex-1">
                    <div class="relative">
                        <input type="text"
                               id="search-conversations"
                               placeholder="ابحث في المحادثات (الاسم/الرسالة)..."
                               class="w-full px-4 py-3 rounded-xl border border-slate-300 dark:border-slate-600
                                      bg-white dark:bg-slate-700 text-slate-900 dark:text-white
                                      focus:outline-none focus:ring-2 focus:ring-emerald-500 pm-btn">
                        <i class="fas fa-search absolute left-3 top-3.5 text-slate-400"></i>
                    </div>
                </div>

                <div class="flex flex-col sm:flex-row gap-2 sm:items-center">
                    <select id="filter-status"
                            class="pm-btn px-4 py-3 rounded-xl border border-slate-300 dark:border-slate-600
                                   bg-white dark:bg-slate-700 text-slate-900 dark:text-white
                                   focus:outline-none focus:ring-2 focus:ring-emerald-500">
                        <option value="all">جميع المحادثات</option>
                        <option value="unread">غير المقروء فقط</option>
                        <option value="read">المقروء فقط</option>
                    </select>

                    <select id="filter-sort"
                            class="pm-btn px-4 py-3 rounded-xl border border-slate-300 dark:border-slate-600
                                   bg-white dark:bg-slate-700 text-slate-900 dark:text-white
                                   focus:outline-none focus:ring-2 focus:ring-emerald-500">
                        <option value="newest">الأحدث أولاً</option>
                        <option value="oldest">الأقدم أولاً</option>
                        <option value="unread">غير المقروء أولاً</option>
                    </select>

                    {{-- View Toggle --}}
                    <div class="flex items-center gap-2">
                        <button type="button" id="btn-view-table"
                                onclick="setConversationsView('table')"
                                class="pm-btn px-3 py-3 rounded-xl border border-slate-300 dark:border-slate-600
                                       hover:bg-slate-50 dark:hover:bg-slate-700 transition-all"
                                title="عرض جدول">
                            <i class="fas fa-table text-slate-700 dark:text-white/80"></i>
                        </button>
                        <button type="button" id="btn-view-cards"
                                onclick="setConversationsView('cards')"
                                class="pm-btn px-3 py-3 rounded-xl border border-slate-300 dark:border-slate-600
                                       hover:bg-slate-50 dark:hover:bg-slate-700 transition-all"
                                title="عرض كروت">
                            <i class="fas fa-id-card text-slate-700 dark:text-white/80"></i>
                        </button>

                        <button type="button" id="btn-refresh"
                                onclick="loadConversations(currentPage)"
                                class="pm-btn px-3 py-3 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white transition-all"
                                title="تحديث">
                            <i class="fas fa-rotate"></i>
                        </button>

                        <button type="button" id="btn-reset"
                                onclick="resetFilters()"
                                class="pm-btn px-3 py-3 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-800
                                       dark:bg-white/10 dark:hover:bg-white/15 dark:text-white transition-all"
                                title="إعادة ضبط">
                            <i class="fas fa-broom"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div class="mt-3 text-[12px] text-slate-500 dark:text-slate-400">
                💡 تلميح: اضغط <span class="font-bold">Ctrl + K</span> للتركيز على البحث بسرعة.
            </div>
        </div>

        {{-- ===== Conversations (Table + Cards) ===== --}}
        <div class="bg-white dark:bg-slate-800 rounded-2xl shadow ring-1 ring-slate-900/5 dark:ring-white/10 overflow-hidden">
            {{-- Top tiny bar --}}
            <div class="px-6 py-4 border-b border-slate-200 dark:border-slate-700 flex items-center justify-between gap-4">
                <div class="font-extrabold text-slate-900 dark:text-white">
                    قائمة المحادثات
                </div>
                <div class="text-xs text-slate-600 dark:text-slate-400">
                    آخر تحديث: <span id="last-updated">—</span>
                </div>
            </div>

            {{-- Table View --}}
            <div id="view-table" class="overflow-x-auto pm-scrollbar">
                <table class="w-full">
                    <thead>
                        <tr class="bg-slate-50 dark:bg-slate-700/40">
                            <th class="px-6 py-3 text-right text-sm font-extrabold text-slate-900 dark:text-white">العضو</th>
                            <th class="px-6 py-3 text-right text-sm font-extrabold text-slate-900 dark:text-white">آخر رسالة</th>
                            <th class="px-6 py-3 text-right text-sm font-extrabold text-slate-900 dark:text-white">الحالة</th>
                            <th class="px-6 py-3 text-right text-sm font-extrabold text-slate-900 dark:text-white">الوقت</th>
                            <th class="px-6 py-3 text-right text-sm font-extrabold text-slate-900 dark:text-white">الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody id="conversations-list" class="divide-y divide-slate-200 dark:divide-slate-700">
                        <tr>
                            <td colspan="5" class="px-6 py-12 text-center">
                                <div class="inline-flex h-12 w-12 rounded-full bg-emerald-100 dark:bg-emerald-900/30 items-center justify-center mb-3">
                                    <i class="fa-regular fa-envelope text-emerald-600 dark:text-emerald-300 text-lg"></i>
                                </div>
                                <p class="text-slate-600 dark:text-slate-400">جاري تحميل المحادثات...</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            {{-- Cards View --}}
            <div id="view-cards" class="hidden p-4">
                <div id="conversations-cards"
                     class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
                    {{-- سيتم تعبئتها عبر JavaScript --}}
                    <div class="rounded-2xl border border-slate-200 dark:border-white/10 p-4">
                        <div class="pm-skeleton h-5 w-3/4"></div>
                        <div class="pm-skeleton h-4 w-full mt-3"></div>
                        <div class="pm-skeleton h-4 w-5/6 mt-2"></div>
                        <div class="pm-skeleton h-10 w-full mt-4"></div>
                    </div>
                </div>
            </div>

            {{-- Pagination --}}
            <div class="px-6 py-4 border-t border-slate-200 dark:border-slate-700">
                <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
                    <div class="text-sm text-slate-600 dark:text-slate-400">
                        عرض <span id="conversations-from">1</span> إلى <span id="conversations-to">10</span>
                        من <span id="conversations-total">0</span> محادثة
                    </div>
                    <div id="conversations-pagination" class="flex gap-2">
                        {{-- سيتم تعبئتها عبر JavaScript --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ===== Modal إنشاء محادثة جديدة ===== --}}
<div id="new-message-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="fixed inset-0 bg-black/50" onclick="closeNewMessageModal()"></div>

        <div class="relative bg-white dark:bg-slate-800 rounded-2xl shadow-2xl w-full max-w-md ring-1 ring-slate-900/10 dark:ring-white/10">
            <!-- Header -->
            <div class="px-6 py-4 border-b border-slate-200 dark:border-white/10">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-extrabold text-slate-900 dark:text-white">
                        بدء محادثة جديدة
                    </h3>
                    <button type="button" onclick="closeNewMessageModal()"
                            class="pm-btn p-2 rounded-xl hover:bg-slate-100 dark:hover:bg-white/10">
                        <i class="fas fa-times text-slate-600 dark:text-white/70"></i>
                    </button>
                </div>
                <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
                    اختر عضو ثم اكتب الرسالة واضغط إرسال.
                </p>
            </div>

            <!-- Content -->
            <div class="p-6">
                <div class="mb-4">
                    <label class="block text-sm font-bold text-slate-700 dark:text-slate-300 mb-2">
                        اختر العضو
                    </label>
                    <div class="relative">
                        <input type="text"
                               id="user-search"
                               placeholder="ابحث عن عضو..."
                               class="pm-btn w-full px-4 py-3 rounded-xl border border-slate-300 dark:border-slate-600
                                      bg-white dark:bg-slate-700 text-slate-900 dark:text-white
                                      focus:outline-none focus:ring-2 focus:ring-emerald-500">
                        <i class="fas fa-search absolute left-3 top-3.5 text-slate-400"></i>
                    </div>
                    <div id="search-results" class="mt-2 max-h-60 overflow-y-auto hidden pm-scrollbar rounded-xl border border-slate-200 dark:border-white/10">
                        {{-- سيتم تعبئتها عبر JavaScript --}}
                    </div>
                </div>

                <div class="mb-4">
                    <label class="block text-sm font-bold text-slate-700 dark:text-slate-300 mb-2">
                        الرسالة
                    </label>
                    <textarea id="new-message-text"
                              rows="4"
                              placeholder="اكتب رسالتك هنا..."
                              class="pm-btn w-full px-4 py-3 rounded-xl border border-slate-300 dark:border-slate-600
                                     bg-white dark:bg-slate-700 text-slate-900 dark:text-white
                                     focus:outline-none focus:ring-2 focus:ring-emerald-500"></textarea>
                </div>

                <div class="flex justify-end gap-3">
                    <button type="button" onclick="closeNewMessageModal()"
                            class="pm-btn px-4 py-2 rounded-xl border border-slate-300 dark:border-slate-600
                                   text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700">
                        إلغاء
                    </button>
                    <button type="button" onclick="sendNewMessage()"
                            class="pm-btn px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white
                                   rounded-xl font-extrabold transition-colors">
                        <i class="fas fa-paper-plane ml-2"></i>
                        إرسال
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- ===== Confirm Modal ===== --}}
<div id="confirm-modal" class="fixed inset-0 z-[60] hidden">
    <div class="absolute inset-0 bg-black/50"></div>
    <div class="relative min-h-screen flex items-center justify-center p-4">
        <div class="w-full max-w-md bg-white dark:bg-slate-800 rounded-2xl shadow-2xl ring-1 ring-slate-900/10 dark:ring-white/10">
            <div class="p-5 border-b border-slate-200 dark:border-white/10">
                <div class="flex items-center gap-3">
                    <div class="h-10 w-10 rounded-xl bg-rose-100 dark:bg-rose-900/30 flex items-center justify-center">
                        <i class="fas fa-triangle-exclamation text-rose-600 dark:text-rose-300"></i>
                    </div>
                    <div class="min-w-0">
                        <div class="font-extrabold text-slate-900 dark:text-white">تأكيد العملية</div>
                        <div id="confirm-message" class="text-sm text-slate-600 dark:text-slate-400 mt-1">—</div>
                    </div>
                </div>
            </div>
            <div class="p-5 flex justify-end gap-3">
                <button type="button" id="confirm-cancel"
                        class="pm-btn px-4 py-2 rounded-xl border border-slate-300 dark:border-slate-600
                               text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700">
                    إلغاء
                </button>
                <button type="button" id="confirm-ok"
                        class="pm-btn px-4 py-2 rounded-xl bg-rose-600 hover:bg-rose-700 text-white font-extrabold">
                    نعم، احذف
                </button>
            </div>
        </div>
    </div>
</div>

{{-- ===== Toasts ===== --}}
<div id="toast-container" class="fixed bottom-6 left-1/2 -translate-x-1/2 z-[999] space-y-2 w-[92vw] sm:w-[380px]"></div>
@endsection

@push('scripts')
<script>
/* ===============================
   Globals
================================ */
let currentPage = 1;
let totalPages = 1;
let currentView = 'table'; // table | cards
let lastPayload = { conversations: [], stats: null, pagination: null };

let selectedUserId = null;
let selectedUserName = '';
let usersSearchTimeout = null;

/* ===============================
   Boot
================================ */
document.addEventListener('DOMContentLoaded', function() {
    applySavedView();       // ✅ view based on localStorage / mobile default
    loadConversations();    // ✅ keep your algorithm
    setupEventListeners();  // ✅ keep your algorithm
});

/* ===============================
   View Toggle (Table/Cards)
================================ */
function applySavedView(){
    const saved = localStorage.getItem('pm_view');
    // default: cards on small screens
    if(saved){
        currentView = saved;
    } else {
        currentView = window.matchMedia('(max-width: 768px)').matches ? 'cards' : 'table';
    }
    setConversationsView(currentView, false);
}

function setConversationsView(view, persist = true){
    currentView = (view === 'cards') ? 'cards' : 'table';
    if(persist) localStorage.setItem('pm_view', currentView);

    const tableWrap = document.getElementById('view-table');
    const cardsWrap = document.getElementById('view-cards');

    if(currentView === 'cards'){
        tableWrap.classList.add('hidden');
        cardsWrap.classList.remove('hidden');
    } else {
        cardsWrap.classList.add('hidden');
        tableWrap.classList.remove('hidden');
    }

    // toggle btn styles
    const btnTable = document.getElementById('btn-view-table');
    const btnCards = document.getElementById('btn-view-cards');

    const activeCls = ['bg-emerald-600','text-white','border-emerald-600'];
    const resetBtn = (btn)=>{ btn.classList.remove(...activeCls); };
    const setBtn   = (btn)=>{ btn.classList.add(...activeCls); };

    resetBtn(btnTable); resetBtn(btnCards);
    if(currentView === 'cards') setBtn(btnCards); else setBtn(btnTable);

    // re-render using cached payload
    if(lastPayload.conversations?.length){
        renderConversations(lastPayload.conversations);
    }
}

/* ===============================
   Filters helpers
================================ */
function resetFilters(){
    document.getElementById('filter-status').value = 'all';
    document.getElementById('filter-sort').value   = 'newest';
    document.getElementById('search-conversations').value = '';
    showToast('info', 'تمت إعادة ضبط الفلاتر ✅');
    loadConversations(1);
}

/* ===============================
   Loading / Error / Empty states
================================ */
function renderLoadingState(){
    // table skeleton
    const tbody = document.getElementById('conversations-list');
    tbody.innerHTML = Array.from({length: 6}).map(()=>`
        <tr class="animate-pulse">
            <td class="px-6 py-4"><div class="pm-skeleton h-10 w-44"></div></td>
            <td class="px-6 py-4"><div class="pm-skeleton h-6 w-64"></div></td>
            <td class="px-6 py-4"><div class="pm-skeleton h-6 w-28"></div></td>
            <td class="px-6 py-4"><div class="pm-skeleton h-6 w-24"></div></td>
            <td class="px-6 py-4"><div class="pm-skeleton h-10 w-40"></div></td>
        </tr>
    `).join('');

    // cards skeleton
    const cards = document.getElementById('conversations-cards');
    cards.innerHTML = Array.from({length: 6}).map(()=>`
        <div class="rounded-2xl border border-slate-200 dark:border-white/10 p-4">
            <div class="pm-skeleton h-5 w-3/4"></div>
            <div class="pm-skeleton h-4 w-full mt-3"></div>
            <div class="pm-skeleton h-4 w-5/6 mt-2"></div>
            <div class="pm-skeleton h-10 w-full mt-4"></div>
        </div>
    `).join('');
}

function renderErrorState(message){
    const safe = escapeHtml(message || 'حدث خطأ غير متوقع');
    document.getElementById('conversations-list').innerHTML = `
        <tr>
            <td colspan="5" class="px-6 py-10 text-center">
                <div class="inline-flex h-12 w-12 rounded-full bg-rose-100 dark:bg-rose-900/30 items-center justify-center mb-3">
                    <i class="fas fa-triangle-exclamation text-rose-600 dark:text-rose-300"></i>
                </div>
                <p class="text-rose-700 dark:text-rose-300 font-extrabold">${safe}</p>
                <button type="button" onclick="loadConversations(currentPage)"
                        class="pm-btn mt-4 px-4 py-2 rounded-xl bg-slate-900 text-white dark:bg-white/10 dark:text-white font-extrabold">
                    إعادة المحاولة
                </button>
            </td>
        </tr>
    `;

    document.getElementById('conversations-cards').innerHTML = `
        <div class="col-span-full text-center py-10">
            <div class="inline-flex h-12 w-12 rounded-full bg-rose-100 dark:bg-rose-900/30 items-center justify-center mb-3">
                <i class="fas fa-triangle-exclamation text-rose-600 dark:text-rose-300"></i>
            </div>
            <p class="text-rose-700 dark:text-rose-300 font-extrabold">${safe}</p>
            <button type="button" onclick="loadConversations(currentPage)"
                    class="pm-btn mt-4 px-4 py-2 rounded-xl bg-slate-900 text-white dark:bg-white/10 dark:text-white font-extrabold">
                إعادة المحاولة
            </button>
        </div>
    `;
}

function renderEmptyState(){
    document.getElementById('conversations-list').innerHTML = `
        <tr>
            <td colspan="5" class="px-6 py-12 text-center">
                <div class="inline-flex h-12 w-12 rounded-full bg-emerald-100 dark:bg-emerald-900/30 items-center justify-center mb-3">
                    <i class="fa-regular fa-envelope text-emerald-600 dark:text-emerald-300 text-lg"></i>
                </div>
                <p class="text-slate-600 dark:text-slate-400">لا توجد محادثات حالياً</p>
                <button type="button" onclick="openNewMessageModal()"
                        class="pm-btn mt-4 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-extrabold">
                    ابدأ محادثة جديدة
                </button>
            </td>
        </tr>
    `;

    document.getElementById('conversations-cards').innerHTML = `
        <div class="col-span-full text-center py-12">
            <div class="inline-flex h-12 w-12 rounded-full bg-emerald-100 dark:bg-emerald-900/30 items-center justify-center mb-3">
                <i class="fa-regular fa-envelope text-emerald-600 dark:text-emerald-300 text-lg"></i>
            </div>
            <p class="text-slate-600 dark:text-slate-400">لا توجد محادثات حالياً</p>
            <button type="button" onclick="openNewMessageModal()"
                    class="pm-btn mt-4 px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded-xl font-extrabold">
                ابدأ محادثة جديدة
            </button>
        </div>
    `;
}

/* ===============================
   Safe JSON fetch (no stuck UI)
================================ */
async function safeFetchJson(url, options = {}, timeoutMs = 15000){
    const controller = new AbortController();
    const timer = setTimeout(()=>controller.abort(), timeoutMs);

    try{
        const res = await fetch(url, { ...options, signal: controller.signal });

        const text = await res.text();
        const isHtml = text.trim().startsWith('<!') || text.trim().startsWith('<html');

        if(isHtml){
            return { ok:false, status:res.status, error:'html', raw:text };
        }

        let data = null;
        try { data = JSON.parse(text); } catch(e){
            return { ok:false, status:res.status, error:'invalid_json', raw:text };
        }

        if(!res.ok){
            return { ok:false, status:res.status, error:'http', data };
        }

        return { ok:true, status:res.status, data };
    } finally {
        clearTimeout(timer);
    }
}

/* ===============================
   Core algorithm: Load conversations
================================ */
function loadConversations(page = 1) {
    const status = document.getElementById('filter-status').value;
    const sort   = document.getElementById('filter-sort').value;
    const search = document.getElementById('search-conversations').value;

    currentPage = page;

    const url = `/member/messages/api/conversations?page=${encodeURIComponent(page)}&status=${encodeURIComponent(status)}&sort=${encodeURIComponent(sort)}&search=${encodeURIComponent(search)}`;

    renderLoadingState();

    safeFetchJson(url, {
        headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(result => {
        if(!result.ok){
            if(result.error === 'html'){
                renderErrorState('الرد رجع HTML (غالبًا جلسة منتهية/تسجيل دخول). اعمل Refresh.');
            }else if(result.error === 'invalid_json'){
                renderErrorState('الرد ليس JSON. راجع الـ API يرجّع JSON فقط.');
            }else{
                renderErrorState(`تعذر تحميل المحادثات. (HTTP ${result.status})`);
            }
            return;
        }

        const data = result.data;

        // ✅ keep your algorithm structure
        lastPayload = data;

        if(!data.conversations || data.conversations.length === 0){
            renderEmptyState();
            updateStats(data.stats || {total:0, read:0, unread:0});
            updatePagination(data.pagination || {
                total:0, from:0, to:0, current_page:1, last_page:1
            });
            setLastUpdated();
            return;
        }

        renderConversations(data.conversations);
        updateStats(data.stats);
        updatePagination(data.pagination);
        setLastUpdated();
    })
    .catch(error => {
        console.error('Error loading conversations:', error);
        if(error?.name === 'AbortError'){
            renderErrorState('انتهت مهلة الطلب (Timeout). حاول مرة ثانية.');
        }else{
            renderErrorState('خطأ في الاتصال. تحقق من الشبكة.');
        }
    });
}

function setLastUpdated(){
    const el = document.getElementById('last-updated');
    const now = new Date();
    el.textContent = now.toLocaleTimeString('ar-EG', { hour: '2-digit', minute: '2-digit' });
}

/* ===============================
   Rendering dispatcher (table/cards)
================================ */
function renderConversations(conversations){
    // render both so toggle is instant
    renderConversationsTable(conversations);
    renderConversationsCards(conversations);
}

/* ===============================
   Table rendering (kept + upgraded)
================================ */
function renderConversationsTable(conversations) {
    const container = document.getElementById('conversations-list');

    if (!conversations || conversations.length === 0) {
        renderEmptyState();
        return;
    }

    let html = '';
    conversations.forEach(conversation => {
        const lastMessage = conversation.last_message;
        const unreadCount = conversation.unread_count;
        const otherUser = conversation.other_user;

        const youPrefix = (lastMessage?.sender_id === {{ auth()->id() }})
            ? `<span class="text-emerald-600 dark:text-emerald-300 font-extrabold">أنت:</span> `
            : '';

        html += `
            <tr class="hover:bg-slate-50 dark:hover:bg-slate-700/40 transition-colors">
                <td class="px-6 py-4">
                    <div class="flex items-center">
                        <div class="relative flex-shrink-0 mr-3">
                            <img src="${escapeAttr(otherUser?.avatar || '/images/default-avatar.png')}"
                                 onerror="this.src='/images/default-avatar.png'"
                                 class="h-10 w-10 rounded-full object-cover ring-2
                                        ${unreadCount > 0 ? 'ring-emerald-500' : 'ring-slate-200 dark:ring-white/10'}"
                                 alt="${escapeAttr(otherUser?.name || 'عضو')}">
                            ${otherUser?.is_online ? `
                                <span class="absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full
                                            bg-emerald-500 ring-2 ring-white dark:ring-black"></span>
                            ` : ''}
                        </div>
                        <div class="min-w-0">
                            <div class="font-extrabold text-slate-900 dark:text-white truncate">
                                ${escapeHtml(otherUser?.name || 'عضو')}
                                ${otherUser?.role ? `
                                    <span class="text-xs px-2 py-0.5 rounded-full bg-slate-100 dark:bg-slate-700
                                                text-slate-600 dark:text-slate-300 ml-2">
                                        ${escapeHtml(otherUser.role)}
                                    </span>
                                ` : ''}
                            </div>
                            <div class="text-sm text-slate-500 dark:text-slate-400">
                                ${otherUser?.is_online ? 'نشط الآن' : 'غير متصل'}
                            </div>
                        </div>
                    </div>
                </td>

                <td class="px-6 py-4">
                    <div class="max-w-xs">
                        <div class="text-slate-900 dark:text-white truncate">
                            ${youPrefix}${escapeHtml(lastMessage?.message || '—')}
                        </div>
                    </div>
                </td>

                <td class="px-6 py-4">
                    ${unreadCount > 0 ? `
                        <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-extrabold
                                   bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-300">
                            <i class="fas fa-circle text-[8px] mr-2"></i>
                            غير مقروء (${unreadCount})
                        </span>
                    ` : `
                        <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-extrabold
                                   bg-slate-100 text-slate-800 dark:bg-slate-700 dark:text-slate-300">
                            <i class="fas fa-check-circle text-[10px] mr-2"></i>
                            مقروء
                        </span>
                    `}
                </td>

                <td class="px-6 py-4 text-sm text-slate-500 dark:text-slate-400">
                    ${formatTime(lastMessage?.created_at)}
                </td>

                <td class="px-6 py-4">
                    <div class="flex gap-2">
                        <a href="/member/messages/conversation/${otherUser?.id}"
                           class="pm-btn px-3 py-2 bg-emerald-600 hover:bg-emerald-700 text-white
                                  text-xs rounded-xl transition-colors font-extrabold">
                            <i class="fas fa-eye ml-1"></i>
                            عرض
                        </a>
                        <button type="button" onclick="deleteConversation(${otherUser?.id})"
                                class="pm-btn px-3 py-2 bg-rose-100 hover:bg-rose-200 text-rose-700
                                       dark:bg-rose-900/30 dark:hover:bg-rose-900/50 dark:text-rose-300
                                       text-xs rounded-xl transition-colors font-extrabold">
                            <i class="fas fa-trash ml-1"></i>
                            حذف
                        </button>
                    </div>
                </td>
            </tr>
        `;
    });

    container.innerHTML = html;
}

/* ===============================
   Cards rendering (NEW, no removal)
================================ */
function renderConversationsCards(conversations){
    const container = document.getElementById('conversations-cards');

    if(!conversations || conversations.length === 0){
        container.innerHTML = '';
        return;
    }

    let html = '';
    conversations.forEach(conversation => {
        const lastMessage = conversation.last_message;
        const unreadCount = conversation.unread_count;
        const otherUser = conversation.other_user;

        const url = `/member/messages/conversation/${otherUser?.id}`;

        const youPrefix = (lastMessage?.sender_id === {{ auth()->id() }})
            ? `<span class="text-emerald-600 dark:text-emerald-300 font-extrabold">أنت:</span> `
            : '';

        html += `
            <div class="group relative rounded-2xl border border-slate-200 dark:border-white/10
                        bg-white dark:bg-slate-800 shadow-sm hover:shadow-lg transition-all overflow-hidden"
                 onclick="window.location.href='${url}'">

                <div class="absolute inset-x-0 top-0 h-1
                            ${unreadCount > 0 ? 'bg-emerald-500' : 'bg-slate-200 dark:bg-white/10'}"></div>

                <div class="p-4">
                    <div class="flex items-center justify-between gap-3">
                        <div class="flex items-center gap-3 min-w-0">
                            <div class="relative">
                                <img src="${escapeAttr(otherUser?.avatar || '/images/default-avatar.png')}"
                                     onerror="this.src='/images/default-avatar.png'"
                                     class="h-11 w-11 rounded-full object-cover ring-2
                                            ${unreadCount > 0 ? 'ring-emerald-500' : 'ring-slate-200 dark:ring-white/10'}"
                                     alt="${escapeAttr(otherUser?.name || 'عضو')}">
                                ${otherUser?.is_online ? `
                                    <span class="absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full
                                                bg-emerald-500 ring-2 ring-white dark:ring-black"></span>
                                ` : ''}
                            </div>

                            <div class="min-w-0">
                                <div class="font-extrabold text-slate-900 dark:text-white truncate">
                                    ${escapeHtml(otherUser?.name || 'عضو')}
                                </div>
                                <div class="text-xs text-slate-500 dark:text-slate-400 truncate">
                                    ${otherUser?.role ? escapeHtml(otherUser.role) + ' • ' : ''}${otherUser?.is_online ? 'نشط الآن' : 'غير متصل'}
                                </div>
                            </div>
                        </div>

                        ${unreadCount > 0 ? `
                            <span class="shrink-0 inline-flex items-center justify-center min-w-[28px] h-7 px-2 rounded-full
                                         bg-emerald-600 text-white text-xs font-extrabold">
                                ${unreadCount}
                            </span>
                        ` : `
                            <span class="shrink-0 inline-flex items-center justify-center min-w-[28px] h-7 px-2 rounded-full
                                         bg-slate-100 dark:bg-white/10 text-slate-700 dark:text-white/80 text-xs font-extrabold">
                                ✓
                            </span>
                        `}
                    </div>

                    <div class="mt-3 text-sm text-slate-700 dark:text-white/85 line-clamp-2">
                        ${youPrefix}${escapeHtml(lastMessage?.message || '—')}
                    </div>

                    <div class="mt-3 flex items-center justify-between">
                        <div class="text-xs text-slate-500 dark:text-slate-400">
                            ${formatTime(lastMessage?.created_at)}
                        </div>

                        <div class="flex gap-2" onclick="event.stopPropagation();">
                            <a href="${url}"
                               class="pm-btn px-3 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-extrabold">
                                فتح
                            </a>
                            <button type="button"
                                    class="pm-btn px-3 py-2 rounded-xl bg-rose-100 hover:bg-rose-200 text-rose-700
                                           dark:bg-rose-900/30 dark:hover:bg-rose-900/50 dark:text-rose-300
                                           text-xs font-extrabold"
                                    onclick="deleteConversation(${otherUser?.id});">
                                حذف
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        `;
    });

    container.innerHTML = html;
}

/* ===============================
   Stats + Pagination (kept)
================================ */
function updateStats(stats) {
    if(!stats) stats = { total: 0, read: 0, unread: 0 };
    document.getElementById('total-conversations').textContent = stats.total ?? 0;
    document.getElementById('read-conversations').textContent  = stats.read ?? 0;
    document.getElementById('unread-conversations').textContent= stats.unread ?? 0;
}

function updatePagination(pagination) {
    if(!pagination){
        pagination = { total:0, from:0, to:0, current_page:1, last_page:1 };
    }

    document.getElementById('conversations-total').textContent = pagination.total ?? 0;
    document.getElementById('conversations-from').textContent  = pagination.from ?? 0;
    document.getElementById('conversations-to').textContent    = pagination.to ?? 0;
    totalPages = pagination.last_page ?? 1;

    const container = document.getElementById('conversations-pagination');
    let html = '';

    if ((pagination.current_page ?? 1) > 1) {
        html += `
            <button type="button" onclick="loadConversations(${(pagination.current_page ?? 1) - 1})"
                    class="pm-btn px-3 py-2 rounded-xl border border-slate-300 dark:border-slate-600
                           text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700 font-extrabold text-sm">
                السابق
            </button>
        `;
    }

    const current = pagination.current_page ?? 1;
    const last = pagination.last_page ?? 1;

    const startPage = Math.max(1, current - 2);
    const endPage = Math.min(last, current + 2);

    for (let i = startPage; i <= endPage; i++) {
        const active = i === current;
        html += `
            <button type="button" onclick="loadConversations(${i})"
                    class="pm-btn px-3 py-2 rounded-xl ${active
                        ? 'bg-emerald-600 text-white'
                        : 'border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700'} font-extrabold text-sm">
                ${i}
            </button>
        `;
    }

    if (current < last) {
        html += `
            <button type="button" onclick="loadConversations(${current + 1})"
                    class="pm-btn px-3 py-2 rounded-xl border border-slate-300 dark:border-slate-600
                           text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700 font-extrabold text-sm">
                التالي
            </button>
        `;
    }

    container.innerHTML = html;
}

/* ===============================
   Event Listeners (improved, no duplicates)
================================ */
function setupEventListeners() {
    document.getElementById('filter-status').addEventListener('change', () => loadConversations(1));
    document.getElementById('filter-sort').addEventListener('change', () => loadConversations(1));

    // search debounce
    let searchTimeout;
    document.getElementById('search-conversations').addEventListener('input', () => {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => loadConversations(1), 450);
    });

    // Ctrl+K focus search
    document.addEventListener('keydown', (e) => {
        if((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k'){
            e.preventDefault();
            document.getElementById('search-conversations')?.focus();
        }
        if(e.key === 'Escape'){
            closeNewMessageModal();
            closeConfirmModal();
        }
    });

    // modal user search input (attach once)
    const userSearch = document.getElementById('user-search');
    userSearch.addEventListener('input', (e) => {
        clearTimeout(usersSearchTimeout);
        usersSearchTimeout = setTimeout(() => searchUsers(e.target.value), 300);
    });
}

/* ===============================
   New message modal (kept + cleaned)
================================ */
function openNewMessageModal() {
    const modal = document.getElementById('new-message-modal');
    modal.classList.remove('hidden');
    setTimeout(() => document.getElementById('user-search')?.focus(), 50);
}

function closeNewMessageModal() {
    const modal = document.getElementById('new-message-modal');
    modal.classList.add('hidden');
    document.getElementById('user-search').value = '';
    document.getElementById('new-message-text').value = '';
    document.getElementById('search-results').classList.add('hidden');
    document.getElementById('search-results').innerHTML = '';
    selectedUserId = null;
    selectedUserName = '';
}

function searchUsers(query) {
    const container = document.getElementById('search-results');

    if (!query || query.length < 2) {
        container.classList.add('hidden');
        container.innerHTML = '';
        return;
    }

    fetch(`/member/messages/search-users?q=${encodeURIComponent(query)}`, {
        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(response => response.json())
    .then(users => {
        if (!users || users.length === 0) {
            container.innerHTML = `
                <div class="p-4 text-center text-slate-500 dark:text-slate-400">
                    لم يتم العثور على أعضاء
                </div>
            `;
            container.classList.remove('hidden');
            return;
        }

        let html = '';
        users.forEach(user => {
            const safeName = (user.name || '').replace(/'/g, "\\'");
            html += `
                <div class="p-3 border-b border-slate-200 dark:border-white/10 last:border-b-0
                           hover:bg-slate-50 dark:hover:bg-white/5 cursor-pointer transition-colors"
                     onclick="selectUser(${user.id}, '${safeName}')">
                    <div class="flex items-center">
                        <img src="${escapeAttr(user.avatar || '/images/default-avatar.png')}"
                             onerror="this.src='/images/default-avatar.png'"
                             class="h-8 w-8 rounded-full object-cover mr-3">
                        <div class="min-w-0">
                            <div class="font-extrabold text-slate-900 dark:text-white truncate">
                                ${escapeHtml(user.name)}
                            </div>
                            <div class="text-xs text-slate-500 dark:text-slate-400">
                                ${escapeHtml(user.role || 'عضو')}
                            </div>
                        </div>
                    </div>
                </div>
            `;
        });

        container.innerHTML = html;
        container.classList.remove('hidden');
    })
    .catch(() => {
        container.innerHTML = `<div class="p-4 text-center text-rose-600 dark:text-rose-300">خطأ أثناء البحث</div>`;
        container.classList.remove('hidden');
    });
}

function selectUser(userId, userName) {
    selectedUserId = userId;
    selectedUserName = userName;

    document.getElementById('user-search').value = userName;
    document.getElementById('search-results').classList.add('hidden');
    document.getElementById('new-message-text').focus();
}

function sendNewMessage() {
    if (!selectedUserId) {
        showToast('warning', 'يرجى اختيار عضو أولاً');
        alertFallback('يرجى اختيار عضو أولاً');
        return;
    }

    const message = document.getElementById('new-message-text').value.trim();
    if (!message) {
        showToast('warning', 'يرجى كتابة رسالة');
        alertFallback('يرجى كتابة رسالة');
        return;
    }

    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

    fetch('/member/messages/send', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrfToken,
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        },
        body: JSON.stringify({ receiver_id: selectedUserId, message })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast('success', 'تم الإرسال ✅');
            closeNewMessageModal();
            loadConversations(currentPage);
            window.location.href = `/member/messages/conversation/${selectedUserId}`;
        } else {
            showToast('error', data.error || 'حدث خطأ أثناء إرسال الرسالة');
            alertFallback(data.error || 'حدث خطأ أثناء إرسال الرسالة');
        }
    })
    .catch(() => {
        showToast('error', 'حدث خطأ أثناء إرسال الرسالة');
        alertFallback('حدث خطأ أثناء إرسال الرسالة');
    });
}

/* ===============================
   Delete conversation (kept + epic confirm)
================================ */
function deleteConversation(userId) {
    pmConfirm('هل أنت متأكد من حذف هذه المحادثة؟ سيتم حذف جميع الرسائل بشكل نهائي.')
        .then((ok) => {
            if(!ok) return;

            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');

            fetch(`/member/messages/conversation/${userId}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showToast('success', 'تم حذف المحادثة ✅');
                    loadConversations(currentPage);
                } else {
                    showToast('error', data.error || 'حدث خطأ أثناء حذف المحادثة');
                    alertFallback(data.error || 'حدث خطأ أثناء حذف المحادثة');
                }
            })
            .catch(() => {
                showToast('error', 'حدث خطأ أثناء حذف المحادثة');
                alertFallback('حدث خطأ أثناء حذف المحادثة');
            });
        });
}

/* ===============================
   Confirm Modal helper
================================ */
function pmConfirm(message){
    return new Promise((resolve) => {
        const modal = document.getElementById('confirm-modal');
        const msgEl = document.getElementById('confirm-message');
        const btnOk = document.getElementById('confirm-ok');
        const btnCancel = document.getElementById('confirm-cancel');

        msgEl.textContent = message || 'هل أنت متأكد؟';
        modal.classList.remove('hidden');

        const cleanup = () => {
            modal.classList.add('hidden');
            btnOk.onclick = null;
            btnCancel.onclick = null;
        };

        btnOk.onclick = () => { cleanup(); resolve(true); };
        btnCancel.onclick = () => { cleanup(); resolve(false); };
    });
}
function closeConfirmModal(){
    const modal = document.getElementById('confirm-modal');
    modal.classList.add('hidden');
}

/* ===============================
   Toasts
================================ */
function showToast(type, message){
    const container = document.getElementById('toast-container');
    const id = 't_' + Math.random().toString(16).slice(2);

    const styles = {
        success: 'bg-emerald-600 text-white',
        error:   'bg-rose-600 text-white',
        warning: 'bg-amber-500 text-white',
        info:    'bg-slate-900 text-white dark:bg-white/10'
    };

    const cls = styles[type] || styles.info;

    const el = document.createElement('div');
    el.id = id;
    el.className = `rounded-2xl shadow-2xl ring-1 ring-black/5 dark:ring-white/10 px-4 py-3 flex items-start justify-between gap-3 ${cls}`;
    el.innerHTML = `
        <div class="text-sm font-extrabold leading-relaxed">${escapeHtml(message || '—')}</div>
        <button type="button" class="pm-btn text-white/90 hover:text-white font-black" onclick="document.getElementById('${id}')?.remove()">✕</button>
    `;
    container.appendChild(el);

    setTimeout(() => { document.getElementById(id)?.remove(); }, 3500);
}
function alertFallback(msg){
    // keep fallback
    // (بعض الأجهزة/المتصفحات إذا toast ما ظهر لأي سبب)
    // يمكنك حذفها إذا بدك
    // eslint-disable-next-line no-alert
    // alert(msg);
}

/* ===============================
   Time formatting (kept)
================================ */
function formatTime(dateString) {
    if(!dateString) return '—';
    const date = new Date(dateString);
    const now = new Date();
    const diffMs = now - date;
    const diffMins = Math.floor(diffMs / 60000);

    if (diffMins < 1) return 'الآن';
    if (diffMins < 60) return `منذ ${diffMins} دقيقة`;
    if (diffMins < 1440) return `منذ ${Math.floor(diffMins / 60)} ساعة`;

    if (date.toDateString() === now.toDateString()) {
        return date.toLocaleTimeString('ar-EG', { hour: '2-digit', minute: '2-digit' });
    }

    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
    if (diffDays < 7) {
        const days = ['الأحد', 'الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'];
        return days[date.getDay()];
    }

    if (date.getFullYear() === now.getFullYear()) {
        return date.toLocaleDateString('ar-EG', { month: 'long', day: 'numeric' });
    }

    return date.toLocaleDateString('ar-EG');
}

/* ===============================
   Escape helpers
================================ */
function escapeHtml(str){
    return (str ?? '')
        .toString()
        .replaceAll('&','&amp;')
        .replaceAll('<','&lt;')
        .replaceAll('>','&gt;')
        .replaceAll('"','&quot;')
        .replaceAll("'",'&#039;');
}
function escapeAttr(str){
    // for attributes like src/alt
    return escapeHtml(str).replaceAll('`','&#096;');
}
</script>
@endpush