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

@section('content')
<div class="p-6 space-y-6">

  {{-- العنوان + تبويبات سريعة --}}
  <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
    <h1 class="text-2xl font-bold">👥 مراقبة الأعضاء</h1>

    {{-- تبويبات النوع --}}
    @php
      $base = route('superadmin.falcon-room.members'); // غيّر الاسم إن كان مختلف
      $qs   = request()->except('membership_status','page');
      $link = function($status) use ($qs,$base){
        return $base.'?'.http_build_query(array_filter(array_merge($qs, ['membership_status'=>$status])));
      };
      $currentType = request('membership_status','all');
      $tabClass = function($t,$cur){
        return $t===$cur
          ? 'px-3 py-1 rounded-lg bg-primary-600 text-white font-semibold'
          : 'px-3 py-1 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200';
      };
    @endphp

    <div class="flex flex-wrap gap-2">
      <a href="{{ $link('all') }}"        class="{{ $tabClass('all', $currentType) }}">الكل</a>
      <a href="{{ $link('official') }}"   class="{{ $tabClass('official', $currentType) }}">الرسميون</a>
      <a href="{{ $link('beta') }}"       class="{{ $tabClass('beta', $currentType) }}">بيتا</a>
      <a href="{{ $link('moderator') }}"  class="{{ $tabClass('moderator', $currentType) }}">المشرفون</a>
    </div>
  </div>

  {{-- كروت إحصائيات سريعة --}}
  <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
    <div class="rounded-xl p-4 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 border-r-4 border-gray-500">
      <p class="text-gray-600 dark:text-gray-300 text-sm">إجمالي الأعضاء</p>
      <p class="text-3xl font-extrabold mt-1">{{ number_format($stats['total_members'] ?? $members->total()) }}</p>
    </div>
    <div class="rounded-xl p-4 bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900 dark:to-green-800 border-r-4 border-green-500">
      <p class="text-green-700 dark:text-green-200 text-sm">رسميون</p>
      <p class="text-3xl font-extrabold mt-1">{{ number_format($stats['official_count'] ?? 0) }}</p>
    </div>
    <div class="rounded-xl p-4 bg-gradient-to-br from-yellow-50 to-yellow-100 dark:from-yellow-900 dark:to-yellow-800 border-r-4 border-yellow-500">
      <p class="text-yellow-700 dark:text-yellow-200 text-sm">بيتا</p>
      <p class="text-3xl font-extrabold mt-1">{{ number_format($stats['beta_count'] ?? 0) }}</p>
    </div>
    <div class="rounded-xl p-4 bg-gradient-to-br from-emerald-50 to-emerald-100 dark:from-emerald-900 dark:to-emerald-800 border-r-4 border-emerald-500">
      <p class="text-emerald-700 dark:text-emerald-200 text-sm">نشِط اليوم</p>
      <p class="text-3xl font-extrabold mt-1 text-emerald-900 dark:text-white">{{ number_format($stats['active_today'] ?? 0) }}</p>
    </div>
    <div class="rounded-xl p-4 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900 dark:to-blue-800 border-r-4 border-blue-500">
      <p class="text-blue-700 dark:text-blue-200 text-sm">متصل الآن</p>
      <p class="text-3xl font-extrabold mt-1 text-blue-900 dark:text-white">{{ number_format($stats['online_now'] ?? 0) }}</p>
    </div>
  </div>

  {{-- فلاتر غنية --}}
  <form method="GET" class="bg-white dark:bg-gray-800 p-4 rounded shadow space-y-3">
    <div class="grid grid-cols-1 md:grid-cols-5 gap-3">
      <input type="text" name="search" value="{{ request('search') }}" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white px-3 py-2" placeholder="ابحث بالاسم / اليوزر / الإيميل">

      <select name="membership_status" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white px-3 py-2">
        <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>
      </select>

      <select name="account_status" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white px-3 py-2">
        <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>

      <input type="date" name="date_from" value="{{ request('date_from') }}" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white px-3 py-2" placeholder="من">
      <input type="date" name="date_to"   value="{{ request('date_to')   }}" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white px-3 py-2" placeholder="إلى">
    </div>

    <div class="flex flex-wrap items-center gap-3">
      <select name="sort" class="rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white px-3 py-2">
        @php $curSort = request('sort','last_activity'); @endphp
        <option value="last_activity"  @selected($curSort=='last_activity')>ترتيب: أحدث نشاط</option>
        <option value="minutes_today"  @selected($curSort=='minutes_today')>ترتيب: وقت اليوم</option>
        <option value="minutes_week"   @selected($curSort=='minutes_week')>ترتيب: وقت الأسبوع</option>
        <option value="minutes_month"  @selected($curSort=='minutes_month')>ترتيب: وقت الشهر</option>
        <option value="sessions_today" @selected($curSort=='sessions_today')>ترتيب: جلسات اليوم</option>
      </select>
      <select name="dir" class="rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-white px-3 py-2">
        <option value="desc" @selected(request('dir','desc')=='desc')>تنازلي</option>
        <option value="asc"  @selected(request('dir')=='asc')>تصاعدي</option>
      </select>
      <button type="submit" class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg">🔍 بحث</button>
      <a href="{{ route('superadmin.falcon-room.members') }}" class="px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200">إعادة ضبط</a>

      {{-- تصدير CSV (اختياري) --}}
      @php $exportRoute = route('superadmin.falcon.members.export', request()->all()); @endphp
      <a href="{{ $exportRoute }}" class="ml-auto px-3 py-2 rounded-lg bg-emerald-600 text-white hover:bg-emerald-700">⬇️ تصدير CSV</a>
    </div>
  </form>

  {{-- جدول الأعضاء --}}
  <div class="bg-white dark:bg-gray-800 rounded shadow overflow-x-auto">
    <table class="w-full text-sm">
      <thead class="bg-gray-50 dark:bg-gray-900/40">
        <tr class="text-right">
          <th class="p-3">العضو</th>
          <th class="p-3">النوع</th>
          <th class="p-3">الحالة</th>
          <th class="p-3">متصل الآن</th>
          <th class="p-3">جلسات (اليوم/الأسبوع/الشهر)</th>
          <th class="p-3">الوقت (اليوم/الأسبوع/الشهر)</th>
          <th class="p-3">الأجهزة</th>
          <th class="p-3">IPs</th>
          <th class="p-3">آخر نشاط</th>
          <th class="p-3 text-center">إجراءات</th>
        </tr>
      </thead>
      <tbody>
        @forelse($members as $member)
        @php
          $badgeType = [
            'official'  => ['bg'=>'bg-green-100 text-green-800','label'=>'رسمي'],
            'beta'      => ['bg'=>'bg-yellow-100 text-yellow-800','label'=>'بيتا'],
            'moderator' => ['bg'=>'bg-blue-100 text-blue-800','label'=>'مشرف'],
            'advisor'   => ['bg'=>'bg-purple-100 text-purple-800','label'=>'مستشار'],
            'super-admin'=>['bg'=>'bg-red-100 text-red-800','label'=>'إدارة عليا'],
        ];
          $type   = $badgeType[$member->membership_status ?? 'beta'] ?? ['bg'=>'bg-gray-100 text-gray-800','label'=>'عضو'];
          $isOn   = (bool)($member->is_online ?? false);
          $la     = $member->last_activity ? \Carbon\Carbon::parse($member->last_activity)->diffForHumans() : '—';
          $fmtM   = fn($m)=> is_null($m)?'—':(int)$m.' د';
        @endphp

        <tr class="border-t hover:bg-gray-50 dark:hover:bg-gray-900/30">
          <td class="p-3">
            <div class="flex items-center gap-2">
              <img src="{{ $member->avatar_url ?? 'https://ui-avatars.com/api/?name='.urlencode($member->name ?? 'عضو') }}"
                   class="w-10 h-10 rounded-full object-cover">
              <div>
                <div class="font-semibold">{{ $member->name ?? 'عضو' }}</div>
                <div class="text-xs text-gray-500">{{ $member->username ?? $member->email ?? '' }}</div>
              </div>
            </div>
          </td>

          <td class="p-3">
            <span class="px-2 py-1 rounded text-xs {{ $type['bg'] }}">{{ $type['label'] }}</span>
          </td>

          <td class="p-3">
            @if(($member->account_status ?? 'active') === 'active')
              <span class="px-2 py-1 text-xs rounded bg-emerald-50 text-emerald-700">نشط</span>
            @elseif(($member->account_status ?? '') === 'suspended')
              <span class="px-2 py-1 text-xs rounded bg-amber-50 text-amber-700">معلق</span>
            @else
              <span class="px-2 py-1 text-xs rounded bg-rose-50 text-rose-700">محظور</span>
            @endif
          </td>

          <td class="p-3">
            <div class="flex items-center gap-1">
              <span class="w-2 h-2 rounded-full {{ $isOn ? 'bg-green-500 animate-pulse' : 'bg-gray-300' }}"></span>
              <span class="text-xs">{{ $isOn ? 'متصل الآن' : 'غير متصل' }}</span>
            </div>
          </td>

          <td class="p-3">
            <div class="text-xs">
              {{ (int)($member->sessions_today  ?? 0) }} / {{ (int)($member->sessions_week  ?? 0) }} / {{ (int)($member->sessions_month ?? 0) }}
            </div>
          </td>

          <td class="p-3">
            <div class="text-xs">
              {{ $fmtM($member->minutes_today ?? null) }} /
              {{ $fmtM($member->minutes_week  ?? null) }} /
              {{ $fmtM($member->minutes_month ?? null) }}
            </div>
          </td>

          <td class="p-3">{{ (int)($member->unique_devices ?? 0) }}</td>
          <td class="p-3">
            <span class="{{ (int)($member->unique_ips ?? 0) > 3 ? 'text-red-600 font-bold' : '' }}">
              {{ (int)($member->unique_ips ?? 0) }}
            </span>
          </td>

          <td class="p-3 text-xs">{{ $la }}</td>

          <td class="p-3 text-center">
            <a href="{{ route('superadmin.falcon-room.user-details', $member->id) }}"
               class="text-primary-600 hover:underline">📊 التفاصيل</a>
          </td>
        </tr>
        @empty
        <tr><td colspan="10" class="p-6 text-center text-gray-500 dark:text-gray-400">لا يوجد نتائج.</td></tr>
        @endforelse
      </tbody>
    </table>
  </div>

  {{-- Pagination --}}
  @if($members->hasPages())
  <div class="mt-6 flex items-center justify-between bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
    <div class="text-sm text-gray-600 dark:text-gray-300">
      عرض {{ $members->firstItem() }} - {{ $members->lastItem() }} من أصل {{ $members->total() }} عضو
    </div>
    <div class="flex gap-2">
      {{-- Previous --}}
      @if($members->onFirstPage())
        <span class="px-3 py-2 bg-gray-100 dark:bg-gray-700 text-gray-400 rounded cursor-not-allowed">السابق</span>
      @else
        <a href="{{ $members->previousPageUrl() }}" class="px-3 py-2 bg-primary-600 text-white rounded hover:bg-primary-700">السابق</a>
      @endif

      {{-- Numbers --}}
      @foreach(range(1, $members->lastPage()) as $page)
        @if($page == $members->currentPage())
          <span class="px-3 py-2 bg-primary-600 text-white rounded font-bold">{{ $page }}</span>
        @else
          <a href="{{ $members->url($page) }}" class="px-3 py-2 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 rounded">{{ $page }}</a>
        @endif
      @endforeach

      {{-- Next --}}
      @if($members->hasMorePages())
        <a href="{{ $members->nextPageUrl() }}" class="px-3 py-2 bg-primary-600 text-white rounded hover:bg-primary-700">التالي</a>
      @else
        <span class="px-3 py-2 bg-gray-100 dark:bg-gray-700 text-gray-400 rounded cursor-not-allowed">التالي</span>
      @endif
    </div>
  </div>
  @endif

</div>
@endsection