@extends('layouts.superadmin')

@section('title','سقراط — الذكاء الاصطناعي')
@section('page-title','🧠 سقراط — الذكاء الاصطناعي')

@section('content')
@php
  $m = fn($x)=> number_format((float)$x, 1);
@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="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>سقراط • AI • {{ $currentRange['from'] }} → {{ $currentRange['to'] }}</span>
      </div>

      <h1 class="mt-3 text-2xl font-extrabold text-white tracking-tight">
        🧠 AI Overview — ProActive Reports
      </h1>

      <p class="mt-2 text-sm text-white/70 max-w-3xl">
        مقارنة الشهر الحالي مع السابق + ملخص توصيات + أفضل/أضعف تقارير (AI Score).
      </p>

      <div class="mt-5 grid grid-cols-1 md:grid-cols-3 gap-3">
        <div class="rounded-2xl p-4 bg-black/20 border border-white/10">
          <div class="text-[11px] text-white/60">Overall Health</div>
          <div class="mt-1 text-2xl font-extrabold text-emerald-200">{{ $m($overallMetrics['health_score'] ?? 0) }}%</div>
          <div class="mt-1 text-[11px] text-white/55">Reports: {{ number_format($overallMetrics['count'] ?? 0) }}</div>
        </div>

        <div class="rounded-2xl p-4 bg-black/20 border border-white/10">
          <div class="text-[11px] text-white/60">This Month</div>
          <div class="mt-1 text-2xl font-extrabold text-white">{{ $m($currentMetrics['health_score'] ?? 0) }}%</div>
          <div class="mt-1 text-[11px] text-white/55">
            Avg grade: {{ $m($currentMetrics['avg_grade'] ?? 0) }} • Plus: {{ $m($currentMetrics['pct_plus'] ?? 0) }}%
          </div>
        </div>

        <div class="rounded-2xl p-4 bg-black/20 border border-white/10">
          <div class="text-[11px] text-white/60">Trend vs Prev</div>
          <div class="mt-1 text-2xl font-extrabold text-amber-200">
            {{ $m($trend['health_delta'] ?? 0) }}%
          </div>
          <div class="mt-1 text-[11px] text-white/55">
            Issues Δ: {{ $m($trend['issues_delta'] ?? 0) }} • Progress Δ: {{ $m($trend['progress_delta'] ?? 0) }}
          </div>
        </div>
      </div>

      <div class="mt-4 flex flex-wrap gap-2">
        <a href="{{ route('superadmin.proactive.socrates.team.index') }}"
           class="px-4 py-2 rounded-xl bg-white/10 border border-white/12 text-white font-bold hover:bg-white/12">
          👥 تحليل تقارير التيم
        </a>
        <a href="{{ route('superadmin.proactive.socrates.analytics.overall') }}"
           class="px-4 py-2 rounded-xl bg-cyan-500/10 border border-cyan-300/15 text-cyan-100 font-bold hover:bg-cyan-500/14">
          📊 الإحصائيات والترشيم
        </a>
      </div>
    </div>

    {{-- Summary --}}
    <div class="grid grid-cols-1 xl:grid-cols-3 gap-4">
      <div class="rounded-[26px] border border-white/10 bg-white/4 backdrop-blur-2xl p-4">
        <div class="text-white font-extrabold mb-3">✅ إيجابيات</div>
        <div class="space-y-2 text-sm text-white/75">
          @foreach(($aiSummary['positives'] ?? []) as $t)
            <div class="rounded-xl bg-emerald-500/10 border border-emerald-300/15 p-3">{{ $t }}</div>
          @endforeach
        </div>
      </div>

      <div class="rounded-[26px] border border-white/10 bg-white/4 backdrop-blur-2xl p-4">
        <div class="text-white font-extrabold mb-3">⚠️ مخاطر</div>
        <div class="space-y-2 text-sm text-white/75">
          @foreach(($aiSummary['risks'] ?? []) as $t)
            <div class="rounded-xl bg-rose-500/10 border border-rose-300/15 p-3">{{ $t }}</div>
          @endforeach
        </div>
      </div>

      <div class="rounded-[26px] border border-white/10 bg-white/4 backdrop-blur-2xl p-4">
        <div class="text-white font-extrabold mb-3">🛠️ خطوات عملية</div>
        <div class="space-y-2 text-sm text-white/75">
          @foreach(($aiSummary['actions'] ?? []) as $t)
            <div class="rounded-xl bg-amber-500/10 border border-amber-300/15 p-3">{{ $t }}</div>
          @endforeach
        </div>
      </div>
    </div>

    {{-- Top / Low --}}
    <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
      <div class="rounded-[26px] border border-white/10 bg-white/4 backdrop-blur-2xl p-4">
        <div class="flex items-center justify-between mb-3">
          <div class="text-white font-extrabold">🏆 أفضل 5 تقارير (AI)</div>
          <span class="text-[11px] px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-300/15 text-emerald-100">Top</span>
        </div>

        <div class="space-y-2">
          @foreach($top5 as $r)
            <div class="rounded-2xl bg-black/20 border border-white/10 p-3">
              <div class="flex items-center justify-between gap-3">
                <div class="min-w-0">
                  <div class="text-[11px] text-white/60">{{ $r['activity_date'] }} • {{ strtoupper($r['platform']) }}</div>
                  <div class="text-white font-bold truncate">{{ $r['live_owner_name'] ?: '—' }}</div>
                  <div class="text-[12px] text-white/70 truncate">{{ \Illuminate\Support\Str::limit($r['short_summary'], 80) }}</div>
                </div>
                <div class="shrink-0 text-right">
                  <div class="text-[11px] text-white/60">AI</div>
                  <div class="text-xl font-extrabold text-emerald-200">{{ $r['ai'] }}</div>
                </div>
              </div>
            </div>
          @endforeach
        </div>
      </div>

      <div class="rounded-[26px] border border-white/10 bg-white/4 backdrop-blur-2xl p-4">
        <div class="flex items-center justify-between mb-3">
          <div class="text-white font-extrabold">🚨 أضعف 5 تقارير (AI)</div>
          <span class="text-[11px] px-3 py-1 rounded-full bg-rose-500/10 border border-rose-300/15 text-rose-100">Low</span>
        </div>

        <div class="space-y-2">
          @foreach($low5 as $r)
            <div class="rounded-2xl bg-black/20 border border-white/10 p-3">
              <div class="flex items-center justify-between gap-3">
                <div class="min-w-0">
                  <div class="text-[11px] text-white/60">{{ $r['activity_date'] }} • {{ strtoupper($r['platform']) }}</div>
                  <div class="text-white font-bold truncate">{{ $r['live_owner_name'] ?: '—' }}</div>
                  <div class="text-[12px] text-white/70 truncate">{{ \Illuminate\Support\Str::limit($r['short_summary'], 80) }}</div>
                </div>
                <div class="shrink-0 text-right">
                  <div class="text-[11px] text-white/60">AI</div>
                  <div class="text-xl font-extrabold text-rose-200">{{ $r['ai'] }}</div>
                </div>
              </div>
            </div>
          @endforeach
        </div>

      </div>
    </div>

  </div>
</div>
@endsection