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

@extends($layout)

@section('title', 'صندوق الوارد')

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

    {{-- ===== HERO ===== --}}
    <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 mb-8">

        {{-- ✅ مهم: خلي الخلفيات ما تمسك الكبس --}}
        <div class="pointer-events-none absolute -top-24 -right-24 h-64 w-64 rounded-full bg-white/15 blur-2xl"></div>
        <div class="pointer-events-none 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-8">
            <div class="flex flex-col lg:flex-row justify-between gap-6 lg:items-center">

                <div class="min-w-0">
                    <h1 class="text-3xl sm:text-4xl font-extrabold flex items-center gap-4">
                        <i class="fa-solid fa-inbox"></i>
                        صندوق الوارد
                    </h1>
                    <p class="mt-2 text-white/85 text-base">
                        جميع الرسائل الواردة من أعضاء النظام — مع فلاتر، بحث، وتحويل العرض إلى كروت.
                    </p>

                    <div class="mt-4 flex flex-wrap gap-2 text-[12px] font-extrabold">
                        <span class="px-3 py-1 rounded-full bg-white/90 text-slate-900">
                            الإجمالي:
                            <span id="pm-total-pill">
                                {{ method_exists($messages, 'total') ? $messages->total() : $messages->count() }}
                            </span>
                        </span>

                        <span class="px-3 py-1 rounded-full bg-white/90 text-slate-900">
                            غير مقروء:
                            <span id="pm-unread-pill">{{ $unreadCount }}</span>
                        </span>

                        <span class="px-3 py-1 rounded-full bg-white/90 text-slate-900">
                            مهم (بهالصفحة):
                            <span id="pm-important-pill">
                                {{ method_exists($messages, 'getCollection') ? $messages->getCollection()->where('important', true)->count() : 0 }}
                            </span>
                        </span>
                    </div>
                </div>

                <div class="flex flex-wrap gap-3">
                    <a href="{{ route('simple-messages.create') }}"
                       class="pm-btn px-6 py-3 bg-white/90 hover:bg-white text-slate-900 rounded-2xl font-extrabold
                              flex items-center gap-3 shadow-2xl transform hover:scale-105 transition-all">
                        <i class="fa-solid fa-plus text-emerald-600"></i>
                        رسالة جديدة
                    </a>

                    @if($unreadCount > 0)
                        <button type="button" id="btn-mark-all"
                                onclick="markAllAsRead()"
                                class="pm-btn px-6 py-3 bg-slate-950/20 hover:bg-slate-950/30
                                       text-white rounded-2xl font-extrabold flex items-center gap-3 shadow-2xl
                                       transform hover:scale-105 transition-all ring-1 ring-white/25">
                            <i class="fa-solid fa-check-double"></i>
                            تعليم الكل كمقروء
                        </button>
                    @endif

                    {{-- ✅ تظل موجودة بس الافتراضي كروت --}}
                    <button type="button" id="btn-view-table"
                            onclick="setInboxView('table')"
                            class="pm-btn px-4 py-3 rounded-2xl bg-white/15 hover:bg-white/20 text-white font-extrabold
                                   ring-1 ring-white/20 transition-all"
                            title="عرض جدول">
                        <i class="fa-solid fa-table"></i>
                    </button>

                    <button type="button" id="btn-view-cards"
                            onclick="setInboxView('cards')"
                            class="pm-btn px-4 py-3 rounded-2xl bg-white/15 hover:bg-white/20 text-white font-extrabold
                                   ring-1 ring-white/20 transition-all"
                            title="عرض كروت">
                        <i class="fa-solid fa-id-card"></i>
                    </button>
                </div>

            </div>
        </div>
    </div>
@php
  // ✅ عدّل أسماء المتغيرات حسب اللي موجود عندك
  $inboxUnread = $inboxUnreadCount ?? $unreadCount ?? 0;     // غير مقروء بالوارد
  $sentTotal   = $sentCount ?? 0;                             // عدد الصادر
  $archTotal   = $archivedCount ?? 0;                         // عدد الأرشيف
@endphp

{{-- ===== Mobile Tabs + Slider (Inbox / Sent / Archive / Soon) ===== --}}
<div class="mt-6">

  {{-- Tabs (sticky style) --}}
  <div class="rounded-3xl border border-slate-200 dark:border-white/10 bg-white/85 dark:bg-white/5 backdrop-blur-xl shadow-xl p-2">
    <div class="grid grid-cols-4 gap-2 text-[12px] font-extrabold">

      <button type="button" class="pm-tab pm-tab-active" data-i="0" onclick="pmGo(0)">
        <span class="relative inline-flex items-center justify-center">
          <i class="fa-solid fa-inbox"></i>
          @if((int)$inboxUnread > 0)
            <span class="pm-count-badge pm-count-emerald">{{ $inboxUnread > 99 ? '99+' : $inboxUnread }}</span>
          @endif
        </span>
        <span>وارد</span>
      </button>

      <button type="button" class="pm-tab" data-i="1" onclick="pmGo(1)">
        <span class="relative inline-flex items-center justify-center">
          <i class="fa-solid fa-paper-plane"></i>
          @if((int)$sentTotal > 0)
            <span class="pm-count-badge pm-count-sky">{{ $sentTotal > 99 ? '99+' : $sentTotal }}</span>
          @endif
        </span>
        <span>صادر</span>
      </button>

      <button type="button" class="pm-tab" data-i="2" onclick="pmGo(2)">
        <span class="relative inline-flex items-center justify-center">
          <i class="fa-solid fa-box-archive"></i>
          @if((int)$archTotal > 0)
            <span class="pm-count-badge pm-count-slate">{{ $archTotal > 99 ? '99+' : $archTotal }}</span>
          @endif
        </span>
        <span>أرشيف</span>
      </button>

      <button type="button" class="pm-tab" data-i="3" onclick="pmGo(3)">
        <span class="relative inline-flex items-center justify-center">
          <i class="fa-solid fa-wand-magic-sparkles"></i>
          <span class="pm-soon-dot"></span>
        </span>
        <span>قريبًا</span>
      </button>
    </div>
  </div>

  {{-- Slider --}}
  <div class="mt-4 rounded-3xl border border-slate-200 dark:border-white/10 bg-white/90 dark:bg-white/5 backdrop-blur-xl shadow-2xl overflow-hidden">

    {{-- ✅ Wrapper للسحب --}}
    <div id="pm-slider-wrap" class="w-full overflow-hidden">
      <div id="pm-slider"
           class="flex transition-transform duration-300 ease-out will-change-transform"
           style="transform: translateX(0%);">

        {{-- Slide 1: Inbox --}}
        <div class="min-w-full p-5 sm:p-6">
          <div class="flex items-start justify-between gap-3">
            <div class="h-11 w-11 rounded-2xl bg-emerald-100 dark:bg-emerald-900/25 flex items-center justify-center">
              <i class="fa-solid fa-inbox text-emerald-700 dark:text-emerald-200"></i>
            </div>
            <div class="flex items-center gap-2">
              <span class="pm-badge pm-badge-emerald">وارد</span>
              @if((int)$inboxUnread > 0)
                <span class="pm-badge pm-badge-emerald">
                  غير مقروء: {{ $inboxUnread > 99 ? '99+' : $inboxUnread }}
                </span>
              @endif
            </div>
          </div>

          <div class="mt-4">
            <div class="text-xl font-extrabold text-slate-900 dark:text-white">الرسائل الواردة</div>
            <div class="mt-1 text-sm text-slate-600 dark:text-white/60 leading-relaxed">
              استعراض الرسائل الجديدة، إدارة الأولويات، والردود الرسمية بسرعة.
            </div>
          </div>

          <div class="mt-5 flex items-center justify-between">
            <a href="{{ route('simple-messages.inbox') }}"
               class="pm-cta pm-cta-emerald">
              فتح الوارد <i class="fa-solid fa-arrow-left"></i>
            </a>
            <div class="text-xs text-slate-500 dark:text-white/55 font-extrabold">
              مناسب للموبايل ✅
            </div>
          </div>
        </div>

        {{-- Slide 2: Sent --}}
        <div class="min-w-full p-5 sm:p-6">
          <div class="flex items-start justify-between gap-3">
            <div class="h-11 w-11 rounded-2xl bg-sky-100 dark:bg-sky-900/25 flex items-center justify-center">
              <i class="fa-solid fa-paper-plane text-sky-700 dark:text-sky-200"></i>
            </div>
            <div class="flex items-center gap-2">
              <span class="pm-badge pm-badge-sky">صادر</span>
              @if((int)$sentTotal > 0)
                <span class="pm-badge pm-badge-sky">
                  العدد: {{ $sentTotal > 99 ? '99+' : $sentTotal }}
                </span>
              @endif
            </div>
          </div>

          <div class="mt-4">
            <div class="text-xl font-extrabold text-slate-900 dark:text-white">الرسائل الصادرة</div>
            <div class="mt-1 text-sm text-slate-600 dark:text-white/60 leading-relaxed">
              تتبّع ما تم إرساله، حالة المحادثات، وسجل المتابعة.
            </div>
          </div>

          <div class="mt-5 flex items-center justify-between">
            <a href="{{ route('simple-messages.sent') }}"
               class="pm-cta pm-cta-sky">
              فتح الصادر <i class="fa-solid fa-arrow-left"></i>
            </a>
            <div class="text-xs text-slate-500 dark:text-white/55 font-extrabold">
              تنظيم احترافي 📌
            </div>
          </div>
        </div>

        {{-- Slide 3: Archive --}}
        <div class="min-w-full p-5 sm:p-6">
          <div class="flex items-start justify-between gap-3">
            <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-box-archive text-slate-700 dark:text-white/70"></i>
            </div>
            <div class="flex items-center gap-2">
              <span class="pm-badge pm-badge-slate">أرشيف</span>
              @if((int)$archTotal > 0)
                <span class="pm-badge pm-badge-slate">
                  العدد: {{ $archTotal > 99 ? '99+' : $archTotal }}
                </span>
              @endif
            </div>
          </div>

          <div class="mt-4">
            <div class="text-xl font-extrabold text-slate-900 dark:text-white">الأرشيف</div>
            <div class="mt-1 text-sm text-slate-600 dark:text-white/60 leading-relaxed">
              رسائل مكتملة أو محفوظة للرجوع لاحقًا بدون ضغط على الوارد.
            </div>
          </div>

          <div class="mt-5 flex items-center justify-between">
            <a href="{{ route('simple-messages.archived') }}"
               class="pm-cta pm-cta-slate">
              فتح الأرشيف <i class="fa-solid fa-arrow-left"></i>
            </a>
            <div class="text-xs text-slate-500 dark:text-white/55 font-extrabold">
              أرشفة ذكية 🗂️
            </div>
          </div>
        </div>

        {{-- Slide 4: Coming Soon --}}
        <div class="min-w-full p-5 sm:p-6">
          <div class="flex items-start justify-between gap-3">
            <div class="h-11 w-11 rounded-2xl bg-amber-100 dark:bg-amber-900/25 flex items-center justify-center">
              <i class="fa-solid fa-wand-magic-sparkles text-amber-700 dark:text-amber-200"></i>
            </div>
            <span class="pm-badge pm-badge-amber">قريبًا</span>
          </div>

          <div class="mt-4">
            <div class="text-xl font-extrabold text-slate-900 dark:text-white">قسم قيد التطوير</div>
            <div class="mt-1 text-sm text-slate-600 dark:text-white/60 leading-relaxed">
              ميزات متقدمة لإدارة المحادثات، التحليلات، والتوثيق (سيتم تفعيله قريبًا).
            </div>
          </div>

          <div class="mt-5 flex items-center justify-between">
            <button type="button" class="pm-cta pm-cta-amber opacity-80 cursor-not-allowed">
              قريبًا <i class="fa-solid fa-lock"></i>
            </button>
            <div class="text-xs text-slate-500 dark:text-white/55 font-extrabold">
              تحت التجهيز ⚙️
            </div>
          </div>
        </div>

      </div>
    </div>

    {{-- Dots --}}
    <div class="flex items-center justify-center gap-2 py-3 border-t border-slate-200/70 dark:border-white/10">
      <span class="pm-dot pm-dot-active" data-i="0" onclick="pmGo(0)"></span>
      <span class="pm-dot" data-i="1" onclick="pmGo(1)"></span>
      <span class="pm-dot" data-i="2" onclick="pmGo(2)"></span>
      <span class="pm-dot" data-i="3" onclick="pmGo(3)"></span>
    </div>
  </div>

  {{-- ===== Epic HR Divider ===== --}}
  <div class="mt-6">
    <div class="relative h-px w-full overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-r from-transparent via-slate-300 to-transparent dark:via-white/15"></div>
      <div class="absolute inset-0 bg-gradient-to-r from-transparent via-emerald-400/70 to-transparent blur-[2px]"></div>
    </div>
    <div class="mt-2 flex items-center justify-center gap-2 text-[10px] font-extrabold text-slate-500 dark:text-white/50">
      <span class="h-1.5 w-1.5 rounded-full bg-emerald-500/70"></span>
      مركز الرسائل
      <span class="h-1.5 w-1.5 rounded-full bg-sky-500/60"></span>
    </div>
  </div>

</div>

<style>
  /* ✅ مهم للسحب على iOS */
  #pm-slider-wrap{ touch-action: pan-y; }

  .pm-tab{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:.35rem; padding:.65rem .25rem;
    border-radius:1.25rem;
    border:1px solid rgba(148,163,184,.22);
    background: rgba(241,245,249,.65);
    color:#0f172a;
    transition: all .15s ease;
    position: relative;
  }
  .dark .pm-tab{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    color: rgba(255,255,255,.85);
  }
  .pm-tab-active{
    background: rgba(16,185,129,.14) !important;
    border-color: rgba(16,185,129,.30) !important;
  }

  .pm-count-badge{
    position:absolute;
    top:-8px;
    right:-10px;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 900;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    box-shadow: 0 10px 20px rgba(0,0,0,.12);
    border: 2px solid rgba(255,255,255,.85);
  }
  .dark .pm-count-badge{ border-color: rgba(0,0,0,.55); }
  .pm-count-emerald{ background: rgba(16,185,129,1); }
  .pm-count-sky{ background: rgba(2,132,199,1); }
  .pm-count-slate{ background: rgba(51,65,85,1); }

  .pm-soon-dot{
    position:absolute;
    top:-6px; right:-8px;
    width:10px; height:10px;
    border-radius:9999px;
    background: rgba(245,158,11,1);
    border: 2px solid rgba(255,255,255,.85);
    box-shadow: 0 10px 20px rgba(0,0,0,.12);
  }
  .dark .pm-soon-dot{ border-color: rgba(0,0,0,.55); }

  .pm-badge{
    font-size:11px; font-weight:900;
    padding:.25rem .7rem; border-radius:9999px;
    border:1px solid rgba(148,163,184,.22);
    background: rgba(255,255,255,.75);
    color:#0f172a;
  }
  .dark .pm-badge{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); color: rgba(255,255,255,.85); }
  .pm-badge-emerald{ border-color: rgba(16,185,129,.30); }
  .pm-badge-sky{ border-color: rgba(56,189,248,.30); }
  .pm-badge-slate{ border-color: rgba(148,163,184,.30); }
  .pm-badge-amber{ border-color: rgba(245,158,11,.30); }

  .pm-cta{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.7rem 1rem; border-radius:1.25rem;
    font-weight:950; font-size:13px;
    border:1px solid rgba(148,163,184,.22);
    background: rgba(241,245,249,.65);
    transition: all .15s ease;
  }
  .pm-cta:hover{ transform: translateY(-1px); }
  .dark .pm-cta{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); color: rgba(255,255,255,.90); }
  .pm-cta-emerald{ border-color: rgba(16,185,129,.30); color: rgb(5,150,105); }
  .pm-cta-sky{ border-color: rgba(56,189,248,.30); color: rgb(2,132,199); }
  .pm-cta-slate{ border-color: rgba(148,163,184,.30); color: rgb(51,65,85); }
  .pm-cta-amber{ border-color: rgba(245,158,11,.30); color: rgb(180,83,9); }

  .pm-dot{
    width: 8px; height: 8px; border-radius: 9999px;
    background: rgba(148,163,184,.35);
    border: 1px solid rgba(148,163,184,.35);
    cursor: pointer;
  }
  .dark .pm-dot{ background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.18); }
  .pm-dot-active{ background: rgba(16,185,129,.75) !important; border-color: rgba(16,185,129,.75) !important; }
</style>

<script>
  let pmIndex = 0;
  const pmSlider = () => document.getElementById('pm-slider');
  const pmWrap   = () => document.getElementById('pm-slider-wrap');
  const pmTabs   = () => Array.from(document.querySelectorAll('.pm-tab'));
  const pmDots   = () => Array.from(document.querySelectorAll('.pm-dot'));

  function pmIsRTL(){
    const d = (document.documentElement.getAttribute('dir') || document.body.getAttribute('dir') || '').toLowerCase();
    return d === 'rtl';
  }

  function pmApply(){
    // ✅ RTL-aware transform
    const dir = pmIsRTL() ? 1 : -1;
    pmSlider().style.transform = `translateX(${dir * pmIndex * 100}%)`;

    pmTabs().forEach(t => t.classList.toggle('pm-tab-active', Number(t.dataset.i) === pmIndex));
    pmDots().forEach(d => d.classList.toggle('pm-dot-active', Number(d.dataset.i) === pmIndex));
  }

  function pmGo(i){
    pmIndex = Math.max(0, Math.min(3, i));
    pmApply();
  }

  // ✅ Swipe support (على الـ wrapper)
  let startX = 0, dx = 0, dragging = false;

  pmWrap().addEventListener('touchstart', (e) => {
    dragging = true;
    startX = e.touches[0].clientX;
    dx = 0;
  }, {passive:true});

  pmWrap().addEventListener('touchmove', (e) => {
    if(!dragging) return;
    dx = e.touches[0].clientX - startX;
  }, {passive:true});

  pmWrap().addEventListener('touchend', () => {
    if(!dragging) return;
    dragging = false;

    // ✅ RTL: اتجاه السحب بالعكس
    const rtl = pmIsRTL();
    const threshold = 40;

    if(Math.abs(dx) > threshold){
      if(!rtl){
        if(dx < 0) pmGo(pmIndex + 1);
        else pmGo(pmIndex - 1);
      } else {
        if(dx < 0) pmGo(pmIndex - 1);
        else pmGo(pmIndex + 1);
      }
    }
  });

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

    {{-- ===== Search + Filters ===== --}}
    <div class="bg-white dark:bg-gray-900 rounded-3xl shadow-3xl border border-gray-200 dark:border-gray-700 p-4 mb-6">
        <div class="flex flex-col lg:flex-row gap-4 lg:items-center">

            <div class="flex-1">
                <div class="relative">
                    <input id="pm-search"
                           type="text"
                           placeholder="ابحث بالمرسل / الإيميل / الموضوع / نص الرسالة..."
                           class="pm-btn w-full px-4 py-3 rounded-2xl border border-gray-200 dark:border-gray-700
                                  bg-white dark:bg-gray-800 text-gray-900 dark:text-white
                                  focus:outline-none focus:ring-2 focus:ring-emerald-500">
                    <i class="fa-solid fa-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
                </div>
            </div>

            <div class="flex flex-wrap gap-2">
                <button type="button"
                        class="pm-btn pm-filter-btn active"
                        data-filter="all"
                        onclick="setInboxFilter('all', this)">
                    الكل
                </button>
                <button type="button"
                        class="pm-btn pm-filter-btn"
                        data-filter="unread"
                        onclick="setInboxFilter('unread', this)">
                    غير مقروء
                </button>
                <button type="button"
                        class="pm-btn pm-filter-btn"
                        data-filter="important"
                        onclick="setInboxFilter('important', this)">
                    مهم
                </button>

                <button type="button"
                        class="pm-btn px-4 py-3 rounded-2xl bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700
                               text-gray-700 dark:text-gray-200 font-extrabold transition-all"
                        onclick="resetInboxFilters()"
                        title="إعادة ضبط">
                    <i class="fa-solid fa-broom ml-2"></i>
                    إعادة ضبط
                </button>
            </div>
        </div>

        <div class="mt-3 text-xs text-gray-500 dark:text-gray-400">
            💡 تلميح: اضغط <span class="font-bold">Ctrl + K</span> للتركيز على البحث بسرعة.
            <span class="mx-2">•</span>
            ظاهر الآن: <span id="pm-visible-count" class="font-extrabold">0</span>
        </div>
    </div>

    {{-- ===== Main List ===== --}}
    <div class="bg-white dark:bg-gray-900 rounded-3xl shadow-3xl overflow-hidden border border-gray-200 dark:border-gray-700">

        @if($messages->count() > 0)

            {{-- ✅ TABLE VIEW (مخفي افتراضيًا) --}}
            <div id="pm-view-table" class="hidden overflow-x-auto pm-scrollbar">
                <table class="w-full text-right">
                    <thead>
                        <tr class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
                            <th class="py-4 px-6 text-sm font-extrabold text-gray-700 dark:text-gray-200">المرسل</th>
                            <th class="py-4 px-6 text-sm font-extrabold text-gray-700 dark:text-gray-200">الموضوع</th>
                            <th class="py-4 px-6 text-sm font-extrabold text-gray-700 dark:text-gray-200">الوقت</th>
                            <th class="py-4 px-6 text-sm font-extrabold text-gray-700 dark:text-gray-200">الإجراءات</th>
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                        @foreach($messages as $message)
                            @php
                                $isUnread = !$message->read_at;
                                $isImportant = (bool) $message->important;
                                $subject = $message->subject ?? '(بدون موضوع)';
                                $senderName = $message->sender->name ?? 'عضو';
                                $senderEmail = $message->sender->email ?? '';
                                $bodyText = $message->body ?? '';
                                $hasNewReplies = $message->replies->where('is_new', true)->count() > 0;
                                $avatarUrl = $message->sender->avatar
                                    ? asset('storage/avatars/' . $message->sender->avatar)
                                    : null;
                            @endphp

                            <tr id="message-row-{{ $message->id }}"
                                data-pm-message="{{ $message->id }}"
                                data-name="{{ e($senderName) }}"
                                data-email="{{ e($senderEmail) }}"
                                data-subject="{{ e($subject) }}"
                                data-body="{{ e($bodyText) }}"
                                data-unread="{{ $isUnread ? 1 : 0 }}"
                                data-important="{{ $isImportant ? 1 : 0 }}"
                                class="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors
                                       {{ $isUnread ? 'pm-unread-row' : '' }}">

                                {{-- Sender --}}
                                <td class="py-4 px-6">
                                    <button type="button"
                                            onclick="toggleReplies({{ $message->id }})"
                                            class="pm-btn w-full flex items-center gap-3 text-right">
                                        <i class="fa-solid fa-chevron-down transition-transform"
                                           id="toggle-arrow-{{ $message->id }}"></i>

                                        <div class="flex items-center gap-3 min-w-0">
                                            <div class="w-12 h-12 rounded-full overflow-hidden flex items-center justify-center shadow-inner pm-avatar">
                                                @if($avatarUrl)
                                                    <img src="{{ $avatarUrl }}"
                                                         alt="{{ $senderName }}"
                                                         class="w-full h-full object-cover"
                                                         onerror="this.src='/images/default-avatar.png'">
                                                @else
                                                    <span class="font-extrabold text-white text-lg">{{ mb_substr($senderName, 0, 1) }}</span>
                                                @endif
                                            </div>

                                            <div class="min-w-0">
                                                <div class="font-extrabold text-gray-900 dark:text-white truncate">{{ $senderName }}</div>
                                                <div class="text-sm text-gray-500 dark:text-gray-400 truncate">{{ $senderEmail }}</div>
                                            </div>
                                        </div>

                                        @if($hasNewReplies)
                                            <span id="new-reply-badge-{{ $message->id }}"
                                                  class="ms-2 px-2 py-0.5 bg-rose-500 text-white text-xs rounded-full shadow">
                                                ردود جديدة
                                            </span>
                                        @endif
                                    </button>
                                </td>

                                {{-- Subject + snippet --}}
                                <td class="py-4 px-6">
                                    <button type="button"
                                            onclick="toggleReplies({{ $message->id }})"
                                            class="pm-btn w-full text-right">
                                        <div class="flex items-center gap-2 mb-1 flex-wrap">
                                            <span class="font-extrabold text-gray-900 dark:text-white">
                                                {{ $subject }}
                                            </span>

                                            {{-- ✅ الحالة دائمًا --}}
                                            <span id="status-badge-table-{{ $message->id }}"
                                                  class="pm-status {{ $isUnread ? 'pm-status-new' : 'pm-status-read' }}">
                                                {{ $isUnread ? 'جديد' : 'مقروء' }}
                                            </span>

                                            @if($isImportant)
                                                <i class="fa-solid fa-star text-amber-500 drop-shadow"></i>
                                            @endif
                                        </div>

                                        <p class="text-sm text-gray-500 dark:text-gray-400 line-clamp-2">
                                            {{ $bodyText }}
                                        </p>
                                    </button>
                                </td>

                                {{-- Time --}}
                                <td class="py-4 px-6 text-sm text-gray-600 dark:text-gray-300 whitespace-nowrap">
                                    {{ $message->created_at->diffForHumans() }}
                                </td>

                                {{-- Actions --}}
                                <td class="py-4 px-6">
                                    <div class="flex items-center gap-2">
                                        <a href="{{ route('simple-messages.show', $message->id) }}"
                                           class="pm-btn px-4 py-2 text-sm bg-gradient-to-r from-blue-500 to-indigo-600
                                                  hover:from-blue-600 hover:to-indigo-700 text-white rounded-2xl font-extrabold shadow-lg
                                                  transform hover:scale-105 transition-all flex items-center gap-2">
                                            <i class="fa-solid fa-eye"></i>
                                            عرض
                                        </a>

                                        <button type="button" onclick="archiveMessage({{ $message->id }})"
                                                class="pm-btn px-3 py-2 text-sm bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200
                                                       rounded-2xl shadow-lg hover:scale-105 transition-transform"
                                                title="أرشفة">
                                            <i class="fa-solid fa-box-archive"></i>
                                        </button>

                                        <button type="button" onclick="deleteMessage({{ $message->id }})"
                                                class="pm-btn px-3 py-2 text-sm bg-rose-100 dark:bg-rose-900 text-rose-700 dark:text-rose-200
                                                       rounded-2xl shadow-lg hover:scale-105 transition-transform"
                                                title="حذف">
                                            <i class="fa-solid fa-trash"></i>
                                        </button>

                                        <button type="button"
                                                id="important-btn-table-{{ $message->id }}"
                                                data-important="{{ $isImportant ? 1 : 0 }}"
                                                onclick="toggleImportant({{ $message->id }}, this)"
                                                class="pm-btn px-3 py-2 text-sm rounded-2xl transition-all shadow-lg
                                                       {{ $isImportant
                                                            ? 'bg-amber-100 dark:bg-amber-900 text-amber-700 dark:text-amber-200'
                                                            : 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200' }}"
                                                title="مهم">
                                            <i class="fa-solid fa-star"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>

                            {{-- Replies rows (TABLE) --}}
                            @foreach($message->replies as $reply)
                                <tr class="reply-row reply-of-{{ $message->id }}" style="display:none;">
                                    <td colspan="4" class="py-3 px-6 border-r-4 border-blue-500 bg-gray-50 dark:bg-gray-800/40">
                                        <div class="flex items-start gap-3">
                                            <div class="w-9 h-9 rounded-full bg-gradient-to-br from-sky-500 to-indigo-500
                                                        text-white flex items-center justify-center font-extrabold">
                                                {{ mb_substr($reply->sender->name ?? 'م', 0, 1) }}
                                            </div>
                                            <div class="min-w-0">
                                                <div class="font-extrabold text-gray-900 dark:text-white">
                                                    {{ $reply->sender->name ?? 'عضو' }}
                                                    @if($reply->is_new)
                                                        <span class="ms-2 px-2 py-0.5 text-xs rounded-full bg-rose-500 text-white">جديد</span>
                                                    @endif
                                                </div>
                                                <div class="text-sm text-gray-600 dark:text-gray-300 mt-1">
                                                    {{ $reply->body }}
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        @endforeach
                    </tbody>
                </table>
            </div>

            {{-- ✅ CARDS VIEW (ظاهر افتراضيًا) --}}
            <div id="pm-view-cards" class="p-5">
                <div id="pm-cards-grid" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">

                    @foreach($messages as $message)
                        @php
                            $isUnread = !$message->read_at;
                            $isImportant = (bool) $message->important;
                            $subject = $message->subject ?? '(بدون موضوع)';
                            $senderName = $message->sender->name ?? 'عضو';
                            $senderEmail = $message->sender->email ?? '';
                            $bodyText = $message->body ?? '';
                            $hasNewReplies = $message->replies->where('is_new', true)->count() > 0;
                            $avatarUrl = $message->sender->avatar
                                ? asset('storage/avatars/' . $message->sender->avatar)
                                : null;
                        @endphp

                        <div id="message-card-{{ $message->id }}"
                             data-pm-message="{{ $message->id }}"
                             data-name="{{ e($senderName) }}"
                             data-email="{{ e($senderEmail) }}"
                             data-subject="{{ e($subject) }}"
                             data-body="{{ e($bodyText) }}"
                             data-unread="{{ $isUnread ? 1 : 0 }}"
                             data-important="{{ $isImportant ? 1 : 0 }}"
                             class="relative rounded-3xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-lg overflow-hidden
                                    hover:shadow-2xl transition-all {{ $isUnread ? 'pm-unread-card' : '' }}">

                            {{-- ✅ id لتحديث اللون لما يصير مقروء --}}
                            <div id="card-topbar-{{ $message->id }}"
                                 class="absolute inset-x-0 top-0 h-1 {{ $isUnread ? 'bg-emerald-500' : 'bg-gray-200 dark:bg-gray-700' }}"></div>

                            <div class="p-5">
                                <div class="flex items-start justify-between gap-3">
                                    <button type="button" onclick="toggleReplies({{ $message->id }})"
                                            class="pm-btn flex items-center gap-3 min-w-0 text-right">
                                        <div class="w-12 h-12 rounded-full overflow-hidden flex items-center justify-center shadow-inner pm-avatar">
                                            @if($avatarUrl)
                                                <img src="{{ $avatarUrl }}" class="w-full h-full object-cover"
                                                     onerror="this.src='/images/default-avatar.png'" alt="{{ $senderName }}">
                                            @else
                                                <span class="font-extrabold text-white text-lg">{{ mb_substr($senderName, 0, 1) }}</span>
                                            @endif
                                        </div>

                                        <div class="min-w-0">
                                            <div class="font-extrabold text-gray-900 dark:text-white truncate">
                                                {{ $senderName }}
                                            </div>
                                            <div class="text-xs text-gray-500 dark:text-gray-400 truncate">
                                                {{ $senderEmail }}
                                            </div>
                                        </div>

                                        <i class="fa-solid fa-chevron-down transition-transform ms-2"
                                           id="toggle-arrow-card-{{ $message->id }}"></i>

                                        @if($hasNewReplies)
                                            <span id="new-reply-badge-card-{{ $message->id }}"
                                                  class="ms-2 px-2 py-0.5 bg-rose-500 text-white text-xs rounded-full shadow">
                                                ردود جديدة
                                            </span>
                                        @endif
                                    </button>

                                    <div class="flex items-center gap-2 shrink-0 flex-wrap justify-end">
                                        {{-- ✅ الحالة دائمًا --}}
                                        <span id="status-badge-card-{{ $message->id }}"
                                              class="pm-status {{ $isUnread ? 'pm-status-new' : 'pm-status-read' }}">
                                            {{ $isUnread ? 'جديد' : 'مقروء' }}
                                        </span>

                                        @if($isImportant)
                                            <span class="px-2 py-1 text-xs bg-amber-100 dark:bg-amber-900 text-amber-700 dark:text-amber-200 rounded-full font-extrabold">
                                                مهم
                                            </span>
                                        @endif
                                    </div>
                                </div>

                                <div class="mt-4">
                                    <div class="flex items-center gap-2">
                                        <div class="font-extrabold text-gray-900 dark:text-white">
                                            {{ $subject }}
                                        </div>
                                    </div>
                                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-300 line-clamp-2">
                                        {{ $bodyText }}
                                    </p>
                                </div>

                                <div class="mt-4 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
                                    <span>{{ $message->created_at->diffForHumans() }}</span>
                                    <span>#{{ $message->id }}</span>
                                </div>

                                <div class="mt-5 flex flex-wrap gap-2">
                                    <a href="{{ route('simple-messages.show', $message->id) }}"
                                       class="pm-btn px-4 py-2 text-sm bg-gradient-to-r from-blue-500 to-indigo-600
                                              hover:from-blue-600 hover:to-indigo-700 text-white rounded-2xl font-extrabold shadow-lg
                                              transform hover:scale-105 transition-all">
                                        <i class="fa-solid fa-eye ml-2"></i>
                                        عرض
                                    </a>

                                    <button type="button" onclick="archiveMessage({{ $message->id }})"
                                            class="pm-btn px-4 py-2 text-sm bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200
                                                   rounded-2xl shadow-lg hover:scale-105 transition-transform">
                                        <i class="fa-solid fa-box-archive ml-2"></i>
                                        أرشفة
                                    </button>

                                    <button type="button" onclick="deleteMessage({{ $message->id }})"
                                            class="pm-btn px-4 py-2 text-sm bg-rose-100 dark:bg-rose-900 text-rose-700 dark:text-rose-200
                                                   rounded-2xl shadow-lg hover:scale-105 transition-transform">
                                        <i class="fa-solid fa-trash ml-2"></i>
                                        حذف
                                    </button>

                                    <button type="button"
                                            id="important-btn-card-{{ $message->id }}"
                                            data-important="{{ $isImportant ? 1 : 0 }}"
                                            onclick="toggleImportant({{ $message->id }}, this)"
                                            class="pm-btn px-4 py-2 text-sm rounded-2xl transition-all shadow-lg
                                                   {{ $isImportant
                                                        ? 'bg-amber-100 dark:bg-amber-900 text-amber-700 dark:text-amber-200'
                                                        : 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200' }}">
                                        <i class="fa-solid fa-star ml-2"></i>
                                        مهم
                                    </button>
                                </div>

                                {{-- Replies (CARDS) --}}
                                <div id="replies-card-{{ $message->id }}" class="hidden mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                                    <div class="text-xs font-extrabold text-gray-700 dark:text-gray-200 mb-3">
                                        الردود
                                    </div>

                                    @if($message->replies->count() === 0)
                                        <div class="text-sm text-gray-500 dark:text-gray-400">
                                            لا يوجد ردود بعد.
                                        </div>
                                    @else
                                        <div class="space-y-3">
                                            @foreach($message->replies as $reply)
                                                <div class="rounded-2xl bg-gray-50 dark:bg-gray-800/50 p-3 border border-gray-200/70 dark:border-gray-700">
                                                    <div class="flex items-start gap-3">
                                                        <div class="w-9 h-9 rounded-full bg-gradient-to-br from-sky-500 to-indigo-500
                                                                    text-white flex items-center justify-center font-extrabold">
                                                            {{ mb_substr($reply->sender->name ?? 'م', 0, 1) }}
                                                        </div>

                                                        <div class="min-w-0">
                                                            <div class="font-extrabold text-gray-900 dark:text-white">
                                                                {{ $reply->sender->name ?? 'عضو' }}
                                                                @if($reply->is_new)
                                                                    <span class="ms-2 px-2 py-0.5 text-xs rounded-full bg-rose-500 text-white">جديد</span>
                                                                @endif
                                                            </div>
                                                            <div class="text-sm text-gray-600 dark:text-gray-300 mt-1">
                                                                {{ $reply->body }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    @endif
                                </div>

                            </div>
                        </div>
                    @endforeach

                </div>
            </div>

        @else
            {{-- Empty --}}
            <div class="text-center py-24">
                <div class="w-32 h-32 mx-auto mb-8 text-gray-300 dark:text-gray-700">
                    <i class="fa-solid fa-inbox text-8xl"></i>
                </div>
                <h3 class="text-3xl font-extrabold text-gray-700 dark:text-gray-300 mb-4">صندوق الوارد فارغ</h3>
                <p class="text-gray-500 dark:text-gray-400 mb-10 max-w-xl mx-auto text-lg">
                    لا توجد رسائل واردة حاليًا.
                </p>
                <a href="{{ route('simple-messages.create') }}"
                   class="px-8 py-3 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 rounded-3xl font-extrabold shadow-2xl transform hover:scale-105 transition-all inline-flex items-center gap-3">
                    <i class="fa-solid fa-plus"></i>
                    إرسال رسالة جديدة
                </a>
            </div>
        @endif
    </div>

    @if($messages->hasPages())
        <div class="mt-6">{{ $messages->links() }}</div>
    @endif
</div>

{{-- ===== Confirm Modal ===== --}}
<div id="pm-confirm" class="fixed inset-0 z-[999] hidden">
    <div class="absolute inset-0 bg-black/60"></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-gray-900 rounded-3xl shadow-2xl border border-gray-200 dark:border-gray-700 overflow-hidden">
            <div class="p-5 border-b border-gray-200 dark:border-gray-700">
                <div class="flex items-start gap-3">
                    <div class="h-11 w-11 rounded-2xl bg-rose-100 dark:bg-rose-900 text-rose-700 dark:text-rose-200 flex items-center justify-center">
                        <i class="fa-solid fa-triangle-exclamation"></i>
                    </div>
                    <div class="min-w-0">
                        <div class="font-extrabold text-gray-900 dark:text-white">تأكيد العملية</div>
                        <div id="pm-confirm-text" class="text-sm text-gray-600 dark:text-gray-300 mt-1">—</div>
                    </div>
                </div>
            </div>
            <div class="p-5 flex justify-end gap-3">
                <button type="button" id="pm-confirm-cancel"
                        class="pm-btn px-4 py-2 rounded-2xl border border-gray-200 dark:border-gray-700
                               bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 font-extrabold">
                    إلغاء
                </button>
                <button type="button" id="pm-confirm-ok"
                        class="pm-btn px-4 py-2 rounded-2xl bg-rose-600 hover:bg-rose-700 text-white font-extrabold">
                    متابعة
                </button>
            </div>
        </div>
    </div>
</div>

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

<style>
/* ===== reliability styles ===== */
.pm-btn{ position: relative; z-index: 5; pointer-events: auto; }
.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); }

/* filter buttons */
.pm-filter-btn{
    padding: .75rem 1rem;
    border-radius: 1.25rem;
    font-size: 12px;
    font-weight: 900;
    border: 1px solid rgba(209,213,219,.9);
    background: #fff;
    color: #111827;
    transition: all .15s ease;
}
.dark .pm-filter-btn{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    color: rgba(255,255,255,.85);
}
.pm-filter-btn.active{
    background: #10b981 !important;
    border-color: rgba(16,185,129,.45) !important;
    color: #fff !important;
}

/* unread highlight */
.pm-unread-row{
    background: linear-gradient(90deg, rgba(16,185,129,.10), rgba(16,185,129,.20));
}
.dark .pm-unread-row{
    background: linear-gradient(90deg, rgba(16,185,129,.14), rgba(16,185,129,.08));
}
.pm-unread-card{
    box-shadow: 0 12px 35px rgba(16,185,129,.10);
}

/* avatar fallback bg */
.pm-avatar{
    background: linear-gradient(135deg, rgba(16,185,129,1), rgba(59,130,246,1));
}

/* shadow-3xl fallback */
.shadow-3xl{ box-shadow: 0 30px 80px rgba(0,0,0,.08); }

/* line clamp fallback */
.line-clamp-2{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ✅ status pills */
.pm-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.22rem .6rem;
    border-radius:9999px;
    font-size:11px;
    font-weight:900;
    border:1px solid rgba(209,213,219,.9);
    background:#fff;
    color:#111827;
}
.dark .pm-status{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    color: rgba(255,255,255,.85);
}
.pm-status-new{
    background: rgba(244,63,94,.10);
    border-color: rgba(244,63,94,.25);
    color: rgb(190,18,60);
}
.dark .pm-status-new{
    background: rgba(244,63,94,.16);
    border-color: rgba(244,63,94,.25);
    color: rgba(253,164,175,.95);
}
.pm-status-read{
    background: rgba(100,116,139,.12);
    border-color: rgba(100,116,139,.25);
    color: rgb(51,65,85);
}
.dark .pm-status-read{
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
    color: rgba(255,255,255,.75);
}

/* ✅ زر التبديل النشط (بديل ثابت بدل tailwind dynamic) */
.pm-view-active{
    background: rgba(255,255,255,.28) !important;
}

/* ✅ fallback للـ rotate */
.rotate-180{ transform: rotate(180deg); }
</style>

<script>
/* ============================
   State
============================ */
let pmView = 'cards'; // ✅ افتراضي: كروت
let pmFilter = 'all';

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

    // ✅ migrate مرة وحدة: لو كان مخزن قديم "table" خلّيه يصير cards
    const viewKey = 'pm_inbox_view';
    const migKey  = 'pm_inbox_view_migrated_to_cards_v1';
    if(!localStorage.getItem(migKey)){
        localStorage.setItem(viewKey, 'cards');
        localStorage.setItem(migKey, '1');
    }

    const saved = localStorage.getItem(viewKey);
    pmView = (saved === 'table' || saved === 'cards') ? saved : 'cards';

    // ✅ طبق العرض فورًا
    setInboxView(pmView, false);

    // search
    const search = document.getElementById('pm-search');
    search?.addEventListener('input', debounce(applyInboxFilters, 200));

    // ctrl+k
    document.addEventListener('keydown', (e) => {
        if((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k'){
            e.preventDefault();
            document.getElementById('pm-search')?.focus();
        }
        if(e.key === 'Escape'){
            pmCloseConfirm();
        }
    });

    applyInboxFilters();
});

/* ============================
   View Toggle
============================ */
function setInboxView(view, persist=true){
    pmView = (view === 'table') ? 'table' : 'cards';
    if(persist) localStorage.setItem('pm_inbox_view', pmView);

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

    if(pmView === 'cards'){
        table?.classList.add('hidden');
        cards?.classList.remove('hidden');
    }else{
        cards?.classList.add('hidden');
        table?.classList.remove('hidden');
    }

    // ✅ active style ثابت
    const bt = document.getElementById('btn-view-table');
    const bc = document.getElementById('btn-view-cards');
    bt?.classList.toggle('pm-view-active', pmView === 'table');
    bc?.classList.toggle('pm-view-active', pmView === 'cards');

    applyInboxFilters();
}

/* ============================
   Filter buttons
============================ */
function setInboxFilter(filter, btn){
    pmFilter = filter || 'all';
    document.querySelectorAll('.pm-filter-btn').forEach(b => b.classList.remove('active'));
    btn?.classList.add('active');
    applyInboxFilters();
}
function resetInboxFilters(){
    pmFilter = 'all';
    document.querySelectorAll('.pm-filter-btn').forEach(b => {
        b.classList.toggle('active', b.dataset.filter === 'all');
    });
    const s = document.getElementById('pm-search');
    if(s) s.value = '';
    applyInboxFilters();
    pmToast('info', 'تمت إعادة الضبط ✅');
}

/* ============================
   Apply search + filters (table + cards)
============================ */
function applyInboxFilters(){
    const q = (document.getElementById('pm-search')?.value || '').trim().toLowerCase();

    const rows = document.querySelectorAll('tr[data-pm-message]');
    let visible = 0;

    rows.forEach(row => {
        const id = row.dataset.pmMessage;
        const card = document.getElementById(`message-card-${id}`);

        const name = (row.dataset.name || '').toLowerCase();
        const email = (row.dataset.email || '').toLowerCase();
        const subject = (row.dataset.subject || '').toLowerCase();
        const body = (row.dataset.body || '').toLowerCase();

        const isUnread = row.dataset.unread === '1';
        const isImportant = row.dataset.important === '1';

        const matchesQuery = !q || (name.includes(q) || email.includes(q) || subject.includes(q) || body.includes(q));

        let matchesFilter = true;
        if(pmFilter === 'unread') matchesFilter = isUnread;
        if(pmFilter === 'important') matchesFilter = isImportant;

        const show = matchesQuery && matchesFilter;

        // table row
        row.style.display = show ? '' : 'none';

        // if hiding, also hide reply rows
        if(!show){
            document.querySelectorAll(`.reply-of-${id}`).forEach(r => r.style.display = 'none');
        }

        // card
        if(card){
            card.classList.toggle('hidden', !show);
        }

        if(show) visible++;
    });

    document.getElementById('pm-visible-count').textContent = visible.toString();
}

/* ============================
   Replies Toggle (TABLE + CARDS)
============================ */
function toggleReplies(messageId) {
    // table reply rows
    const rows = document.querySelectorAll(`.reply-of-${messageId}`);
    rows.forEach(row => {
        row.style.display = (row.style.display === 'none' || row.style.display === '') ? 'table-row' : 'none';
    });

    // rotate arrows (both)
    const arrowTable = document.getElementById(`toggle-arrow-${messageId}`);
    const arrowCard  = document.getElementById(`toggle-arrow-card-${messageId}`);
    arrowTable?.classList.toggle('rotate-180');
    arrowCard?.classList.toggle('rotate-180');

    // card replies container
    const cardReplies = document.getElementById(`replies-card-${messageId}`);
    if(cardReplies){
        cardReplies.classList.toggle('hidden');
    }

    // hide new reply badges (both)
    const badgeTable = document.getElementById(`new-reply-badge-${messageId}`);
    const badgeCard  = document.getElementById(`new-reply-badge-card-${messageId}`);
    if(badgeTable) badgeTable.style.display = 'none';
    if(badgeCard)  badgeCard.style.display = 'none';
}

/* ============================
   Confirm Modal (with fallback)
============================ */
function pmConfirm(message){
    const modal = document.getElementById('pm-confirm');
    const text  = document.getElementById('pm-confirm-text');
    const okBtn = document.getElementById('pm-confirm-ok');
    const ccBtn = document.getElementById('pm-confirm-cancel');

    // fallback
    if(!modal || !text || !okBtn || !ccBtn){
        return Promise.resolve(window.confirm(message || 'هل أنت متأكد؟'));
    }

    return new Promise((resolve) => {
        text.textContent = message || 'هل أنت متأكد؟';
        modal.classList.remove('hidden');

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

        okBtn.onclick = () => { cleanup(); resolve(true); };
        ccBtn.onclick = () => { cleanup(); resolve(false); };
    });
}
function pmCloseConfirm(){
    document.getElementById('pm-confirm')?.classList.add('hidden');
}

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

    const colors = {
        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 = colors[type] || colors.info;

    const id = 't_' + Math.random().toString(16).slice(2);
    const el = document.createElement('div');
    el.id = id;
    el.className = `rounded-3xl shadow-2xl border border-black/5 dark:border-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 font-black" onclick="document.getElementById('${id}')?.remove()">✕</button>
    `;
    box.appendChild(el);
    setTimeout(() => document.getElementById(id)?.remove(), 3500);
}

/* ============================
   Actions (keep endpoints + upgrade UX)
============================ */
async function archiveMessage(messageId) {
    const ok = await pmConfirm('هل تريد أرشفة هذه الرسالة؟');
    if (!ok) return;

    fetch(`{{ route('simple-messages.archive', ':id') }}`.replace(':id', messageId), {
        method:'POST',
        headers:{
            'X-CSRF-TOKEN':document.querySelector('meta[name="csrf-token"]').content,
            'Accept':'application/json',
            'X-Requested-With':'XMLHttpRequest'
        }
    })
    .then(res=>res.json())
    .then(data=>{
        if(data.success){
            document.getElementById(`message-row-${messageId}`)?.remove();
            document.getElementById(`message-card-${messageId}`)?.remove();
            document.querySelectorAll(`.reply-of-${messageId}`).forEach(r=>r.remove());
            pmToast('success', 'تمت الأرشفة ✅');
            applyInboxFilters();
        } else {
            pmToast('error', data.message || 'حدث خطأ أثناء الأرشفة.');
        }
    })
    .catch(err=>{
        console.error('خطأ أرشفة:',err);
        pmToast('error', 'خطأ أثناء الأرشفة.');
    });
}

async function deleteMessage(messageId){
    const ok = await pmConfirm('هل تريد حذف الرسالة؟');
    if(!ok) return;

    fetch(`{{ route('simple-messages.delete', ':id') }}`.replace(':id', messageId),{
        method:'DELETE',
        headers:{
            'X-CSRF-TOKEN':document.querySelector('meta[name="csrf-token"]').content,
            'Accept':'application/json',
            'X-Requested-With':'XMLHttpRequest'
        }
    })
    .then(res=>res.json())
    .then(data=>{
        if(data.success){
            document.getElementById(`message-row-${messageId}`)?.remove();
            document.getElementById(`message-card-${messageId}`)?.remove();
            document.querySelectorAll(`.reply-of-${messageId}`).forEach(r=>r.remove());
            pmToast('success', 'تم الحذف ✅');
            applyInboxFilters();
        } else {
            pmToast('error', data.message || 'حدث خطأ أثناء الحذف.');
        }
    })
    .catch(err=>{
        console.error('خطأ حذف:',err);
        pmToast('error', 'خطأ أثناء الحذف.');
    });
}

function applyImportantUI(messageId, isImportant){
    const row = document.getElementById(`message-row-${messageId}`);
    const card = document.getElementById(`message-card-${messageId}`);

    const btnT = document.getElementById(`important-btn-table-${messageId}`);
    const btnC = document.getElementById(`important-btn-card-${messageId}`);

    if(row) row.dataset.important = isImportant ? '1' : '0';
    if(card) card.dataset.important = isImportant ? '1' : '0';

    [btnT, btnC].forEach(btn => {
        if(!btn) return;
        btn.dataset.important = isImportant ? '1' : '0';
        btn.classList.remove('bg-amber-100','dark:bg-amber-900','text-amber-700','dark:text-amber-200');
        btn.classList.remove('bg-gray-100','dark:bg-gray-800','text-gray-700','dark:text-gray-200');

        if(isImportant){
            btn.classList.add('bg-amber-100','dark:bg-amber-900','text-amber-700','dark:text-amber-200');
        }else{
            btn.classList.add('bg-gray-100','dark:bg-gray-800','text-gray-700','dark:text-gray-200');
        }
    });

    // تحديث عداد المهم بالصفحة (تقريبًا)
    const pill = document.getElementById('pm-important-pill');
    if(pill){
        const count = document.querySelectorAll('tr[data-pm-message][data-important="1"]').length;
        pill.textContent = String(count);
    }
}

function toggleImportant(messageId, el){
    fetch(`{{ route('simple-messages.toggle-important', ':id') }}`.replace(':id', messageId),{
        method:'POST',
        headers:{
            'X-CSRF-TOKEN':document.querySelector('meta[name="csrf-token"]').content,
            'Accept':'application/json',
            'X-Requested-With':'XMLHttpRequest'
        }
    })
    .then(res=>res.json())
    .then(data=>{
        if(data.success){
            const current = (el?.dataset?.important === '1');
            const next = !current;
            applyImportantUI(messageId, next);
            pmToast('success', next ? 'تمت الإضافة للمهم ⭐' : 'تمت الإزالة من المهم');
            applyInboxFilters();
        }else{
            pmToast('error', data.message || 'تعذر تعديل الحالة.');
        }
    })
    .catch(()=>pmToast('error','خطأ أثناء تعديل الحالة.'));
}

async function markAllAsRead(){
    const ok = await pmConfirm('هل تريد تعليم جميع الرسائل كمقروءة؟');
    if(!ok) return;

    fetch('{{ route("simple-messages.mark-all-read") }}',{
        method:'POST',
        headers:{
            'X-CSRF-TOKEN':document.querySelector('meta[name="csrf-token"]').content,
            'Accept':'application/json',
            'X-Requested-With':'XMLHttpRequest'
        }
    })
    .then(res=>res.json())
    .then(data=>{
        if(!data.success){
            pmToast('error', data.message || 'تعذر تنفيذ العملية.');
            return;
        }

        // ✅ حوّل الكل لمقروء (Table + Cards)
        document.querySelectorAll('tr[data-pm-message][data-unread="1"]').forEach(row=>{
            const id = row.dataset.pmMessage;

            row.dataset.unread = '0';
            row.classList.remove('pm-unread-row');

            const badgeT = document.getElementById(`status-badge-table-${id}`);
            if(badgeT){
                badgeT.textContent = 'مقروء';
                badgeT.classList.remove('pm-status-new');
                badgeT.classList.add('pm-status-read');
            }

            const card = document.getElementById(`message-card-${id}`);
            if(card){
                card.dataset.unread = '0';
                card.classList.remove('pm-unread-card');

                const badgeC = document.getElementById(`status-badge-card-${id}`);
                if(badgeC){
                    badgeC.textContent = 'مقروء';
                    badgeC.classList.remove('pm-status-new');
                    badgeC.classList.add('pm-status-read');
                }

                const top = document.getElementById(`card-topbar-${id}`);
                if(top){
                    top.classList.remove('bg-emerald-500');
                    top.classList.add('bg-gray-200','dark:bg-gray-700');
                }
            }
        });

        // update pills
        const pill = document.getElementById('pm-unread-pill');
        if(pill) pill.textContent = '0';

        // hide mark all button
        document.getElementById('btn-mark-all')?.classList.add('hidden');

        pmToast('success', 'تم تعليم الكل كمقروء ✅');
        applyInboxFilters();
    })
    .catch(()=>pmToast('error','خطأ أثناء تعليم الكل كمقروء.'));
}

/* ============================
   Utils
============================ */
function debounce(fn, ms){
    let t;
    return function(...args){
        clearTimeout(t);
        t = setTimeout(()=>fn.apply(this,args), ms);
    }
}
function escapeHtml(str){
    return (str ?? '')
        .toString()
        .replaceAll('&','&amp;')
        .replaceAll('<','&lt;')
        .replaceAll('>','&gt;')
        .replaceAll('"','&quot;')
        .replaceAll("'",'&#039;');
}
</script>
@endsection