@extends('layouts.superadmin')
@section('content')

@php
  $k = $kpi ?? [];
  $latestSignals = $latestSignals ?? collect();
  $latestCases   = $latestCases ?? collect();

  $sevBadge = function($sev){
    return match($sev){
      'critical' => 'bg-rose-500/15 text-rose-200 ring-rose-400/30',
      'high'     => 'bg-amber-500/15 text-amber-200 ring-amber-400/30',
      'medium'   => 'bg-violet-500/15 text-violet-200 ring-violet-400/30',
      default    => 'bg-emerald-500/15 text-emerald-200 ring-emerald-400/30',
    };
  };

  $statusBadge = function($st){
    return match($st){
      'new'     => 'bg-cyan-500/15 text-cyan-200 ring-cyan-400/30',
      'seen'    => 'bg-slate-500/15 text-slate-200 ring-slate-400/25',
      'handled' => 'bg-emerald-500/15 text-emerald-200 ring-emerald-400/30',
      default   => 'bg-white/10 text-white/70 ring-white/20',
    };
  };
@endphp

<div class="px-4 sm:px-6 lg:px-8 py-6 space-y-6">

  {{-- HERO (ستايل سقراط + عربي + شرح) --}}
  <div class="relative overflow-hidden rounded-3xl border border-rose-500/20
              bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950
              shadow-[0_25px_80px_rgba(2,6,23,0.55)]">
    <div class="absolute inset-0 pointer-events-none">
      <div class="absolute -top-24 -right-16 h-72 w-72 rounded-full blur-3xl bg-rose-500/14"></div>
      <div class="absolute -bottom-24 -left-16 h-80 w-80 rounded-full blur-3xl bg-cyan-500/12"></div>
      <div class="absolute inset-0 bg-white/5 backdrop-blur-2xl"></div>
    </div>

    <div class="relative p-5 sm:p-7 space-y-4">
      <div class="flex items-start justify-between gap-3">
        <div class="space-y-1">
          <h1 class="text-xl sm:text-2xl font-extrabold text-white flex items-center gap-2">
            <span class="inline-flex items-center justify-center w-9 h-9 rounded-2xl bg-rose-500/15 border border-rose-400/25 text-rose-200">
              <i class="fa-solid fa-satellite-dish text-sm"></i>
            </span>
            لوحة ProSanta — بالمرصاد
          </h1>
          <p class="text-white/70 text-[12px] sm:text-[13px]">
            هنا تشوف “إشارات” مفهومة + “رادار” + “حالات متابعة (Cases)” — وكل شيء محسوب تلقائيًا.
          </p>

          <div class="mt-2 grid grid-cols-1 md:grid-cols-3 gap-2">
            <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
              <div class="text-[11px] text-white/60">شو يعني “إشارة”؟</div>
              <div class="text-[12px] text-white/80 mt-1">ملاحظة ذكية عن نمط غير طبيعي (ليس عقوبة).</div>
            </div>
            <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
              <div class="text-[11px] text-white/60">شو يعني “Case”؟</div>
              <div class="text-[12px] text-white/80 mt-1">ملف متابعة يتجمع فيه أكثر من إشارة لنفس الهدف.</div>
            </div>
            <div class="rounded-2xl border border-white/10 bg-white/5 p-3">
              <div class="text-[11px] text-white/60">شو يعني “Plus”؟</div>
              <div class="text-[12px] text-white/80 mt-1">سبب محتمل + توصية واضحة للمشرف (بدون تنفيذ).</div>
            </div>
          </div>

          @if(session('success'))
            <div class="mt-3 inline-flex items-center gap-2 px-3 py-2 rounded-2xl bg-emerald-500/15 border border-emerald-400/25 text-emerald-100 text-[12px]">
              <i class="fa-solid fa-circle-check"></i> {{ session('success') }}
            </div>
          @endif
        </div>

        <form method="POST" action="{{ route('superadmin.prosanta.scan') }}" class="flex items-center gap-2">
          @csrf
          <div class="flex items-center gap-2 rounded-2xl border border-white/10 bg-white/5 p-2">
            <input name="hours" value="24"
                   class="w-20 px-3 py-2 rounded-xl bg-white/10 border border-white/10 text-white text-sm focus:outline-none"
                   inputmode="numeric" />
            <button class="px-3 py-2 rounded-xl bg-cyan-500/20 border border-cyan-400/25 text-cyan-100 hover:bg-cyan-500/30 text-sm font-extrabold">
              تشغيل المسح
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  {{-- KPI (عربي بالكامل) --}}
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3">
    <div class="rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl p-4 shadow-lg">
      <div class="text-[11px] text-slate-500 dark:text-white/55">إشارات جديدة</div>
      <div class="text-2xl font-extrabold text-slate-900 dark:text-white mt-1">{{ number_format($k['new'] ?? 0) }}</div>
      <div class="text-[11px] text-slate-500 dark:text-white/50 mt-1">تحتاج مراجعة</div>
    </div>

    <div class="rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl p-4 shadow-lg">
      <div class="text-[11px] text-slate-500 dark:text-white/55">تمت رؤيتها</div>
      <div class="text-2xl font-extrabold text-slate-900 dark:text-white mt-1">{{ number_format($k['seen'] ?? 0) }}</div>
      <div class="text-[11px] text-slate-500 dark:text-white/50 mt-1">تم الاطلاع فقط</div>
    </div>

    <div class="rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl p-4 shadow-lg">
      <div class="text-[11px] text-slate-500 dark:text-white/55">تم التعامل معها</div>
      <div class="text-2xl font-extrabold text-slate-900 dark:text-white mt-1">{{ number_format($k['handled'] ?? 0) }}</div>
      <div class="text-[11px] text-slate-500 dark:text-white/50 mt-1">تم إغلاقها أو تنفيذ قرار</div>
    </div>

    <div class="rounded-2xl border border-rose-400/20 bg-rose-50/80 dark:bg-rose-900/15 backdrop-blur-xl p-4 shadow-lg">
      <div class="text-[11px] text-rose-700 dark:text-rose-200">عالية/حرجة</div>
      <div class="text-2xl font-extrabold text-rose-900 dark:text-white mt-1">{{ number_format($k['high'] ?? 0) }}</div>
      <div class="text-[11px] text-rose-700/80 dark:text-rose-200/70 mt-1">أولوية متابعة</div>
    </div>

    <div class="rounded-2xl border border-amber-400/20 bg-amber-50/80 dark:bg-amber-900/15 backdrop-blur-xl p-4 shadow-lg">
      <div class="text-[11px] text-amber-700 dark:text-amber-200">حالات متابعة مفتوحة</div>
      <div class="text-2xl font-extrabold text-amber-900 dark:text-white mt-1">{{ number_format($k['cases_open'] ?? 0) }}</div>
      <div class="text-[11px] text-amber-700/80 dark:text-amber-200/70 mt-1">ملفات تحتاج إكمال</div>
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">

    {{-- آخر الإشارات (لغة بشرية إن وجدت meta.human) --}}
    <div class="lg:col-span-2 rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl shadow-lg overflow-hidden">
      <div class="p-4 sm:p-5 flex items-center justify-between">
        <div>
          <h3 class="font-extrabold text-slate-800 dark:text-white">آخر الإشارات</h3>
          <p class="text-[12px] text-slate-500 dark:text-white/55 mt-1">
            كل بطاقة تحكي: الهدف + شو يعني + شو أعمل.
          </p>
        </div>
        <a href="{{ route('superadmin.prosanta.signals.index') }}"
           class="text-sm font-extrabold text-cyan-700 dark:text-cyan-200 hover:underline">
          عرض جميع الإشارات
        </a>
      </div>

      <div class="divide-y divide-slate-200/60 dark:divide-white/10">
        @forelse($latestSignals as $s)
          @php
            $human = ($s->meta['human'] ?? null);
            $tag   = $human['tag'] ?? strtoupper($s->severity);
            $tone  = $human['tone'] ?? null;
          @endphp

          <div class="p-4 flex items-start justify-between gap-3">
            <div class="min-w-0">
              <div class="font-extrabold text-slate-900 dark:text-white truncate">
                {{ ($human['emoji'] ?? '🔔') }} {{ $human['type'] ?? $s->title }}
              </div>

              <div class="text-[12px] text-slate-600 dark:text-white/65 mt-1">
                <span class="font-bold">الهدف:</span>
                {{ $human['subject'] ?? ($s->subject_type.':'.$s->subject_key) }}
              </div>

              <div class="text-[12px] text-slate-700 dark:text-white/70 mt-2">
                <span class="font-bold">شو يعني؟</span>
                {{ $human['meaning'] ?? ($s->summary ?? '—') }}
              </div>

              <div class="text-[12px] text-slate-700 dark:text-white/70 mt-2">
                <span class="font-bold">شو أعمل؟</span>
                {{ $human['action'] ?? 'افتح التفاصيل ثم قرر.' }}
              </div>

              <div class="mt-2 flex flex-wrap gap-2">
                @if(!empty(($s->meta ?? [])['case_id']))
                  <span class="inline-flex items-center gap-2 px-2 py-0.5 rounded-full text-[10px] font-bold ring-1 bg-amber-500/15 text-amber-800 dark:text-amber-200 ring-amber-500/25">
                    <i class="fa-solid fa-folder-open"></i> ملف متابعة #{{ ($s->meta ?? [])['case_id'] }}
                  </span>
                @endif
                @if(!empty(($s->meta ?? [])['repeat_7d']))
                  <span class="inline-flex items-center justify-center px-2 py-0.5 rounded-full text-[10px] ring-1 bg-violet-500/15 text-violet-200 ring-violet-400/30">
                    تكرار 7 أيام: {{ ($s->meta ?? [])['repeat_7d'] }}
                  </span>
                @endif
              </div>
            </div>

            <div class="flex flex-col items-end gap-2">
              <span class="inline-flex items-center justify-center px-2 py-0.5 rounded-full text-[10px] font-bold ring-1 {{ $sevBadge($tone ?? $s->severity) }}">
                {{ $tag }}
              </span>

              <span class="inline-flex items-center justify-center px-2 py-0.5 rounded-full text-[10px] ring-1 bg-slate-500/10 text-slate-700 dark:text-white/70 dark:bg-white/5">
                {{ ($human['confidence_label'] ?? 'ثقة') }} • {{ $s->confidence }}%
              </span>

              <span class="inline-flex items-center justify-center px-2 py-0.5 rounded-full text-[10px] font-bold ring-1 {{ $statusBadge($s->status) }}">
                {{ strtoupper($s->status) }}
              </span>
            </div>
          </div>
        @empty
          <div class="p-6 text-center text-slate-500 dark:text-white/50">لا توجد إشارات بعد.</div>
        @endforelse
      </div>
    </div>

    {{-- آخر الحالات المفتوحة (Cases) --}}
    <div class="rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl shadow-lg overflow-hidden">
      <div class="p-4 sm:p-5 flex items-center justify-between">
        <div>
          <h3 class="font-extrabold text-slate-800 dark:text-white">حالات المتابعة المفتوحة</h3>
          <p class="text-[12px] text-slate-500 dark:text-white/55 mt-1">
            ملف متابعة يجمع عدة إشارات لنفس الهدف.
          </p>
        </div>
        <a href="{{ route('superadmin.prosanta.subjects.index') }}"
           class="text-sm font-extrabold text-cyan-700 dark:text-cyan-200 hover:underline">
          عرض الأهداف (Subjects)
        </a>
      </div>

      <div class="divide-y divide-slate-200/60 dark:divide-white/10">
        @forelse($latestCases as $c)
          <div class="p-4">
            <div class="flex items-start justify-between gap-2">
              <div class="min-w-0">
                <div class="font-extrabold text-slate-900 dark:text-white truncate">
                  {{ $c->title }}
                </div>
                <div class="text-[12px] text-slate-600 dark:text-white/65 mt-1">
                  <span class="font-bold">الهدف:</span>
                  {{ $c->subject_type }}:{{ $c->subject_key }}
                </div>
                <div class="text-[11px] text-slate-500 dark:text-white/55 mt-1">
                  إشارات: {{ $c->signals_count }} • أقصى شدة: {{ strtoupper($c->severity_max) }}
                </div>
              </div>

              <span class="px-2 py-0.5 rounded-full text-[10px] font-bold ring-1
                {{ ($c->priority==='high') ? 'bg-rose-500/15 text-rose-200 ring-rose-400/30' : 'bg-amber-500/15 text-amber-200 ring-amber-400/30' }}">
                أولوية: {{ strtoupper($c->priority) }}
              </span>
            </div>
          </div>
        @empty
          <div class="p-6 text-center text-slate-500 dark:text-white/50">لا يوجد حالات متابعة مفتوحة.</div>
        @endforelse
      </div>
    </div>

  </div>

</div>
@endsection