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

@section('title','المراقبة العامة — كل الفئات')
@section('page-title','المراقبة العامة — الأعضاء/المشرفون/الإداريون/المستشارون')

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

  {{-- شريط شرح مختصر --}}
  <div class="bg-white/80 dark:bg-gray-800 rounded-xl border border-white/20 p-4">
    <p class="text-sm text-gray-700 dark:text-gray-300">
      هذه الصفحة تجمع مراقبة كل الفئات في مكانٍ واحد: <b>الأعضاء</b>، <b>المشرفون</b>، <b>الإداريون</b>، <b>المستشارون</b>.
      تشمل كروت مُلخّص، قائمة <b>المتواجدون الآن</b>، وقوائم مختصرة لكل فئة. يدعم التحديث الحيّ للأونلاين.
    </p>
  </div>

  {{-- فلاتر --}}
  <form method="get" class="bg-white dark:bg-gray-800 rounded-xl p-4 grid grid-cols-1 md:grid-cols-5 gap-3 border border-white/20">
    <div>
      <label class="block text-xs text-gray-500">من تاريخ</label>
      <input type="date" name="from" value="{{ $from }}" class="w-full rounded border-gray-300 dark:bg-gray-700 dark:text-white">
    </div>
    <div>
      <label class="block text-xs text-gray-500">إلى تاريخ</label>
      <input type="date" name="to" value="{{ $to }}" class="w-full rounded border-gray-300 dark:bg-gray-700 dark:text-white">
    </div>
    <div>
      <label class="block text-xs text-gray-500">الفئة</label>
      <select name="role" class="w-full rounded border-gray-300 dark:bg-gray-700 dark:text-white">
        <option value="all"       @selected($role==='all')>الكل</option>
        <option value="member"    @selected($role==='member')>الأعضاء</option>
        <option value="moderator" @selected($role==='moderator')>المشرفون</option>
        <option value="admin"     @selected($role==='admin')>الإداريون</option>
        <option value="advisor"   @selected($role==='advisor')>المستشارون</option>
      </select>
    </div>
    <div class="md:col-span-2">
      <label class="block text-xs text-gray-500">بحث بالاسم/المعرّف</label>
      <div class="flex gap-2">
        <input type="text" name="q" value="{{ $q }}" class="flex-1 rounded border-gray-300 dark:bg-gray-700 dark:text-white" placeholder="ابحث…">
        <button class="px-4 py-2 bg-primary-600 text-white rounded hover:bg-primary-700">تحديث</button>
      </div>
    </div>
  </form>

  {{-- كروت الملخص --}}
  <div class="grid grid-cols-2 md:grid-cols-6 gap-3">
    <x-monitor-card title="إجمالي المستخدمين" value="{{ number_format($summary['all']) }}" color="indigo"/>
    <x-monitor-card title="أعضاء" value="{{ number_format($summary['members']) }}" color="cyan"/>
    <x-monitor-card title="مشرفون" value="{{ number_format($summary['moderators']) }}" color="violet"/>
    <x-monitor-card title="إداريون" value="{{ number_format($summary['admins']) }}" color="amber"/>
    <x-monitor-card title="مستشارون" value="{{ number_format($summary['advisors']) }}" color="emerald"/>
    <x-monitor-card title="أونلاين الآن" value="{{ number_format($summary['online']) }}" color="rose"/>
  </div>

  {{-- المتواجدون الآن (تحديث حي) --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl p-4 border border-white/20">
    <div class="flex items-center justify-between mb-3">
      <h3 class="font-bold text-gray-800 dark:text-white">المتواجدون الآن</h3>
      <span id="gm-updated" class="text-xs text-gray-500">—</span>
    </div>
    <div id="gm-online" class="divide-y divide-gray-100 dark:divide-gray-700">
      {{-- سيتم ملؤه عبر JS --}}
    </div>
    @if(!$has_live)
      <div class="text-xs text-amber-600 mt-2">❗ جدول <code>user_live_sessions</code> غير متوفر—تم عرض صفحة الملخص فقط.</div>
    @endif
  </div>

  {{-- قوائم مختصرة لكل فئة --}}
  <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
    @foreach (['member'=>'الأعضاء','moderator'=>'المشرفون','admin'=>'الإداريون','advisor'=>'المستشارون'] as $k=>$label)
      <div class="bg-white dark:bg-gray-800 rounded-xl p-4 border border-white/20">
        <h4 class="font-bold mb-2">{{ $label }}</h4>
        <div class="space-y-2">
        @forelse($groups[$k]->sortByDesc('minutes')->take(8) as $r)
          <div class="flex items-center justify-between text-sm">
            <div class="truncate">
              <div class="font-semibold text-gray-800 dark:text-white truncate">{{ $r['name'] }} <span class="text-gray-400">({{ $r['username'] }})</span></div>
              <div class="text-xs text-gray-500">دقائق: <b>{{ $r['minutes'] }}</b> • نقاط: <b>{{ $r['points'] }}</b> • مخالفات: <b>{{ $r['viol'] }}</b></div>
            </div>
            @if($r['online'])
              <span class="px-2 py-0.5 rounded-full bg-emerald-500/20 text-emerald-600 text-[11px]">أونلاين</span>
            @endif
          </div>
        @empty
          <div class="text-xs text-gray-500">لا يوجد بيانات.</div>
        @endforelse
        </div>
      </div>
    @endforeach
  </div>
</div>

{{-- كومبوننت الكرت --}}
@once
  @push('components')
  @php if(!function_exists('render_monitor_card')) {
    function render_monitor_card($title,$value,$color='indigo'){
      $map = [
        'indigo'=>'from-indigo-50 to-indigo-100 text-indigo-900 border-indigo-300',
        'cyan'  =>'from-cyan-50 to-cyan-100 text-cyan-900 border-cyan-300',
        'violet'=>'from-violet-50 to-violet-100 text-violet-900 border-violet-300',
        'amber' =>'from-amber-50 to-amber-100 text-amber-900 border-amber-300',
        'emerald'=>'from-emerald-50 to-emerald-100 text-emerald-900 border-emerald-300',
        'rose'  =>'from-rose-50 to-rose-100 text-rose-900 border-rose-300',
      ];
      $cls = $map[$color] ?? $map['indigo'];
      echo '<div class="rounded-xl p-3 bg-gradient-to-br '.$cls.' border-r-4">
              <div class="text-[12px]">'.e($title).'</div>
              <div class="text-2xl font-extrabold mt-1">'.e($value).'</div>
            </div>';
    }
  } @endphp
  @endpush

  @php
    if (!function_exists('monitor_card')) {
      function monitor_card($title,$value,$color='indigo'){ render_monitor_card($title,$value,$color); }
    }
  @endphp

  @php
    // Blade alias
  @endphp
  @php
    // Helper to call in blade: <x-monitor-card .../>
  @endphp
@endonce

@php
  // Blade "component" shortcut
  function x_monitor_card($t,$v,$c){ render_monitor_card($t,$v,$c); }
@endphp
@php
  // Allow <x-monitor-card .../> usage
@endphp
@php
  // Tiny directive
@endphp
@php
  // Use function inside blade:
@endphp
@php
// Blade tag style
@endphp
@php
// Provide anonymous component like tag
@endphp
{{-- استخدام --}}
@php
  // nothing - just helper
@endphp

@push('scripts')
<script>
// تعبئة المتواجدين الآن بالتحديث الحي
(function(){
  const wrap = document.getElementById('gm-online');
  const upd  = document.getElementById('gm-updated');
  const url  = "{{ route('superadmin.monitor.json') }}";

  function rowTpl(u){
    return `
      <div class="py-2 flex items-center justify-between">
        <div class="truncate">
          <div class="font-semibold text-gray-800 dark:text-white truncate">${u.name} <span class="text-gray-400">(${u.username})</span></div>
          <div class="text-xs text-gray-500">دور: <b>${u.role || '-'}</b></div>
        </div>
        <div class="text-xs text-gray-400">${u.last || ''}</div>
      </div>`;
  }

  async function load(){
    try{
      const res = await fetch(url, {headers:{'Accept':'application/json'}});
      if(!res.ok) throw new Error('net');
      const data = await res.json();
      upd.textContent = 'آخر تحديث: ' + (data.updated_at || '');
      const items = data.online || [];
      if(items.length === 0){
        wrap.innerHTML = `<div class="py-4 text-sm text-gray-500 dark:text-gray-400">لا أحد متواجد الآن.</div>`;
        return;
      }
      wrap.innerHTML = items.map(rowTpl).join('');
    }catch(e){ /* تجاهل مؤقت */ }
  }

  load();
  setInterval(load, 20000);
})();
</script>
@endpush

{{-- شورتكوت للكرت --}}
@php
  // <x-monitor-card title="" value="" color="" />
@endphp
@php
  if (!class_exists('XMonitorCardShim')) {
    class XMonitorCardShim {
      public $title; public $value; public $color;
      function __construct($p){ $this->title=$p['title']??''; $this->value=$p['value']??''; $this->color=$p['color']??'indigo'; }
      function render(){ render_monitor_card($this->title,$this->value,$this->color); }
      function __toString(){ ob_start(); $this->render(); return ob_get_clean(); }
    }
  }
@endphp
@php
  function x_monitor_card_tag($args){ $c = new XMonitorCardShim($args); echo $c; }
@endphp

{{-- استعمال سهل --}}
@php
  function component_monitor_card($args){ x_monitor_card_tag($args); }
@endphp

{{-- وسم مخصص بسيط --}}
@php
  if (!function_exists('x_monitor')) {
    function x_monitor($title,$value,$color='indigo'){ render_monitor_card($title,$value,$color); }
  }
@endphp

@endsection