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

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

  $suspiciousIPs = $suspiciousIPs ?? collect();
  $deviceStats   = $deviceStats ?? collect();
  $browserStats  = $browserStats ?? collect();
  $devices       = $devices ?? collect();
  $membersUsage  = $membersUsage ?? collect();

  $totalDevices  = (int) $deviceStats->sum('count');
  $totalBrowsers = (int) $browserStats->sum('count');

  // بعض مؤشرات SOCratic (اختيارية/تقديرية)
  $suspCount = (int) $suspiciousIPs->count();
  $topSusIP  = $suspiciousIPs->sortByDesc('users_count')->first();

  // تقدير: عدد الصفوف المعروضة (أو total لو paginator)
  $devicesCountShown = method_exists($devices,'count') ? $devices->count() : 0;

  // تواجد الأعضاء (اليوم/الأسبوع/الشهر) — كما عندك
  $fmt = function($mins){
      $mins = (int)max(0,$mins);
      $h=intdiv($mins,60); $m=$mins%60;
      return ($h?$h.' س':'0 س').' '.$m.' د';
  };
  $sumToday  = (int) $membersUsage->sum('minutes_today');
  $sumWeek   = (int) $membersUsage->sum('minutes_week');
  $sumMonth  = (int) $membersUsage->sum('minutes_month');
  $peopleCnt = method_exists($membersUsage,'total') ? $membersUsage->total() : $membersUsage->count();

  // أدوات صغيرة
  $pct = function($part,$total){
      $total = (float)$total;
      if ($total <= 0) return 0;
      return round(((float)$part / $total) * 100, 1);
  };

  $badgeLevel = function($usersCount){
      $n = (int)$usersCount;
      if ($n >= 8) return ['حرج','bg-rose-500/15 text-rose-200 ring-rose-400/30'];
      if ($n >= 4) return ['مشبوه','bg-amber-500/15 text-amber-200 ring-amber-400/30'];
      return ['طبيعي','bg-emerald-500/15 text-emerald-200 ring-emerald-400/30'];
  };
@endphp

<div class="px-4 sm:px-6 lg:px-8 py-6 space-y-6">

  {{-- HERO (Socratic) --}}
  <div class="relative overflow-hidden rounded-3xl border border-rose-500/20 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950
              shadow-[0_25px_80px_rgba(2,6,23,0.55)]">
    <div class="absolute inset-0 pointer-events-none">
      <div class="absolute -top-24 -right-16 h-72 w-72 rounded-full blur-3xl bg-rose-500/14"></div>
      <div class="absolute -bottom-24 -left-16 h-80 w-80 rounded-full blur-3xl bg-cyan-500/12"></div>
      <div class="absolute inset-0 bg-white/5 backdrop-blur-2xl"></div>
    </div>

    <div class="relative p-5 sm:p-7 space-y-4">
      <div class="flex items-start justify-between gap-3">
        <div class="space-y-1">
          <h1 class="text-xl sm:text-2xl font-extrabold text-white flex items-center gap-2">
            <span class="inline-flex items-center justify-center w-9 h-9 rounded-2xl bg-rose-500/15 border border-rose-400/25 text-rose-200">
              <i class="fa-solid fa-shield-halved text-sm"></i>
            </span>
            مراقبة الأجهزة والـ IPs — سقراط
          </h1>
          <p class="text-white/70 text-[12px] sm:text-[13px]">
            أسئلة سقراط: هل يوجد مشاركة IP غير طبيعية؟ هل هناك جهاز يُستخدم من عدة حسابات؟ أين مصدر المخاطر قبل أن تتحول لاختراق؟
          </p>
        </div>

        <div class="text-right">
          <div class="text-[11px] text-white/55">آخر تحديث</div>
          <div class="text-[12px] font-bold text-white">{{ now()->format('H:i:s') }}</div>
        </div>
      </div>

      {{-- Why it matters --}}
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-3">
        <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
          <div class="text-[12px] text-white/60">لماذا مهم؟</div>
          <div class="text-[13px] font-semibold text-white mt-1">الأجهزة/IP = بصمة سلوك</div>
          <div class="text-[11px] text-white/55 mt-1">تكرار نفس IP على حسابات كثيرة قد يشير لحسابات وهمية أو مشاركة غير طبيعية.</div>
        </div>
        <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
          <div class="text-[12px] text-white/60">هدف التحقيق</div>
          <div class="text-[13px] font-semibold text-white mt-1">اكتشاف التجمعات</div>
          <div class="text-[11px] text-white/55 mt-1">ركز على IP يستخدمه 4+ مستخدمين أو جهاز له تعدد حسابات.</div>
        </div>
        <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
          <div class="text-[12px] text-white/60">مؤشر خطر سريع</div>
          <div class="flex items-center justify-between mt-1">
            <div class="text-[13px] font-extrabold text-white">{{ number_format($suspCount) }}</div>
            <span class="inline-flex items-center justify-center px-2 py-0.5 rounded-full text-[10px] font-bold ring-1
                         {{ $suspCount ? 'bg-rose-500/15 text-rose-200 ring-rose-400/30' : 'bg-emerald-500/15 text-emerald-200 ring-emerald-400/30' }}">
              {{ $suspCount ? 'IPs مشبوهة' : 'الوضع مستقر' }}
            </span>
          </div>
          <div class="text-[11px] text-white/55 mt-1">IPs مستخدمة من عدة مستخدمين.</div>
        </div>
      </div>
    </div>
  </div>

  {{-- KPI Cards --}}
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
    <div class="rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl p-4 shadow-lg">
      <div class="text-[11px] text-slate-500 dark:text-white/55">IPs مشبوهة</div>
      <div class="text-2xl font-extrabold text-slate-900 dark:text-white mt-1">{{ number_format($suspCount) }}</div>
      <div class="text-[10px] text-slate-500 dark:text-white/45 mt-1">يستحق المتابعة الفورية عند الارتفاع</div>
    </div>

    <div class="rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl p-4 shadow-lg">
      <div class="text-[11px] text-slate-500 dark:text-white/55">أكثر IP مشاركة</div>
      <div class="text-[13px] font-extrabold text-slate-900 dark:text-white mt-1 font-mono">
        {{ $topSusIP->ip_address ?? '—' }}
      </div>
      <div class="text-[10px] text-slate-500 dark:text-white/45 mt-1">
        {{ isset($topSusIP->users_count) ? ('مستخدمين: '.number_format($topSusIP->users_count)) : '—' }}
      </div>
    </div>

    <div class="rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl p-4 shadow-lg">
      <div class="text-[11px] text-slate-500 dark:text-white/55">تنوع الأجهزة</div>
      <div class="text-2xl font-extrabold text-slate-900 dark:text-white mt-1">{{ number_format($deviceStats->count()) }}</div>
      <div class="text-[10px] text-slate-500 dark:text-white/45 mt-1">عدد أنواع الأجهزة المسجلة</div>
    </div>

    <div class="rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl p-4 shadow-lg">
      <div class="text-[11px] text-slate-500 dark:text-white/55">سجل الأجهزة (المعروض)</div>
      <div class="text-2xl font-extrabold text-slate-900 dark:text-white mt-1">{{ number_format($devicesCountShown) }}</div>
      <div class="text-[10px] text-slate-500 dark:text-white/45 mt-1">صفوف معروضة بالجدول الحالي</div>
    </div>
  </div>

  {{-- تنبيه IPs المشبوهة --}}
  @if($suspCount > 0)
    <div class="rounded-2xl border border-rose-400/25 bg-rose-50/80 dark:bg-rose-900/15 backdrop-blur-xl shadow-lg overflow-hidden">
      <div class="p-4 sm:p-5 flex items-center justify-between">
        <div>
          <h3 class="font-extrabold text-rose-900 dark:text-rose-100">⚠️ تنبيه: IPs مشبوهة</h3>
          <p class="text-[12px] text-rose-800/80 dark:text-rose-100/70 mt-1">
            تم اكتشاف {{ number_format($suspCount) }} عنوان IP مستخدم من قبل أكثر من 3 مستخدمين.
            (سقراط: هل هذا “مكتب/مدرسة” أم “تجمع حسابات”؟)
          </p>
        </div>
        <span class="inline-flex items-center justify-center px-3 py-1 rounded-full text-[11px] font-bold
                     bg-rose-500/15 text-rose-800 dark:text-rose-200 ring-1 ring-rose-400/30">
          أعلى مخاطرة
        </span>
      </div>

      <div class="px-4 sm:px-5 pb-5 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
        @foreach($suspiciousIPs as $ip)
          @php
            [$lvl,$cls] = $badgeLevel($ip->users_count ?? 0);
          @endphp
          <div class="rounded-2xl border border-white/40 dark:border-white/10 bg-white/80 dark:bg-white/5 p-4">
            <div class="flex items-center justify-between gap-2">
              <div class="font-mono text-[12px] font-extrabold text-slate-900 dark:text-white">
                {{ $ip->ip_address }}
              </div>
              <span class="inline-flex items-center justify-center px-2 py-0.5 rounded-full text-[10px] font-bold ring-1 {{ $cls }}">
                {{ $lvl }}
              </span>
            </div>
            <div class="mt-2 flex items-center justify-between text-[12px] text-slate-700 dark:text-white/70">
              <span>مستخدمين</span>
              <span class="font-extrabold text-rose-700 dark:text-rose-200">{{ number_format($ip->users_count) }}</span>
            </div>
            <div class="mt-2 text-[11px] text-slate-500 dark:text-white/45">
              إجراء مقترح: راجع الحسابات المرتبطة، تحقق من نمط الدخول، وراقب الزيادة خلال 24 ساعة.
            </div>
          </div>
        @endforeach
      </div>
    </div>
  @endif

  {{-- إحصائيات الأجهزة والمتصفحات (Charts + Bars + Explanation) --}}
  <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">

    {{-- توزيع الأجهزة --}}
    <div class="rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl p-4 shadow-lg">
      <div class="flex items-center justify-between">
        <h3 class="font-extrabold text-slate-800 dark:text-white">📱 توزيع الأجهزة</h3>
        <span class="text-[11px] text-slate-500 dark:text-white/50">Devices Mix</span>
      </div>
      <p class="text-[12px] text-slate-500 dark:text-white/55 mt-1">
        سقراط: هل الأداء/المشاكل تأتي من موبايل أكثر؟ معرفة النسبة تساعدك تبني قرارات UX.
      </p>

      <div class="mt-3 h-[240px]">
        @if($deviceStats->count())
          <canvas id="devicesPie"></canvas>
        @else
          <div class="h-full grid place-items-center text-[12px] text-slate-500 dark:text-white/50">لا توجد بيانات.</div>
        @endif
      </div>

      <div class="mt-4 space-y-3">
        @foreach($deviceStats as $device)
          @php $percentage = $pct($device->count ?? 0, $totalDevices); @endphp
          <div>
            <div class="flex justify-between mb-1 text-[12px] text-slate-700 dark:text-white/70">
              <span class="font-semibold">{{ $device->device_type ?? 'غير محدد' }}</span>
              <span class="font-extrabold">{{ $percentage }}%</span>
            </div>
            <div class="w-full bg-slate-200/80 dark:bg-white/10 rounded-full h-2">
              <div class="bg-cyan-600 h-2 rounded-full" style="width: {{ $percentage }}%"></div>
            </div>
          </div>
        @endforeach
      </div>
    </div>

    {{-- توزيع المتصفحات --}}
    <div class="rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl p-4 shadow-lg">
      <div class="flex items-center justify-between">
        <h3 class="font-extrabold text-slate-800 dark:text-white">🌐 توزيع المتصفحات</h3>
        <span class="text-[11px] text-slate-500 dark:text-white/50">Browsers Mix</span>
      </div>
      <p class="text-[12px] text-slate-500 dark:text-white/55 mt-1">
        سقراط: هل هناك متصفح يسبب سلوك غريب؟ (مثل كاش/إضافات/حظر سكربتات)
      </p>

      <div class="mt-3 h-[240px]">
        @if($browserStats->count())
          <canvas id="browsersPie"></canvas>
        @else
          <div class="h-full grid place-items-center text-[12px] text-slate-500 dark:text-white/50">لا توجد بيانات.</div>
        @endif
      </div>

      <div class="mt-4 space-y-3">
        @foreach($browserStats as $browser)
          @php $percentage = $pct($browser->count ?? 0, $totalBrowsers); @endphp
          <div>
            <div class="flex justify-between mb-1 text-[12px] text-slate-700 dark:text-white/70">
              <span class="font-semibold">{{ $browser->browser ?? 'غير محدد' }}</span>
              <span class="font-extrabold">{{ $percentage }}%</span>
            </div>
            <div class="w-full bg-slate-200/80 dark:bg-white/10 rounded-full h-2">
              <div class="bg-emerald-600 h-2 rounded-full" style="width: {{ $percentage }}%"></div>
            </div>
          </div>
        @endforeach
      </div>
    </div>

  </div>

  {{-- جدول الأجهزة التفصيلي (Socratic Table) --}}
  <div class="rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl shadow-lg overflow-hidden">
    <div class="p-4 sm:p-5 flex items-center justify-between">
      <div>
        <h3 class="font-extrabold text-slate-800 dark:text-white">🧾 سجل الأجهزة التفصيلي</h3>
        <p class="text-[12px] text-slate-500 dark:text-white/55 mt-1">
          سقراط: ابحث عن “جهاز واحد + عدة حسابات” أو “IP واحد + عدة حسابات” ثم اربطها بسلوك المستخدم.
        </p>
      </div>
      <span class="inline-flex items-center justify-center px-3 py-1 rounded-full text-[11px] font-bold
                   bg-slate-500/10 text-slate-700 dark:text-white/70 ring-1 ring-white/10">
        آخر البيانات
      </span>
    </div>

    <div class="overflow-x-auto">
      <table class="min-w-[1100px] w-full text-sm">
        <thead class="bg-slate-50/80 dark:bg-white/5">
          <tr class="text-right text-slate-600 dark:text-white/70">
            <th class="p-3">نوع الجهاز</th>
            <th class="p-3">المتصفح</th>
            <th class="p-3">نظام التشغيل</th>
            <th class="p-3">IP Address</th>
            <th class="p-3">عدد المستخدمين</th>
            <th class="p-3">مرات الاستخدام</th>
            <th class="p-3">آخر استخدام</th>
          </tr>
        </thead>
        <tbody>
          @foreach(($devices ?? collect()) as $device)
            @php
              $uc = (int)($device->users_count ?? 0);
              [$lvl,$cls] = $badgeLevel($uc);
            @endphp
            <tr class="border-t border-slate-200/60 dark:border-white/10 hover:bg-slate-50/70 dark:hover:bg-white/5">
              <td class="p-3">
                <span class="inline-flex items-center gap-2 px-2 py-1 rounded-xl text-xs
                             bg-cyan-500/10 text-cyan-800 dark:bg-cyan-500/10 dark:text-cyan-200 ring-1 ring-cyan-400/20">
                  <i class="fa-solid fa-mobile-screen-button text-[11px] opacity-80"></i>
                  {{ $device->device_type ?? 'Unknown' }}
                </span>
              </td>
              <td class="p-3 text-slate-700 dark:text-white/70">{{ $device->browser ?? 'Unknown' }}</td>
              <td class="p-3 text-slate-700 dark:text-white/70">{{ $device->os ?? 'Unknown' }}</td>
              <td class="p-3">
                <span class="font-mono text-[11px] text-slate-700 dark:text-white/70">{{ $device->ip_address }}</span>
              </td>
              <td class="p-3">
                <div class="flex items-center gap-2">
                  <span class="font-extrabold {{ $uc > 3 ? 'text-rose-700 dark:text-rose-200' : 'text-slate-800 dark:text-white' }}">
                    {{ number_format($uc) }}
                  </span>
                  <span class="inline-flex items-center justify-center px-2 py-0.5 rounded-full text-[10px] font-bold ring-1 {{ $cls }}">
                    {{ $lvl }}
                  </span>
                </div>
              </td>
              <td class="p-3 text-slate-700 dark:text-white/70">{{ number_format($device->usage_count ?? 0) }}</td>
              <td class="p-3 text-[11px] text-slate-500 dark:text-white/50">
                {{ !empty($device->last_used) ? \Carbon\Carbon::parse($device->last_used)->diffForHumans() : '—' }}
              </td>
            </tr>
          @endforeach

          @if(($devices ?? collect())->count() === 0)
            <tr>
              <td colspan="7" class="p-6 text-center text-slate-500 dark:text-white/50">لا يوجد بيانات.</td>
            </tr>
          @endif
        </tbody>
      </table>
    </div>
  </div>

  <div>
    {{ ($devices ?? null) instanceof \Illuminate\Contracts\Pagination\Paginator ? $devices->links() : '' }}
  </div>

  {{-- ===========================
       🧑‍🤝‍🧑 تواجد الأعضاء (اليوم/الأسبوع/الشهر) — نفس وظائفك + ستايل سقراط
     =========================== --}}

  <div class="rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl shadow-lg p-4 sm:p-5 space-y-4">
    <div class="flex items-center justify-between">
      <div class="text-lg font-extrabold text-slate-800 dark:text-white">🧑‍🤝‍🧑 تواجد الأعضاء — اليوم / الأسبوع / الشهر</div>
      <div class="text-xs text-slate-500 dark:text-white/50">
        <span id="mu-updated">—</span>
      </div>
    </div>

    <p class="text-[12px] text-slate-500 dark:text-white/55">
      سقراط: من الأكثر التزامًا؟ ومن يختفي تدريجيًا؟ الأرقام تساعدك قبل ما يصير “غياب مزمن”.
    </p>

    {{-- كروت الملخص --}}
    <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
      <div class="rounded-2xl p-4 border border-emerald-400/20 bg-gradient-to-br from-emerald-50 to-emerald-100 dark:from-emerald-900/25 dark:to-emerald-900/10">
        <div class="text-xs text-emerald-700 dark:text-emerald-200">إجمالي وقت اليوم</div>
        <div class="text-xl font-extrabold text-emerald-900 dark:text-white mt-1" id="mu-total-today">{{ $fmt($sumToday) }}</div>
      </div>
      <div class="rounded-2xl p-4 border border-blue-400/20 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/25 dark:to-blue-900/10">
        <div class="text-xs text-blue-700 dark:text-blue-200">إجمالي وقت الأسبوع</div>
        <div class="text-xl font-extrabold text-blue-900 dark:text-white mt-1" id="mu-total-week">{{ $fmt($sumWeek) }}</div>
      </div>
      <div class="rounded-2xl p-4 border border-violet-400/20 bg-gradient-to-br from-violet-50 to-violet-100 dark:from-violet-900/25 dark:to-violet-900/10">
        <div class="text-xs text-violet-700 dark:text-violet-200">إجمالي وقت الشهر</div>
        <div class="text-xl font-extrabold text-violet-900 dark:text-white mt-1" id="mu-total-month">{{ $fmt($sumMonth) }}</div>
      </div>
      <div class="rounded-2xl p-4 border border-amber-400/20 bg-gradient-to-br from-amber-50 to-amber-100 dark:from-amber-900/25 dark:to-amber-900/10">
        <div class="text-xs text-amber-700 dark:text-amber-200">عدد الأعضاء</div>
        <div class="text-xl font-extrabold text-amber-900 dark:text-white mt-1" id="mu-people">{{ number_format($peopleCnt) }}</div>
      </div>
    </div>

    {{-- كروت فورية --}}
    <div id="mu-summary" class="grid grid-cols-1 md:grid-cols-3 gap-3">
      <div class="rounded-2xl p-4 border border-blue-400/20 bg-blue-50 dark:bg-blue-900/15">
        <div class="text-xs text-blue-700 dark:text-blue-200">النشطون الآن</div>
        <div id="sum-active" class="text-xl font-extrabold text-blue-900 dark:text-white">0</div>
      </div>
      <div class="rounded-2xl p-4 border border-fuchsia-400/20 bg-fuchsia-50 dark:bg-fuchsia-900/15">
        <div class="text-xs text-fuchsia-700 dark:text-fuchsia-200">جلسات اليوم</div>
        <div id="sum-sessions" class="text-xl font-extrabold text-fuchsia-900 dark:text-white">0</div>
      </div>
      <div class="rounded-2xl p-4 border border-amber-400/20 bg-amber-50 dark:bg-amber-900/15">
        <div class="text-xs text-amber-700 dark:text-amber-200">إجمالي ساعات الشهر</div>
        <div id="sum-hours" class="text-xl font-extrabold text-amber-900 dark:text-white">0 س</div>
      </div>
    </div>

    {{-- Top الصفحات الآن --}}
    <div class="rounded-2xl border border-white/10 bg-white/80 dark:bg-white/5 p-4">
      <div class="text-sm font-extrabold text-slate-800 dark:text-white mb-2">📌 أكثر الصفحات نشاطًا الآن</div>
      <div id="top-pages" class="grid grid-cols-1 md:grid-cols-5 gap-2 text-xs"></div>
    </div>

    {{-- شريط البحث --}}
    <form method="GET" class="flex flex-wrap items-center gap-2">
      <input type="text" name="q" value="{{ request('q') }}" placeholder="ابحث بالاسم..."
             class="w-full md:w-64 px-3 py-2 border border-slate-300 dark:border-white/10 rounded-xl
                    focus:ring-2 focus:ring-cyan-500 dark:bg-slate-900 dark:text-white">
      <button class="px-3 py-2 rounded-xl bg-cyan-600 text-white hover:bg-cyan-700">بحث</button>
      <button type="button" id="mu-refresh" class="px-3 py-2 rounded-xl bg-slate-200 dark:bg-white/10 text-slate-700 dark:text-white/80">
        تحديث الآن
      </button>
    </form>

    {{-- الجدول --}}
    <div class="overflow-x-auto rounded-2xl border border-white/10">
      <table class="min-w-[980px] w-full text-sm" id="mu-table">
        <thead class="bg-slate-50/80 dark:bg-white/5">
          <tr class="text-right text-slate-600 dark:text-white/70">
            <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>
          </tr>
        </thead>
        <tbody id="mu-body">
          @forelse($membersUsage as $i => $u)
            <tr class="border-t border-slate-200/60 dark:border-white/10 hover:bg-slate-50/70 dark:hover:bg-white/5">
              <td class="p-3">
                {{ ($membersUsage instanceof \Illuminate\Contracts\Pagination\Paginator) ? ($membersUsage->firstItem() + $i) : ($i+1) }}
              </td>
              <td class="p-3">
                <div class="flex items-center gap-2">
                  @if(!empty($u->avatar_url))
                    <img src="{{ $u->avatar_url }}" class="w-8 h-8 rounded-xl object-cover border border-slate-200 dark:border-white/10">
                  @else
                    <span class="w-8 h-8 rounded-xl bg-slate-200 dark:bg-white/10 grid place-items-center text-slate-600 dark:text-white/60">
                      <i class="fa-solid fa-user text-[12px]"></i>
                    </span>
                  @endif

                  <button class="font-extrabold text-cyan-700 dark:text-cyan-200 hover:underline"
                          data-user="{{ $u->id ?? 0 }}" data-username="{{ $u->name ?? 'عضو' }}"
                          onclick="openUsageModal(this)">
                    {{ $u->name ?? 'عضو' }}
                  </button>

                  <div class="text-xs text-slate-500 dark:text-white/50">{{ $u->username ?? '' }}</div>
                </div>
              </td>
              <td class="p-3">{{ (int)($u->sessions_today ?? 0) }}</td>
              <td class="p-3">{{ $fmt($u->minutes_today ?? 0) }}</td>
              <td class="p-3">{{ (int)($u->sessions_week ?? 0) }}</td>
              <td class="p-3">{{ $fmt($u->minutes_week ?? 0) }}</td>
              <td class="p-3">{{ (int)($u->sessions_month ?? 0) }}</td>
              <td class="p-3">{{ $fmt($u->minutes_month ?? 0) }}</td>
            </tr>
          @empty
            <tr><td colspan="8" class="p-6 text-center text-slate-500 dark:text-white/50">لا يوجد بيانات بعد.</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>

    {{-- ترقيم لو كان Paginator --}}
    @if($membersUsage instanceof \Illuminate\Contracts\Pagination\Paginator)
      <div class="mt-3">{{ $membersUsage->withQueryString()->links() }}</div>
    @endif
  </div>

</div>
@endsection

@push('scripts')
@if(auth()->check())
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
(function(){
  // ====== Charts: Devices/Browsers ======
  const deviceStats = @json(($deviceStats ?? collect())->values());
  const browserStats = @json(($browserStats ?? collect())->values());

  const pieCommon = () => ({
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: { position: 'bottom', labels: { usePointStyle: true, boxWidth: 8 } },
      tooltip: { callbacks: { label: (ctx) => `${ctx.label}: ${ctx.formattedValue}` } }
    }
  });

  const makePie = (id, rows, labelKey) => {
    const el = document.getElementById(id);
    if (!el || !Array.isArray(rows) || !rows.length) return;

    new Chart(el.getContext('2d'), {
      type: 'doughnut',
      data: {
        labels: rows.map(r => r[labelKey] || 'غير محدد'),
        datasets: [{
          data: rows.map(r => Number(r.count || 0)),
          backgroundColor: [
            'rgba(59,130,246,.30)','rgba(16,185,129,.30)','rgba(245,158,11,.30)','rgba(239,68,68,.30)',
            'rgba(168,85,247,.30)','rgba(236,72,153,.30)','rgba(20,184,166,.30)','rgba(100,116,139,.30)'
          ],
          borderColor: [
            'rgb(59,130,246)','rgb(16,185,129)','rgb(245,158,11)','rgb(239,68,68)',
            'rgb(168,85,247)','rgb(236,72,153)','rgb(20,184,166)','rgb(100,116,139)'
          ],
          borderWidth: 1
        }]
      },
      options: pieCommon()
    });
  };

  makePie('devicesPie', deviceStats, 'device_type');
  makePie('browsersPie', browserStats, 'browser');

  // ====== Live usage JS (نفس وظائفك) ======
  const usageUrl    = '/superadmin/falcon-room/usage.json';
  const summaryUrl  = '/superadmin/falcon-room/usage-summary.json';
  const topPagesUrl = '/superadmin/online-top-pages.json';

  const fmt = mins => {
    mins = Math.max(0, parseInt(mins||0,10));
    const h = Math.floor(mins/60), m = mins%60;
    return (h ? h+' س' : '0 س') + ' ' + m + ' د';
  };

  const body   = document.getElementById('mu-body');
  const totalT = document.getElementById('mu-total-today');
  const totalW = document.getElementById('mu-total-week');
  const totalM = document.getElementById('mu-total-month');
  const people = document.getElementById('mu-people');
  const upd    = document.getElementById('mu-updated');
  const btnRef = document.getElementById('mu-refresh');

  const sumActive  = document.getElementById('sum-active');
  const sumSess    = document.getElementById('sum-sessions');
  const sumHours   = document.getElementById('sum-hours');
  const topPagesEl = document.getElementById('top-pages');

  async function loadUsage(page=1, sort='minutes_today', dir='desc'){
    try{
      const params = new URLSearchParams(window.location.search);
      const q = params.get('q') || '';
      const res = await fetch(`${usageUrl}?page=${page}&sort=${sort}&dir=${dir}${q?`&q=${encodeURIComponent(q)}`:''}`, {headers:{'Accept':'application/json'}});
      if(!res.ok) throw new Error('net');
      const data = await res.json();

      totalT.textContent = fmt(data.total_minutes_today || 0);
      totalW.textContent = fmt(data.total_minutes_week  || 0);
      totalM.textContent = fmt(data.total_minutes_month || 0);
      people.textContent = (data.count || (data.items ? data.items.length : 0));
      upd.textContent    = 'آخر تحديث: ' + (data.updated_at || new Date().toLocaleTimeString());

      const items = data.items || [];
      if(!items.length){
        body.innerHTML = `<tr><td colspan="8" class="p-6 text-center text-slate-500 dark:text-white/50">لا يوجد بيانات بعد.</td></tr>`;
        return;
      }
      let i=1 + ((data.page?data.page-1:0) * (data.per_page||items.length));
      body.innerHTML = items.map(u => `
        <tr class="border-t border-slate-200/60 dark:border-white/10 hover:bg-slate-50/70 dark:hover:bg-white/5">
          <td class="p-3">${i++}</td>
          <td class="p-3">
            <div class="flex items-center gap-2">
              ${u.avatar ? `<img src="${u.avatar}" class="w-8 h-8 rounded-xl object-cover border border-slate-200">` : `<span class="w-8 h-8 rounded-xl bg-slate-200 grid place-items-center text-slate-600"><i class="fa-solid fa-user text-[12px]"></i></span>`}
              <button class="font-extrabold text-cyan-700 hover:underline" data-user="${u.user_id}" data-username="${u.name}" onclick="openUsageModal(this)">${u.name}</button>
              <div class="text-xs text-slate-500">${u.username || ''}</div>
            </div>
          </td>
          <td class="p-3">${u.sessions_today ?? 0}</td>
          <td class="p-3">${fmt(u.minutes_today ?? 0)}</td>
          <td class="p-3">${u.sessions_week ?? 0}</td>
          <td class="p-3">${fmt(u.minutes_week ?? 0)}</td>
          <td class="p-3">${u.sessions_month ?? 0}</td>
          <td class="p-3">${fmt(u.minutes_month ?? 0)}</td>
        </tr>
      `).join('');
    }catch(e){}
  }

  async function loadSummary(){
    try{
      const r = await fetch(summaryUrl, {headers:{'Accept':'application/json'}});
      if(!r.ok) return;
      const d = await r.json();
      sumActive.textContent = d.active_now ?? 0;
      sumSess.textContent   = d.sessions_today ?? 0;
      sumHours.textContent  = (d.hours_month ?? 0) + ' س';
    }catch(e){}
  }

  async function loadTopPages(){
    try{
      const r = await fetch(topPagesUrl, {headers:{'Accept':'application/json'}});
      if(!r.ok) return;
      const d = await r.json();
      const items = d.items || [];
      topPagesEl.innerHTML = items.length ? items.map(p => `
        <div class="rounded-xl bg-slate-50/80 dark:bg-white/5 p-2 flex items-center justify-between border border-slate-200/60 dark:border-white/10">
          <span class="truncate">${p.page_name}</span>
          <span class="font-extrabold text-cyan-700 dark:text-cyan-200">${p.count}</span>
        </div>
      `).join('') : '<div class="text-xs text-slate-400">لا يوجد نشاط حالي.</div>';
    }catch(e){}
  }

  // أول تحميل + تحديث تلقائي
  loadSummary(); loadTopPages(); loadUsage();
  setInterval(loadSummary,  15000);
  setInterval(loadTopPages, 15000);
  setInterval(loadUsage,    30000);
  btnRef && btnRef.addEventListener('click', () => loadUsage());

  // ======== Modal & Charts ========
  window.openUsageModal = async function(btn){
    const userId = btn.getAttribute('data-user');
    const userNm = btn.getAttribute('data-username') || 'عضو';
    document.getElementById('modal-title').textContent = 'تفاصيل العضو — ' + userNm;
    document.getElementById('usage-modal').classList.remove('hidden');
    document.getElementById('usage-modal').classList.add('flex');

    const url = `/superadmin/falcon-room/usage/${userId}.json`;
    const r = await fetch(url, {headers:{'Accept':'application/json'}});
    const d = await r.json();

    const ctxT = document.getElementById('chart-today').getContext('2d');
    const ctxW = document.getElementById('chart-week').getContext('2d');
    const ctxM = document.getElementById('chart-month').getContext('2d');

    const labelsT = Array.from({length:24}, (_,i)=> i+':00');
    const dataT   = (d.series?.today || []).map(x=>x.m || 0);
    const labelsW = (d.series?.week  || []).map(x=>x.d || '');
    const dataW   = (d.series?.week  || []).map(x=>x.m || 0);
    const labelsM = (d.series?.month || []).map(x=>x.d || '');
    const dataM   = (d.series?.month || []).map(x=>x.m || 0);

    const mk = (ctx, labels, data, title) => new Chart(ctx, {
      type: 'bar',
      data: { labels, datasets: [{ label: title, data }]},
      options: { plugins:{legend:{display:false}}, responsive:true, maintainAspectRatio:false, scales:{y:{beginAtZero:true}} }
    });

    window._chT && window._chT.destroy(); window._chW && window._chW.destroy(); window._chM && window._chM.destroy();
    window._chT = mk(ctxT, labelsT, dataT, 'دقائق/ساعة اليوم');
    window._chW = mk(ctxW, labelsW, dataW, 'دقائق/اليوم (7 أيام)');
    window._chM = mk(ctxM, labelsM, dataM, 'دقائق/اليوم (30 يوم)');
  };

  window.closeUsageModal = function(){
    document.getElementById('usage-modal').classList.add('hidden');
    document.getElementById('usage-modal').classList.remove('flex');
  };

})();
</script>

{{-- Modal تفاصيل العضو (Socratic) --}}
<div id="usage-modal" class="fixed inset-0 bg-black/60 hidden items-center justify-center z-50 p-3">
  <div class="w-[95%] md:w-[980px] rounded-2xl overflow-hidden border border-white/10 bg-white dark:bg-slate-900 shadow-2xl">
    <div class="p-4 flex items-center justify-between border-b border-slate-200/60 dark:border-white/10">
      <div class="font-extrabold text-slate-800 dark:text-white" id="modal-title">تفاصيل العضو</div>
      <button onclick="closeUsageModal()" class="text-slate-500 hover:text-slate-900 dark:text-white/60 dark:hover:text-white">✖</button>
    </div>
    <div class="p-4 grid grid-cols-1 md:grid-cols-3 gap-3" style="height:280px">
      <div class="rounded-xl border border-slate-200/60 dark:border-white/10 bg-slate-50/70 dark:bg-white/5 p-2"><canvas id="chart-today"></canvas></div>
      <div class="rounded-xl border border-slate-200/60 dark:border-white/10 bg-slate-50/70 dark:bg-white/5 p-2"><canvas id="chart-week"></canvas></div>
      <div class="rounded-xl border border-slate-200/60 dark:border-white/10 bg-slate-50/70 dark:bg-white/5 p-2"><canvas id="chart-month"></canvas></div>
    </div>
  </div>
</div>
@endif
@endpush