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

@php
  // ✅ Human data coming from meta.human (اللي ضفناه بالـ SignalService)
  $toneBadge = function($tone){
    return match($tone){
      'danger' => 'bg-rose-500/15 text-rose-200 ring-rose-400/30',
      'warn'   => 'bg-amber-500/15 text-amber-200 ring-amber-400/30',
      'mid'    => 'bg-violet-500/15 text-violet-200 ring-violet-400/30',
      'low'    => 'bg-emerald-500/15 text-emerald-200 ring-emerald-400/30',
      'info'   => 'bg-sky-500/15 text-sky-200 ring-sky-400/30',
      default  => 'bg-white/10 text-white/80 ring-white/20',
    };
  };

  $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-white/10
              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-cyan-500/12"></div>
      <div class="absolute -bottom-24 -left-16 h-80 w-80 rounded-full blur-3xl bg-rose-500/10"></div>
      <div class="absolute inset-0 bg-white/5 backdrop-blur-2xl"></div>
    </div>

    <div class="relative p-5 sm:p-7 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 Signals — بلغة بشرية
        </h1>
        <p class="text-white/70 text-[12px] sm:text-[13px]">
          كل إشارة = (شو يعني؟) + (شو أعمل؟) — بدون route_name ولا مصطلحات مخيفة.
        </p>
      </div>

      <div class="flex items-center gap-2">
        <a class="px-3 py-2 rounded-xl bg-white/10 border border-white/10 text-white/85 hover:text-white hover:bg-white/15 text-sm font-bold"
           href="{{ route('superadmin.prosanta.dashboard') }}">
          Dashboard
        </a>
        <a class="px-3 py-2 rounded-xl bg-cyan-500/15 border border-cyan-400/25 text-cyan-100 hover:bg-cyan-500/25 text-sm font-bold"
           href="{{ route('superadmin.prosanta.radar.index') }}">
          Radar
        </a>
      </div>
    </div>
  </div>

  {{-- Filters (ستايل سقراط) --}}
  <form method="GET" class="rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl shadow-lg p-4">
    <div class="flex flex-wrap gap-2 items-center">
      <select name="status" class="px-3 py-2 rounded-xl border border-slate-200/70 dark:border-white/10 dark:bg-slate-900 dark:text-white">
        <option value="">كل الحالات</option>
        @foreach(['new','seen','handled'] as $st)
          <option value="{{ $st }}" @selected(request('status')===$st)>{{ $st }}</option>
        @endforeach
      </select>

      <select name="severity" class="px-3 py-2 rounded-xl border border-slate-200/70 dark:border-white/10 dark:bg-slate-900 dark:text-white">
        <option value="">كل الشدة</option>
        @foreach(['low','medium','high','critical'] as $sv)
          <option value="{{ $sv }}" @selected(request('severity')===$sv)>{{ $sv }}</option>
        @endforeach
      </select>

      <select name="subject" class="px-3 py-2 rounded-xl border border-slate-200/70 dark:border-white/10 dark:bg-slate-900 dark:text-white">
        <option value="">كل الأهداف</option>
        @foreach(['user','ip','device','page'] as $sb)
          <option value="{{ $sb }}" @selected(request('subject')===$sb)>{{ $sb }}</option>
        @endforeach
      </select>

      <input name="type" value="{{ request('type') }}" placeholder="نوع الإشارة (اختياري)"
             class="px-3 py-2 rounded-xl border border-slate-200/70 dark:border-white/10 dark:bg-slate-900 dark:text-white" />

      <input name="key" value="{{ request('key') }}" placeholder="بحث بالهدف (اختياري)"
             class="px-3 py-2 rounded-xl border border-slate-200/70 dark:border-white/10 dark:bg-slate-900 dark:text-white" />

      <button class="px-4 py-2 rounded-xl bg-cyan-600 text-white font-extrabold hover:bg-cyan-700">
        فلترة
      </button>
    </div>
  </form>

  {{-- Cards list (بدل جدول) — أوضح للمشرف --}}
  <div class="space-y-3">
    @forelse($signals as $s)
      @php
        $human = ($s->meta['human'] ?? null);
        $tone  = $human['tone'] ?? null;
        $tagCls = $toneBadge($tone);
        $stCls  = $statusBadge($s->status ?? '');
      @endphp

      <div class="rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl shadow-lg p-4 sm:p-5">
        <div class="flex items-start justify-between gap-3">
          <div class="min-w-0 space-y-1">

            {{-- العنوان البشري --}}
            <div class="font-extrabold text-slate-900 dark:text-white text-[15px] sm:text-base">
              {{ ($human['emoji'] ?? '🔔') }} {{ $human['type'] ?? $s->title }}
            </div>

            {{-- الهدف البشري --}}
            <div class="text-[12px] text-slate-600 dark:text-white/65">
              <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>

            {{-- Chips --}}
            <div class="mt-3 flex flex-wrap gap-2">
              <span class="inline-flex items-center justify-center px-2 py-0.5 rounded-full text-[10px] font-bold ring-1 {{ $tagCls }}">
                {{ $human['tag'] ?? strtoupper($s->severity) }}
              </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 border border-transparent">
                {{ $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 {{ $stCls }}">
                {{ strtoupper($s->status) }}
              </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">
                Score: {{ $s->risk_score }}
              </span>

              @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> Case #{{ ($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>

            {{-- Triggers (مختصر + واضح) --}}
            @if(!empty($s->triggers))
              <div class="mt-3 flex flex-wrap gap-1">
                @foreach($s->triggers as $t)
                  <span class="px-2 py-0.5 rounded-full text-[10px] bg-slate-100 dark:bg-white/5 text-slate-700 dark:text-white/70 border border-slate-200/70 dark:border-white/10">
                    {{ $t['key'] ?? 'x' }}: {{ $t['value'] ?? '—' }}
                  </span>
                @endforeach
              </div>
            @endif
          </div>

          {{-- Actions --}}
          <div class="flex flex-col gap-2 min-w-[120px]">
            <form method="POST" action="{{ route('superadmin.prosanta.signals.seen', $s->id) }}">
              @csrf
              <button class="w-full px-3 py-2 rounded-xl bg-slate-200 hover:bg-slate-300 dark:bg-white/10 dark:hover:bg-white/15
                             text-slate-800 dark:text-white text-[12px] font-extrabold">
                Seen
              </button>
            </form>

            <form method="POST" action="{{ route('superadmin.prosanta.signals.handled', $s->id) }}">
              @csrf
              <button class="w-full px-3 py-2 rounded-xl bg-emerald-600 hover:bg-emerald-700
                             text-white text-[12px] font-extrabold">
                Handled
              </button>
            </form>
          </div>
        </div>
      </div>

    @empty
      <div class="rounded-2xl border border-white/10 bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl shadow-lg p-6 text-center text-slate-500 dark:text-white/50">
        لا توجد بيانات.
      </div>
    @endforelse
  </div>

  <div class="pt-2">{{ $signals->links() }}</div>

</div>
@endsection