@extends('layouts.superadmin')

@section('title','سقراط — تحليل تقارير التيم')
@section('page-title','👥 سقراط — تحليل تقارير التيم')

@section('content')
@php
  $mode = $mode ?? 'team';
  $view = $view ?? 'cards';
  $reports = $reports ?? collect();
  $teamRows = $teamRows ?? collect();
  $stats = $stats ?? [];

  $badgeAI = function(int $ai){
    if ($ai >= 90) return ['أسطوري','bg-emerald-500/15 border border-emerald-300/20 text-emerald-100'];
    if ($ai >= 75) return ['قوي','bg-cyan-500/15 border border-cyan-300/20 text-cyan-100'];
    if ($ai >= 60) return ['جيد','bg-amber-500/15 border border-amber-300/20 text-amber-100'];
    if ($ai >= 45) return ['ضعيف','bg-rose-500/15 border border-rose-300/20 text-rose-100'];
    return ['خطر','bg-rose-600/20 border border-rose-300/25 text-rose-100'];
  };
@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="rounded-[28px] border border-white/10 bg-gradient-to-br from-white/6 via-white/4 to-white/2 backdrop-blur-2xl p-6">
      <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>سقراط • Team Reports • {{ $from->toDateString() }} → {{ $to->toDateString() }}</span>
          </div>

          <h1 class="mt-3 text-2xl font-extrabold text-white tracking-tight">
            👥 تحليل تقارير التيم
          </h1>

          <p class="mt-2 text-sm text-white/70 max-w-3xl">
            اختر العرض: حسب الأعضاء (Team) أو حسب التقارير (Reports). وفيه AI Score سريع لكل تقرير.
          </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">{{ number_format($stats['total'] ?? 0) }}</b>
            </span>
            <span class="px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-300/15 text-emerald-100">
              مقبول: <b>{{ number_format($stats['approved'] ?? 0) }}</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($stats['rejected'] ?? 0) }}</b>
            </span>
            <span class="px-3 py-1 rounded-full bg-white/8 border border-white/10 text-white/70">
              AI Avg: <b class="text-white">{{ number_format($stats['avg_ai'] ?? 0) }}</b>
            </span>
          </div>
        </div>

        <div class="w-full lg:w-[560px] flex flex-col gap-3">
          <div class="flex flex-wrap gap-2">
            <a href="{{ request()->fullUrlWithQuery(['mode'=>'team']) }}"
               class="px-4 py-2 rounded-xl border text-[13px] font-bold
                      {{ $mode==='team' ? 'bg-white/12 border-white/15 text-white' : 'bg-black/20 border-white/10 text-white/70 hover:bg-white/8 hover:text-white' }}">
              👤 حسب الأعضاء
            </a>
            <a href="{{ request()->fullUrlWithQuery(['mode'=>'reports']) }}"
               class="px-4 py-2 rounded-xl border text-[13px] font-bold
                      {{ $mode==='reports' ? 'bg-white/12 border-white/15 text-white' : 'bg-black/20 border-white/10 text-white/70 hover:bg-white/8 hover:text-white' }}">
              🧾 حسب التقارير
            </a>
          </div>

          @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="mode" value="{{ $mode }}">
            <input type="hidden" name="view" value="{{ $view }}">

            <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="type" 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="regular" @selected(($filters['type'] ?? '')==='regular')>عادي</option>
                  <option value="plus" @selected(($filters['type'] ?? '')==='plus')>بلس</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>
                <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="pending" @selected(($filters['status'] ?? '')==='pending')>معلّق</option>
                  <option value="approved" @selected(($filters['status'] ?? '')==='approved')>مقبول</option>
                  <option value="rejected" @selected(($filters['status'] ?? '')==='rejected')>مرفوض</option>
                </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'] ?? '' }}"
                       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>

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

        @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">Approved</th>
                    <th class="p-2">Rejected</th>
                    <th class="p-2">Pending</th>
                    <th class="p-2">AI Avg</th>
                    <th class="p-2">% Progress</th>
                    <th class="p-2">% Issues</th>
                  </tr>
                </thead>
                <tbody class="divide-y divide-white/10">
                  @foreach($teamRows as $i => $r)
                    @php [$aiLab,$aiCls] = $badgeAI((int)$r['avg_ai']); @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['creator_name'] }}</td>
                      <td class="p-2 text-white/75">{{ number_format($r['total']) }}</td>
                      <td class="p-2 text-emerald-200 font-bold">{{ number_format($r['approved']) }}</td>
                      <td class="p-2 text-rose-200 font-bold">{{ number_format($r['rejected']) }}</td>
                      <td class="p-2 text-white/75">{{ number_format($r['pending']) }}</td>
                      <td class="p-2"><span class="px-3 py-1 rounded-full text-[11px] {{ $aiCls }}">{{ $r['avg_ai'] }} • {{ $aiLab }}</span></td>
                      <td class="p-2 text-white/75">{{ $r['pct_progress'] }}%</td>
                      <td class="p-2 text-white/75">{{ $r['pct_issues'] }}%</td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        @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($teamRows as $r)
              @php [$aiLab,$aiCls] = $badgeAI((int)$r['avg_ai']); @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">Member</div>
                    <div class="mt-1 text-white font-extrabold truncate">{{ $r['creator_name'] }}</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['total']) }}</b>
                      </span>
                      <span class="px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-300/15 text-emerald-100">
                        Approved: <b>{{ number_format($r['approved']) }}</b>
                      </span>
                      <span class="px-3 py-1 rounded-full bg-rose-500/10 border border-rose-300/15 text-rose-100">
                        Rejected: <b>{{ number_format($r['rejected']) }}</b>
                      </span>
                    </div>
                  </div>

                  <div class="shrink-0 text-right">
                    <div class="text-[11px] text-white/60">AI</div>
                    <span class="inline-flex px-3 py-1 rounded-full text-[11px] {{ $aiCls }}">
                      {{ $r['avg_ai'] }} • {{ $aiLab }}
                    </span>
                  </div>
                </div>

                <div class="mt-3 grid grid-cols-2 gap-2 text-[11px]">
                  <div class="rounded-xl bg-black/20 border border-white/10 text-white/75 p-2">
                    Progress: <b class="text-white">{{ $r['pct_progress'] }}%</b>
                  </div>
                  <div class="rounded-xl bg-black/20 border border-white/10 text-white/75 p-2">
                    Issues: <b class="text-white">{{ $r['pct_issues'] }}%</b>
                  </div>
                </div>
              </div>
            @endforeach
          </div>
        @endif
      @endif

    {{-- REPORTS MODE --}}
    @else
      @if($reports->isEmpty())
        <div class="rounded-[26px] border border-white/10 bg-white/4 backdrop-blur-2xl p-10 text-center text-white/65">
          لا توجد تقارير ضمن هذا المدى.
        </div>
      @else
        @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">AI</th>
                    <th class="p-2">مختصر</th>
                  </tr>
                </thead>
                <tbody class="divide-y divide-white/10">
                  @foreach($reports as $i => $r)
                    @php
                      [$aiLab,$aiCls] = $badgeAI((int)$r['ai']);
                      $typeCls = $r['activity_type']==='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';
                      $st = $r['program_status'] ?? 'pending';
                      $stCls = $st==='approved' ? 'bg-emerald-500/10 border border-emerald-300/15 text-emerald-100'
                            : ($st==='rejected' ? 'bg-rose-500/10 border border-rose-300/15 text-rose-100'
                            : 'bg-white/8 border border-white/10 text-white/75');
                      $stLab = $st==='approved' ? 'مقبول' : ($st==='rejected' ? 'مرفوض' : 'معلّق');
                    @endphp
                    <tr class="hover:bg-white/6 transition">
                      <td class="p-2 text-white/60">{{ $i+1 }}</td>
                      <td class="p-2 text-white/70">{{ $r['activity_date'] }}</td>
                      <td class="p-2"><span class="px-3 py-1 rounded-full text-[11px] {{ $typeCls }}">{{ $r['activity_type']==='plus' ? 'Plus' : 'عادي' }}</span></td>
                      <td class="p-2 text-white/70">{{ strtoupper($r['platform'] ?? '—') }}</td>
                      <td class="p-2 text-white/90 font-semibold">{{ $r['creator_name'] }}</td>
                      <td class="p-2"><span class="px-3 py-1 rounded-full text-[11px] {{ $stCls }}">{{ $stLab }}</span></td>
                      <td class="p-2"><span class="px-3 py-1 rounded-full text-[11px] {{ $aiCls }}">{{ $r['ai'] }} • {{ $aiLab }}</span></td>
                      <td class="p-2 text-white/70">{{ \Illuminate\Support\Str::limit($r['short_summary'] ?? '', 60) }}</td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        @else
          <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
            @foreach($reports as $r)
              @php
                [$aiLab,$aiCls] = $badgeAI((int)$r['ai']);
                $typeCls = $r['activity_type']==='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';
                $st = $r['program_status'] ?? 'pending';
                $stCls = $st==='approved' ? 'bg-emerald-500/10 border border-emerald-300/15 text-emerald-100'
                      : ($st==='rejected' ? 'bg-rose-500/10 border border-rose-300/15 text-rose-100'
                      : 'bg-white/8 border border-white/10 text-white/75');
                $stLab = $st==='approved' ? 'مقبول' : ($st==='rejected' ? 'مرفوض' : 'معلّق');
              @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">{{ $r['activity_date'] }}</div>
                    <div class="mt-1 text-white font-extrabold truncate">{{ $r['creator_name'] }}</div>

                    <div class="mt-2 flex flex-wrap gap-2 text-[11px]">
                      <span class="px-3 py-1 rounded-full {{ $typeCls }}">{{ $r['activity_type']==='plus' ? 'Plus' : 'عادي' }}</span>
                      <span class="px-3 py-1 rounded-full {{ $stCls }}">{{ $stLab }}</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>

                  <div class="shrink-0 text-right">
                    <div class="text-[11px] text-white/60">AI</div>
                    <span class="px-3 py-1 rounded-full text-[11px] {{ $aiCls }}">{{ $r['ai'] }} • {{ $aiLab }}</span>
                  </div>
                </div>

                <div class="mt-3 text-[12px] text-white/70 leading-relaxed">
                  {{ \Illuminate\Support\Str::limit($r['short_summary'] ?? '', 160) }}
                </div>

                <div class="mt-3 text-[11px] text-white/55">
                  Host: <b class="text-white/75">{{ $r['live_host'] ?? '' }}</b>
                  <span class="mx-2 opacity-40">•</span>
                  Owner: <b class="text-white/75">{{ $r['live_owner_name'] ?? '' }}</b>
                </div>
              </div>
            @endforeach
          </div>
        @endif
      @endif
    @endif

  </div>
</div>
@endsection