@extends('layouts.superadmin')
@section('title','الرسائل — الأعضاء والدعم الفني')

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

    {{-- HERO --}}
    <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900/95 via-slate-900/98 to-black/98 border border-emerald-400/15 shadow-2xl shadow-emerald-500/10">
      <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-emerald-400/12 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-24 -left-10 w-72 h-72 rounded-full bg-cyan-400/10 blur-3xl"></div>

      <div class="p-5 sm:p-7 flex flex-col gap-3">
        <div class="flex items-center justify-between gap-3">
          <div class="flex items-center gap-3">
            <span class="inline-flex items-center justify-center w-11 h-11 rounded-2xl bg-emerald-500/15 border border-emerald-400/20 text-emerald-200">
              <i class="fa-solid fa-envelope-open-text"></i>
            </span>
            <div>
              <div class="text-white font-extrabold text-lg sm:text-xl">مركز الرسائل — Members Messages</div>
              <div class="text-white/60 text-xs sm:text-sm">رسائل خاصة + دعم فني — فلاتر وإحصائيات ومودلات رسمية</div>
            </div>
          </div>
          <div class="hidden sm:flex items-center gap-2 text-white/60 text-sm">
            <span>الفترة:</span>
            <span class="text-white/90 font-semibold">{{ $from }} → {{ $to }}</span>
          </div>
        </div>

        {{-- Tabs --}}
        <div class="flex flex-wrap gap-2 pt-1">
          <a href="{{ request()->fullUrlWithQuery(['behavior'=>'private']) }}"
             class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl border text-[12px] font-extrabold transition
             {{ $behavior==='private' ? 'bg-white/12 border-white/20 text-white' : 'bg-white/5 border-white/10 text-white/70 hover:text-white hover:bg-white/10' }}">
            <i class="fa-solid fa-user-lock text-[12px]"></i>
            الرسائل الخاصة
          </a>

          <a href="{{ request()->fullUrlWithQuery(['behavior'=>'support']) }}"
             class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl border text-[12px] font-extrabold transition
             {{ $behavior==='support' ? 'bg-white/12 border-white/20 text-white' : 'bg-white/5 border-white/10 text-white/70 hover:text-white hover:bg-white/10' }}">
            <i class="fa-solid fa-headset text-[12px]"></i>
            الدعم الفني
          </a>

          <div class="flex-1"></div>

          @if($behavior==='private')
            <button type="button" onclick="document.getElementById('composeModal').classList.remove('hidden')"
              class="inline-flex items-center gap-2 px-4 py-2 rounded-2xl bg-gradient-to-r from-emerald-600 to-cyan-500 text-white font-extrabold text-[12px]">
              <i class="fa-solid fa-paper-plane"></i>
              رسالة جديدة
            </button>
          @endif
        </div>
      </div>
    </div>

    {{-- FILTERS --}}
    <form method="GET" class="rounded-3xl border border-white/10 bg-white/5 backdrop-blur p-4 sm:p-5">
      <input type="hidden" name="section" value="members_messages">
      <input type="hidden" name="behavior" value="{{ $behavior }}">

      <div class="grid grid-cols-1 md:grid-cols-12 gap-3">

        <div class="md:col-span-2">
          <label class="text-[11px] text-white/60">من</label>
          <input name="from" value="{{ $from }}" type="date"
                 class="mt-1 w-full rounded-xl bg-slate-950/60 border border-white/10 text-white px-3 py-2 text-sm">
        </div>

        <div class="md:col-span-2">
          <label class="text-[11px] text-white/60">إلى</label>
          <input name="to" value="{{ $to }}" type="date"
                 class="mt-1 w-full rounded-xl bg-slate-950/60 border border-white/10 text-white px-3 py-2 text-sm">
        </div>

        <div class="md:col-span-3">
          <label class="text-[11px] text-white/60">اختيار عضو (أو عام)</label>
          <select name="user_id" class="mt-1 w-full rounded-xl bg-slate-950/60 border border-white/10 text-white px-3 py-2 text-sm">
            <option value="all" {{ $userId==='all' ? 'selected':'' }}>كل الأعضاء</option>
            @foreach($users as $u)
              <option value="{{ $u->id }}" {{ (string)$u->id === (string)$userId ? 'selected':'' }}>
                {{ $u->name }} @if($u->username) ({{ '@'.$u->username }}) @endif
              </option>
            @endforeach
          </select>
        </div>

        <div class="md:col-span-3">
          <label class="text-[11px] text-white/60">بحث</label>
          <input name="q" value="{{ $q }}" placeholder="subject / body / اسم / يوزر..."
                 class="mt-1 w-full rounded-xl bg-slate-950/60 border border-white/10 text-white placeholder-white/30 px-3 py-2 text-sm">
        </div>

        <div class="md:col-span-2">
          <label class="text-[11px] text-white/60">عرض</label>
          <select name="view" class="mt-1 w-full rounded-xl bg-slate-950/60 border border-white/10 text-white px-3 py-2 text-sm">
            <option value="table" {{ $view==='table'?'selected':'' }}>جدول</option>
            <option value="cards" {{ $view==='cards'?'selected':'' }}>كروت</option>
          </select>
        </div>

        {{-- PRIVATE ONLY FILTERS --}}
        @if($behavior==='private')
          <div class="md:col-span-2">
            <label class="text-[11px] text-white/60">صندوق</label>
            <select name="box" class="mt-1 w-full rounded-xl bg-slate-950/60 border border-white/10 text-white px-3 py-2 text-sm">
              <option value="inbox" {{ $pm['box']==='inbox'?'selected':'' }}>Inbox</option>
              <option value="sent" {{ $pm['box']==='sent'?'selected':'' }}>Sent</option>
              <option value="important" {{ $pm['box']==='important'?'selected':'' }}>Important</option>
              <option value="archived" {{ $pm['box']==='archived'?'selected':'' }}>Archived</option>
              <option value="all" {{ $pm['box']==='all'?'selected':'' }}>All</option>
            </select>
          </div>

          <div class="md:col-span-2">
            <label class="text-[11px] text-white/60">اتجاه</label>
            <select name="direction" class="mt-1 w-full rounded-xl bg-slate-950/60 border border-white/10 text-white px-3 py-2 text-sm">
              <option value="received" {{ $pm['direction']==='received'?'selected':'' }}>Received</option>
              <option value="sent" {{ $pm['direction']==='sent'?'selected':'' }}>Sent</option>
              <option value="any" {{ $pm['direction']==='any'?'selected':'' }}>Any</option>
            </select>
          </div>

          <div class="md:col-span-2">
            <label class="text-[11px] text-white/60">قراءة</label>
            <select name="read" class="mt-1 w-full rounded-xl bg-slate-950/60 border border-white/10 text-white px-3 py-2 text-sm">
              <option value="all" {{ $pm['read']==='all'?'selected':'' }}>All</option>
              <option value="unread" {{ $pm['read']==='unread'?'selected':'' }}>Unread</option>
              <option value="read" {{ $pm['read']==='read'?'selected':'' }}>Read</option>
            </select>
          </div>

          <div class="md:col-span-2">
            <label class="text-[11px] text-white/60">مهم</label>
            <select name="important" class="mt-1 w-full rounded-xl bg-slate-950/60 border border-white/10 text-white px-3 py-2 text-sm">
              <option value="all" {{ $pm['important']==='all'?'selected':'' }}>All</option>
              <option value="1" {{ $pm['important']==='1'?'selected':'' }}>Important only</option>
            </select>
          </div>

          <div class="md:col-span-2">
            <label class="text-[11px] text-white/60">ردود</label>
            <select name="has_replies" class="mt-1 w-full rounded-xl bg-slate-950/60 border border-white/10 text-white px-3 py-2 text-sm">
              <option value="all" {{ $pm['has_replies']==='all'?'selected':'' }}>All</option>
              <option value="1" {{ $pm['has_replies']==='1'?'selected':'' }}>Has replies</option>
            </select>
          </div>

          <div class="md:col-span-3">
            <label class="text-[11px] text-white/60">فلترة “من”</label>
            <select name="from_id" class="mt-1 w-full rounded-xl bg-slate-950/60 border border-white/10 text-white px-3 py-2 text-sm">
              <option value="" {{ $pm['from_id']===''?'selected':'' }}>—</option>
              @foreach($users as $u)
                <option value="{{ $u->id }}" {{ (string)$u->id === (string)$pm['from_id'] ? 'selected':'' }}>
                  {{ $u->name }} @if($u->username) ({{ '@'.$u->username }}) @endif
                </option>
              @endforeach
            </select>
          </div>

          <div class="md:col-span-3">
            <label class="text-[11px] text-white/60">فلترة “إلى”</label>
            <select name="to_id" class="mt-1 w-full rounded-xl bg-slate-950/60 border border-white/10 text-white px-3 py-2 text-sm">
              <option value="" {{ $pm['to_id']===''?'selected':'' }}>—</option>
              @foreach($users as $u)
                <option value="{{ $u->id }}" {{ (string)$u->id === (string)$pm['to_id'] ? 'selected':'' }}>
                  {{ $u->name }} @if($u->username) ({{ '@'.$u->username }}) @endif
                </option>
              @endforeach
            </select>
          </div>

          <div class="md:col-span-2">
            <label class="text-[11px] text-white/60">ترتيب</label>
            <select name="order" class="mt-1 w-full rounded-xl bg-slate-950/60 border border-white/10 text-white px-3 py-2 text-sm">
              <option value="latest" {{ $pm['order']==='latest'?'selected':'' }}>الأحدث</option>
              <option value="oldest" {{ $pm['order']==='oldest'?'selected':'' }}>الأقدم</option>
            </select>
          </div>
        @endif

        {{-- SUPPORT ONLY FILTERS --}}
        @if($behavior==='support')
          <div class="md:col-span-2">
            <label class="text-[11px] text-white/60">Status</label>
            <input name="status" value="{{ $supportFilters['status'] ?? '' }}" placeholder="open/replied/closed..."
              class="mt-1 w-full rounded-xl bg-slate-950/60 border border-white/10 text-white placeholder-white/30 px-3 py-2 text-sm">
          </div>

          <div class="md:col-span-2">
            <label class="text-[11px] text-white/60">Mine</label>
            <select name="mine" class="mt-1 w-full rounded-xl bg-slate-950/60 border border-white/10 text-white px-3 py-2 text-sm">
              <option value="" {{ ($supportFilters['mine'] ?? '')===''?'selected':'' }}>الكل</option>
              <option value="1" {{ ($supportFilters['mine'] ?? '')==='1'?'selected':'' }}>المسند إلي</option>
            </select>
          </div>

          <div class="md:col-span-3">
            <label class="text-[11px] text-white/60">Assigned To (id)</label>
            <input name="assigned_to" value="{{ $supportFilters['assigned_to'] ?? '' }}" placeholder="staff id"
              class="mt-1 w-full rounded-xl bg-slate-950/60 border border-white/10 text-white placeholder-white/30 px-3 py-2 text-sm">
          </div>
        @endif

        <div class="md:col-span-2 flex items-end">
          <button class="w-full rounded-2xl bg-gradient-to-r from-emerald-600 to-cyan-500 text-white font-extrabold py-2.5">
            تحديث
          </button>
        </div>

      </div>
    </form>

    {{-- SUMMARY --}}
    @if($behavior==='private')
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3">
        <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
          <div class="text-white/60 text-[11px]">الإجمالي</div>
          <div class="text-white font-extrabold text-2xl">{{ $privateSummary['total'] ?? 0 }}</div>
        </div>
        <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
          <div class="text-white/60 text-[11px]">غير مقروء</div>
          <div class="text-white font-extrabold text-2xl">{{ $privateSummary['unread'] ?? 0 }}</div>
        </div>
        <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
          <div class="text-white/60 text-[11px]">مهم</div>
          <div class="text-white font-extrabold text-2xl">{{ $privateSummary['important'] ?? 0 }}</div>
        </div>
        <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
          <div class="text-white/60 text-[11px]">مؤرشف</div>
          <div class="text-white font-extrabold text-2xl">{{ $privateSummary['archived'] ?? 0 }}</div>
        </div>
        <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
          <div class="text-white/60 text-[11px]">مع ردود</div>
          <div class="text-white font-extrabold text-2xl">{{ $privateSummary['with_replies'] ?? 0 }}</div>
        </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
        <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
          <div class="text-white font-extrabold mb-2">أكثر المُرسلين</div>
          <div class="space-y-2">
            @forelse($topSenders as $r)
              <div class="flex items-center justify-between text-sm bg-slate-950/40 border border-white/10 rounded-2xl px-3 py-2">
                <div class="text-white/85 font-semibold">{{ $r->name }} <span class="text-white/40">{{ $r->username ? '@'.$r->username : '' }}</span></div>
                <div class="text-white font-extrabold">{{ $r->c }}</div>
              </div>
            @empty
              <div class="text-white/60 text-sm">لا بيانات</div>
            @endforelse
          </div>
        </div>
        <div class="rounded-3xl border border-white/10 bg-white/5 p-4">
          <div class="text-white font-extrabold mb-2">أكثر المستلمين</div>
          <div class="space-y-2">
            @forelse($topReceivers as $r)
              <div class="flex items-center justify-between text-sm bg-slate-950/40 border border-white/10 rounded-2xl px-3 py-2">
                <div class="text-white/85 font-semibold">{{ $r->name }} <span class="text-white/40">{{ $r->username ? '@'.$r->username : '' }}</span></div>
                <div class="text-white font-extrabold">{{ $r->c }}</div>
              </div>
            @empty
              <div class="text-white/60 text-sm">لا بيانات</div>
            @endforelse
          </div>
        </div>
      </div>
    @endif

    @if($behavior==='support')
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
        <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
          <div class="text-white/60 text-[11px]">إجمالي التذاكر</div>
          <div class="text-white font-extrabold text-2xl">{{ $supportSummary['total'] ?? 0 }}</div>
        </div>
        <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
          <div class="text-white/60 text-[11px]">Open</div>
          <div class="text-white font-extrabold text-2xl">{{ $supportSummary['open'] ?? 0 }}</div>
        </div>
        <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
          <div class="text-white/60 text-[11px]">Closed</div>
          <div class="text-white font-extrabold text-2xl">{{ $supportSummary['closed'] ?? 0 }}</div>
        </div>
      </div>
    @endif

    {{-- LISTS --}}
    @if($behavior==='private')
      <div class="rounded-3xl border border-white/10 bg-white/5 p-4 sm:p-5">
        <div class="flex items-center justify-between mb-3">
          <div class="text-white font-extrabold">الرسائل الخاصة</div>
          <div class="text-white/60 text-sm">عدد النتائج: {{ $privateRows?->total() ?? 0 }}</div>
        </div>

        @if(!$privateRows || $privateRows->isEmpty())
          <div class="text-white/70">لا رسائل ضمن الفلاتر الحالية.</div>
        @else
          <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
              <thead>
                <tr class="text-white/60">
                  <th class="text-right py-2">التاريخ</th>
                  <th class="text-right py-2">الموضوع</th>
                  <th class="text-right py-2">من</th>
                  <th class="text-right py-2">إلى</th>
                  <th class="text-right py-2">حالة</th>
                  <th class="text-right py-2">ردود</th>
                  <th class="text-right py-2">أكشن</th>
                </tr>
              </thead>
              <tbody class="text-white/85">
                @foreach($privateRows as $m)
                  @php
                    $isUnread = is_null($m->read_at);
                    $isImp    = (bool)$m->important;
                    $isArch   = ((int)($m->archived_by_receiver ?? 0) === 1) || ((int)($m->archived_by_sender ?? 0) === 1);
                  @endphp
                  <tr class="border-t border-white/10">
                    <td class="py-3 font-bold">{{ \Carbon\Carbon::parse($m->created_at)->format('Y-m-d H:i') }}</td>
                    <td class="py-3">
                      <div class="font-extrabold">{{ $m->subject ?: '— بدون عنوان —' }}</div>
                      <div class="text-white/50 text-xs mt-1">{{ \Str::limit($m->body, 90) }}</div>
                    </td>
                    <td class="py-3">
                      <div class="font-semibold">{{ $m->sender?->name ?? ('#'.$m->sender_id) }}</div>
                      <div class="text-white/50 text-xs">{{ $m->sender?->username ? '@'.$m->sender->username : '' }}</div>
                    </td>
                    <td class="py-3">
                      <div class="font-semibold">{{ $m->receiver?->name ?? ('#'.$m->receiver_id) }}</div>
                      <div class="text-white/50 text-xs">{{ $m->receiver?->username ? '@'.$m->receiver->username : '' }}</div>
                    </td>
                    <td class="py-3">
                      @if($isUnread)
                        <span class="px-2 py-1 rounded-lg text-xs font-extrabold bg-sky-500/15 border border-sky-400/20 text-sky-200">UNREAD</span>
                      @else
                        <span class="px-2 py-1 rounded-lg text-xs font-extrabold bg-white/10 border border-white/10 text-white/80">READ</span>
                      @endif

                      @if($isImp)
                        <span class="mr-1 px-2 py-1 rounded-lg text-xs font-extrabold bg-amber-500/15 border border-amber-400/20 text-amber-200">★ IMPORTANT</span>
                      @endif

                      @if($isArch)
                        <span class="mr-1 px-2 py-1 rounded-lg text-xs font-extrabold bg-slate-500/15 border border-slate-400/20 text-slate-200">ARCHIVED</span>
                      @endif
                    </td>
                    <td class="py-3 font-extrabold">{{ (int)($m->replies_count ?? 0) }}</td>
                    <td class="py-3">
                      {{-- افتح الثريد تبعك --}}
                      <a href="{{ route('simple-messages.thread', $m->id) }}"
                         class="inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-white/10 border border-white/10 text-white text-xs font-extrabold">
                        <i class="fa-solid fa-comments"></i>
                        Thread
                      </a>
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>

          <div class="mt-4">{{ $privateRows->links() }}</div>
        @endif
      </div>
    @endif

    @if($behavior==='support')
      <div class="rounded-3xl border border-white/10 bg-white/5 p-4 sm:p-5">
        <div class="flex items-center justify-between mb-3">
          <div class="text-white font-extrabold">تذاكر الدعم الفني</div>
          <div class="text-white/60 text-sm">عدد النتائج: {{ $supportThreads?->total() ?? 0 }}</div>
        </div>

        @if(!$supportThreads || $supportThreads->isEmpty())
          <div class="text-white/70">لا تذاكر ضمن الفلاتر الحالية.</div>
        @else
          <div class="space-y-2">
            @foreach($supportThreads as $t)
              <a href="{{ route('support.show', $t) }}"
                 class="block rounded-2xl border border-white/10 bg-slate-950/40 hover:bg-white/10 transition px-4 py-3">
                <div class="flex items-center justify-between gap-3">
                  <div class="min-w-0">
                    <div class="text-white font-extrabold truncate">
                      #{{ $t->id }} — {{ $t->subject }}
                    </div>
                    <div class="text-white/60 text-xs mt-1">
                      <span>المنشئ: {{ $t->creator?->name ?? '—' }}</span>
                      @if($t->assignedTo)
                        <span class="mx-2">•</span>
                        <span>Assigned: {{ $t->assignedTo?->name }}</span>
                      @endif
                      <span class="mx-2">•</span>
                      <span>آخر تحديث: {{ \Carbon\Carbon::parse($t->last_message_at)->format('Y-m-d H:i') }}</span>
                    </div>
                  </div>

                  <div class="flex items-center gap-2">
                    <span class="px-2 py-1 rounded-lg text-xs font-extrabold bg-white/10 border border-white/10 text-white/80">
                      {{ $t->status }}
                    </span>

                    @if((int)($t->unread_count ?? 0) > 0)
                      <span class="px-2 py-1 rounded-lg text-xs font-extrabold bg-rose-500/15 border border-rose-400/20 text-rose-200">
                        UNREAD: {{ (int)$t->unread_count }}
                      </span>
                    @endif
                  </div>
                </div>
              </a>
            @endforeach
          </div>

          <div class="mt-4">{{ $supportThreads->links() }}</div>
        @endif
      </div>
    @endif

    {{-- ✅ COMPOSE MODAL (Private Messages) --}}
    <div id="composeModal" class="hidden fixed inset-0 z-[80]">
      <div class="absolute inset-0 bg-black/70 backdrop-blur-sm" onclick="document.getElementById('composeModal').classList.add('hidden')"></div>

      <div class="relative max-w-2xl mx-auto mt-10 sm:mt-16 px-3">
        <div class="rounded-3xl border border-white/10 bg-gradient-to-br from-slate-900/95 via-slate-900/98 to-black/98 shadow-2xl overflow-hidden">
          <div class="p-5 sm:p-6 flex items-center justify-between">
            <div class="text-white font-extrabold text-lg">إنشاء رسالة خاصة</div>
            <button type="button" class="text-white/70 hover:text-white"
              onclick="document.getElementById('composeModal').classList.add('hidden')">
              <i class="fa-solid fa-xmark text-xl"></i>
            </button>
          </div>

          <form method="POST" action="{{ route('simple-messages.store') }}" class="p-5 sm:p-6 pt-0 space-y-3">
            @csrf

            <div>
              <label class="text-[11px] text-white/60">إلى</label>
              <select name="receiver_id"
                class="mt-1 w-full rounded-xl bg-slate-950/60 border border-white/10 text-white px-3 py-2 text-sm" required>
                <option value="">اختر عضو</option>
                @foreach($users as $u)
                  @if((int)$u->id !== (int)auth()->id())
                    <option value="{{ $u->id }}">{{ $u->name }} @if($u->username) ({{ '@'.$u->username }}) @endif</option>
                  @endif
                @endforeach
              </select>
              <div class="text-white/40 text-[11px] mt-1">المرسل: حسابك الحالي (رسمي/آمن).</div>
            </div>

            <div>
              <label class="text-[11px] text-white/60">العنوان</label>
              <input name="subject" maxlength="255" placeholder="عنوان مختصر..."
                class="mt-1 w-full rounded-xl bg-slate-950/60 border border-white/10 text-white placeholder-white/30 px-3 py-2 text-sm">
            </div>

            <div>
              <label class="text-[11px] text-white/60">نص الرسالة</label>
              <textarea name="body" rows="6" required
                class="mt-1 w-full rounded-xl bg-slate-950/60 border border-white/10 text-white placeholder-white/30 px-3 py-2 text-sm"
                placeholder="اكتب رسالتك بشكل رسمي..."></textarea>
            </div>

            <div class="flex items-center justify-end gap-2 pt-2">
              <button type="button"
                onclick="document.getElementById('composeModal').classList.add('hidden')"
                class="px-4 py-2 rounded-2xl bg-white/10 border border-white/10 text-white/80 font-extrabold text-sm">
                إلغاء
              </button>
              <button class="px-4 py-2 rounded-2xl bg-gradient-to-r from-emerald-600 to-cyan-500 text-white font-extrabold text-sm">
                إرسال
              </button>
            </div>
          </form>

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

  </div>
</div>
@endsection