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

@section('title','لوحة ذكاء ProActive — اقتراحات وتحليلات')
@section('page-title','🧠 لوحة ذكاء ProActive — اقتراحات من الذكاء الاصطناعي')

@section('content')
@php
    $metrics = $metrics ?? [];

    $totalReports   = $metrics['total_reports']   ?? 0;
    $last30Reports  = $metrics['last30_reports']  ?? 0;
    $last7Reports   = $metrics['last7_reports']   ?? 0;
    $regularCount   = $metrics['regular_count']   ?? 0;
    $plusCount      = $metrics['plus_count']      ?? 0;
    $issuesCount    = $metrics['issues_count']    ?? 0;
    $progressCount  = $metrics['progress_count']  ?? 0;
    $pctExcellent   = $metrics['pct_excellent']   ?? 0;
    $pctIssues      = $metrics['pct_issues']      ?? 0;
    $pctPlus        = $metrics['pct_plus']        ?? 0;
    $avgGradeScore  = $metrics['avg_grade_score'] ?? 0;
    $friendsSum     = $metrics['friends_sum']     ?? 0;
    $invSum         = $metrics['inv_sum']         ?? 0;
    $avgFriends     = $metrics['avg_friends']     ?? 0;
    $avgInvitations = $metrics['avg_invitations'] ?? 0;

    $grades    = $metrics['grades']    ?? collect();
    $platforms = $metrics['platforms'] ?? collect();

    if (! $grades instanceof \Illuminate\Support\Collection) {
        $grades = collect($grades);
    }
    if (! $platforms instanceof \Illuminate\Support\Collection) {
        $platforms = collect($platforms);
    }

    $aiSuggestions = $aiSuggestions ?? [];
@endphp

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

  {{-- HERO --}}
  <div class="relative overflow-hidden rounded-2xl bg-gradient-to-r from-indigo-700 via-violet-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="gIB" 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(#gIB)" />
        <circle cx="700" cy="300" r="220" fill="url(#gIB)" opacity="0.6" />
      </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/20">
          <i class="fa-solid fa-brain text-2xl"></i>
        </div>
        <div class="space-y-2">
          <h1 class="text-2xl md:text-3xl font-extrabold">
            لوحة ذكاء ProActive
          </h1>
          <p class="text-white/80 text-sm md:text-base leading-relaxed">
            تحليلات ذكية مبنية على تقارير ProActive المسجّلة في النظام:
            توزيع التقديرات، أداء المنصّات، النتائج الاجتماعية، ونسبة الفعاليات PLUS،
            مع اقتراحات عملية جاهزة للتنفيذ.
          </p>
          <div class="flex flex-wrap items-center gap-3 text-xs md:text-sm 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-robot"></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> يعتمد على جدول التقارير
            </span>
          </div>
        </div>
      </div>

      <div class="grid 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/15">
          <div class="text-[11px] text-white/70">إجمالي التقارير</div>
          <div class="text-2xl font-extrabold">{{ number_format($totalReports) }}</div>
        </div>
        <div class="rounded-xl bg-black/15 backdrop-blur-sm p-3 border border-white/15">
          <div class="text-[11px] text-white/70">آخر 30 يومًا</div>
          <div class="text-2xl font-extrabold">{{ number_format($last30Reports) }}</div>
        </div>
        <div class="rounded-xl bg-black/15 backdrop-blur-sm p-3 border border-emerald-300/40">
          <div class="text-[11px] text-emerald-100">تقارير فيها تقدم</div>
          <div class="text-xl font-extrabold text-emerald-100">{{ number_format($progressCount) }}</div>
        </div>
        <div class="rounded-xl bg-black/15 backdrop-blur-sm p-3 border border-rose-300/50">
          <div class="text-[11px] text-rose-100">تقارير فيها مشاكل</div>
          <div class="text-xl font-extrabold text-rose-100">{{ number_format($issuesCount) }}</div>
        </div>
      </div>
    </div>
  </div>

  {{-- كروت أرقام سريعة --}}
  <div class="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-6 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-600 dark:text-slate-300">ProActive عادية</div>
      <div class="mt-1 text-2xl font-extrabold text-slate-900 dark:text-slate-50">{{ number_format($regularCount) }}</div>
    </div>
    <div class="rounded-xl p-4 bg-gradient-to-br from-violet-50 to-violet-100 dark:from-violet-900/40 dark:to-violet-900/10 border border-violet-300/60">
      <div class="text-xs text-violet-700 dark:text-violet-200">ProActive PLUS</div>
      <div class="mt-1 text-2xl font-extrabold text-violet-900 dark:text-violet-50">{{ number_format($plusCount) }}</div>
      <div class="text-[11px] text-violet-700/70 dark:text-violet-200/80 mt-1">
        نسبة من الإجمالي: {{ $pctPlus }}%
      </div>
    </div>
    <div class="rounded-xl p-4 bg-gradient-to-br from-emerald-50 to-emerald-100 dark:from-emerald-900/30 dark:to-emerald-900/10 border border-emerald-300/60">
      <div class="text-xs text-emerald-700 dark:text-emerald-200">مؤشر التقدير الرقمي</div>
      <div class="mt-1 text-2xl font-extrabold text-emerald-900 dark:text-emerald-50">
        {{ number_format($avgGradeScore, 2) }} / 5
      </div>
      <div class="text-[11px] text-emerald-700/70 dark:text-emerald-200/80 mt-1">
        «جيد»≈3 — «ممتاز»≈5
      </div>
    </div>
    <div class="rounded-xl p-4 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/30 dark:to-blue-900/10 border border-blue-300/60">
      <div class="text-xs text-blue-700 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/70 dark:text-blue-200/80 mt-1">
        متوسط: {{ number_format($avgFriends,1) }} لكل تقرير
      </div>
    </div>
    <div class="rounded-xl p-4 bg-gradient-to-br from-cyan-50 to-cyan-100 dark:from-cyan-900/30 dark:to-cyan-900/10 border border-cyan-300/60">
      <div class="text-xs text-cyan-700 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/70 dark:text-cyan-200/80 mt-1">
        متوسط: {{ number_format($avgInvitations,1) }} لكل تقرير
      </div>
    </div>
    <div class="rounded-xl p-4 bg-gradient-to-br from-amber-50 to-amber-100 dark:from-amber-900/40 dark:to-amber-900/10 border border-amber-300/70">
      <div class="text-xs text-amber-800 dark:text-amber-200">نسبة «ممتاز» من التقارير</div>
      <div class="mt-1 text-2xl font-extrabold text-amber-900 dark:text-amber-50">
        {{ $pctExcellent }}%
      </div>
      <div class="text-[11px] text-amber-800/70 dark:text-amber-200/80 mt-1">
        كلما اقتربت من 50% فأعلى كان الوضع ممتازًا
      </div>
    </div>
  </div>

  {{-- توزيع التقدير و المنصات --}}
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
    <div class="bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-700 p-4 shadow-sm">
      <div class="flex items-center justify-between mb-3">
        <h3 class="font-bold text-gray-800 dark:text-gray-100 text-sm">
          توزيع التقديرات في تقارير ProActive
        </h3>
      </div>
      <div class="space-y-2 text-sm">
        @php
          $gradeLabels = [
            'good'       => 'جيد',
            'very_good'  => 'جيد جدًا',
            'excellent'  => 'ممتاز',
          ];
        @endphp
        @forelse($gradeLabels as $key => $label)
          @php
            $count = (int)($grades[$key] ?? 0);
            $pct = $totalReports ? round($count / $totalReports * 100, 1) : 0;
          @endphp
          <div class="flex items-center gap-3">
            <div class="w-16 text-xs text-gray-600 dark:text-gray-300">{{ $label }}</div>
            <div class="flex-1 h-2 rounded-full bg-gray-100 dark:bg-gray-800 overflow-hidden">
              <div class="h-full rounded-full
                          @if($key === 'excellent') bg-emerald-400
                          @elseif($key === 'very_good') bg-blue-400
                          @else bg-amber-400 @endif"
                   style="width: {{ $pct }}%"></div>
            </div>
            <div class="w-14 text-xs text-right text-gray-700 dark:text-gray-200">
              {{ $pct }}%
            </div>
          </div>
        @empty
          <p class="text-xs text-gray-500 dark:text-gray-400">لا توجد بيانات كافية.</p>
        @endforelse
      </div>
    </div>

    <div class="bg-white dark:bg-gray-900 rounded-2xl border border-gray-200 dark:border-gray-700 p-4 shadow-sm">
      <div class="flex items-center justify-between mb-3">
        <h3 class="font-bold text-gray-800 dark:text-gray-100 text-sm">
          توزيع التقارير حسب المنصّة
        </h3>
      </div>
      <div class="space-y-2 text-sm">
        @php
          $platformLabels = [
            'tiktok'    => 'تيك توك',
            'instagram' => 'انستغرام',
            'youtube'   => 'يوتيوب',
            'other'     => 'أخرى',
          ];
        @endphp
        @forelse($platformLabels as $key => $label)
          @php
            $count = (int)($platforms[$key] ?? 0);
            $pct = $totalReports ? round($count / max($totalReports,1) * 100, 1) : 0;
          @endphp
          <div class="flex items-center gap-3">
            <div class="w-20 text-xs text-gray-600 dark:text-gray-300">{{ $label }}</div>
            <div class="flex-1 h-2 rounded-full bg-gray-100 dark:bg-gray-800 overflow-hidden">
              <div class="h-full rounded-full
                          @if($key === 'tiktok') bg-fuchsia-400
                          @elseif($key === 'instagram') bg-rose-400
                          @elseif($key === 'youtube') bg-red-500
                          @else bg-slate-400 @endif"
                   style="width: {{ $pct }}%"></div>
            </div>
            <div class="w-16 text-xs text-right text-gray-700 dark:text-gray-200">
              {{ $count }} ({{ $pct }}%)
            </div>
          </div>
        @empty
          <p class="text-xs text-gray-500 dark:text-gray-400">لا توجد بيانات كافية.</p>
        @endforelse
      </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-violet-100 dark:bg-violet-900/40 flex items-center justify-center">
          <i class="fa-solid fa-wand-magic-sparkles text-violet-600 dark:text-violet-200"></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">
            الهدف: إعطاء صورة سريعة عن الإيجابيات، المخاطر، وخطوات عملية لتحسين ProActive.
          </p>
        </div>
      </div>
    </div>

    @if(count($aiSuggestions))
      @php
        $grouped = collect($aiSuggestions)->groupBy('type');
      @endphp

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 px-5 py-5">
        {{-- إيجابي --}}
        <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->get('positive', []) 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">
                <div class="text-[13px] font-semibold text-emerald-900 dark:text-emerald-100">
                  {{ $s['title'] ?? '' }}
                </div>
                <p class="mt-1 text-[12px] text-emerald-800/90 dark:text-emerald-100/80 leading-relaxed">
                  {{ $s['body'] ?? '' }}
                </p>
              </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->get('negative', []) 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">
                <div class="text-[13px] font-semibold text-rose-900 dark:text-rose-100">
                  {{ $s['title'] ?? '' }}
                </div>
                <p class="mt-1 text-[12px] text-rose-800/90 dark:text-rose-100/80 leading-relaxed">
                  {{ $s['body'] ?? '' }}
                </p>
              </div>
            @empty
              <p class="text-[11px] text-gray-500 dark:text-gray-400">
                لا توجد تحذيرات كبيرة حاليًا، لكن يفضّل متابعة نسبة المشاكل باستمرار.
              </p>
            @endforelse
          </div>
        </div>

        {{-- خطوات عملية (Action) --}}
        <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->get('action', []) 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">
                <div class="text-[13px] font-semibold text-amber-900 dark:text-amber-100">
                  {{ $s['title'] ?? '' }}
                </div>
                <p class="mt-1 text-[12px] text-amber-800/90 dark:text-amber-100/80 leading-relaxed">
                  {{ $s['body'] ?? '' }}
                </p>
              </div>
            @empty
              <p class="text-[11px] text-gray-500 dark:text-gray-400">
                أضف المزيد من بيانات التقارير للحصول على خطوات عملية أدق من الذكاء الاصطناعي.
              </p>
            @endforelse
          </div>
        </div>
      </div>
    @else
      <div class="px-5 py-6 text-center text-sm text-gray-500 dark:text-gray-400">
        لا توجد بيانات كافية لتوليد اقتراحات حتى الآن. الرجاء تسجيل عدد أكبر من تقارير ProActive.
      </div>
    @endif
  </div>

</div>
@endsection