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

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

  {{-- رأس الصفحة --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-6">
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
      {{-- هوية العضو --}}
      <div class="flex items-center gap-4">
        <img src="{{ $user->avatar_url ?? $user->avatar ?? 'https://ui-avatars.com/api/?name='.urlencode($user->name) }}"
             class="w-20 h-20 rounded-full object-cover">
        <div>
          <h1 class="text-2xl font-bold">{{ $user->name }}</h1>
          <div class="text-gray-600 dark:text-gray-300 text-sm">
            {{ $user->email }} • {{ $user->username }}
          </div>
          @php
            $type = $user->membership_status ?? 'member';
            $typeBadge = [
              '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] ?? ['bg'=>'bg-gray-100 text-gray-800','label'=>'عضو'];
          @endphp
          <span class="inline-flex mt-2 px-3 py-1 rounded text-xs {{ $typeBadge['bg'] }}">
            {{ $typeBadge['label'] }}
          </span>
          @php
            $on = (bool)($user->is_online ?? false);
          @endphp
          <span class="inline-flex items-center gap-1 ml-2 px-2 py-0.5 rounded text-xs
                       {{ $on ? 'bg-emerald-50 text-emerald-700' : 'bg-gray-100 text-gray-600' }}">
            <span class="w-2 h-2 rounded-full {{ $on ? 'bg-emerald-500 animate-pulse' : 'bg-gray-400' }}"></span>
            {{ $on ? 'متصل الآن' : 'غير متصل' }}
          </span>
        </div>
      </div>

      {{-- إجراءات سريعة --}}
      <div class="flex items-center gap-2 flex-wrap">
        <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>

        <a href="{{ route('superadmin.falcon-room.user-details', $user->id) }}?export=csv"
           class="px-3 py-2 rounded-lg bg-emerald-600 text-white hover:bg-emerald-700">
          ⬇️ تصدير CSV
        </a>

        @if(($user->account_status ?? 'active') === 'active')
          <form method="POST" action="{{ route('superadmin.users.toggle-status', $user->id) }}">
            @csrf
            <button type="submit"
                    class="px-3 py-2 rounded-lg bg-amber-600 text-white hover:bg-amber-700">
              تعليق
            </button>
          </form>
        @else
          <form method="POST" action="{{ route('superadmin.users.toggle-status', $user->id) }}">
            @csrf
            <button type="submit"
                    class="px-3 py-2 rounded-lg bg-emerald-600 text-white hover:bg-emerald-700">
              تفعيل
            </button>
          </form>
        @endif
      </div>
    </div>
  </div>

  {{-- نظرة عامة + مخططات --}}
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    {{-- كروت نظرة عامة --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4">
      <h3 class="font-bold mb-3">نظرة عامة</h3>
      <div class="grid grid-cols-2 gap-3">
        <div class="p-3 rounded bg-gray-50 dark:bg-gray-900/30 text-center">
          <div class="text-2xl font-extrabold text-blue-600">{{ number_format($stats['total_visits'] ?? 0) }}</div>
          <div class="text-xs text-gray-600 dark:text-gray-400">إجمالي الزيارات</div>
        </div>
        <div class="p-3 rounded bg-gray-50 dark:bg-gray-900/30 text-center">
          <div class="text-2xl font-extrabold text-emerald-600">{{ (int)($stats['unique_devices'] ?? 0) }}</div>
          <div class="text-xs text-gray-600 dark:text-gray-400">الأجهزة</div>
        </div>
        <div class="p-3 rounded bg-gray-50 dark:bg-gray-900/30 text-center">
          <div class="text-2xl font-extrabold text-purple-600">{{ (int)($stats['unique_ips'] ?? 0) }}</div>
          <div class="text-xs text-gray-600 dark:text-gray-400">عناوين IP</div>
        </div>
        <div class="p-3 rounded bg-gray-50 dark:bg-gray-900/30 text-center">
          <div class="text-2xl font-extrabold text-amber-600">{{ round($stats['avg_load_time'] ?? 0) }}ms</div>
          <div class="text-xs text-gray-600 dark:text-gray-400">متوسط السرعة</div>
        </div>
        <div class="col-span-2 p-3 rounded bg-gray-50 dark:bg-gray-900/30 text-center">
          <div class="text-sm font-bold text-gray-800 dark:text-gray-100">
            {{ $stats['last_activity'] ? \Carbon\Carbon::parse($stats['last_activity'])->diffForHumans() : '—' }}
          </div>
          <div class="text-xs text-gray-600 dark:text-gray-400">آخر نشاط</div>
        </div>
      </div>
    </div>

    {{-- مخططات الاستخدام (اليوم/7 أيام/30 يوم) --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4 lg:col-span-2">
      <h3 class="font-bold mb-3">الاستخدام — اليوم / 7 أيام / 30 يوم</h3>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-3" style="height: 240px;">
        <div class="rounded bg-gray-50 dark:bg-gray-900/30 p-2"><canvas id="chart-today"></canvas></div>
        <div class="rounded bg-gray-50 dark:bg-gray-900/30 p-2"><canvas id="chart-week"></canvas></div>
        <div class="rounded bg-gray-50 dark:bg-gray-900/30 p-2"><canvas id="chart-month"></canvas></div>
      </div>
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    {{-- الأجهزة المستخدمة --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4">
      <h3 class="font-bold mb-4">💻 الأجهزة المستخدمة</h3>
      <div class="space-y-3">
        @forelse($devices as $device)
          @php $manyUsers = ($device->usage_count ?? 0) > 200; @endphp
          <div class="p-3 rounded {{ $manyUsers ? 'bg-amber-50 dark:bg-amber-900/20' : 'bg-gray-50 dark:bg-gray-900/30' }}">
            <div class="flex justify-between items-start mb-2">
              <div>
                <p class="font-medium">{{ $device->device_type ?? '—' }} • {{ $device->browser ?? '—' }}</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">{{ $device->os ?? '—' }}</p>
                <p class="text-xs text-gray-500 font-mono mt-1">IP: {{ $device->ip_address ?? '—' }}</p>
              </div>
              <span class="text-xs text-gray-500">
                {{ number_format($device->usage_count ?? 0) }} مرة
              </span>
            </div>
            <p class="text-xs text-gray-500">
              آخر استخدام: {{ $device->last_used ? \Carbon\Carbon::parse($device->last_used)->diffForHumans() : '—' }}
            </p>
          </div>
        @empty
          <div class="text-sm text-gray-500">لا يوجد بيانات أجهزة.</div>
        @endforelse
      </div>
    </div>

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

  {{-- آخر الصفحات التي زارها --}}
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow p-4">
    <h3 class="font-bold mb-4">🕐 آخر 50 صفحة زارها</h3>
    <div class="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-2">الصفحة</th>
            <th class="p-2">الجهاز</th>
            <th class="p-2">IP</th>
            <th class="p-2">السرعة</th>
            <th class="p-2">الوقت</th>
          </tr>
        </thead>
        <tbody>
          @forelse($recentPages as $p)
          <tr class="border-t hover:bg-gray-50 dark:hover:bg-gray-900/30">
            <td class="p-2">
              <div>
                <p class="font-medium">{{ $p->page_title ?? 'غير محدد' }}</p>
                <p class="text-xs text-gray-500 truncate max-w-[340px]">{{ $p->page_url }}</p>
              </div>
            </td>
            <td class="p-2">{{ ($p->device_type ?? '—').' • '.($p->browser ?? '—') }}</td>
            <td class="p-2"><span class="font-mono text-xs">{{ $p->ip_address ?? '—' }}</span></td>
            <td class="p-2">{{ round($p->load_time ?? 0) }}ms</td>
            <td class="p-2 text-xs">
              {{ $p->visited_at ? \Carbon\Carbon::parse($p->visited_at)->format('Y-m-d H:i:s') : '—' }}
            </td>
          </tr>
          @empty
          <tr><td colspan="5" class="p-4 text-center text-gray-500 dark:text-gray-400">لا يوجد بيانات.</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>

</div>
@endsection

@push('scripts')
@if(auth()->check())
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
(function(){
  const userId = {{ (int)$user->id }};
  const url = `/superadmin/falcon-room/usage/${userId}.json`;

  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}} }
  });

  async function loadCharts(){
    try{
      const res = await fetch(url, {headers:{'Accept':'application/json'}});
      if(!res.ok) return;
      const d = await res.json();

      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);

      window._chT && window._chT.destroy();
      window._chW && window._chW.destroy();
      window._chM && window._chM.destroy();

      window._chT = mk(document.getElementById('chart-today').getContext('2d'), labelsT, dataT, 'دقائق/ساعة اليوم');
      window._chW = mk(document.getElementById('chart-week').getContext('2d'), labelsW, dataW, 'دقائق/اليوم (7 أيام)');
      window._chM = mk(document.getElementById('chart-month').getContext('2d'), labelsM, dataM, 'دقائق/اليوم (30 يوم)');
    }catch(e){}
  }

  loadCharts();
})();
</script>
@endif
@endpush