@extends('layouts.superadmin')

@section('title','سقراط — إنجازات ProActive')
@section('page-title','🏆 سقراط — إنجازات ProActive')

@section('content')
@php
  $rows = $rows ?? collect();
  $stats = $stats ?? [];
  $view = $view ?? 'cards';
  $q = $q ?? '';

  $toHM = function(int $m){
    $m = max(0,$m);
    return [intdiv($m,60), $m%60];
  };
@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-amber-300/12 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-fuchsia-300 animate-pulse"></span>
            <span>سقراط • Achievements • {{ $from->toDateString() }} → {{ $to->toDateString() }}</span>
          </div>

          <h1 class="mt-3 text-2xl font-extrabold text-white tracking-tight">
            🏆 إنجازات ProActive
          </h1>

          <p class="mt-2 text-sm text-white/70 max-w-3xl">
            Leaderboard حسب مجموع الساعات والجلسات (مبني على sessions).
          </p>

          <div class="mt-3 flex flex-wrap gap-2 text-[11px]">
            <span class="px-3 py-1 rounded-full bg-white/8 border border-white/10 text-white/70">
              مجموع الوقت: <b class="text-white">{{ $stats['sum_h'] ?? 0 }}س {{ $stats['sum_m'] ?? 0 }}د</b>
            </span>
            <span class="px-3 py-1 rounded-full bg-white/8 border border-white/10 text-white/70">
              القادة: <b class="text-white">{{ number_format($stats['leaders'] ?? 0) }}</b>
            </span>
            <span class="px-3 py-1 rounded-full bg-white/8 border border-white/10 text-white/70">
              الجلسات: <b class="text-white">{{ number_format($stats['sessions'] ?? 0) }}</b>
            </span>
          </div>
        </div>

        <div class="flex flex-col gap-3 w-full lg:w-[520px]">
          @include('superadmin.proactive.socrates.partials._view-switch', ['view'=>$view])

          <form method="GET" class="rounded-2xl bg-black/20 border border-white/10 p-3">
            <input type="hidden" name="view" value="{{ $view }}">

            <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>
                <input type="text" name="q" value="{{ $q }}"
                       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">
                <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>
      </div>
    </div>

    @if($rows->isEmpty())
      <div class="rounded-[26px] border border-white/10 bg-white/4 backdrop-blur-2xl p-10 text-center text-white/65">
        لا توجد بيانات ضمن هذا المدى.
      </div>
    @else

      {{-- TABLE --}}
      @if($view === 'table')
        <div class="rounded-[26px] border border-white/10 bg-white/4 backdrop-blur-2xl p-4">
          <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
              <thead class="bg-black/20">
                <tr class="text-right text-white/70">
                  <th class="p-2">#</th>
                  <th class="p-2">القائد</th>
                  <th class="p-2">جلسات</th>
                  <th class="p-2">إجمالي</th>
                  <th class="p-2">متوسط/جلسة</th>
                  <th class="p-2">بلس</th>
                  <th class="p-2">عادي</th>
                  <th class="p-2">ملغاة</th>
                </tr>
              </thead>
              <tbody class="divide-y divide-white/10">
                @foreach($rows as $i => $r)
                  @php
                    [$th,$tm] = $toHM((int)$r['total_minutes']);
                    [$ah,$am] = $toHM((int)$r['avg_minutes']);
                    [$ph,$pm] = $toHM((int)$r['plus_minutes']);
                    [$rh,$rm] = $toHM((int)$r['regular_minutes']);
                  @endphp
                  <tr class="hover:bg-white/6 transition">
                    <td class="p-2 text-white/60">{{ $i+1 }}</td>
                    <td class="p-2 text-white/90 font-extrabold">{{ $r['leader'] }}</td>
                    <td class="p-2 text-white/75">{{ number_format($r['sessions_count']) }}</td>
                    <td class="p-2 text-amber-200 font-extrabold">{{ $th }}س {{ $tm }}د</td>
                    <td class="p-2 text-white/75">{{ $ah }}س {{ $am }}د</td>
                    <td class="p-2 text-fuchsia-200 font-bold">{{ $ph }}س {{ $pm }}د</td>
                    <td class="p-2 text-amber-200 font-bold">{{ $rh }}س {{ $rm }}د</td>
                    <td class="p-2 text-rose-200 font-bold">{{ number_format($r['cancelled_sessions']) }}</td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>

      {{-- CLUSTER (dominant type) --}}
      @elseif($view === 'cluster')
        @php
          $grouped = $rows->groupBy(function($r){
            return ((int)$r['plus_minutes'] > (int)$r['regular_minutes'])
              ? 'Plus Masters'
              : 'Regular Masters';
          });
        @endphp

        <div class="space-y-3">
          @foreach($grouped as $k => $items)
            @php $sum = (int)$items->sum('total_minutes'); [$h,$m] = $toHM($sum); @endphp
            <details class="group rounded-[22px] border border-white/10 bg-white/4 backdrop-blur-2xl overflow-hidden" open>
              <summary class="cursor-pointer list-none px-4 py-3 flex items-center justify-between hover:bg-white/6 transition">
                <div class="flex items-center gap-3">
                  <span class="w-8 h-8 rounded-2xl {{ str_contains($k,'Plus') ? 'bg-fuchsia-500/12 border border-fuchsia-300/15 text-fuchsia-100' : 'bg-amber-500/10 border border-amber-300/15 text-amber-100' }} inline-grid place-items-center">
                    <i class="fa-solid fa-trophy"></i>
                  </span>
                  <div class="flex flex-col">
                    <span class="text-white font-extrabold text-[13px]">{{ $k }}</span>
                    <span class="text-white/60 text-[11px]">{{ $items->count() }} قائد • {{ $h }}س {{ $m }}د</span>
                  </div>
                </div>
                <i class="fa-solid fa-chevron-down text-[12px] text-white/60 transition-transform duration-200 group-open:rotate-180"></i>
              </summary>

              <div class="p-4 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
                @foreach($items as $r)
                  @php
                    [$th,$tm] = $toHM((int)$r['total_minutes']);
                    [$ah,$am] = $toHM((int)$r['avg_minutes']);
                  @endphp
                  <div class="rounded-2xl p-4 bg-black/20 border border-white/10">
                    <div class="text-[11px] text-white/60">Leader</div>
                    <div class="mt-1 text-white font-extrabold truncate">{{ $r['leader'] }}</div>

                    <div class="mt-2 text-[12px] text-white/70">
                      جلسات: <b class="text-white">{{ number_format($r['sessions_count']) }}</b>
                      <span class="mx-2 opacity-40">•</span>
                      ملغاة: <b class="text-rose-200">{{ number_format($r['cancelled_sessions']) }}</b>
                    </div>

                    <div class="mt-3 rounded-xl bg-white/6 border border-white/10 p-3">
                      <div class="text-[11px] text-white/60">الإجمالي</div>
                      <div class="text-xl font-extrabold text-amber-200">{{ $th }}س {{ $tm }}د</div>
                      <div class="text-[11px] text-white/55">متوسط: {{ $ah }}س {{ $am }}د</div>
                    </div>
                  </div>
                @endforeach
              </div>
            </details>
          @endforeach
        </div>

      {{-- CARDS / GRID --}}
      @else
        @php
          $cols = $view === 'grid'
            ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'
            : 'grid-cols-1 md:grid-cols-2 xl:grid-cols-3';
        @endphp

        <div class="grid {{ $cols }} gap-3">
          @foreach($rows as $r)
            @php
              [$th,$tm] = $toHM((int)$r['total_minutes']);
              [$ah,$am] = $toHM((int)$r['avg_minutes']);
              [$ph,$pm] = $toHM((int)$r['plus_minutes']);
              [$rh,$rm] = $toHM((int)$r['regular_minutes']);
              $dominantPlus = ((int)$r['plus_minutes'] > (int)$r['regular_minutes']);
            @endphp

            <div class="rounded-[22px] border border-white/10 bg-white/4 backdrop-blur-2xl p-4 hover:bg-white/6 transition">
              <div class="flex items-start justify-between gap-3">
                <div class="min-w-0">
                  <div class="text-[11px] text-white/60">Leader</div>
                  <div class="mt-1 text-white font-extrabold truncate">{{ $r['leader'] }}</div>

                  <div class="mt-2 flex flex-wrap gap-2 text-[11px]">
                    <span class="px-3 py-1 rounded-full bg-black/20 border border-white/10 text-white/70">
                      جلسات: <b class="text-white">{{ number_format($r['sessions_count']) }}</b>
                    </span>
                    <span class="px-3 py-1 rounded-full bg-rose-500/10 border border-rose-300/15 text-rose-100">
                      ملغاة: <b>{{ number_format($r['cancelled_sessions']) }}</b>
                    </span>
                    <span class="px-3 py-1 rounded-full {{ $dominantPlus ? 'bg-fuchsia-500/10 border border-fuchsia-300/15 text-fuchsia-100' : 'bg-amber-500/10 border border-amber-300/15 text-amber-100' }}">
                      {{ $dominantPlus ? 'Plus Dominant' : 'Regular Dominant' }}
                    </span>
                  </div>
                </div>

                <div class="shrink-0 text-right">
                  <div class="text-[11px] text-white/60">الإجمالي</div>
                  <div class="text-xl font-extrabold text-amber-200">{{ $th }}س {{ $tm }}د</div>
                  <div class="text-[11px] text-white/55">متوسط: {{ $ah }}س {{ $am }}د</div>
                </div>
              </div>

              <div class="mt-3 grid grid-cols-2 gap-2 text-[11px]">
                <div class="rounded-xl bg-fuchsia-500/10 border border-fuchsia-300/15 text-fuchsia-100 p-2">
                  بلس: <b>{{ $ph }}س {{ $pm }}د</b>
                </div>
                <div class="rounded-xl bg-amber-500/10 border border-amber-300/15 text-amber-100 p-2">
                  عادي: <b>{{ $rh }}س {{ $rm }}د</b>
                </div>
              </div>
            </div>
          @endforeach
        </div>
      @endif

    @endif
  </div>
</div>
@endsection