@extends('layouts.superadmin')

@section('title','سقراط — ساعات ProActive')
@section('page-title', $pageTitle ?? '⏱️ ساعات ProActive')

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

  $toHM = function(int $m){
    $m = max(0,$m);
    return [intdiv($m,60), $m%60];
  };

  $statusMeta = function(string $st){
    return match($st){
      'active','ongoing' => ['نشطة','bg-emerald-500/12 text-emerald-100 border border-emerald-300/15'],
      'finished' => ['منتهية','bg-white/10 text-white/70 border border-white/12'],
      'cancelled' => ['ملغاة','bg-rose-500/12 text-rose-100 border border-rose-300/15'],
      default => ['—','bg-white/10 text-white/70 border border-white/12'],
    };
  };

  $typeMeta = function(string $t){
    return $t === 'plus'
      ? ['+Plus','bg-fuchsia-500/12 text-fuchsia-100 border border-fuchsia-300/15']
      : ['عادية','bg-amber-500/10 text-amber-100 border border-amber-300/15'];
  };
@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">

    {{-- HERO --}}
    <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="pointer-events-none absolute -bottom-28 -left-24 w-[28rem] h-[28rem] rounded-full bg-fuchsia-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-emerald-300 animate-pulse"></span>
            <span>سقراط • Hours • {{ $pageHint ?? '' }}</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 leading-relaxed">
            هذه الصفحة تعتمد على جدول <code class="px-1.5 py-0.5 rounded bg-black/25 border border-white/10 text-white/80">proactive_schedule_sessions</code>
            للجلسات المنتهية/الملغاة، وتحسب النشطة لحظيًا من <code class="px-1.5 py-0.5 rounded bg-black/25 border border-white/10 text-white/80">proactive_schedules</code>.
          </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 class="opacity-60">({{ number_format($stats['sum_minutes'] ?? 0) }} دقيقة)</span>
            </span>

            <span class="px-3 py-1 rounded-full bg-amber-500/10 border border-amber-300/15 text-amber-100">
              عادي: <b>{{ $stats['reg_h'] ?? 0 }}س {{ $stats['reg_m'] ?? 0 }}د</b>
            </span>

            <span class="px-3 py-1 rounded-full bg-fuchsia-500/10 border border-fuchsia-300/15 text-fuchsia-100">
              بلس: <b>{{ $stats['plus_h'] ?? 0 }}س {{ $stats['plus_m'] ?? 0 }}د</b>
            </span>

            <span class="px-3 py-1 rounded-full bg-white/8 border border-white/10 text-white/70">
              جلسات: <b>{{ number_format($stats['finished'] ?? 0) }}</b> • ملغاة: <b>{{ number_format($stats['cancelled'] ?? 0) }}</b> • نشطة: <b>{{ number_format($stats['active'] ?? 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])

          @if($view === 'cluster')
            @include('superadmin.proactive.socrates.partials._cluster-by', ['clusterBy'=>$clusterBy])
          @endif

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

            <div class="grid grid-cols-2 md:grid-cols-3 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>
                <label class="text-[11px] text-white/60">الحالة</label>
                <select name="status" class="mt-1 w-full rounded-xl bg-black/30 border border-white/10 text-white text-sm px-3 py-2">
                  <option value="">الكل</option>
                  <option value="active"    @selected(($filters['status'] ?? '')==='active')>نشطة</option>
                  <option value="finished"  @selected(($filters['status'] ?? '')==='finished')>منتهية</option>
                  <option value="cancelled" @selected(($filters['status'] ?? '')==='cancelled')>ملغاة</option>
                </select>
              </div>

              <div>
                <label class="text-[11px] text-white/60">المنصة</label>
                <select name="platform" class="mt-1 w-full rounded-xl bg-black/30 border border-white/10 text-white text-sm px-3 py-2">
                  <option value="">الكل</option>
                  @foreach(['tiktok'=>'تيك توك','instagram'=>'إنستغرام','youtube'=>'يوتيوب','other'=>'أخرى'] as $k=>$lab)
                    <option value="{{ $k }}" @selected(($filters['platform'] ?? '')===$k)>{{ $lab }}</option>
                  @endforeach
                </select>
              </div>

              <div class="col-span-2 md:col-span-2">
                <label class="text-[11px] text-white/60">بحث (عنوان/قائد)</label>
                <input type="text" name="q" value="{{ $filters['q'] ?? '' }}"
                       placeholder="مثال: برو اكتيف / ايمان / ..."
                       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 md:col-span-1 flex items-end">
                <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>

    {{-- CONTENT --}}
    @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
                    [$h,$m] = $toHM((int)$r['calc_minutes']);
                    [$stLabel,$stCls] = $statusMeta((string)$r['status']);
                    [$tyLabel,$tyCls] = $typeMeta((string)$r['event_type']);
                  @endphp
                  <tr class="hover:bg-white/6 transition">
                    <td class="p-2 text-white/60">{{ $i+1 }}</td>
                    <td class="p-2"><span class="px-3 py-1 rounded-full text-[11px] {{ $tyCls }}">{{ $tyLabel }}</span></td>
                    <td class="p-2"><span class="px-3 py-1 rounded-full text-[11px] {{ $stCls }}">{{ $stLabel }}</span></td>
                    <td class="p-2 text-white/90 font-semibold">{{ $r['event_title'] ?: '—' }}</td>
                    <td class="p-2 text-white/70">{{ $r['leader_name'] ?: '—' }}</td>
                    <td class="p-2 text-white/70">{{ strtoupper($r['platform'] ?: '—') }}</td>
                    <td class="p-2 text-white/60">
                      {{ $r['event_date'] ?: '—' }}
                      @if(!empty($r['event_time'])) — {{ \Carbon\Carbon::parse($r['event_time'])->format('H:i') }} @endif
                    </td>
                    <td class="p-2 text-amber-200 font-extrabold">{{ $h }}س {{ $m }}د</td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>
        </div>

      {{-- CLUSTER --}}
      @elseif($view === 'cluster')
        @php
          $grouped = match($clusterBy){
            'leader' => $rows->groupBy(fn($r)=> ($r['leader_name'] ?: '—')),
            'platform' => $rows->groupBy(fn($r)=> strtoupper($r['platform'] ?: '—')),
            default => $rows->groupBy(fn($r)=> ($r['event_date'] ?: '—')),
          };
        @endphp

        <div class="space-y-3">
          @foreach($grouped as $k => $items)
            @php
              $mins = (int)$items->sum('calc_minutes');
              [$gh,$gm] = $toHM($mins);
              $count = $items->count();
            @endphp

            <details class="group rounded-[22px] border border-white/10 bg-white/4 backdrop-blur-2xl overflow-hidden">
              <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 bg-amber-500/12 border border-amber-300/15 text-amber-100 inline-grid place-items-center">
                    <i class="fa-solid fa-folder-open"></i>
                  </span>
                  <div class="flex flex-col">
                    <span class="text-white font-extrabold text-[13px]">{{ $k }}</span>
                    <span class="text-white/60 text-[11px]">{{ $count }} عنصر • {{ $gh }}س {{ $gm }}د</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
                    [$h,$m] = $toHM((int)$r['calc_minutes']);
                    [$stLabel,$stCls] = $statusMeta((string)$r['status']);
                    [$tyLabel,$tyCls] = $typeMeta((string)$r['event_type']);
                  @endphp

                  <div class="rounded-2xl p-4 bg-black/20 border border-white/10">
                    <div class="flex items-start justify-between gap-3">
                      <div class="min-w-0">
                        <div class="text-[11px] text-white/60">{{ $r['row_type']==='active' ? 'LIVE (ACTIVE)' : 'SESSION' }}</div>
                        <div class="mt-1 font-extrabold text-white truncate">{{ $r['event_title'] ?: '—' }}</div>

                        <div class="mt-2 flex flex-wrap gap-2 text-[11px]">
                          <span class="px-3 py-1 rounded-full {{ $tyCls }}">{{ $tyLabel }}</span>
                          <span class="px-3 py-1 rounded-full {{ $stCls }}">{{ $stLabel }}</span>
                          <span class="px-3 py-1 rounded-full bg-black/20 border border-white/10 text-white/70">{{ strtoupper($r['platform'] ?: '—') }}</span>
                        </div>

                        <div class="mt-2 text-[12px] text-white/70">
                          <i class="fa-regular fa-user"></i> {{ $r['leader_name'] ?: '—' }}
                        </div>

                        <div class="mt-1 text-[12px] text-white/60">
                          <i class="fa-regular fa-clock"></i>
                          {{ $r['event_date'] ?: '—' }}
                          @if(!empty($r['event_time'])) — {{ \Carbon\Carbon::parse($r['event_time'])->format('H:i') }} @endif
                        </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">{{ $h }}س {{ $m }}د</div>
                        <div class="text-[11px] text-white/50">{{ number_format((int)$r['calc_minutes']) }} دقيقة</div>
                      </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
              [$h,$m] = $toHM((int)$r['calc_minutes']);
              [$stLabel,$stCls] = $statusMeta((string)$r['status']);
              [$tyLabel,$tyCls] = $typeMeta((string)$r['event_type']);
            @endphp

            <div class="relative overflow-hidden 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">{{ $r['row_type']==='active' ? 'LIVE (ACTIVE)' : 'SESSION' }}</div>
                  <div class="mt-1 font-extrabold text-white truncate">{{ $r['event_title'] ?: '—' }}</div>

                  <div class="mt-2 flex flex-wrap gap-2 text-[11px]">
                    <span class="px-3 py-1 rounded-full {{ $tyCls }}">{{ $tyLabel }}</span>
                    <span class="px-3 py-1 rounded-full {{ $stCls }}">{{ $stLabel }}</span>
                  </div>

                  <div class="mt-2 text-[12px] text-white/70">
                    <i class="fa-regular fa-user"></i> {{ $r['leader_name'] ?: '—' }}
                  </div>

                  <div class="mt-1 text-[12px] text-white/60">
                    <i class="fa-regular fa-clock"></i>
                    {{ $r['event_date'] ?: '—' }}
                    @if(!empty($r['event_time'])) — {{ \Carbon\Carbon::parse($r['event_time'])->format('H:i') }} @endif
                  </div>

                  <div class="mt-2 text-[11px] text-white/55">
                    المنصة: <b class="text-white/75">{{ strtoupper($r['platform'] ?: '—') }}</b>
                  </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">{{ $h }}س {{ $m }}د</div>
                  <div class="text-[11px] text-white/50">{{ number_format((int)$r['calc_minutes']) }} دقيقة</div>
                </div>
              </div>
            </div>
          @endforeach
        </div>
      @endif

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