{{-- الرسائل الخاصة Dropdown --}}
<div class="relative">
    {{-- القائمة المنسدلة --}}
    <div id="messages-dropdown"
         role="menu"
         aria-hidden="true"
         class="hidden absolute mt-2 min-w-[280px] w-[90vw] sm:w-[360px] max-w-[360px]
                rounded-3xl bg-white dark:bg-gray-900 shadow-2xl ring-1 ring-slate-900/10 dark:ring-white/10 z-50 overflow-hidden backdrop-blur-sm
                left-1/2 transform -translate-x-1/2">

        {{-- Header --}}
        <div class="px-6 py-4 border-b border-slate-200/70 dark:border-white/10">
            <div class="flex items-center justify-between">
                <div class="min-w-0">
                    <h3 class="text-sm font-extrabold text-gray-900 dark:text-white truncate">
                        الرسائل الخاصة
                    </h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 truncate">
                        محادثاتك المباشرة مع الإدارة — مرتبة ومجمّعة حسب العضو
                    </p>
                </div>

                <div class="flex gap-2 shrink-0">
                    <a href="{{ route('simple-messages.create') }}"
                       class="text-xs px-3 py-1 rounded-3xl
                              bg-gradient-to-r from-emerald-500 via-teal-400 to-cyan-500
                              hover:from-emerald-600 hover:via-teal-500 hover:to-cyan-600
                              text-white font-bold shadow-lg transform hover:scale-105 transition-all">
                        جديد
                    </a>

                    <a href="{{ route('simple-messages.inbox') }}"
                       class="text-xs px-3 py-1 rounded-3xl
                              bg-gray-200 dark:bg-gray-800
                              text-gray-700 dark:text-white font-bold shadow-inner
                              hover:bg-gray-300 dark:hover:bg-gray-700 transform hover:scale-105 transition-all">
                        الكل
                    </a>
                </div>
            </div>

            {{-- Filters --}}
            <div class="mt-3 flex gap-2 overflow-x-auto">
                <button class="filter-btn active-filter" data-filter="all" onclick="handleFilterClick(this)">
                    الكل
                </button>
                <button class="filter-btn" data-filter="unread" onclick="handleFilterClick(this)">
                    غير مقروء
                </button>
                <button class="filter-btn" data-filter="important" onclick="handleFilterClick(this)">
                    مهم
                </button>
            </div>
        </div>

        {{-- Conversations --}}
        <div id="messages-conversations-list" class="max-h-80 overflow-y-auto custom-scrollbar">
            <div class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
                جاري التحميل...
            </div>
        </div>

        {{-- Footer --}}
        <div class="px-6 py-3 border-t border-slate-200/70 dark:border-white/10 bg-gray-50 dark:bg-gray-800 rounded-b-3xl">
            <div class="flex justify-between text-xs font-semibold text-gray-700 dark:text-gray-300">
                <div class="flex gap-4">
                    <span>الكل: <span id="total-count">0</span></span>
                    <span class="text-red-500">غير مقروء: <span id="dropdown-unread">0</span></span>
                    <span class="text-amber-500">مهم: <span id="dropdown-important">0</span></span>
                </div>

                <a href="{{ route('simple-messages.inbox') }}"
                   class="text-emerald-500 font-bold hover:underline">
                    صندوق الرسائل
                </a>
            </div>
        </div>
    </div>
</div>

<style>
/* Dropdown animation */
#messages-dropdown { transition: all 0.2s ease; }

/* Filter buttons */
.filter-btn {
    padding: 0.3rem 0.8rem;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 700;
    background: #f3f4f6;
    color: #374151;
    white-space: nowrap;
    transition: all 0.2s;
}
.dark .filter-btn {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.7);
}
.filter-btn.active-filter {
    background: #10b981 !important;
    color: #fff !important;
}

/* Scrollbar customization */
.custom-scrollbar::-webkit-scrollbar { width: 5px; }
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #10b981;
    border-radius: 3px;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #059669; }

/* Responsive adjustments */
@media (max-width: 640px) {
    #messages-dropdown { width: 85vw; max-width: 90vw; }
    .filter-btn { padding: 0.2rem 0.5rem; font-size: 9px; }
    #messages-conversations-list { max-height: 55vh; }
}
</style>

<script>
let allConversations = [];
let lastFilter = 'all';
let loadedOnce = false;

function setLoading(){
    const box = document.getElementById('messages-conversations-list');
    if(!box) return;
    box.innerHTML = `<div class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">جاري التحميل...</div>`;
}
function setEmpty(){
    const box = document.getElementById('messages-conversations-list');
    if(!box) return;
    box.innerHTML = `<div class="px-4 py-12 text-center text-gray-400 dark:text-gray-500">لا توجد رسائل</div>`;
}
function setError(msg){
    const box = document.getElementById('messages-conversations-list');
    if(!box) return;
    box.innerHTML = `
      <div class="px-4 py-10 text-center text-rose-600 dark:text-rose-300 text-sm font-bold">
        ${escapeHtml(msg)}
        <div class="mt-3">
          <button type="button"
                  onclick="setLoading(); loadRecentMessages(lastFilter);"
                  class="text-xs px-3 py-1 rounded-full bg-gray-900 text-white dark:bg-white/10 dark:text-white">
            إعادة المحاولة
          </button>
        </div>
      </div>`;
}

// ✅ نفس الأصلي: Toggle فقط… لكن مع تحميل فور الفتح
function toggleMessagesDropdown(){
    const dropdown = document.getElementById('messages-dropdown');
    const willOpen = dropdown.classList.contains('hidden');
    dropdown.classList.toggle('hidden');

    // ✅ لما تفتح: حمّل فورًا بدون ما يضغط تبويب
    if(willOpen){
        setLoading();
        loadRecentMessages(lastFilter);
    }
}

// Load messages (مثل الأصلي + حماية)
async function loadRecentMessages(filter = 'all'){
    lastFilter = filter || 'all';
    try {
        const res = await fetch(`{{ route('simple-messages.filter') }}?filter=${encodeURIComponent(lastFilter)}`, {
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' }
        });

        // اقرأ نص أولاً (عشان لو رجع HTML / invalid JSON)
        const text = await res.text();
        const isHtml = text.trim().startsWith('<!') || text.trim().startsWith('<html');

        if(isHtml){
            setError('الرد رجع HTML (غالبًا جلسة/تسجيل دخول). اعمل Refresh وجرب.');
            return;
        }

        let data = null;
        try { data = JSON.parse(text); } catch(e){
            setError('الرد مش JSON. راجع الراوت يرجّع JSON فقط.');
            return;
        }

        if(!res.ok){
            setError(`تعذر تحميل الرسائل. (HTTP ${res.status})`);
            return;
        }

        if(!data.success){
            setError('تعذر تحميل الرسائل (success=false).');
            return;
        }

        allConversations = data.conversations || [];
        loadedOnce = true;

        renderConversationsGrouped(allConversations);

        document.getElementById('total-count').textContent = data.stats?.total ?? allConversations.length;
        document.getElementById('dropdown-unread').textContent = data.stats?.unread ?? 0;
        document.getElementById('dropdown-important').textContent = data.stats?.important ?? 0;

    } catch (err) {
        console.error(err);
        setError('فشل الاتصال — تحقق من الشبكة.');
    }
}

// Handle filter click (مثل الأصلي)
function handleFilterClick(btn){
    document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active-filter'));
    btn.classList.add('active-filter');
    const filter = btn.dataset.filter || 'all';
    setLoading();
    loadRecentMessages(filter);
}

/* ============ تجميع حسب العضو + صور + (عدد الرسائل) ============ */
function groupByMember(list){
    const map = new Map();

    list.forEach((m, idx) => {
        const key = (m.user_id ?? (m.name ?? 'unknown')).toString();

        if(!map.has(key)){
            map.set(key, {
                key,
                name: m.name ?? 'عضو',
                avatar: m.avatar ?? m.photo ?? m.image ?? null,
                url: m.url ?? '#',
                latest_id: m.id,
                last_message: m.last_message ?? '',
                last_index: idx,
                count: 1,
                important: !!m.is_important,
                unreadCount: (typeof m.unread_count === 'number') ? m.unread_count : (m.is_unread ? 1 : 0)
            });
        } else {
            const g = map.get(key);
            g.count += 1;
            g.important = g.important || !!m.is_important;
            g.unreadCount += (typeof m.unread_count === 'number') ? m.unread_count : (m.is_unread ? 1 : 0);

            // بما إن الـ API غالبًا مرتّب newest-first، نخلي أول عنصر هو الأحدث
            if(idx < g.last_index){
                g.last_index = idx;
                g.latest_id = m.id;
                g.url = m.url ?? g.url;
                g.last_message = m.last_message ?? g.last_message;
                g.avatar = g.avatar ?? (m.avatar ?? m.photo ?? m.image ?? null);
            }
        }
    });

    return Array.from(map.values()).sort((a,b) => a.last_index - b.last_index);
}

function initialsFromName(name){
    const clean = (name || '').trim();
    if(!clean) return '؟';
    const parts = clean.split(/\s+/).filter(Boolean);
    const first = parts[0]?.[0] ?? '؟';
    const last  = parts.length > 1 ? (parts[parts.length-1]?.[0] ?? '') : '';
    return (first + last).toUpperCase();
}

function renderConversationsGrouped(list){
    const box = document.getElementById('messages-conversations-list');
    box.innerHTML = '';

    const grouped = groupByMember(list);

    if(!grouped.length){
        setEmpty();
        return;
    }

    grouped.forEach(g => {
        const initials = initialsFromName(g.name);

        const avatar = g.avatar
          ? `<img src="${g.avatar}" class="h-10 w-10 rounded-full object-cover ring-2 ring-white/70 dark:ring-white/10" alt="${escapeHtml(g.name)}">`
          : `<div class="h-10 w-10 rounded-full grid place-items-center
                      bg-gradient-to-br from-emerald-500 to-cyan-500
                      text-white font-extrabold text-[12px]
                      ring-2 ring-white/70 dark:ring-white/10">${initials}</div>`;

        const countPill = g.count > 1
          ? `<span class="ms-2 inline-flex items-center justify-center min-w-[22px] h-5 px-1.5 rounded-full
                       bg-gray-900 text-white text-[10px] font-extrabold dark:bg-white/10">${g.count}</span>`
          : ``;

        const unreadPill = g.unreadCount > 0
          ? `<span class="inline-flex items-center justify-center min-w-[22px] h-5 px-1.5 rounded-full
                       bg-red-500 text-white text-[10px] font-extrabold">${g.unreadCount}</span>`
          : ``;

        const starCls = g.important ? 'text-amber-500' : 'text-gray-300 dark:text-white/20';

        box.innerHTML += `
          <a href="${g.url}"
             class="flex items-center justify-between gap-3 rounded-3xl px-3 py-3 mx-2 my-1
                    bg-amber-50 hover:bg-amber-100 transition">
            <div class="flex items-center gap-3 min-w-0">
                ${avatar}
                <div class="min-w-0">
                    <div class="flex items-center min-w-0">
                        <div class="font-bold text-sm text-gray-900 truncate">${escapeHtml(g.name)}</div>
                        ${countPill}
                    </div>
                    <div class="text-xs text-gray-500 truncate">${escapeHtml(g.last_message || '—')}</div>
                </div>
            </div>

            <div class="flex items-center gap-2 shrink-0">
                ${unreadPill}
                <button type="button"
                        onclick="event.preventDefault(); event.stopPropagation(); toggleImportant(${g.latest_id});"
                        class="${starCls} text-[16px] font-black leading-none">
                    ★
                </button>
            </div>
          </a>
        `;
    });
}

// Toggle important (مثل الأصلي)
async function toggleImportant(id){
    try{
        await fetch(`/messages/${id}/toggle-important`, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'X-Requested-With': 'XMLHttpRequest' }
        });
        const active = document.querySelector('.filter-btn.active-filter');
        setLoading();
        loadRecentMessages(active ? active.dataset.filter : lastFilter);
    }catch(e){
        console.error(e);
    }
}

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

// ✅ نفس الأصلي: تحميل تلقائي أول ما تفتح الصفحة
document.addEventListener('DOMContentLoaded', () => {
    setLoading();
    loadRecentMessages('all');
});
</script>