@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="نقاط هذا الأسبوع" value="{{ number_format($summary['points_week'] ?? 0) }}" color="violet"/>
    <x-stat title="متوسط دقائق الحضور (٧ أيام)" value="{{ number_format($summary['avg_minutes7'] ?? 0,1) }} د" color="emerald"/>
  </div>

  {{-- مخطط صغير لآخر 14 يوم --}}
  <div class="bg-white dark:bg-gray-900 rounded-xl shadow p-4 border border-gray-100 dark:border-gray-700">
    <h3 class="font-bold mb-3">📈 منحنى نقاط البنات (آخر 14 يوم)</h3>
    <div style="height:240px"><canvas id="spark14"></canvas></div>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    {{-- أكثر نقاط هذا الأسبوع --}}
    <div class="bg-white dark:bg-gray-900 rounded-xl shadow p-4 border border-gray-100 dark:border-gray-700">
      <h3 class="font-bold mb-3">🏅 أكثر نقاط — هذا الأسبوع</h3>
      <ul class="divide-y divide-gray-100 dark:divide-gray-800 text-sm">
        @forelse($topWeek as $g)
          <li class="py-2 flex items-center justify-between">
            <span class="truncate">{{ $g->name }}</span>
            <span class="font-bold text-pink-600">{{ number_format($g->pts) }}</span>
          </li>
        @empty
          <li class="py-2 text-gray-500">—</li>
        @endforelse
      </ul>
    </div>

    {{-- الأكثر تحسّنًا --}}
    <div class="bg-white dark:bg-gray-900 rounded-xl shadow p-4 border border-gray-100 dark:border-gray-700">
      <h3 class="font-bold mb-3">🚀 الأكثر تحسّنًا مقارنة بالأسبوع الماضي</h3>
      <ul class="divide-y divide-gray-100 dark:divide-gray-800 text-sm">
        @forelse($improvers as $g)
          <li class="py-2 flex items-center justify-between">
            <span class="truncate">{{ $g->name }}</span>
            <span class="font-bold text-emerald-600">+{{ number_format($g->diff) }}</span>
          </li>
        @empty
          <li class="py-2 text-gray-500">—</li>
        @endforelse
      </ul>
    </div>

    {{-- أفضل التزام أيام (7 أيام) --}}
    <div class="bg-white dark:bg-gray-900 rounded-xl shadow p-4 border border-gray-100 dark:border-gray-700">
      <h3 class="font-bold mb-3">📅 أفضل التزام (آخر ٧ أيام)</h3>
      <ul class="divide-y divide-gray-100 dark:divide-gray-800 text-sm">
        @forelse($streaks as $g)
          <li class="py-2 flex items-center justify-between">
            <span class="truncate">{{ $g->name }}</span>
            <span class="font-bold text-cyan-600">{{ (int)$g->days }} يوم</span>
          </li>
        @empty
          <li class="py-2 text-gray-500">—</li>
        @endforelse
      </ul>
    </div>
  </div>

  {{-- تعليمات لغوية صغيرة --}}
  <div class="bg-pink-50 dark:bg-pink-900/30 border border-pink-300 dark:border-pink-700 rounded-xl p-4 text-sm text-pink-900 dark:text-pink-100">
    <b>تذكير:</b> في رسائل التشجيع، راعي الإملاء الصحيح، الاختصار، والجُمل الإيجابية المباشرة 🌷
  </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
(function(){
  const data = @json($sparkline14 ?? []);
  const labels = data.map(d=> d.date);
  const values = data.map(d=> d.sum);

  const ctx = document.getElementById('spark14').getContext('2d');
  new Chart(ctx, {
    type: 'line',
    data: {
      labels,
      datasets: [{
        label: 'النقاط',
        data: values,
        borderColor: '#f472b6',
        backgroundColor: 'rgba(244,114,182,0.12)',
        tension: .35,
        fill: true
      }]
    },
    options:{
      responsive:true, maintainAspectRatio:false,
      plugins:{ legend:{ display:false } },
      scales:{ y:{ beginAtZero:true } }
    }
  });
})();
</script>
@endpush