@extends('layouts.superadmin')
@section('title','Socratic Sentinel — Incidents')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-black py-6 sm:py-8 rtl">
  <div class="max-w-7xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6">

    <div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-slate-900/95 via-slate-900/98 to-black/98 border border-rose-400/25 shadow-2xl shadow-rose-500/10">
      <div class="pointer-events-none absolute -top-24 -right-10 w-72 h-72 rounded-full bg-rose-400/20 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-28 -left-16 w-80 h-80 rounded-full bg-amber-500/20 blur-3xl"></div>

      <div class="relative p-5 sm:p-7 lg:p-8 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
        <div class="space-y-3 max-w-2xl">
          <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-black/40 border border-rose-300/30 text-[11px] text-rose-100">
            <i class="fa-solid fa-triangle-exclamation text-xs"></i>
            <span>Incidents — حالات + معالجة + توثيق</span>
          </div>

          <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
            Incidents <span class="text-rose-300">لوحة الحالات</span>
          </h1>

          <p class="text-[12px] sm:text-[14px] text-slate-200/85 leading-relaxed">
            أي مؤشر خطر أو شذوذ يتم تسجيله هنا، مع إمكانية إغلاق الحالة وتوثيق المعالجة.
          </p>
        </div>

        <div class="w-full lg:w-auto">
          <div class="rounded-2xl bg-black/40 border border-white/15 px-4 py-3 space-y-2 text-xs text-slate-100">
            <div class="flex items-center gap-2">
              <div class="w-8 h-8 rounded-xl bg-rose-500/20 text-rose-200 grid place-items-center">
                <i class="fa-solid fa-filter"></i>
              </div>
              <div class="min-w-0">
                <div class="text-[11px] text-slate-300/80">فلترة</div>
                <div class="font-bold text-sm truncate">Incidents Scope</div>
              </div>
            </div>

            <form method="get" class="grid grid-cols-2 gap-2 pt-2">
              <div>
                <label class="text-[10px] text-slate-300/80">من</label>
                <input type="date" name="from" value="{{ $from }}"
                  class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-rose-500/35">
              </div>
              <div>
                <label class="text-[10px] text-slate-300/80">إلى</label>
                <input type="date" name="to" value="{{ $to }}"
                  class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-amber-500/35">
              </div>

              <div>
                <label class="text-[10px] text-slate-300/80">Status</label>
                <select name="status"
                  class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-cyan-500/30">
                  <option value="" @selected(!request('status'))>All</option>
                  <option value="open" @selected(request('status')==='open')>Open</option>
                  <option value="resolved" @selected(request('status')==='resolved')>Resolved</option>
                </select>
              </div>

              <div>
                <label class="text-[10px] text-slate-300/80">Severity</label>
                <select name="severity"
                  class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-fuchsia-500/30">
                  <option value="" @selected(!request('severity'))>All</option>
                  <option value="low" @selected(request('severity')==='low')>low</option>
                  <option value="medium" @selected(request('severity')==='medium')>medium</option>
                  <option value="high" @selected(request('severity')==='high')>high</option>
                  <option value="critical" @selected(request('severity')==='critical')>critical</option>
                </select>
              </div>

              <div class="col-span-2">
                <label class="text-[10px] text-slate-300/80">Kind</label>
                <input type="text" name="kind" value="{{ request('kind') }}"
                  class="w-full mt-1 rounded-xl bg-black/50 border border-white/15 text-xs text-slate-50 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-500/30"
                  placeholder="مثال: security | performance | abuse ...">
              </div>

              <button class="col-span-2 inline-flex items-center justify-center px-4 py-2 rounded-2xl text-xs font-bold text-slate-900
                bg-gradient-to-r from-rose-200 via-amber-200 to-cyan-200 shadow-lg shadow-rose-500/15 hover:scale-[1.01] active:scale-100 transition">
                <i class="fa-solid fa-rotate ms-2 text-[11px]"></i>
                تحديث
              </button>

              <div class="col-span-2 flex items-center gap-2 pt-1">
                <a href="{{ route('superadmin.sentinel.dashboard') }}"
                   class="flex-1 inline-flex items-center justify-center px-3 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-[11px] hover:bg-white/15 transition">
                  <i class="fa-solid fa-gauge-high ms-2 text-[11px]"></i> Dashboard
                </a>
                <a href="{{ route('superadmin.sentinel.explorer') }}"
                   class="flex-1 inline-flex items-center justify-center px-3 py-2 rounded-2xl bg-white/10 border border-white/15 text-white/90 text-[11px] hover:bg-white/15 transition">
                  <i class="fa-solid fa-magnifying-glass-chart ms-2 text-[11px]"></i> Explorer
                </a>
              </div>
            </form>

          </div>
        </div>

      </div>
    </div>

    @if(session('success'))
      <div class="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 text-emerald-200 px-4 py-3 text-sm">
        {{ session('success') }}
      </div>
    @endif

    <div class="rounded-3xl border border-white/10 bg-black/25 overflow-hidden">
      <div class="px-5 py-4 border-b border-white/10 flex items-center justify-between">
        <div>
          <div class="text-sm font-extrabold text-rose-200">Incidents List</div>
          <div class="text-[11px] text-white/60">فلتر النتائج ثم أغلق أي حالة تم حلها</div>
        </div>
      </div>

      <div class="p-4 overflow-x-auto">
        <table class="min-w-full text-sm">
          <thead class="text-[11px] text-white/60">
            <tr>
              <th class="text-right py-2 px-3">Time</th>
              <th class="text-right py-2 px-3">Kind</th>
              <th class="text-right py-2 px-3">Severity</th>
              <th class="text-right py-2 px-3">Title</th>
              <th class="text-right py-2 px-3">Actor</th>
              <th class="text-right py-2 px-3">IP</th>
              <th class="text-right py-2 px-3">Status</th>
              <th class="text-right py-2 px-3">Action</th>
            </tr>
          </thead>

          <tbody class="divide-y divide-white/5">
            @forelse($items as $it)
              @php
                $sev = strtolower($it->severity ?? 'medium');
                $sevCls = match($sev){
                  'low' => 'bg-emerald-500/10 border-emerald-400/20 text-emerald-200',
                  'high' => 'bg-amber-500/10 border-amber-400/20 text-amber-200',
                  'critical' => 'bg-rose-500/10 border-rose-400/20 text-rose-200',
                  default => 'bg-cyan-500/10 border-cyan-400/20 text-cyan-200',
                };
                $isOpen = empty($it->resolved_at);
              @endphp

              <tr class="hover:bg-white/5 transition">
                <td class="py-3 px-3 text-white/65">{{ $it->happened_at ?? '—' }}</td>
                <td class="py-3 px-3 text-white">
                  <span class="text-[11px] px-2 py-1 rounded-full bg-white/5 border border-white/10 text-white/75">
                    {{ $it->kind ?? '—' }}
                  </span>
                </td>
                <td class="py-3 px-3">
                  <span class="text-[11px] px-2 py-1 rounded-full border {{ $sevCls }}">
                    {{ $sev }}
                  </span>
                </td>
                <td class="py-3 px-3">
                  <div class="font-extrabold text-white">{{ $it->title ?? '—' }}</div>
                  @if(!empty($it->details))
                    <div class="text-[11px] text-white/55 max-w-[520px] truncate">{{ $it->details }}</div>
                  @endif
                </td>
                <td class="py-3 px-3 text-white/70">{{ $it->actor_user_id ?? '—' }}</td>
                <td class="py-3 px-3 text-white/70">{{ $it->ip_address ?? '—' }}</td>
                <td class="py-3 px-3">
                  @if($isOpen)
                    <span class="text-[11px] px-2 py-1 rounded-full bg-amber-500/10 border border-amber-400/20 text-amber-200">
                      open
                    </span>
                  @else
                    <span class="text-[11px] px-2 py-1 rounded-full bg-emerald-500/10 border border-emerald-400/20 text-emerald-200">
                      resolved
                    </span>
                    <div class="text-[10px] text-white/50 mt-1">{{ $it->resolved_at }}</div>
                  @endif
                </td>

                <td class="py-3 px-3">
                  @if($isOpen)
                    <form method="post" action="{{ route('superadmin.sentinel.incidents.resolve', $it->id) }}">
                      @csrf
                      <button class="inline-flex items-center justify-center px-3 py-2 rounded-2xl text-[11px] font-extrabold text-slate-900
                        bg-gradient-to-r from-emerald-200 via-cyan-200 to-fuchsia-200 shadow-lg shadow-emerald-500/10 hover:scale-[1.01] active:scale-100 transition">
                        <i class="fa-solid fa-circle-check ms-2"></i>
                        إغلاق
                      </button>
                    </form>
                  @else
                    <span class="text-[11px] text-white/50">—</span>
                  @endif
                </td>
              </tr>
            @empty
              <tr><td colspan="8" class="py-10 text-center text-white/60">لا يوجد Incidents ضمن الفلترة.</td></tr>
            @endforelse
          </tbody>
        </table>

        <div class="mt-4">
          {{ $items->links() }}
        </div>
      </div>
    </div>

  </div>
</div>
@endsection