@extends('layouts.superadmin')
@section('title', 'غرفة رولا — إحصائيات صبايا التيم')
@section('page-title', 'غرفة رولا — إحصائيات صبايا التيم')

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

  @if(!empty($stats['error']))
    <div class="bg-rose-50 dark:bg-rose-900/30 text-rose-700 dark:text-rose-200 rounded-lg p-3">
      ⚠️ {{ $stats['error'] }}
    </div>
  @endif

  {{-- كروت الملخص --}}
  <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
    <x-stat title="عدد الصبايا"        value="{{ number_format($stats['girls_total']) }}"   color="pink"   />
    <x-stat title="المتواجدات الآن"    value="{{ number_format($stats['online_now']) }}"    color="emerald"/>
    <x-stat title="نشاط اليوم"          value="{{ number_format($stats['active_today']) }}"  color="cyan"   />
    <x-stat title="نشاط هذا الأسبوع"    value="{{ number_format($stats['active_week']) }}"   color="violet" />
    <x-stat title="نقاط اليوم"          value="{{ number_format($stats['points_today']) }}"  color="amber"  />
  </div>

  {{-- أكثر الصبايا نشاطًا + أعلى الصفحات --}}
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-700 p-4">
      <h3 class="font-bold mb-3">🔥 أكثر الصبايا نشاطًا (دقائق)</h3>
      <ul class="divide-y divide-gray-100 dark:divide-gray-800">
        @forelse($topActive as $g)
          <li class="py-2 flex items-center justify-between">
            <span class="font-semibold">{{ $g->name }}</span>
            <span class="text-pink-600 font-bold">{{ number_format($g->minutes,1) }} د</span>
          </li>
        @empty
          <li class="py-2 text-gray-500">لا يوجد بيانات.</li>
        @endforelse
      </ul>
    </div>

    <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-700 p-4">
      <h3 class="font-bold mb-3">📄 أعلى الصفحات زيارة (آخر 24 ساعة)</h3>
      <ul class="divide-y divide-gray-100 dark:divide-gray-800">
        @forelse($stats['top_pages'] as $p)
          <li class="py-2 flex items-center justify-between">
            <span>{{ \Illuminate\Support\Str::of($p->page_title)->replace(['-','_','.'],' ')->ucfirst() }}</span>
            <span class="text-emerald-600 font-bold">{{ $p->hits }}</span>
          </li>
        @empty
          <li class="py-2 text-gray-500">لا يوجد زيارات حديثة.</li>
        @endforelse
      </ul>
    </div>
  </div>

</div>
@endsection