{{-- resources/views/superadmin/falcon/bans/index.blade.php --}}
@extends('layouts.superadmin')

@section('title', 'غرفة الصقر — نظام الحظر وإدارة الأعضاء')
@section('page-title', 'غرفة الصقر — نظام الحظر وإدارة الأعضاء')

@section('content')
@php
  use Illuminate\Contracts\Pagination\Paginator as PaginatorContract;
  $users      = $users ?? collect();
  $paginator  = ($users instanceof PaginatorContract) ? $users : null;
  $collection = $paginator ? $paginator->getCollection() : collect($users);
@endphp

{{-- هيرو علوي يشرح الفكرة --}}
<section class="relative overflow-hidden rounded-3xl border border-white/40 dark:border-gray-800 
                bg-gradient-to-br from-slate-900 via-slate-800 to-zinc-900
                text-white mb-6 shadow-lg">

  <div class="absolute inset-0 opacity-60">
    <div class="absolute -top-32 -end-16 w-72 h-72 rounded-full blur-3xl 
                bg-gradient-to-tr from-rose-500/40 via-amber-400/40 to-fuchsia-500/40"></div>
    <div class="absolute -bottom-40 -start-20 w-80 h-80 rounded-full blur-3xl 
                bg-gradient-to-tr from-cyan-500/40 via-emerald-400/40 to-sky-500/30"></div>
  </div>

  <div class="relative z-10 px-6 md:px-10 py-8 md:py-10">
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
      <div class="space-y-3 max-w-2xl">
        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full 
                    bg-rose-500/15 text-rose-100 border border-rose-400/40 text-xs font-semibold">
          <span class="h-1.5 w-1.5 rounded-full bg-rose-300 animate-pulse"></span>
          وحدة حساسة — صلاحيات محدودة
        </div>

        <h1 class="text-2xl md:text-3xl font-black tracking-tight">
          المركز اللوجستي — نظام الحظر وإدارة خروج الأعضاء
        </h1>

        <p class="text-sm md:text-[15px] leading-7 text-slate-100/80">
          من هنا تقدر تتحكم بحالة حسابات الأعضاء بشكل مركزي:
          <span class="font-semibold text-rose-200">حظر كامل</span> (منع استخدام النظام)،
          <span class="font-semibold text-amber-200">تعليق مؤقت</span> (عندك في UserController الأصلي)،
          و
          <span class="font-semibold text-emerald-200">إخراج من التيم</span> مع سبب واضح يبقى في ملفه.
        </p>

        <ul class="text-xs md:text-[13px] space-y-1 text-slate-100/80">
          <li>• <span class="font-semibold">الحظر (banned):</span> يمنع العضو من استخدام حسابه نهائيًا حتى يتم فك الحظر.</li>
          <li>• <span class="font-semibold">فك الحظر:</span> يرجّع حالة الحساب إلى <code class="bg-slate-800/80 px-1 rounded text-[11px]">active</code>.</li>
          <li>• <span class="font-semibold">خروج من التيم:</span> يعتمد على <code class="bg-slate-800/80 px-1 rounded text-[11px]">isLeft</code> 
              و دالة <code class="bg-slate-800/80 px-1 rounded text-[11px]">markAsLeft()</code> الموجودة عندك.</li>
        </ul>
      </div>

      {{-- كروت إحصائيات سريعة --}}
      <div class="grid grid-cols-2 gap-3 md:w-72">
        <div class="rounded-2xl p-3.5 bg-slate-900/70 border border-white/10 shadow-sm">
          <div class="flex items-center justify-between gap-2">
            <div>
              <p class="text-[11px] text-slate-400">أعضاء محظورين</p>
              <p class="mt-1 text-xl font-bold text-rose-200">{{ $stats['banned'] ?? 0 }}</p>
            </div>
            <div class="h-8 w-8 rounded-xl grid place-items-center bg-rose-500/20 text-rose-200">
              <i class="fa-solid fa-user-slash text-sm"></i>
            </div>
          </div>
        </div>
        <div class="rounded-2xl p-3.5 bg-slate-900/70 border border-white/10 shadow-sm">
          <div class="flex items-center justify-between gap-2">
            <div>
              <p class="text-[11px] text-slate-400">أعضاء غادروا التيم</p>
              <p class="mt-1 text-xl font-bold text-amber-200">{{ $stats['left'] ?? 0 }}</p>
            </div>
            <div class="h-8 w-8 rounded-xl grid place-items-center bg-amber-500/20 text-amber-100">
              <i class="fa-solid fa-door-open text-sm"></i>
            </div>
          </div>
        </div>
        <div class="rounded-2xl p-3.5 bg-slate-900/70 border border-white/10 shadow-sm">
          <div class="flex items-center justify-between gap-2">
            <div>
              <p class="text-[11px] text-slate-400">حسابات نشطة</p>
              <p class="mt-1 text-xl font-bold text-emerald-200">{{ $stats['active'] ?? 0 }}</p>
            </div>
            <div class="h-8 w-8 rounded-xl grid place-items-center bg-emerald-500/20 text-emerald-100">
              <i class="fa-solid fa-user-check text-sm"></i>
            </div>
          </div>
        </div>
        <div class="rounded-2xl p-3.5 bg-slate-900/70 border border-white/10 shadow-sm">
          <div class="flex items-center justify-between gap-2">
            <div>
              <p class="text-[11px] text-slate-400">كل الأعضاء</p>
              <p class="mt-1 text-xl font-bold text-slate-100">{{ $stats['total'] ?? 0 }}</p>
            </div>
            <div class="h-8 w-8 rounded-xl grid place-items-center bg-slate-700/60 text-slate-100">
              <i class="fa-solid fa-users text-sm"></i>
            </div>
          </div>
        </div>
      </div>

    </div>

    <p class="mt-4 text-[11px] text-slate-300/80">
      ⚠️ يفضّل كتابة سبب مختصر عند الحظر أو إخراج العضو من التيم، حتى تقدر ترجع له لاحقًا من ملفه الشخصي.
    </p>
  </div>
</section>

{{-- تنبيهات --}}
@if(session('success') || session('error'))
  <div class="mb-4 space-y-2">
    @if(session('success'))
      <div class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-emerald-800 text-sm">
        {{ session('success') }}
      </div>
    @endif
    @if(session('error'))
      <div class="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-rose-800 text-sm">
        {{ session('error') }}
      </div>
    @endif
  </div>
@endif

{{-- فلاتر أعلى قائمة الأعضاء --}}
<div class="mb-5 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-4 shadow-sm">
  <form method="GET" action="{{ route('superadmin.falcon.bans.index') }}" class="space-y-3">
    <div class="grid grid-cols-1 md:grid-cols-6 gap-3">
      <div class="md:col-span-2">
        <div class="relative">
          <input type="text" name="search" value="{{ request('search') }}"
                 placeholder="بحث (اسم / يوزر / إيميل)"
                 class="w-full pr-10 pl-3 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600
                        dark:bg-gray-800 dark:text-white focus:ring-2 focus:ring-rose-500 focus:border-transparent text-sm">
          <div class="absolute inset-y-0 right-0 pr-3 grid place-items-center pointer-events-none">
            <i class="fa-solid fa-magnifying-glass text-gray-400 text-xs"></i>
          </div>
        </div>
      </div>

      <div>
        <select name="membership_status"
                class="w-full py-2.5 px-3 rounded-lg border border-gray-300 dark:border-gray-600
                       dark:bg-gray-800 dark:text-white text-sm">
          <option value="">كل العضويات</option>
          <option value="official"     @selected(request('membership_status')=='official')>رسمي</option>
          <option value="beta"         @selected(request('membership_status')=='beta')>بيتا</option>
          <option value="moderator"    @selected(request('membership_status')=='moderator')>مشرف</option>
          <option value="advisor"      @selected(request('membership_status')=='advisor')>مستشار</option>
          <option value="super-admin"  @selected(request('membership_status')=='super-admin')>إدارة عليا</option>
        </select>
      </div>

      <div>
        <select name="account_status"
                class="w-full py-2.5 px-3 rounded-lg border border-gray-300 dark:border-gray-600
                       dark:bg-gray-800 dark:text-white text-sm">
          <option value="">كل الحالات</option>
          <option value="active"    @selected(request('account_status')=='active')>نشط</option>
          <option value="suspended" @selected(request('account_status')=='suspended')>معلّق</option>
          <option value="banned"    @selected(request('account_status')=='banned')>محظور</option>
        </select>
      </div>

      <div>
        <select name="team_status"
                class="w-full py-2.5 px-3 rounded-lg border border-gray-300 dark:border-gray-600
                       dark:bg-gray-800 dark:text-white text-sm">
          <option value="">داخل/خارج التيم</option>
          <option value="present" @selected(request('team_status')=='present')>داخل التيم</option>
          <option value="left"    @selected(request('team_status')=='left')>خارج التيم</option>
        </select>
      </div>

      <div class="flex items-stretch gap-2 md:justify-end">
        <button class="w-full md:w-auto inline-flex items-center justify-center gap-1.5 px-4 py-2.5
                       rounded-lg bg-rose-600 hover:bg-rose-700 text-white text-sm font-semibold
                       shadow-sm">
          <i class="fa-solid fa-filter text-xs"></i>
          <span>تصفية</span>
        </button>
      </div>
    </div>
  </form>
</div>

{{-- قائمة الأعضاء --}}
<div class="space-y-6">
  @if($collection->isEmpty())
    <div class="rounded-2xl border border-dashed border-gray-300 dark:border-gray-700
                bg-white dark:bg-gray-900 py-10 text-center">
      <p class="text-gray-500 dark:text-gray-300 text-sm">
        لا يوجد أعضاء حسب الفلاتر الحالية.
      </p>
    </div>
  @else
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
      @foreach($collection as $u)
        @php
          $status = $u->account_status ?? 'active';
          $isLeft = (bool)($u->isLeft ?? false);
          $avatarUrl = $u->avatar_url ?? (!empty($u->avatar) ? asset('storage/avatars/'.$u->avatar) : null);
        @endphp

        <div class="group bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700
                    rounded-2xl shadow-sm hover:shadow-md transition-all duration-300 flex flex-col">
          <div class="flex items-center gap-3 px-4 pt-4 pb-3 border-b border-gray-100 dark:border-gray-800">
            <div class="relative">
              @if($avatarUrl)
                <img src="{{ $avatarUrl }}" class="w-11 h-11 rounded-xl object-cover border border-white dark:border-gray-700 shadow-sm">
              @else
                <div class="w-11 h-11 rounded-xl grid place-items-center bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200">
                  {{ mb_substr($u->name ?? '؟',0,1) }}
                </div>
              @endif
            </div>
            <div class="min-w-0 flex-1">
              <div class="flex items-center gap-1.5">
                <p class="font-semibold text-sm text-gray-900 dark:text-white truncate">
                  {{ $u->name }}
                </p>
                @if($isLeft)
                  <span class="px-1.5 py-0.5 rounded-full text-[10px] bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-200">
                    خارج التيم
                  </span>
                @endif
              </div>
              <p class="text-[11px] text-gray-500 dark:text-gray-400 truncate">
                {{ $u->username }} • {{ $u->email }}
              </p>
            </div>
            {{-- شارة حالة الحساب --}}
            <div class="text-[10px] font-semibold">
              @if($status === 'banned')
                <span class="px-2 py-0.5 rounded-full bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-200">
                  محظور
                </span>
              @elseif($status === 'suspended')
                <span class="px-2 py-0.5 rounded-full bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-200">
                  معلّق
                </span>
              @else
                <span class="px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-200">
                  نشط
                </span>
              @endif
            </div>
          </div>

          {{-- أزرار التحكم --}}
          <div class="px-4 pt-3 pb-4 space-y-2 text-[13px]">
            {{-- حظر / فك حظر --}}
            <div class="flex flex-col sm:flex-row gap-2">
              @if($status !== 'banned')
                <form method="POST" action="{{ route('superadmin.falcon.bans.ban', $u) }}" class="flex-1"
                      onsubmit="return confirm('متأكد من حظر هذا العضو؟');">
                  @csrf
                  <input type="hidden" name="reason" value="">
                  <button type="submit"
                          class="w-full inline-flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg
                                 bg-rose-600 hover:bg-rose-700 text-white font-semibold text-xs">
                    <i class="fa-solid fa-user-slash text-[11px]"></i>
                    <span>حظر الحساب</span>
                  </button>
                </form>
              @else
                <form method="POST" action="{{ route('superadmin.falcon.bans.unban', $u) }}" class="flex-1"
                      onsubmit="return confirm('فك حظر هذا العضو؟');">
                  @csrf
                  <button type="submit"
                          class="w-full inline-flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg
                                 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold text-xs">
                    <i class="fa-solid fa-unlock text-[11px]"></i>
                    <span>فك الحظر</span>
                  </button>
                </form>
              @endif

              {{-- إخراج / إعادة للتيم --}}
              @if(!$isLeft)
                <form method="POST" action="{{ route('superadmin.falcon.bans.kick', $u) }}" class="flex-1"
                      onsubmit="return confirm('تأكيد إخراج هذا العضو من التيم؟');">
                  @csrf
                  <button type="submit"
                          class="w-full inline-flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg
                                 bg-amber-500 hover:bg-amber-600 text-white font-semibold text-xs">
                    <i class="fa-solid fa-door-open text-[11px]"></i>
                    <span>إخراج من التيم</span>
                  </button>
                </form>
              @else
                <form method="POST" action="{{ route('superadmin.falcon.bans.rejoin', $u) }}" class="flex-1"
                      onsubmit="return confirm('تأكيد إعادة هذا العضو إلى التيم؟');">
                  @csrf
                  <button type="submit"
                          class="w-full inline-flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg
                                 bg-emerald-500 hover:bg-emerald-600 text-white font-semibold text-xs">
                    <i class="fa-solid fa-rotate-left text-[11px]"></i>
                    <span>إرجاع للتيم</span>
                  </button>
                </form>
              @endif
            </div>

            {{-- ملاحظة سريعة (اختياري: نص إرشادي فقط) --}}
            <p class="text-[11px] text-gray-500 dark:text-gray-400">
              يمكن إضافة تفاصيل أكثر عن الحالة من صفحة تعديل العضو الرئيسية (ملاحظات إدارية، سبب الحظر، سبب الخروج...).
            </p>
          </div>
        </div>
      @endforeach
    </div>
  @endif
</div>

{{-- Pagination --}}
@if($paginator && $paginator->hasPages())
  <div class="mt-6">
    {{ $paginator->withQueryString()->links('pagination::tailwind') }}
  </div>
@endif

@endsection