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

@section('title','غرفة الصقر — الإداريون (مشرفون + سوبر أدمن)')
@section('page-title','🛡️ مراقبة الإداريين')

@section('content')
@php
  use Illuminate\Support\Str;

  // ترجمة اسم الصفحة حسب config/page_names
  $pageMap = config('page_names', []);
  $toArabic = function($raw) use ($pageMap) {
    $key = Str::of((string)$raw)->lower()
      ->replace([' ','.','/'],'-')->replaceMatches('/-+/', '-')->trim('-')->value();
    return $pageMap[$key] ?? Str::of($key)->replace('-', ' ')->title();
  };

  // Fallbacks آمنة
  $moderators   = $moderators   ?? collect();
  $admins       = $admins       ?? collect();
  $topPages     = $topPages     ?? collect();
  $activityData = $activityData ?? [];

  $scope = request('scope','moderators'); // moderators | admins | both

  $stats = array_merge([
    'total_moderators' => (method_exists($moderators,'total') ? $moderators->total() : (is_iterable($moderators)?count($moderators):0)),
    'total_admins'     => (method_exists($admins,'total')     ? $admins->total()     : (is_iterable($admins)?count($admins):0)),
    'active_today'     => 0,
    'online_now'       => 0,
    'avg_load'         => 0,
  ], $stats ?? []);

  // تنسيق السرعة
  $fmtMs = fn($ms)=> $ms>=1000 ? number_format($ms/1000,2).' ث' : (int)$ms.' ms';

  // بادج الدور
  $roleBadge = function($r){
    return match($r){
      'super-admin' => ['bg'=>'bg-rose-100 text-rose-800', 'label'=>'سوبر أدمن'],
      'moderator'   => ['bg'=>'bg-blue-100 text-blue-800', 'label'=>'مشرف'],
      default       => ['bg'=>'bg-gray-100 text-gray-800', 'label'=>$r],
    };
  };
@endphp

<div class="space-y-8 p-6">

  {{-- HERO --}}
  <div class="bg-white dark:bg-gray-900 rounded-2xl shadow p-6 border border-gray-200 dark:border-gray-700">
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
      <div>
        <h1 class="text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-white">🛡️ مراقبة المشرفين والإداريين</h1>
        <p class="text-gray-600 dark:text-gray-400 text-sm mt-2">
          تتبّع نشاط المشرفين والسوبر أدمن من حيث الجلسات، الصفحات، الأجهزة، ومتوسط السرعة. الفلاتر أدناه تحصر الفترة والنطاق.
        </p>
      </div>
      <span class="inline-flex items-center gap-2 px-3 py-1.5 text-xs font-semibold rounded-full
                   bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-200 border border-blue-200 dark:border-blue-800">
        <span class="h-2 w-2 rounded-full bg-blue-400 animate-pulse"></span> بيانات حقيقية من النظام
      </span>
    </div>
  </div>

  {{-- تبويبات النطاق --}}
  <div class="flex flex-wrap items-center gap-2 text-sm font-semibold border-b border-gray-200 dark:border-gray-700">
    @php
      $tabUrl = fn($s)=> route('superadmin.falcon-room.moderators', array_merge(request()->except('page','scope'), ['scope'=>$s]));
    @endphp
    <a href="{{ $tabUrl('moderators') }}" class="px-4 py-2 rounded-t-lg {{ $scope==='moderators' ? 'bg-blue-600 text-white' : 'bg-gray-200 dark:bg-gray-800 dark:text-gray-300 hover:bg-gray-300' }}">المشرفون</a>
    <a href="{{ $tabUrl('admins')     }}" class="px-4 py-2 rounded-t-lg {{ $scope==='admins'     ? 'bg-rose-600 text-white' : 'bg-gray-200 dark:bg-gray-800 dark:text-gray-300 hover:bg-gray-300' }}">السوبر أدمن</a>
    <a href="{{ $tabUrl('both')       }}" class="px-4 py-2 rounded-t-lg {{ $scope==='both'       ? 'bg-emerald-600 text-white' : 'bg-gray-200 dark:bg-gray-800 dark:text-gray-300 hover:bg-gray-300' }}">جميع الإداريين</a>
  </div>

  {{-- كروت الملخص --}}
  <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
    <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 text-blue-900 dark:text-white mt-1">{{ number_format($stats['total_moderators']) }}</p>
    </div>
    <div class="rounded-xl p-4 bg-gradient-to-br from-rose-50 to-rose-100 dark:from-rose-900 dark:to-rose-800 border-r-4 border-rose-500">
      <p class="text-rose-700 dark:text-rose-200 text-sm">إجمالي السوبر أدمن</p>
      <p class="text-3xl font-extrabold text-rose-900 dark:text-white mt-1">{{ number_format($stats['total_admins']) }}</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 text-emerald-900 dark:text-white mt-1">{{ number_format($stats['active_today']) }}</p>
    </div>
    <div class="rounded-xl p-4 bg-gradient-to-br from-cyan-50 to-cyan-100 dark:from-cyan-900 dark:to-cyan-800 border-r-4 border-cyan-500">
      <p class="text-cyan-700 dark:text-cyan-200 text-sm">متصل الآن</p>
      <p class="text-3xl font-extrabold text-cyan-900 dark:text-white mt-1">{{ number_format($stats['online_now']) }}</p>
    </div>
    <div class="rounded-xl p-4 bg-gradient-to-br from-violet-50 to-violet-100 dark:from-violet-900 dark:to-violet-800 border-r-4 border-violet-500">
      <p class="text-violet-700 dark:text-violet-200 text-sm">متوسط السرعة</p>
      <p class="text-3xl font-extrabold text-violet-900 dark:text-white mt-1">{{ $fmtMs($stats['avg_load']) }}</p>
    </div>
  </div>

  {{-- فلاتر البحث --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 border border-gray-100 dark:border-gray-700">
    <form method="GET" class="grid grid-cols-1 md:grid-cols-6 gap-3">
      <input type="hidden" name="scope" value="{{ $scope }}"/>

      <div class="md:col-span-2">
        <label class="block text-sm mb-1">بحث (اسم/إيميل/يوزر)</label>
        <input type="text" name="search" value="{{ request('search') }}"
               class="w-full rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700
                      text-gray-900 dark:text-white px-3 py-2.5" autocomplete="off">
      </div>

      <div>
        <label class="block text-sm mb-1">الجنس</label>
        <select name="gender"
                class="w-full rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700
                       text-gray-900 dark:text-white px-3 py-2.5">
          <option value="">الكل</option>
          <option value="male"   @selected(request('gender')==='male')>ذكر</option>
          <option value="female" @selected(request('gender')==='female')>أنثى</option>
        </select>
      </div>

      <div>
        <label class="block text-sm mb-1">من تاريخ</label>
        <input type="date" name="date_from" value="{{ request('date_from') }}"
               class="w-full rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700
                      text-gray-900 dark:text-white px-3 py-2.5">
      </div>

      <div>
        <label class="block text-sm mb-1">إلى تاريخ</label>
        <input type="date" name="date_to" value="{{ request('date_to') }}"
               class="w-full rounded-lg border-gray-600 bg-gray-50 dark:bg-gray-700
                      text-gray-900 dark:text-white px-3 py-2.5">
      </div>

      <div>
        <label class="block text-sm mb-1">ترتيب حسب</label>
        @php $sort = request('sort','last_activity'); @endphp
        <select name="sort"
                class="w-full rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700
                       text-gray-900 dark:text-white px-3 py-2.5">
          <option value="last_activity"  @selected($sort==='last_activity')>أحدث نشاط</option>
          <option value="total_pages"    @selected($sort==='total_pages')>أكثر صفحات</option>
          <option value="total_sessions" @selected($sort==='total_sessions')>أكثر جلسات</option>
          <option value="avg_load_time"  @selected($sort==='avg_load_time')>أبطأ سرعة</option>
          <option value="devices_count"  @selected($sort==='devices_count')>أكثر أجهزة</option>
        </select>
      </div>

      <div class="md:col-span-6 flex flex-col sm:flex-row gap-2 justify-end">
        <button class="px-4 py-2 rounded-lg bg-primary-600 text-white hover:bg-primary-700">🔎 بحث</button>
        <a href="{{ route('superadmin.falcon-room.moderators') }}" class="px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200">إعادة ضبط</a>
      </div>
    </form>
  </div>

  {{-- جداول العرض --}}
  @if($scope === 'both')
    {{-- جدول المشرفين --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow overflow-x-auto">
      <div class="px-4 pt-4 font-bold">المشرفون</div>
      @include('superadmin.falcon-room.partials._admins_table', ['rows' => $moderators, 'roleBadge'=>$roleBadge, 'fmtMs'=>$fmtMs])
    </div>
    {{-- جدول السوبر أدمن --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow overflow-x-auto mt-6">
      <div class="px-4 pt-4 font-bold">السوبر أدمن</div>
      @include('superadmin.falcon-room.partials._admins_table', ['rows' => $admins, 'roleBadge'=>$roleBadge, 'fmtMs'=>$fmtMs])
    </div>

    {{-- ترقيم (إن وجد لأي جدول) --}}
    @if(method_exists($moderators,'hasPages') && $moderators->hasPages())
      <div class="mt-4">{{ $moderators->withQueryString()->links() }}</div>
    @endif
    @if(method_exists($admins,'hasPages') && $admins->hasPages())
      <div class="mt-2">{{ $admins->withQueryString()->links() }}</div>
    @endif
  @else
    {{-- جدول واحد حسب النطاق --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow overflow-x-auto">
      @php $rows = $scope==='admins' ? $admins : $moderators; @endphp
      @include('superadmin.falcon-room.partials._admins_table', ['rows'=>$rows, 'roleBadge'=>$roleBadge, 'fmtMs'=>$fmtMs])
    </div>

    @if(method_exists($rows,'hasPages') && $rows->hasPages())
      <div class="mt-4">{{ $rows->withQueryString()->links() }}</div>
    @endif
  @endif

  {{-- أكثر الصفحات زيارة --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4">
    <h3 class="font-bold mb-4">📄 أكثر الصفحات زيارة</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
      @forelse($topPages as $p)
        <div class="p-3 rounded bg-gray-50 dark:bg-gray-900/30 flex items-center justify-between">
          <span class="truncate">{{ $toArabic($p->page_title ?? '—') }}</span>
          <span class="font-bold text-blue-600">{{ number_format($p->visits ?? 0) }} زيارة</span>
        </div>
      @empty
        <div class="text-sm text-gray-500">لا توجد بيانات صفحات.</div>
      @endforelse
    </div>
  </div>

  {{-- الرسم البياني للنشاط (14 يوم) --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6">
    <h3 class="font-bold mb-4">📈 النشاط اليومي (آخر 14 يومًا)</h3>
    <div style="height:300px"><canvas id="activityChart"></canvas></div>
  </div>

</div>
@endsection

{{-- Partial: جدول الإداريين (يُستخدم مرتين) --}}
@push('blade-partials')
{{-- يمكنك نقل هذا إلى resources/views/superadmin/falcon-room/partials/_admins_table.blade.php إن أردت --}}
<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">آخر نشاط</th>
      <th class="p-3 text-center">إجراءات</th>
    </tr>
  </thead>
  <tbody>
    @forelse($rows as $mod)
      @php
        $r = $roleBadge($mod->membership_status ?? 'moderator');
        $gender = ($mod->gender ?? '')==='female' ? ['lbl'=>'👩 أنثى','cls'=>'bg-pink-100 text-pink-800']
                                                  : ['lbl'=>'👨 ذكر','cls'=>'bg-blue-100 text-blue-800'];
      @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="{{ $mod->avatar_url ?? $mod->avatar ?? 'https://ui-avatars.com/api/?name='.urlencode($mod->name ?? 'مشرف') }}"
                 class="w-10 h-10 rounded-full object-cover">
            <div>
              <div class="font-semibold">{{ $mod->name ?? '—' }}</div>
              <div class="text-xs text-gray-500">{{ $mod->email ?? '—' }}</div>
            </div>
          </div>
        </td>
        <td class="p-3"><span class="px-2 py-1 rounded text-xs {{ $r['bg'] }}">{{ $r['label'] }}</span></td>
        <td class="p-3"><span class="px-2 py-1 rounded text-xs {{ $gender['cls'] }}">{{ $gender['lbl'] }}</span></td>
        <td class="p-3 text-center">{{ number_format($mod->total_sessions ?? 0) }}</td>
        <td class="p-3 text-center">{{ number_format($mod->total_pages_visited ?? 0) }}</td>
        <td class="p-3 text-center">{{ (int)($mod->devices_count ?? 0) }}</td>
        <td class="p-3 text-center">{{ $fmtMs($mod->avg_load_time ?? 0) }}</td>
        <td class="p-3 text-xs text-gray-500">{{ !empty($mod->last_activity) ? \Carbon\Carbon::parse($mod->last_activity)->diffForHumans() : '—' }}</td>
        <td class="p-3 text-center">
          <a href="{{ route('superadmin.falcon-room.user-details', $mod->id) }}" class="text-blue-600 hover:underline">📊 التفاصيل</a>
        </td>
      </tr>
    @empty
      <tr><td colspan="9" class="p-6 text-center text-gray-500 dark:text-gray-400">لا يوجد بيانات.</td></tr>
    @endforelse
  </tbody>
</table>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', ()=>{
  const ctx = document.getElementById('activityChart').getContext('2d');
  const data = @json($activityData);

  const labels = (data || []).map(d => d.date || '');
  const mods   = (data || []).map(d => +d.moderators || 0);
  const admins = (data || []).map(d => +d.admins || 0);

  new Chart(ctx, {
    type:'line',
    data:{
      labels: labels,
      datasets:[
        { label:'مشرفون', data:mods,   borderColor:'#3b82f6', backgroundColor:'rgba(59,130,246,0.1)', tension:0.35 },
        { label:'سوبر أدمن', data:admins, borderColor:'#f97316', backgroundColor:'rgba(249,115,22,0.1)', tension:0.35 },
      ]
    },
    options:{
      responsive:true, maintainAspectRatio:false,
      plugins:{ legend:{ labels:{ usePointStyle:true, boxWidth:8 } } },
      scales:{ y:{ beginAtZero:true } }
    }
  });
});
</script>
@endpush