{{-- resources/views/superadmin/proactive-ai-deep/overview.blade.php --}}
@extends('layouts.superadmin')

@section('title','لوحة التحليل الكلي — ProActive AI')
@section('page-title','📊 لوحة التحليل الكلي — ProActive AI')

@section('content')
<div class="space-y-6">

  {{-- HERO --}}
  <div class="relative overflow-hidden rounded-2xl bg-gradient-to-r from-indigo-700 via-purple-700 to-sky-700 text-white p-6 md:p-8 shadow-lg">
    <div class="absolute inset-0 opacity-20 pointer-events-none">
      <svg class="w-full h-full" viewBox="0 0 800 400" fill="none">
        <defs>
          <linearGradient id="gOverview" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#A855F7"/>
            <stop offset="100%" stop-color="#38BDF8"/>
          </linearGradient>
        </defs>
        <circle cx="120" cy="80" r="160" fill="url(#gOverview)" />
        <circle cx="700" cy="300" r="220" fill="url(#gOverview)" opacity="0.6" />
      </svg>
    </div>

    <div class="relative space-y-3">
      <h1 class="text-2xl md:text-3xl font-extrabold">
        لوحة التحليل الكلي لـ ProActive AI
      </h1>
      <p class="text-sm md:text-base text-white/85 leading-relaxed">
        هذه اللوحة تعطيك نظرة شاملة على أداء ProActive:
        كل التقارير المسجّلة، أداء الشهر الحالي، مقارنة بالشهر السابق،
        مع قراءة ذكية لمؤشر الصحة العام وأهم التحسينات المطلوبة.
      </p>

      <div class="flex flex-wrap gap-2 text-xs mt-2">
        <span class="px-2 py-0.5 rounded-full bg-white/15 border border-white/20">
          اليوم: {{ $today }}
        </span>
        <span class="px-2 py-0.5 rounded-full bg-white/10 text-white/80">
          الشهر الحالي: {{ $currentRange['from'] }} → {{ $currentRange['to'] }}
        </span>
        <span class="px-2 py-0.5 rounded-full bg-white/10 text-white/80">
          الشهر السابق: {{ $previousRange['from'] }} → {{ $previousRange['to'] }}
        </span>
      </div>
    </div>
  </div>

  {{-- كروت سريعة (كلي / شهر حالي / شهر سابق) --}}
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    {{-- كلي --}}
    <div class="rounded-2xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 p-4 space-y-2">
      <div class="text-xs text-slate-600 dark:text-slate-300">كل التقارير (منذ البداية)</div>
      <div class="text-2xl font-extrabold text-slate-900 dark:text-slate-50">
        {{ $overallMetrics['count'] }} تقرير
      </div>
      <div class="text-[11px] text-slate-500 dark:text-slate-400 space-y-1">
        <div>PLUS: {{ $overallMetrics['plus'] }} ({{ $overallMetrics['pct_plus'] }}%)</div>
        <div>متوسط التقدير: {{ $overallMetrics['avg_grade'] }} / 5</div>
        <div>مؤشر صحة ProActive: {{ $overallMetrics['health_score'] }} / 100</div>
      </div>
    </div>

    {{-- شهر حالي --}}
    <div class="rounded-2xl bg-emerald-50 dark:bg-emerald-900/30 border border-emerald-200 dark:border-emerald-700 p-4 space-y-2">
      <div class="text-xs text-emerald-700 dark:text-emerald-200">الشهر الحالي</div>
      <div class="text-2xl font-extrabold text-emerald-900 dark:text-emerald-50">
        {{ $currentMetrics['count'] }} تقرير
      </div>
      <div class="text-[11px] text-emerald-700/80 dark:text-emerald-200/80 space-y-1">
        <div>تقدّم: {{ $currentMetrics['pct_progress'] }}% • مشاكل: {{ $currentMetrics['pct_issues'] }}%</div>
        <div>PLUS: {{ $currentMetrics['pct_plus'] }}%</div>
        <div>مؤشر الصحة: {{ $currentMetrics['health_score'] }} / 100</div>
      </div>
    </div>

    {{-- شهر سابق --}}
    <div class="rounded-2xl bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-700 p-4 space-y-2">
      <div class="text-xs text-amber-800 dark:text-amber-100">الشهر السابق</div>
      <div class="text-2xl font-extrabold text-amber-900 dark:text-amber-50">
        {{ $previousMetrics['count'] }} تقرير
      </div>
      <div class="text-[11px] text-amber-800/80 dark:text-amber-100/80 space-y-1">
        <div>تقدّم: {{ $previousMetrics['pct_progress'] }}% • مشاكل: {{ $previousMetrics['pct_issues'] }}%</div>
        <div>PLUS: {{ $previousMetrics['pct_plus'] }}%</div>
        <div>مؤشر الصحة: {{ $previousMetrics['health_score'] }} / 100</div>
      </div>
    </div>
  </div>

  {{-- مقارنة شهر حالي / سابق --}}
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
    <div class="rounded-2xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-4 space-y-3">
      <h3 class="text-sm font-bold text-gray-800 dark:text-gray-100">
        مقارنة شهرية: هل نحن في تحسّن؟
      </h3>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs">
        {{-- health --}}
        <div class="rounded-xl bg-slate-50 dark:bg-slate-800/70 p-3">
          <div class="text-[11px] text-slate-600 dark:text-slate-300">مؤشر الصحة (من 100)</div>
          @php $hDelta = $trend['health_delta']; @endphp
          <div class="mt-1 flex items-baseline gap-2">
            <span class="text-lg font-extrabold">
              {{ $currentMetrics['health_score'] }}
            </span>
            <span class="text-[11px]
              @if($hDelta > 0) text-emerald-600
              @elseif($hDelta < 0) text-rose-600
              @else text-slate-500 @endif">
              @if($hDelta > 0) ↑ تحسّن {{ abs($hDelta) }}
              @elseif($hDelta < 0) ↓ تراجع {{ abs($hDelta) }}
              @else — ثابت
              @endif
            </span>
          </div>
        </div>

        {{-- progress --}}
        <div class="rounded-xl bg-emerald-50 dark:bg-emerald-900/40 p-3">
          <div class="text-[11px] text-emerald-700 dark:text-emerald-200">نسبة التقارير التي فيها تقدّم</div>
          @php $pDelta = $trend['progress_delta']; @endphp
          <div class="mt-1 flex items-baseline gap-2">
            <span class="text-lg font-extrabold">
              {{ $currentMetrics['pct_progress'] }}%
            </span>
            <span class="text-[11px]
              @if($pDelta > 0) text-emerald-700
              @elseif($pDelta < 0) text-rose-600
              @else text-slate-500 @endif">
              @if($pDelta > 0) ↑ أعلى من الشهر السابق بـ {{ abs($pDelta) }}%
              @elseif($pDelta < 0) ↓ أقل من الشهر السابق بـ {{ abs($pDelta) }}%
              @else — نفس النسبة
              @endif
            </span>
          </div>
        </div>

        {{-- issues --}}
        <div class="rounded-xl bg-rose-50 dark:bg-rose-900/40 p-3">
          <div class="text-[11px] text-rose-700 dark:text-rose-200">نسبة التقارير التي فيها مشاكل</div>
          @php $iDelta = $trend['issues_delta']; @endphp
          <div class="mt-1 flex items-baseline gap-2">
            <span class="text-lg font-extrabold">
              {{ $currentMetrics['pct_issues'] }}%
            </span>
            <span class="text-[11px]
              @if($iDelta < 0) text-emerald-700
              @elseif($iDelta > 0) text-rose-700
              @else text-slate-500 @endif">
              @if($iDelta < 0) ↓ أقل من الشهر السابق بـ {{ abs($iDelta) }}% (تحسّن)
              @elseif($iDelta > 0) ↑ أعلى من الشهر السابق بـ {{ abs($iDelta) }}% (مقلق)
              @else — نفس النسبة
              @endif
            </span>
          </div>
        </div>

        {{-- PLUS --}}
        <div class="rounded-xl bg-violet-50 dark:bg-violet-900/40 p-3">
          <div class="text-[11px] text-violet-700 dark:text-violet-200">نسبة فعاليات PLUS</div>
          @php $plDelta = $trend['plus_delta']; @endphp
          <div class="mt-1 flex items-baseline gap-2">
            <span class="text-lg font-extrabold">
              {{ $currentMetrics['pct_plus'] }}%
            </span>
            <span class="text-[11px]
              @if($plDelta > 0) text-emerald-700
              @elseif($plDelta < 0) text-rose-700
              @else text-slate-500 @endif">
              @if($plDelta > 0) ↑ ازدياد {{ abs($plDelta) }}% عن الشهر السابق
              @elseif($plDelta < 0) ↓ أقل من الشهر السابق بـ {{ abs($plDelta) }}%
              @else — نفس النسبة
              @endif
            </span>
          </div>
        </div>
      </div>
    </div>

    {{-- ملخص العلاقات والدعوات --}}
    <div class="rounded-2xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-4 space-y-3">
      <h3 class="text-sm font-bold text-gray-800 dark:text-gray-100">
        التفاعل الاجتماعي (كلّي)
      </h3>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs">
        <div class="rounded-xl bg-blue-50 dark:bg-blue-900/40 p-3">
          <div class="text-[11px] text-blue-700 dark:text-blue-200">الأصدقاء الجدد</div>
          <div class="mt-1 text-lg font-extrabold text-blue-900 dark:text-blue-50">
            {{ $overallMetrics['friends_sum'] }}
          </div>
          <div class="text-[11px] text-blue-700/80 dark:text-blue-200/80">
            متوسط {{ $overallMetrics['avg_friends'] }} صديق جديد لكل تقرير.
          </div>
        </div>

        <div class="rounded-xl bg-cyan-50 dark:bg-cyan-900/40 p-3">
          <div class="text-[11px] text-cyan-700 dark:text-cyan-200">الدعوات المرسلة</div>
          <div class="mt-1 text-lg font-extrabold text-cyan-900 dark:text-cyan-50">
            {{ $overallMetrics['inv_sum'] }}
          </div>
          <div class="text-[11px] text-cyan-700/80 dark:text-cyan-200/80">
            متوسط {{ $overallMetrics['avg_invites'] }} دعوة لكل تقرير.
          </div>
        </div>
      </div>

      <p class="text-[11px] text-gray-500 dark:text-gray-400">
        الهدف على المدى المتوسط: رفع متوسط الأصدقاء الجدد والدعوات بشكل تدريجي،
        بدون التضحية بجودة التقدير أو زيادة المشاكل.
      </p>
    </div>
  </div>

  {{-- اقتراحات كلية من الذكاء الاصطناعي --}}
  @php
    $grouped = $aiSummary;
  @endphp

  <div class="bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-700 shadow-sm">
    <div class="flex items-center justify-between px-5 py-4 border-b border-gray-200 dark:border-gray-700">
      <div class="flex items-center gap-2">
        <div class="w-8 h-8 rounded-xl bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center">
          <i class="fa-solid fa-wand-magic-sparkles text-indigo-600 dark:text-indigo-200"></i>
        </div>
        <div>
          <h3 class="font-bold text-gray-900 dark:text-gray-50 text-sm">
            قراءة AI كلية لوضع ProActive
          </h3>
          <p class="text-[11px] text-gray-500 dark:text-gray-400">
            ملخص سريع: أهم الإيجابيات، المخاطر العامة، وخطوات استراتيجية مقترحة لتحسين الأداء في الأشهر القادمة.
          </p>
        </div>
      </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 px-5 py-5 text-[12px] leading-relaxed">

      {{-- إيجابي --}}
      <div class="space-y-3">
        <div class="flex items-center gap-2">
          <span class="w-7 h-7 rounded-full bg-emerald-100 dark:bg-emerald-900/40 flex items-center justify-center">
            <i class="fa-solid fa-circle-check text-emerald-600 dark:text-emerald-200 text-sm"></i>
          </span>
          <span class="text-xs font-semibold text-emerald-700 dark:text-emerald-200">نِقَاط قوة كلية</span>
        </div>

        <div class="space-y-2">
          @forelse($grouped['positives'] as $s)
            <div class="rounded-xl border border-emerald-100 dark:border-emerald-800 bg-emerald-50/70 dark:bg-emerald-900/20 p-3">
              {{ $s }}
            </div>
          @empty
            <p class="text-[11px] text-gray-500 dark:text-gray-400">
              لا توجد مؤشرات قوة عامة واضحة من الأرقام وحدها؛ قد يكون السبب قلّة البيانات أو تشتّت الفعاليات.
            </p>
          @endforelse
        </div>
      </div>

      {{-- مخاطر --}}
      <div class="space-y-3">
        <div class="flex items-center gap-2">
          <span class="w-7 h-7 rounded-full bg-rose-100 dark:bg-rose-900/40 flex items-center justify-center">
            <i class="fa-solid fa-triangle-exclamation text-rose-600 dark:text-rose-200 text-sm"></i>
          </span>
          <span class="text-xs font-semibold text-rose-700 dark:text-rose-200">مخاطر كلية / نقاط ضعف</span>
        </div>

        <div class="space-y-2">
          @forelse($grouped['risks'] as $s)
            <div class="rounded-xl border border-rose-100 dark:border-rose-800 bg-rose-50/70 dark:bg-rose-900/20 p-3">
              {{ $s }}
            </div>
          @empty
            <p class="text-[11px] text-gray-500 dark:text-gray-400">
              لا توجد إشارات خطرة جدًا، لكن يفضّل مراقبة نسبة المشاكل شهريًا للتأكد من عدم ارتفاعها فجأة.
            </p>
          @endforelse
        </div>
      </div>

      {{-- خطوات عملية --}}
      <div class="space-y-3">
        <div class="flex items-center gap-2">
          <span class="w-7 h-7 rounded-full bg-amber-100 dark:bg-amber-900/40 flex items-center justify-center">
            <i class="fa-solid fa-person-running text-amber-600 dark:text-amber-200 text-sm"></i>
          </span>
          <span class="text-xs font-semibold text-amber-700 dark:text-amber-200">خطوات استراتيجية مقترحة</span>
        </div>

        <div class="space-y-2">
          @forelse($grouped['actions'] as $s)
            <div class="rounded-xl border border-amber-100 dark:border-amber-800 bg-amber-50/70 dark:bg-amber-900/20 p-3">
              {{ $s }}
            </div>
          @empty
            <p class="text-[11px] text-gray-500 dark:text-gray-400">
              لم تُرصد خطوات كلية حاسمة؛ استخدم تحليلات التقارير الفردية لتحديد أولويات العمل القادمة.
            </p>
          @endforelse
        </div>
      </div>

    </div>
  </div>

</div>
@endsection