@extends('layouts.superadmin')

@section('title','سقراط — إحصائيات ProActive')
@section('page-title', '📊 ' . ($pageTitle ?? 'إحصائيات ProActive'))

@section('content')
@php
  $chart = $chart ?? 'bar';
  $metrics = $metrics ?? [];
@endphp

<div class="min-h-screen rtl bg-gradient-to-b from-slate-900 via-slate-900/70 to-slate-950 py-6">
  <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6">

    <div class="relative overflow-hidden rounded-[28px] border border-white/10
                bg-gradient-to-br from-white/6 via-white/4 to-white/2 backdrop-blur-2xl
                shadow-[0_24px_90px_rgba(0,0,0,0.22)] p-6">
      <div class="pointer-events-none absolute -top-24 -right-20 w-96 h-96 rounded-full bg-cyan-400/10 blur-3xl"></div>

      <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
        <div>
          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/25 border border-white/10 text-[11px] text-white/80">
            <span class="w-1.5 h-1.5 rounded-full bg-cyan-300 animate-pulse"></span>
            <span>سقراط • Analytics • {{ $from->toDateString() }} → {{ $to->toDateString() }}</span>
          </div>

          <h1 class="mt-3 text-2xl font-extrabold text-white tracking-tight">
            📊 {{ $pageTitle ?? 'إحصائيات ProActive' }}
          </h1>

          <p class="mt-2 text-sm text-white/70 max-w-3xl">
            اختر نوع الرسم من اليمين. إذا اخترت <b>بدون رسم</b> سيتم عرض الجداول بدل الرسوم.
          </p>
        </div>

        <form method="GET" class="rounded-2xl bg-black/20 border border-white/10 p-3 w-full lg:w-[520px]">
          <div class="grid grid-cols-2 gap-2">
            <div>
              <label class="text-[11px] text-white/60">من</label>
              <input type="date" name="from" value="{{ $from?->toDateString() }}"
                     class="mt-1 w-full rounded-xl bg-black/30 border border-white/10 text-white text-sm px-3 py-2">
            </div>
            <div>
              <label class="text-[11px] text-white/60">إلى</label>
              <input type="date" name="to" value="{{ $to?->toDateString() }}"
                     class="mt-1 w-full rounded-xl bg-black/30 border border-white/10 text-white text-sm px-3 py-2">
            </div>

            <div class="col-span-2">
              <label class="text-[11px] text-white/60">نوع الرسم</label>
              <select name="chart"
                      class="mt-1 w-full rounded-xl bg-black/30 border border-white/10 text-white text-sm px-3 py-2">
                <option value="bar" @selected($chart==='bar')>Bar</option>
                <option value="line" @selected($chart==='line')>Line</option>
                <option value="doughnut" @selected($chart==='doughnut')>Doughnut</option>
                <option value="none" @selected($chart==='none')>بدون رسم (جداول فقط)</option>
              </select>
            </div>

            <div class="col-span-2">
              <button class="w-full px-4 py-2 rounded-xl bg-white/10 border border-white/12 text-white font-bold hover:bg-white/12">
                تطبيق
              </button>
            </div>
          </div>
        </form>
      </div>

      {{-- Metric Cards --}}
      <div class="mt-5 grid grid-cols-2 md:grid-cols-4 gap-3">
        <div class="rounded-2xl p-3 bg-black/20 border border-white/10">
          <div class="text-[11px] text-white/60">عدد الجلسات</div>
          <div class="mt-1 text-2xl font-extrabold text-white">{{ number_format($metrics['total_sessions'] ?? 0) }}</div>
        </div>
        <div class="rounded-2xl p-3 bg-black/20 border border-white/10">
          <div class="text-[11px] text-white/60">إجمالي الوقت</div>
          <div class="mt-1 text-2xl font-extrabold text-amber-200">
            {{ $metrics['total_hm']['h'] ?? 0 }}س {{ $metrics['total_hm']['m'] ?? 0 }}د
          </div>
          <div class="mt-1 text-[11px] text-white/55">{{ number_format($metrics['total_minutes'] ?? 0) }} دقيقة</div>
        </div>
        <div class="rounded-2xl p-3 bg-black/20 border border-white/10">
          <div class="text-[11px] text-white/60">متوسط الجلسة</div>
          <div class="mt-1 text-2xl font-extrabold text-white">
            {{ $metrics['avg_hm']['h'] ?? 0 }}س {{ $metrics['avg_hm']['m'] ?? 0 }}د
          </div>
          <div class="mt-1 text-[11px] text-white/55">{{ number_format($metrics['avg_minutes'] ?? 0) }} دقيقة</div>
        </div>
        <div class="rounded-2xl p-3 bg-rose-500/10 border border-rose-300/15">
          <div class="text-[11px] text-rose-100/80">الإلغاء</div>
          <div class="mt-1 text-2xl font-extrabold text-rose-100">{{ number_format($metrics['cancelled_sessions'] ?? 0) }}</div>
          <div class="mt-1 text-[11px] text-rose-100/70">{{ $metrics['cancel_pct'] ?? 0 }}%</div>
        </div>
      </div>
    </div>

    {{-- Charts or Tables --}}
    @if($chart === 'none')
      <div class="rounded-[26px] border border-white/10 bg-white/4 backdrop-blur-2xl p-4 space-y-4">
        <div class="text-white font-extrabold">جداول ملخّصة</div>

        <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
          <div class="rounded-2xl bg-black/20 border border-white/10 p-3">
            <div class="text-[12px] text-white/80 font-bold mb-2">بالأيام</div>
            <div class="overflow-x-auto">
              <table class="min-w-full text-sm">
                <thead class="text-white/70">
                  <tr>
                    <th class="p-2 text-right">اليوم</th>
                    <th class="p-2 text-right">دقائق</th>
                    <th class="p-2 text-right">جلسات</th>
                  </tr>
                </thead>
                <tbody class="divide-y divide-white/10">
                  @foreach(($byDay['labels'] ?? []) as $i => $d)
                    <tr class="hover:bg-white/6">
                      <td class="p-2 text-white/80">{{ $d }}</td>
                      <td class="p-2 text-amber-200 font-bold">{{ number_format(($byDay['minutes'][$i] ?? 0)) }}</td>
                      <td class="p-2 text-white/70">{{ number_format(($byDay['counts'][$i] ?? 0)) }}</td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>

          <div class="rounded-2xl bg-black/20 border border-white/10 p-3">
            <div class="text-[12px] text-white/80 font-bold mb-2">بالمنصات</div>
            <div class="overflow-x-auto">
              <table class="min-w-full text-sm">
                <thead class="text-white/70">
                  <tr>
                    <th class="p-2 text-right">المنصة</th>
                    <th class="p-2 text-right">دقائق</th>
                    <th class="p-2 text-right">جلسات</th>
                  </tr>
                </thead>
                <tbody class="divide-y divide-white/10">
                  @foreach(($byPlatform['labels'] ?? []) as $i => $k)
                    <tr class="hover:bg-white/6">
                      <td class="p-2 text-white/80">{{ strtoupper($k) }}</td>
                      <td class="p-2 text-amber-200 font-bold">{{ number_format(($byPlatform['minutes'][$i] ?? 0)) }}</td>
                      <td class="p-2 text-white/70">{{ number_format(($byPlatform['counts'][$i] ?? 0)) }}</td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <div class="rounded-2xl bg-black/20 border border-white/10 p-3">
          <div class="text-[12px] text-white/80 font-bold mb-2">أفضل القادة (بالدقائق)</div>
          <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
              <thead class="text-white/70">
                <tr>
                  <th class="p-2 text-right">القائد</th>
                  <th class="p-2 text-right">دقائق</th>
                </tr>
              </thead>
              <tbody class="divide-y divide-white/10">
                @foreach(($byLeader['labels'] ?? []) as $i => $k)
                  <tr class="hover:bg-white/6">
                    <td class="p-2 text-white/80">{{ $k }}</td>
                    <td class="p-2 text-amber-200 font-bold">{{ number_format(($byLeader['minutes'][$i] ?? 0)) }}</td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>

      </div>
    @else

      <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
        <div class="rounded-[26px] border border-white/10 bg-white/4 backdrop-blur-2xl p-4">
          <div class="text-white/80 font-extrabold mb-2">الوقت حسب الأيام</div>
          <canvas id="chartByDay" height="130"></canvas>
        </div>

        <div class="rounded-[26px] border border-white/10 bg-white/4 backdrop-blur-2xl p-4">
          <div class="text-white/80 font-extrabold mb-2">الوقت حسب المنصة</div>
          <canvas id="chartByPlatform" height="130"></canvas>
        </div>

        @if(!empty(($byType['labels'] ?? [])) && count(($byType['labels'] ?? [])) > 0)
          <div class="rounded-[26px] border border-white/10 bg-white/4 backdrop-blur-2xl p-4">
            <div class="text-white/80 font-extrabold mb-2">الوقت حسب النوع</div>
            <canvas id="chartByType" height="130"></canvas>
          </div>
        @endif

        <div class="rounded-[26px] border border-white/10 bg-white/4 backdrop-blur-2xl p-4">
          <div class="text-white/80 font-extrabold mb-2">أفضل القادة</div>
          <canvas id="chartByLeader" height="130"></canvas>
        </div>
      </div>

      {{-- Chart.js --}}
      <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
      <script>
        (function(){
          const chartMode = @json($chart);

          const dayLabels = @json(($byDay['labels'] ?? []));
          const dayMins   = @json(($byDay['minutes'] ?? []));

          const platLabels = @json(($byPlatform['labels'] ?? []));
          const platMins   = @json(($byPlatform['minutes'] ?? []));

          const leaderLabels = @json(($byLeader['labels'] ?? []));
          const leaderMins   = @json(($byLeader['minutes'] ?? []));

          const typeLabels = @json(($byType['labels'] ?? []));
          const typeMins   = @json(($byType['minutes'] ?? []));

          const dayType = (chartMode === 'line') ? 'line' : 'bar';
          const donutType = (chartMode === 'doughnut') ? 'doughnut' : 'bar';

          const ctxDay = document.getElementById('chartByDay');
          if (ctxDay) new Chart(ctxDay, {
            type: dayType,
            data: { labels: dayLabels, datasets: [{ label: 'Minutes', data: dayMins }] },
            options: { responsive: true, plugins: { legend: { display: false } } }
          });

          const ctxPlat = document.getElementById('chartByPlatform');
          if (ctxPlat) new Chart(ctxPlat, {
            type: donutType,
            data: { labels: platLabels, datasets: [{ label: 'Minutes', data: platMins }] },
            options: { responsive: true, plugins: { legend: { display: true } } }
          });

          const ctxLeader = document.getElementById('chartByLeader');
          if (ctxLeader) new Chart(ctxLeader, {
            type: 'bar',
            data: { labels: leaderLabels, datasets: [{ label: 'Minutes', data: leaderMins }] },
            options: { responsive: true, plugins: { legend: { display: false } } }
          });

          const ctxType = document.getElementById('chartByType');
          if (ctxType && typeLabels.length) new Chart(ctxType, {
            type: donutType,
            data: { labels: typeLabels, datasets: [{ label: 'Minutes', data: typeMins }] },
            options: { responsive: true, plugins: { legend: { display: true } } }
          });
        })();
      </script>

    @endif

  </div>
</div>
@endsection