@extends('layouts.superadmin')

@section('title','مركز إعدادات الذكاء الاصطناعي — دخول آمن')
@section('page-title','🧠 مركز إعدادات الذكاء الاصطناعي — دخول آمن')

@section('content')
@php
  $backUrl = url()->previous() !== url()->current()
      ? url()->previous()
      : (\Illuminate\Support\Facades\Route::has('dashboard') ? route('dashboard') : url('/'));
@endphp

<div class="min-h-[70vh] rtl flex items-center justify-center px-3 sm:px-4 py-6">

  <div class="w-full max-w-lg mx-auto space-y-4">

    {{-- شارة أعلى (Mobile first) --}}
    <div class="flex items-center justify-between gap-3">
      <a href="{{ $backUrl }}"
         class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl text-[11px] font-extrabold
                border border-slate-200/70 dark:border-slate-800/70
                bg-white/70 dark:bg-slate-950/30
                text-slate-700 dark:text-slate-200
                hover:bg-white dark:hover:bg-slate-900/50 transition">
        <i class="fa-solid fa-arrow-right-long text-[12px]"></i>
        رجوع
      </a>

      <span class="inline-flex items-center gap-2 px-3 py-2 rounded-2xl text-[11px] font-extrabold
                   bg-emerald-500/10 text-emerald-700 border border-emerald-500/15
                   dark:bg-emerald-500/10 dark:text-emerald-200 dark:border-emerald-500/20">
        <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
        وضع آمن — إدارة فقط
      </span>
    </div>

    {{-- بطاقة ملحمية --}}
    <div class="relative overflow-hidden rounded-3xl border border-slate-200/70 dark:border-slate-800/70
                bg-white/80 dark:bg-slate-950/45 backdrop-blur-xl
                shadow-[0_30px_80px_-60px_rgba(2,6,23,0.8)]">

      {{-- Glow --}}
      <div class="pointer-events-none absolute -top-24 -right-24 w-72 h-72 rounded-full bg-violet-500/15 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-24 -left-24 w-72 h-72 rounded-full bg-cyan-500/12 blur-3xl"></div>
      <div class="pointer-events-none absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_top,_rgba(99,102,241,0.25),_transparent_55%)]"></div>

      <div class="relative p-5 sm:p-6 space-y-5">

        {{-- رأس اللوحة --}}
        <div class="flex items-start gap-4">
          <div class="h-12 w-12 rounded-3xl grid place-items-center
                      bg-gradient-to-br from-slate-900 via-slate-950 to-black
                      ring-1 ring-cyan-400/20 shadow-lg text-white shrink-0">
            <i class="fa-solid fa-shield-keyhole text-[18px]"></i>
          </div>

          <div class="min-w-0">
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px] font-extrabold
                        bg-slate-900/5 dark:bg-white/5 border border-slate-900/5 dark:border-white/10
                        text-slate-700 dark:text-slate-200">
              <i class="fa-solid fa-brain text-[11px] opacity-80"></i>
              لوحة إعدادات الذكاء الاصطناعي
            </div>

            <h1 class="mt-2 text-lg sm:text-xl font-extrabold text-slate-900 dark:text-white leading-snug">
              دخول آمن — مركز مراقبة وتحليل الذكاء الاصطناعي
            </h1>

            <p class="mt-2 text-[12px] sm:text-[13px] text-slate-600 dark:text-slate-300 leading-relaxed">
              هذه المنطقة مخصصة للإدارة فقط، لمراقبة أداء الذكاء الاصطناعي في تحليل:
              <b class="text-slate-900 dark:text-white">مستجدات ملاحظات رولا وصقر</b>،
              <b class="text-slate-900 dark:text-white">تقارير ProActive</b>،
              <b class="text-slate-900 dark:text-white">ProActive Plus</b>،
              و<b class="text-slate-900 dark:text-white">ProActive Extra</b>
              <span class="text-slate-500 dark:text-slate-300">
                (مراقبة أداء جولات رسمية وحملات تكبيس، تقارير، مجموعات، مستندات التحالفات، التحالفات، فرق متعاقدة معنا بشكل فوري)
              </span>.
            </p>
          </div>
        </div>

        {{-- ملاحظات سريعة (من عندي) --}}
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
          <div class="rounded-3xl border border-slate-200/70 dark:border-slate-800/70 bg-slate-50/70 dark:bg-slate-900/30 p-4">
            <div class="text-[11px] text-slate-500 dark:text-slate-300">وظيفة اللوحة</div>
            <div class="mt-1 text-[13px] font-extrabold text-slate-900 dark:text-white">
              مراقبة + جودة + تنبيهات
            </div>
            <div class="mt-1 text-[11px] text-slate-600 dark:text-slate-300 leading-relaxed">
              كشف تكرار • خطر التأخير • جودة التقارير • إشارات التحليل.
            </div>
          </div>

          <div class="rounded-3xl border border-amber-200/70 dark:border-amber-800/60 bg-amber-50/60 dark:bg-amber-950/20 p-4">
            <div class="text-[11px] text-amber-700/80 dark:text-amber-200/80">ملاحظة مهمة</div>
            <div class="mt-1 text-[13px] font-extrabold text-amber-900 dark:text-amber-100">
              سرية الدخول
            </div>
            <div class="mt-1 text-[11px] text-amber-800/80 dark:text-amber-200/80 leading-relaxed">
              ممنوع مشاركة كلمة السر مع أي عضو عادي.
            </div>
          </div>

          <div class="rounded-3xl border border-rose-200/70 dark:border-rose-800/60 bg-rose-50/60 dark:bg-rose-950/20 p-4">
            <div class="text-[11px] text-rose-700/80 dark:text-rose-200/80">سياسة أمان</div>
            <div class="mt-1 text-[13px] font-extrabold text-rose-900 dark:text-rose-100">
              مسؤولية إدارية
            </div>
            <div class="mt-1 text-[11px] text-rose-800/80 dark:text-rose-200/80 leading-relaxed">
              أي دخول = تسجيل متابعة داخل الإدارة.
            </div>
          </div>
        </div>

        {{-- خط فاصل --}}
        <div class="h-px bg-slate-200/70 dark:bg-slate-800/70"></div>

        {{-- رسالة خطأ --}}
        @if ($errors->has('password'))
          <div class="rounded-2xl border border-rose-300/70 dark:border-rose-800/70
                      bg-rose-50/70 dark:bg-rose-950/30
                      text-rose-800 dark:text-rose-200
                      px-4 py-3 text-[12px] sm:text-[13px]">
            <div class="flex items-start gap-2">
              <i class="fa-solid fa-circle-exclamation mt-0.5"></i>
              <div class="leading-relaxed">
                <div class="font-extrabold">فشل التحقق</div>
                <div class="opacity-90">{{ $errors->first('password') }}</div>
              </div>
            </div>
          </div>
        @endif

        {{-- نموذج الدخول --}}
        <form method="POST" action="{{ route('superadmin.falconRolaNotes.review.unlock') }}" class="space-y-3">
          @csrf

          <div class="space-y-1">
            <label class="block text-[12px] font-extrabold text-slate-700 dark:text-slate-200">
              كلمة السر الخاصة بالإدارة
            </label>

            <div class="relative">
              <i class="fa-solid fa-key absolute right-3 top-1/2 -translate-y-1/2 text-slate-400"></i>
              <input
                type="password"
                name="password"
                class="w-full rounded-2xl border border-slate-200/80 dark:border-slate-800/80
                       bg-white/70 dark:bg-slate-950/40
                       text-slate-900 dark:text-white
                       text-sm px-10 py-3
                       focus:outline-none focus:ring-2 focus:ring-cyan-400/25"
                placeholder="••••••••"
                autofocus
              >
            </div>

            <p class="text-[11px] text-slate-500 dark:text-slate-300 leading-relaxed">
              ملاحظة: هذه اللوحة تراقب الذكاء الاصطناعي بشكل مستمر لتحليل التقارير والمستجدات، وتعرض مؤشرات جودة وتنبيهات.
            </p>
          </div>

          <button type="submit"
                  class="w-full inline-flex items-center justify-center gap-2 rounded-2xl
                         bg-gradient-to-r from-cyan-200 via-emerald-200 to-fuchsia-200
                         text-slate-950 text-sm font-extrabold px-4 py-3
                         shadow-lg shadow-cyan-500/10
                         hover:scale-[1.01] active:scale-100 transition">
            <i class="fa-solid fa-unlock-keyhole text-[14px]"></i>
            <span>دخول إلى مركز المراقبة والتحليل</span>
          </button>

          {{-- تذييل رسمي --}}
          <div class="text-center text-[11px] text-slate-500 dark:text-slate-300">
            بمجرد الدخول، ستظهر صفحات المراجعة والتحليل والتقارير — حسب الصلاحيات.
          </div>
        </form>

      </div>
    </div>

    {{-- سطر ملاحظات إضافي (من عندي) --}}
    <div class="rounded-3xl border border-slate-200/70 dark:border-slate-800/70
                bg-white/70 dark:bg-slate-950/30 backdrop-blur-xl p-4">
      <div class="flex items-start gap-3">
        <div class="w-10 h-10 rounded-2xl bg-slate-900 text-white grid place-items-center shrink-0">
          <i class="fa-solid fa-clipboard-check text-[13px]"></i>
        </div>
        <div class="min-w-0">
          <div class="text-[13px] font-extrabold text-slate-900 dark:text-white">
            ملاحظات تشغيلية
          </div>
          <div class="mt-1 text-[12px] text-slate-600 dark:text-slate-300 leading-relaxed">
            إذا كانت هناك عناصر “تحت المراجعة” لفترة طويلة أو تقارير “مكررة بزمن قصير”، سيتم رفعها تلقائيًا ضمن مؤشرات الخطر داخل لوحة الجودة.
            <span class="font-extrabold">هذا لا يعني رفض تلقائي</span>، بل إشارات مساعدة للإدارة.
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
@endsection