@extends('layouts.superadmin')
@section('title','إحصائيات الأكاديمية — AI')

@section('content')
@php $isGirl = auth()->user()?->gender === 'female'; @endphp

<div class="min-h-screen rtl py-6 sm:py-8 {{ $isGirl ? 'bg-gradient-to-b from-slate-950 via-rose-950/50 to-slate-950' : 'bg-gradient-to-b from-slate-950 via-indigo-950/60 to-slate-950' }}">
  <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6">

    <div class="relative overflow-hidden rounded-3xl border border-white/10 bg-black/40 p-6 shadow-2xl">
      <div class="absolute -top-24 -right-12 w-72 h-72 rounded-full {{ $isGirl ? 'bg-rose-400/20' : 'bg-fuchsia-400/20' }} blur-3xl"></div>
      <div class="absolute -bottom-24 -left-12 w-80 h-80 rounded-full bg-cyan-500/20 blur-3xl"></div>

      <div class="relative flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
        <div>
          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[11px] text-white/80">
            <i class="fa-solid fa-brain"></i>
            تحليلات AI + עוגות ותרשמים
          </div>
          <h1 class="text-2xl sm:text-3xl font-extrabold text-white mt-2">إحصائيات الأكاديمية</h1>
          <p class="text-[13px] text-slate-200/80 mt-1">Donut + Trend + Top Courses + Tips.</p>
        </div>

        <form method="post" action="{{ route('superadmin.academy.lock') }}">
          @csrf
          <button class="inline-flex items-center gap-2 px-4 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-xs hover:bg-white/15 transition">
            <i class="fa-solid fa-lock"></i>
            قفل الغرفة
          </button>
        </form>
      </div>
    </div>

    <div class="grid gap-4 lg:grid-cols-3">
      <div class="rounded-3xl border border-white/10 bg-black/30 p-5">
        <div class="flex items-center justify-between">
          <h2 class="text-sm font-extrabold text-white">Completion Donut</h2>
          <span class="text-[11px] px-2 py-1 rounded-full bg-white/5 border border-white/10 text-white/70">
            {{ $analytics['donut']['rate_completed'] ?? 0 }}% مكتمل
          </span>
        </div>
        <div class="mt-3">
          <canvas id="donutChart" height="220"></canvas>
        </div>
      </div>

      <div class="rounded-3xl border border-white/10 bg-black/30 p-5 lg:col-span-2">
        <h2 class="text-sm font-extrabold text-white">Enrollments Trend (14 days)</h2>
        <div class="mt-3">
          <canvas id="trendChart" height="120"></canvas>
        </div>
      </div>
    </div>

    <div class="grid gap-4 lg:grid-cols-3">
      <div class="rounded-3xl border border-white/10 bg-black/30 p-5 lg:col-span-2">
        <h2 class="text-sm font-extrabold text-white">Top Courses</h2>
        <div class="mt-3">
          <canvas id="topChart" height="120"></canvas>
        </div>
      </div>

      <div class="rounded-3xl border border-white/10 bg-black/30 p-5">
        <h2 class="text-sm font-extrabold text-white mb-3">AI نصائح</h2>

        <div class="space-y-3">
          @foreach($tips as $t)
            <div class="rounded-2xl border border-white/10 bg-white/5 px-4 py-3">
              <div class="flex items-center gap-2 text-white font-extrabold text-[13px]">
                <i class="fa-solid fa-{{ $t['icon'] ?? 'sparkles' }} {{ $isGirl ? 'text-rose-200' : 'text-cyan-200' }}"></i>
                {{ $t['title'] }}
              </div>
              <div class="text-[12px] text-slate-200/80 mt-1 leading-relaxed">
                {{ $t['body'] }}
              </div>
            </div>
          @endforeach
        </div>

      </div>
    </div>

  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const donutData = @json($analytics['donut'] ?? ['labels'=>[],'values'=>[]]);
  const trendData = @json($analytics['trend'] ?? ['labels'=>[],'values'=>[]]);
  const topData   = @json($analytics['top'] ?? ['labels'=>[],'values'=>[]]);

  new Chart(document.getElementById('donutChart'), {
    type: 'doughnut',
    data: {
      labels: donutData.labels,
      datasets: [{ data: donutData.values }]
    },
    options: { responsive: true, plugins: { legend: { display: true } } }
  });

  new Chart(document.getElementById('trendChart'), {
    type: 'line',
    data: {
      labels: trendData.labels,
      datasets: [{ label: 'Enrollments', data: trendData.values, tension: 0.35 }]
    },
    options: { responsive: true, plugins: { legend: { display: true } } }
  });

  new Chart(document.getElementById('topChart'), {
    type: 'bar',
    data: {
      labels: topData.labels,
      datasets: [{ label: 'Enrollments', data: topData.values }]
    },
    options: { responsive: true, plugins: { legend: { display: true } } }
  });
</script>
@endsection