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

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

  {{-- ملخص سريع --}}
  <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
    <x-stat title="إجمالي الصبايا" value="{{ number_format($summary['girls_total'] ?? 0) }}" color="pink"/>
    <x-stat title="نشاط آخر 24 ساعة" value="{{ number_format($summary['active_24h'] ?? 0) }}" color="emerald"/>
    <x-stat title="متوسط دقائق (7 أيام)" value="{{ number_format($summary['avg_minutes7'] ?? 0,1) }} د" color="cyan"/>
  </div>

  <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-700 p-4 text-sm text-gray-700 dark:text-gray-300">
    تلميح: نستعمل نشاط المنظومة (زيارات وتواجد) كمؤشر للتواصل. إن وُجد نظام محادثة داخلي، سنعرض “أكثر من ترسل رسائل” تلقائيًا.
  </div>

  @php
    $sections = [
      ['key'=>'top_today',    'title'=>'أعلى دقائق اليوم',        'color'=>'from-emerald-50 to-emerald-100'],
      ['key'=>'top_chatters', 'title'=>'أكثر من ترسل رسائل (7 أيام)','color'=>'from-pink-50 to-pink-100'],
      ['key'=>'best_streak',  'title'=>'أفضل التزام 7 أيام',       'color'=>'from-violet-50 to-violet-100'],
      ['key'=>'needs_boost',  'title'=>'بحاجة إلى دفعة تشجيع',     'color'=>'from-amber-50 to-amber-100'],
    ];
  @endphp

  @foreach($sections as $sec)
    @php $items = $cards[$sec['key']] ?? collect(); @endphp
    <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-700 p-4 space-y-3">
      <div class="flex items-center justify-between">
        <h3 class="font-bold">{{ $sec['title'] }}</h3>
        <div class="text-xs text-gray-500">الفترة: {{ $period[0] }} → {{ $period[1] }}</div>
      </div>

      @if($items->isEmpty())
        <div class="text-sm text-gray-500">لا يوجد بيانات لهذا القسم.</div>
      @else
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
          @foreach($items as $i)
            <div class="rounded-xl p-4 bg-gradient-to-br {{ $sec['color'] }} border-r-4 border-gray-300">
              <div class="flex items-center justify-between gap-2">
                <div class="min-w-0">
                  <div class="font-bold truncate">{{ $i->name }}</div>
                  <div class="text-xs text-gray-600 dark:text-gray-300 truncate">{{ $i->username ?? '—' }}</div>
                </div>
                <span class="px-2 py-1 rounded text-xs bg-black/5 dark:bg-white/10">{{ $i->badge }}</span>
              </div>

              <div class="mt-3 text-2xl font-extrabold text-gray-900 dark:text-white">
                {{ is_numeric($i->metric) ? number_format($i->metric, is_float($i->metric)?1:0) : $i->metric }}
              </div>

              <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">{{ $i->hint }}</p>

              @if(Route::has('superadmin.admin-messages.index'))
                <div class="mt-3">
                  <a href="{{ route('superadmin.admin-messages.index', ['to'=>$i->id]) }}"
                     class="inline-flex items-center gap-2 px-3 py-1.5 rounded bg-primary-600 text-white text-xs hover:bg-primary-700">
                    ✉️ إرسال رسالة تشجيع
                  </a>
                </div>
              @endif
            </div>
          @endforeach
        </div>
      @endif
    </div>
  @endforeach

  <div class="text-xs text-gray-500 dark:text-gray-400">
    * “بحاجة دفعة” تظهر من كان نشاطها الأسبوعي ضعيفًا جدًّا (فقط معيار إرشادي للمبادرة بلطف).
  </div>
</div>
@endsection