@extends('layouts.superadmin')
@section('content')
<div class="p-6 space-y-4">
  <div class="font-extrabold text-xl text-slate-900 dark:text-white">✨ ProSanta Plus</div>

  <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
    <div class="rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 p-4 shadow-lg">
      <div class="text-[11px] text-slate-500 dark:text-white/55">Insights</div>
      <div class="text-2xl font-extrabold mt-1 text-slate-900 dark:text-white">{{ number_format($kpi['insights'] ?? 0) }}</div>
    </div>
    <div class="rounded-2xl border border-emerald-400/20 bg-emerald-50/70 dark:bg-emerald-900/15 p-4 shadow-lg">
      <div class="text-[11px] text-emerald-700 dark:text-emerald-200">Open Recs</div>
      <div class="text-2xl font-extrabold mt-1 text-emerald-900 dark:text-white">{{ number_format($kpi['recs_open'] ?? 0) }}</div>
    </div>
    <div class="rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 p-4 shadow-lg">
      <div class="text-[11px] text-slate-500 dark:text-white/55">Done Recs</div>
      <div class="text-2xl font-extrabold mt-1 text-slate-900 dark:text-white">{{ number_format($kpi['recs_done'] ?? 0) }}</div>
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
    <div class="rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 p-4 shadow-lg">
      <div class="font-extrabold text-slate-800 dark:text-white mb-2">Latest Insights</div>
      <div class="space-y-2">
        @forelse($latestInsights as $i)
          <div class="p-3 rounded-2xl border border-slate-200/60 dark:border-white/10 bg-slate-50/70 dark:bg-white/5">
            <div class="font-extrabold text-slate-900 dark:text-white">{{ $i->title }}</div>
            <div class="text-[12px] text-slate-500 dark:text-white/55 mt-1">{{ \Illuminate\Support\Str::limit($i->content, 160) }}</div>
          </div>
        @empty
          <div class="text-slate-500 dark:text-white/50">لا يوجد Insights بعد.</div>
        @endforelse
      </div>
    </div>

    <div class="rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 p-4 shadow-lg">
      <div class="font-extrabold text-slate-800 dark:text-white mb-2">Latest Recommendations</div>
      <div class="space-y-2">
        @forelse($latestRecs as $r)
          <div class="p-3 rounded-2xl border border-slate-200/60 dark:border-white/10 bg-slate-50/70 dark:bg-white/5">
            <div class="font-extrabold text-slate-900 dark:text-white">{{ $r->title }}</div>
            <div class="text-[11px] text-slate-500 dark:text-white/55 mt-1">Signal #{{ $r->signal_id }} • {{ strtoupper($r->priority) }} • {{ $r->status }}</div>
          </div>
        @empty
          <div class="text-slate-500 dark:text-white/50">لا يوجد Recommendations بعد.</div>
        @endforelse
      </div>
    </div>
  </div>

</div>
@endsection