{{-- resources/views/superadmin/proactive/command/conflicts.blade.php --}}
@extends('layouts.superadmin')

@section('title', 'ProActive — التعارضات')
@section('page-title', 'تعارضات ProActive')

@section('content')
@php
  use Illuminate\Support\Facades\Route;

  // ✅ safe_route داخل نفس الـView (مرة واحدة)
  if (!function_exists('safe_route')) {
      function safe_route(string $name, array $params = [], bool $absolute = true, string $fallback = '#'): string
      {
          try {
              return Route::has($name) ? route($name, $params, $absolute) : $fallback;
          } catch (\Throwable $e) {
              return $fallback;
          }
      }
  }

  $qs = request()->query();
  $q  = fn($k,$d=null) => request()->get($k,$d);

  $date = $date ?? $q('date', now()->toDateString());
  $conflicts = $conflicts ?? [];

  $rCommand    = safe_route('superadmin.proactive.command', [], true, url('/superadmin/proactive/command'));
  $rConflicts  = safe_route('superadmin.proactive.conflicts', [], true, url()->current());
  $rEscalations= safe_route('superadmin.proactive.escalations', [], true, '#');

  $chip = fn($cls) => "px-2.5 py-1 rounded-xl border text-[11px] font-extrabold $cls";

  $typeBadge = fn($t) =>
    $t==='leader'
      ? ['label'=>'تعارض قائد','cls'=>'border-rose-400/25 bg-rose-500/10 text-rose-100']
      : ['label'=>'تعارض منصة','cls'=>'border-amber-400/25 bg-amber-500/10 text-amber-100'];

@endphp

<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">

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

      <div class="p-5 sm:p-6 lg:p-7 flex flex-col gap-5">

        <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
          <div class="space-y-1">
            <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-2xl border border-white/10 bg-white/5 text-white/80">
              <i class="fa-solid fa-link-slash text-amber-200"></i>
              <span class="text-[12px]">ProActive • تحليل التعارضات</span>
            </div>

            <h1 class="text-xl sm:text-2xl lg:text-3xl font-black text-white tracking-tight">
              تعارضات ProActive
              <span class="text-white/60 font-semibold text-sm sm:text-base">— Conflicts</span>
            </h1>

            <p class="text-white/70 text-sm sm:text-[15px] leading-relaxed max-w-3xl">
              الهدف: كشف تداخل المواعيد قبل ما يصير “فوضى قيادة”.
              <span class="text-white/55">التعارض = قائد واحد على نفس الوقت أو منصة واحدة بتداخل.</span>
            </p>

            <div class="mt-2 flex flex-wrap items-center gap-2 text-[11px]">
              <span class="{{ $chip('border-white/10 bg-white/5 text-white/70') }}">
                <i class="fa-regular fa-calendar ml-1"></i> التاريخ: {{ $date }}
              </span>
              <span class="{{ $chip('border-amber-400/25 bg-amber-500/10 text-amber-100') }}">
                <i class="fa-solid fa-bolt ml-1"></i> عدد التعارضات: {{ is_array($conflicts) ? count($conflicts) : 0 }}
              </span>
            </div>
          </div>

          <div class="flex flex-wrap items-center gap-2">
            <a href="{{ $rCommand }}"
               class="px-4 py-2.5 rounded-2xl bg-white/5 hover:bg-white/10 text-white/85 font-extrabold border border-white/10">
              <i class="fa-solid fa-arrow-right ml-1"></i> العودة للقيادة
            </a>

            <a href="{{ $rEscalations }}"
               class="px-4 py-2.5 rounded-2xl bg-rose-600/70 hover:bg-rose-600 text-white font-extrabold border border-rose-400/25">
              <i class="fa-solid fa-siren-on ml-1"></i> التصعيدات
            </a>
          </div>
        </div>

        {{-- FILTER --}}
        <form method="GET" action="{{ $rConflicts }}" class="rounded-2xl border border-white/10 bg-white/5 p-4">
          <div class="grid grid-cols-1 lg:grid-cols-12 gap-3">
            <div class="lg:col-span-4">
              <label class="text-white/70 text-xs">تاريخ الفحص</label>
              <div class="mt-1 relative">
                <i class="fa-regular fa-calendar absolute right-3 top-1/2 -translate-y-1/2 text-white/35"></i>
                <input type="date" name="date" value="{{ $date }}"
                       class="w-full pr-10 pl-3 py-2.5 rounded-2xl bg-black/30 border border-white/10 text-white focus:outline-none focus:ring-2 focus:ring-amber-500/40">
              </div>
            </div>

            <div class="lg:col-span-8 flex items-end gap-2">
              <button class="px-4 py-2.5 rounded-2xl bg-amber-600/70 hover:bg-amber-600 text-white font-extrabold border border-amber-400/25">
                <i class="fa-solid fa-magnifying-glass ml-1"></i> فحص
              </button>

              <a href="{{ $rConflicts }}"
                 class="px-4 py-2.5 rounded-2xl bg-white/5 hover:bg-white/10 text-white/85 font-semibold border border-white/10">
                <i class="fa-solid fa-rotate-left ml-1"></i> تصفير
              </a>

              <div class="text-white/55 text-xs ms-auto">
                * التداخل محسوب بالوقت/المدة.
              </div>
            </div>
          </div>
        </form>

      </div>
    </div>

    {{-- LIST --}}
    @if(is_array($conflicts) && count($conflicts) > 0)
      <div class="rounded-3xl border border-white/10 bg-white/5 overflow-hidden">
        <div class="px-4 py-3 border-b border-white/10 flex items-center justify-between">
          <div class="text-white font-extrabold flex items-center gap-2">
            <i class="fa-solid fa-layer-group text-amber-200"></i>
            <span>قائمة التعارضات</span>
          </div>
          <div class="text-white/55 text-xs">مرتبة حسب الاكتشاف داخل اليوم.</div>
        </div>

        <div class="divide-y divide-white/5">
          @foreach($conflicts as $c)
            @php
              $t = (string)($c['type'] ?? 'platform');
              $b = $typeBadge($t);

              $a = $c['a'] ?? [];
              $b2= $c['b'] ?? [];

              $aTitle = $a['title'] ?? ('#'.($a['id'] ?? ''));
              $bTitle = $b2['title'] ?? ('#'.($b2['id'] ?? ''));

              $aLeader = $a['leader_name'] ?? '-';
              $bLeader = $b2['leader_name'] ?? '-';

              $aPlat = $a['platform'] ?? '-';
              $bPlat = $b2['platform'] ?? '-';

              $rangeStart = $c['start'] ?? '';
              $rangeEnd   = $c['end'] ?? '';

              $aType = $a['event_type'] ?? 'regular';
              $bType = $b2['event_type'] ?? 'regular';

              $aTypeCls = $aType==='plus' ? 'border-fuchsia-400/25 bg-fuchsia-500/10 text-fuchsia-100' : 'border-emerald-400/25 bg-emerald-500/10 text-emerald-100';
              $bTypeCls = $bType==='plus' ? 'border-fuchsia-400/25 bg-fuchsia-500/10 text-fuchsia-100' : 'border-emerald-400/25 bg-emerald-500/10 text-emerald-100';
            @endphp

            <div class="p-4 sm:p-5 hover:bg-white/5">
              <div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-3">
                <div class="space-y-2">
                  <div class="flex items-center gap-2 flex-wrap">
                    <span class="{{ $chip($b['cls']) }}">
                      <i class="fa-solid fa-link-slash ml-1"></i> {{ $b['label'] }}
                    </span>

                    <span class="{{ $chip('border-white/10 bg-white/5 text-white/70') }}">
                      <i class="fa-regular fa-clock ml-1"></i> {{ $rangeStart }} — {{ $rangeEnd }}
                    </span>

                    @if($t==='leader')
                      <span class="{{ $chip('border-rose-400/25 bg-rose-500/10 text-rose-100') }}">
                        القائد: {{ $aLeader }}
                      </span>
                    @else
                      <span class="{{ $chip('border-amber-400/25 bg-amber-500/10 text-amber-100') }}">
                        المنصة: {{ $aPlat }}
                      </span>
                    @endif
                  </div>

                  <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    {{-- A --}}
                    <div class="rounded-3xl border border-white/10 bg-black/20 p-4">
                      <div class="flex items-start justify-between gap-2">
                        <div class="min-w-0">
                          <div class="text-white font-black truncate">{{ $aTitle }}</div>
                          <div class="text-white/60 text-xs truncate">
                            {{ $aLeader }} • {{ $aPlat }}
                          </div>
                        </div>
                        <span class="{{ $chip($aTypeCls) }}">{{ $aType==='plus' ? 'PLUS' : 'REG' }}</span>
                      </div>
                      <div class="mt-3 text-white/70 text-xs">
                        الحالة: <span class="text-white font-bold">{{ strtoupper((string)($a['status'] ?? '')) }}</span>
                        • ID: <span class="text-white font-bold">{{ (int)($a['id'] ?? 0) }}</span>
                      </div>
                    </div>

                    {{-- B --}}
                    <div class="rounded-3xl border border-white/10 bg-black/20 p-4">
                      <div class="flex items-start justify-between gap-2">
                        <div class="min-w-0">
                          <div class="text-white font-black truncate">{{ $bTitle }}</div>
                          <div class="text-white/60 text-xs truncate">
                            {{ $bLeader }} • {{ $bPlat }}
                          </div>
                        </div>
                        <span class="{{ $chip($bTypeCls) }}">{{ $bType==='plus' ? 'PLUS' : 'REG' }}</span>
                      </div>
                      <div class="mt-3 text-white/70 text-xs">
                        الحالة: <span class="text-white font-bold">{{ strtoupper((string)($b2['status'] ?? '')) }}</span>
                        • ID: <span class="text-white font-bold">{{ (int)($b2['id'] ?? 0) }}</span>
                      </div>
                    </div>
                  </div>
                </div>

                {{-- Actions --}}
                <div class="flex flex-col gap-2 lg:w-[240px]">
                  <a href="{{ $rEscalations }}?date={{ urlencode($date) }}"
                     class="px-4 py-2.5 rounded-2xl bg-rose-600/70 hover:bg-rose-600 text-white font-extrabold border border-rose-400/25 text-center">
                    <i class="fa-solid fa-siren-on ml-1"></i> تصعيد فوري
                  </a>

                  <a href="{{ $rCommand }}?date={{ urlencode($date) }}"
                     class="px-4 py-2.5 rounded-2xl bg-white/5 hover:bg-white/10 text-white/85 font-bold border border-white/10 text-center">
                    <i class="fa-solid fa-arrow-right ml-1"></i> رجوع للقيادة
                  </a>
                </div>
              </div>
            </div>
          @endforeach
        </div>
      </div>

    @else
      <div class="rounded-3xl border border-emerald-400/20 bg-emerald-500/10 p-5">
        <div class="text-white font-extrabold flex items-center gap-2">
          <i class="fa-solid fa-circle-check text-emerald-200"></i>
          <span>لا يوجد تعارضات لهذا اليوم ✅</span>
        </div>
        <div class="mt-2 text-white/70 text-sm">
          هذا ممتاز — يعني جدول ProActive منضبط وما فيه تداخلات حرجة.
        </div>
      </div>
    @endif

  </div>
</div>
@endsection