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

@section('title','تحليلات AI العميقة 🧠 — ProActive Deep Intelligence')
@section('page-title','🧠 تحليلات AI العميقة — ProActive Deep Intelligence')

@section('content')
@php
    $summary    = $summary    ?? [];
    $window     = $window     ?? [];
    $engagement = $engagement ?? [];
    $gradesAll  = collect($gradesAll ?? []);
    $platformsAll = collect($platformsAll ?? []);
    $busyDays   = collect($busyDays ?? []);

    $totalReports   = (int)($summary['total']      ?? 0);
    $plusTotal      = (int)($summary['plus_total'] ?? 0);
    $avgGrade       = (float)($summary['avg_grade'] ?? 0);

    $last30         = (int)($window['last30']        ?? 0);
    $prev30         = (int)($window['prev30']        ?? 0);
    $trendReports   = $window['trend_reports']       ?? null;
    $issuesPct      = (float)($window['issues_pct']  ?? 0);
    $progressPct    = (float)($window['progress_pct']?? 0);
    $plusPct        = (float)($window['plus_pct']    ?? 0);

    $friendsSum     = (int)($engagement['friends_sum']  ?? 0);
    $invSum         = (int)($engagement['inv_sum']      ?? 0);
    $avgFriends     = (float)($engagement['avg_friends']?? 0);
    $avgInvites     = (float)($engagement['avg_invites']?? 0);

    // أعلى منصة و أقل منصة
    $topPlatform = null;
    $lowPlatform = null;
    if ($platformsAll->count()) {
        $topPlatform = $platformsAll->sortDesc()->keys()->first();
        $lowPlatform = $platformsAll->sort()->keys()->first();
    }

    // قراءة سريعة للحالة
    $healthLabel = 'غير محدد';
    $healthColor = 'bg-slate-500/30 text-slate-100';

    if ($progressPct >= 40 && $issuesPct < 15) {
        $healthLabel = 'ممتازة جداً';
        $healthColor = 'bg-emerald-500/25 text-emerald-50';
    } elseif ($progressPct >= 25 && $issuesPct < 20) {
        $healthLabel = 'جيدة';
        $healthColor = 'bg-emerald-500/20 text-emerald-50';
    } elseif ($issuesPct >= 30 && $progressPct < 20) {
        $healthLabel = 'تحتاج تدخّل سريع';
        $healthColor = 'bg-rose-500/25 text-rose-50';
    } elseif ($issuesPct >= 20) {
        $healthLabel = 'تحذير متوسط';
        $healthColor = 'bg-amber-500/25 text-amber-50';
    }
@endphp

<div class="space-y-6">

  {{-- HERO --}}
  <div class="relative overflow-hidden rounded-2xl bg-gradient-to-r from-indigo-800 via-violet-800 to-sky-800 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="deepAI" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#6366F1"/>
            <stop offset="100%" stop-color="#06B6D4"/>
          </linearGradient>
        </defs>
        <circle cx="120" cy="80" r="180" fill="url(#deepAI)" />
        <circle cx="700" cy="320" r="260" fill="url(#deepAI)" opacity="0.7" />
      </svg>
    </div>

    <div class="relative flex flex-col md:flex-row md:items-center md:justify-between gap-6">
      <div class="flex items-start gap-4">
        <div class="flex items-center justify-center w-14 h-14 rounded-2xl bg-white/15 ring-1 ring-white/30">
          <i class="fa-solid fa-microscope text-2xl"></i>
        </div>
        <div class="space-y-2 max-w-xl">
          <h1 class="text-2xl md:text-3xl font-extrabold">
            تحليلات AI العميقة — ProActive Deep Intelligence
          </h1>
          <p class="text-white/85 text-sm md:text-base leading-relaxed">
            هذه الصفحة تحاول قراءة <span class="font-semibold">الصورة العميقة</span> لتقارير ProActive:
            اتجاهات خلال 30 يوم أخيرة، مقارنة مع الفترة السابقة، جودة عامة للتقديرات،
            قوة التفاعل الاجتماعي، وأيام الذروة التي تستحق تكرارها أو دراستها.
          </p>
          <div class="flex flex-wrap items-center gap-3 text-[11px] md:text-xs text-white/80">
            <span class="inline-flex items-center gap-1 bg-white/10 px-3 py-1 rounded-full">
              <i class="fa-solid fa-layer-group"></i> تحليل على مستوى أعلى
            </span>
            <span class="inline-flex items-center gap-1 bg-white/10 px-3 py-1 rounded-full">
              <i class="fa-solid fa-chart-line"></i> مقارنة فترات (آخر 30 يوم)
            </span>
            <span class="inline-flex items-center gap-1 bg-white/10 px-3 py-1 rounded-full">
              <i class="fa-solid fa-users"></i> تركيز على الأثر الاجتماعي
            </span>
          </div>
        </div>
      </div>

      {{-- ملخص سريع --}}
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 w-full md:w-80">
        <div class="rounded-xl bg-black/15 backdrop-blur-sm p-3 border border-white/20">
          <div class="text-[11px] text-white/70">إجمالي التقارير في النظام</div>
          <div class="mt-1 text-2xl font-extrabold">{{ number_format($totalReports) }}</div>
          <div class="text-[11px] text-white/60 mt-1">
            PLUS: {{ number_format($plusTotal) }}
          </div>
        </div>

        <div class="rounded-xl bg-black/15 backdrop-blur-sm p-3 border border-white/20 flex flex-col justify-between">
          <div>
            <div class="text-[11px] text-white/70">متوسط التقدير العام</div>
            <div class="mt-1 text-2xl font-extrabold">
              {{ $avgGrade ?: '0.0' }}<span class="text-xs opacity-80"> / 5</span>
            </div>
          </div>
          <div class="mt-2 inline-flex items-center gap-2 text-[11px] {{ $healthColor }} px-2 py-1 rounded-full">
            <i class="fa-solid fa-heart-pulse text-xs"></i>
            <span>قراءة عامة: {{ $healthLabel }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  {{-- كروت الأرقام العميقة --}}
  <div class="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-4 gap-3">
    <div class="rounded-xl p-4 bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 border border-slate-200/80 dark:border-slate-700">
      <div class="text-xs text-slate-700 dark:text-slate-200">عدد التقارير (آخر 30 يوم)</div>
      <div class="mt-1 text-2xl font-extrabold text-slate-900 dark:text-slate-50">{{ number_format($last30) }}</div>
      <div class="text-[11px] text-slate-500 dark:text-slate-300 mt-1">
        من {{ $last30Start ?? '—' }} إلى {{ $today ?? '—' }}
      </div>
    </div>

    <div class="rounded-xl p-4 bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 border border-slate-200/80 dark:border-slate-700">
      <div class="text-xs text-slate-700 dark:text-slate-200">الفترة السابقة (30 يوم قبلها)</div>
      <div class="mt-1 text-2xl font-extrabold text-slate-900 dark:text-slate-50">{{ number_format($prev30) }}</div>
      <div class="text-[11px] text-slate-500 dark:text-slate-300 mt-1">
        للمقارنة مع الفترة الحالية
      </div>
    </div>

    <div class="rounded-xl p-4 bg-gradient-to-br from-emerald-50 to-emerald-100 dark:from-emerald-900/40 dark:to-emerald-900/10 border border-emerald-300/70">
      <div class="text-xs text-emerald-800 dark:text-emerald-200">نسبة التقدّم (تقارير فيها تقدم)</div>
      <div class="mt-1 text-2xl font-extrabold text-emerald-900 dark:text-emerald-50">
        {{ $progressPct }}<span class="text-sm">%</span>
      </div>
      <div class="text-[11px] text-emerald-800/80 dark:text-emerald-100/80 mt-1">
        كلما اقتربت من 50% فأكثر، الوضع الصحي ممتاز.
      </div>
    </div>

    <div class="rounded-xl p-4 bg-gradient-to-br from-rose-50 to-rose-100 dark:from-rose-900/40 dark:to-rose-900/10 border border-rose-300/70">
      <div class="text-xs text-rose-800 dark:text-rose-200">نسبة التقارير التي فيها مشاكل</div>
      <div class="mt-1 text-2xl font-extrabold text-rose-900 dark:text-rose-50">
        {{ $issuesPct }}<span class="text-sm">%</span>
      </div>
      <div class="text-[11px] text-rose-800/80 dark:text-rose-100/80 mt-1">
        يُفضّل إبقاؤها تحت 20% قدر الإمكان.
      </div>
    </div>
  </div>

  {{-- استنتاجات تحليلية عميقة --}}
  <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-emerald-100 dark:bg-emerald-900/40 flex items-center justify-center">
          <i class="fa-solid fa-puzzle-piece text-emerald-600 dark:text-emerald-200 text-sm"></i>
        </div>
        <div>
          <h3 class="font-bold text-gray-900 dark:text-gray-50 text-sm">
            استنتاجات تحليلية عميقة من بيانات التقارير
          </h3>
          <p class="text-[11px] text-gray-500 dark:text-gray-400">
            هذه ليست أرقام فقط، بل قراءة لسلوك الفريق، المخاطر، ونقاط القوة خلال الفترة الحالية مقارنة بالفترة السابقة.
          </p>
        </div>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 px-5 py-5 text-[13px]">

      {{-- اتجاه عام --}}
      <div class="space-y-2">
        <h4 class="font-semibold text-sky-800 dark:text-sky-200 flex items-center gap-2">
          <i class="fa-solid fa-wave-square text-sky-500"></i>
          اتجاه حجم التقارير
        </h4>
        <div class="rounded-xl bg-sky-50 dark:bg-sky-900/20 border border-sky-100 dark:border-sky-800 p-3 text-sky-900 dark:text-sky-100 text-[12px] leading-relaxed">
          @if(!is_null($trendReports) && $trendReports > 5)
            عدد التقارير في آخر 30 يوم أعلى من الفترة السابقة بحوالي
            <span class="font-semibold">{{ $trendReports }}%</span>، وهذا يعني
            أن وتيرة العمل أو التوثيق في تصاعد. يُنصح بحماية هذا النسق
            وعدم تركه ينخفض في الفترات القادمة.
          @elseif(!is_null($trendReports) && $trendReports < -5)
            عدد التقارير في آخر 30 يوم أقل من الفترة السابقة بحوالي
            <span class="font-semibold">{{ abs($trendReports) }}%</span>، قد يكون
            هناك انخفاض في التوثيق أو في الفعاليات نفسها. راجع أسباب الانخفاض
            (ضغط دراسي، موسم امتحانات، ضعف تذكير...).
          @elseif(!is_null($trendReports))
            حجم التقارير مستقر تقريبًا (تغير حوالي {{ $trendReports }}% فقط)،
            وهذا جيد كبداية، لكن يُفضّل رفع عدد التقارير قليلًا لضمان رؤية أوضح.
          @else
            لا توجد فترة سابقة كافية للمقارنة، سيتم توليد قراءات أفضل بعد شهرين من الاستخدام.
          @endif
        </div>
      </div>

      {{-- جودة المحتوى --}}
      <div class="space-y-2">
        <h4 class="font-semibold text-emerald-800 dark:text-emerald-200 flex items-center gap-2">
          <i class="fa-solid fa-star-half-stroke text-emerald-500"></i>
          جودة التقدير والمحتوى
        </h4>
        <div class="rounded-xl bg-emerald-50 dark:bg-emerald-900/15 border border-emerald-100 dark:border-emerald-800 p-3 text-emerald-900 dark:text-emerald-100 text-[12px] leading-relaxed">
          متوسط التقدير الحالي هو
          <span class="font-semibold">{{ $avgGrade }} / 5</span>.
          @if($avgGrade >= 4.2)
            هذا يدل على جودة عالية جدًا في طريقة تنفيذ الفعاليات، وربما
            يمكن البدء بتوثيق قصص نجاح مفصلة لاستخدامها في التدريب أو التسويق.
          @elseif($avgGrade >= 3.5)
            جودة مقبولة إلى جيدة، لكن هناك مساحة واضحة للتحسين، خصوصًا في
            التفاصيل الصغيرة (صياغة، ضبط وقت اللايف، وضوح الأهداف).
          @elseif($avgGrade > 0)
            التقدير يميل للمتوسط، يُفضّل مراجعة نماذج التقارير نفسها،
            وكيف يقيّم الأعضاء الجلسات، وهل المعايير واضحة لهم أم لا.
          @else
            لا توجد بيانات كافية عن التقديرات بعد.
          @endif
        </div>
      </div>

      {{-- المخاطر / المشاكل --}}
      <div class="space-y-2">
        <h4 class="font-semibold text-rose-800 dark:text-rose-200 flex items-center gap-2">
          <i class="fa-solid fa-radiation text-rose-500"></i>
          نقاط خطر يجب الانتباه لها
        </h4>
        <div class="rounded-xl bg-rose-50 dark:bg-rose-900/15 border border-rose-100 dark:border-rose-800 p-3 text-rose-900 dark:text-rose-100 text-[12px] leading-relaxed">
          @if($issuesPct >= 30)
            نسبة التقارير التي فيها مشاكل مرتفعة
            (<span class="font-semibold">{{ $issuesPct }}%</span>).
            يفضّل تخصيص جلسة دورية لمناقشة هذه الحالات فقط، ومعرفة أكثر
            سبب متكرر للمشاكل لمعالجته بشكل مركزي.
          @elseif($issuesPct >= 20)
            هناك نسبة ملحوظة من المشاكل
            (<span class="font-semibold">{{ $issuesPct }}%</span>).
            حاول ربط كل مشكلة بإجراء واضح في المستقبل (تعديل وقت، تغيير أسلوب،
            تدريب إضافي).
          @elseif($totalReports > 0)
            نسبة المشاكل حاليًا منخفضة نسبيًا
            (<span class="font-semibold">{{ $issuesPct }}%</span>)، وهذا ممتاز.
            المهم هو الاستمرار في تسجيل أي مشكلة فورًا وعدم إخفائها.
          @else
            لا توجد بيانات كافية عن المشاكل حتى الآن.
          @endif
        </div>
      </div>

    </div>
  </div>

  {{-- التفاعل الاجتماعي --}}
  <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-blue-100 dark:bg-blue-900/40 flex items-center justify-center">
          <i class="fa-solid fa-user-group text-blue-600 dark:text-blue-200 text-sm"></i>
        </div>
        <div>
          <h3 class="font-bold text-gray-900 dark:text-gray-50 text-sm">
            تحليل التفاعل الاجتماعي (آخر 30 يوم فقط)
          </h3>
          <p class="text-[11px] text-gray-500 dark:text-gray-400">
            كيف تُترجم تقارير ProActive إلى أصدقاء جدد ودعوات حقيقية على الأرض.
          </p>
        </div>
      </div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-4 gap-3 px-5 py-5 text-[13px]">
      <div class="rounded-xl p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800">
        <div class="text-xs text-blue-800 dark:text-blue-200">إجمالي الأصدقاء الجدد</div>
        <div class="mt-1 text-2xl font-extrabold text-blue-900 dark:text-blue-50">
          {{ number_format($friendsSum) }}
        </div>
        <div class="text-[11px] text-blue-700/80 dark:text-blue-200/80 mt-1">
          متوسط: {{ number_format($avgFriends,1) }} صديق لكل تقرير.
        </div>
      </div>

      <div class="rounded-xl p-3 bg-cyan-50 dark:bg-cyan-900/20 border border-cyan-100 dark:border-cyan-800">
        <div class="text-xs text-cyan-800 dark:text-cyan-200">إجمالي الدعوات المرسلة</div>
        <div class="mt-1 text-2xl font-extrabold text-cyan-900 dark:text-cyan-50">
          {{ number_format($invSum) }}
        </div>
        <div class="text-[11px] text-cyan-700/80 dark:text-cyan-200/80 mt-1">
          متوسط: {{ number_format($avgInvites,1) }} دعوة لكل تقرير.
        </div>
      </div>

      <div class="rounded-xl p-3 bg-violet-50 dark:bg-violet-900/20 border border-violet-100 dark:border-violet-800">
        <div class="text-xs text-violet-800 dark:text-violet-200">أعلى منصة نشاطًا</div>
        <div class="mt-1 text-lg font-extrabold text-violet-900 dark:text-violet-50">
          @if($topPlatform)
            {{ $topPlatform }}
          @else
            غير محدد
          @endif
        </div>
        <div class="text-[11px] text-violet-700/80 dark:text-violet-200/80 mt-1">
          نصيحة: كرّر أفضل أنواع الفعاليات على هذه المنصة.
        </div>
      </div>

      <div class="rounded-xl p-3 bg-slate-50 dark:bg-slate-900/30 border border-slate-200 dark:border-slate-700">
        <div class="text-xs text-slate-800 dark:text-slate-200">أقرب أيام للذروة (آخر 60 يوم)</div>
        <ul class="mt-1 space-y-1 text-[11px] text-slate-700 dark:text-slate-200">
          @forelse($busyDays as $d)
            <li>
              <span class="font-semibold">{{ $d->d }}</span> — {{ $d->c }} تقرير
            </li>
          @empty
            <li>لا توجد بيانات كافية لتحديد أيام الذروة.</li>
          @endforelse
        </ul>
      </div>
    </div>
  </div>

</div>
@endsection