@extends('layouts.superadmin')

@section('title','فحص أمني — Wizard')

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

    <div class="relative overflow-hidden rounded-3xl border border-fuchsia-500/25
                bg-gradient-to-br from-fuchsia-700/15 via-cyan-600/10 to-slate-950
                shadow-2xl shadow-fuchsia-500/10 p-5 text-white">
      <div class="absolute -top-24 -right-24 w-72 h-72 rounded-full bg-cyan-400/25 blur-3xl"></div>
      <div class="absolute -bottom-24 -left-24 w-72 h-72 rounded-full bg-fuchsia-400/20 blur-3xl"></div>

      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
          <div class="text-sm text-white/70">🛡️ Wizard فحص أمني — خطوة بخطوة</div>
          <div class="text-2xl font-extrabold tracking-tight">أداة التدقيق + الصيانة (مؤمنة داخل Laravel)</div>
          <div class="text-xs text-white/70 mt-1">
            تعمل بدون mysql.user وبلا أدوات public مكشوفة.
          </div>
        </div>

        <div class="flex gap-2">
          <button id="btnStart"
                  class="px-4 py-2 rounded-xl bg-gradient-to-r from-fuchsia-600 to-cyan-500 hover:opacity-95 font-bold">
            بدء فحص جديد ⚡
          </button>
          <a href="{{ $latest? route('superadmin.security.download',$latest->id) : '#' }}"
             class="px-4 py-2 rounded-xl bg-white/10 border border-white/15 hover:bg-white/15 font-bold">
            تنزيل آخر تقرير
          </a>
        </div>
      </div>

      <div class="mt-4">
        <div class="h-3 rounded-full bg-white/10 overflow-hidden border border-white/10">
          <div id="bar" class="h-3 w-0 bg-gradient-to-r from-fuchsia-500 to-cyan-400"></div>
        </div>
        <div class="mt-2 text-xs text-white/70 flex justify-between">
          <div>الحالة: <span id="status">—</span></div>
          <div>الخطوة: <span id="step">—</span> / 5</div>
          <div>التقدم: <span id="progress">0</span>%</div>
        </div>
      </div>
    </div>

    <div class="grid lg:grid-cols-3 gap-4">
      @foreach([1=>'Overview',2=>'DB',3=>'Schema Guard',4=>'Laravel Maintenance',5=>'Summary & Export'] as $k=>$label)
        <div class="rounded-2xl border border-slate-800 bg-slate-950/60 p-4">
          <div class="text-sm text-slate-300 font-bold">Step {{ $k }}</div>
          <div class="text-lg text-white font-extrabold">{{ $label }}</div>
          <div class="text-xs text-slate-400 mt-1">تشغيل خطوة {{ $k }} وتسجيل النتائج بالتقرير.</div>
          <button data-run-step="{{ $k }}"
                  class="mt-3 w-full px-3 py-2 rounded-xl bg-white/10 border border-white/10 hover:bg-white/15 font-bold">
            تشغيل الخطوة
          </button>
        </div>
      @endforeach
    </div>

    <div class="rounded-2xl border border-slate-800 bg-slate-950/60 p-4">
      <div class="flex items-center justify-between gap-3">
        <div>
          <div class="text-white font-extrabold text-lg">نتائج التقرير (JSON)</div>
          <div class="text-slate-400 text-xs">يتم تحديثه بعد كل خطوة.</div>
        </div>
        <div class="flex gap-2">
          <button id="btnRefresh" class="px-4 py-2 rounded-xl bg-cyan-600/30 border border-cyan-500/30 hover:bg-cyan-600/40 font-bold">
            تحديث
          </button>
          <button id="btnEmail" class="px-4 py-2 rounded-xl bg-fuchsia-600/30 border border-fuchsia-500/30 hover:bg-fuchsia-600/40 font-bold">
            إرسال للإيميل
          </button>
        </div>
      </div>

      <pre id="out" class="mt-4 text-xs text-slate-200 bg-black/40 border border-white/10 rounded-xl p-4 overflow-auto" style="max-height:420px; direction:ltr; text-align:left;"></pre>
    </div>

  </div>
</div>

<script>
(function(){
  const csrf = @json(csrf_token());
  let scanId = @json($latest? $latest->id : null);

  const elBar = document.getElementById('bar');
  const elStatus = document.getElementById('status');
  const elStep = document.getElementById('step');
  const elProgress = document.getElementById('progress');
  const elOut = document.getElementById('out');

  async function post(url, data){
    const r = await fetch(url, {
      method: 'POST',
      headers: {'X-CSRF-TOKEN': csrf, 'Content-Type':'application/json'},
      body: JSON.stringify(data || {})
    });
    return r.json();
  }

  async function refresh(){
    if(!scanId){ elOut.textContent = 'لا يوجد Scan بعد. اضغط بدء فحص جديد.'; return; }
    const r = await fetch(`{{ url('/superadmin/security/status') }}/${scanId}`, {headers:{'Accept':'application/json'}});
    const j = await r.json();
    if(!j.ok){ elOut.textContent = 'فشل قراءة الحالة'; return; }

    elStatus.textContent = j.status;
    elStep.textContent = j.step;
    elProgress.textContent = j.progress;
    elBar.style.width = (j.progress || 0) + '%';
    elOut.textContent = JSON.stringify(j.report, null, 2);
  }

  document.getElementById('btnStart').addEventListener('click', async ()=>{
    const j = await post(`{{ route('superadmin.security.start') }}`, {});
    if(j.ok){
      scanId = j.scan_id;
      await refresh();
    }
  });

  document.getElementById('btnRefresh').addEventListener('click', refresh);

  document.querySelectorAll('[data-run-step]').forEach(btn=>{
    btn.addEventListener('click', async ()=>{
      if(!scanId){
        const s = await post(`{{ route('superadmin.security.start') }}`, {});
        if(s.ok) scanId = s.scan_id;
      }
      const step = parseInt(btn.getAttribute('data-run-step'), 10);
      await post(`{{ route('superadmin.security.runStep') }}`, {scan_id: scanId, step});
      await refresh();
    });
  });

  document.getElementById('btnEmail').addEventListener('click', async ()=>{
    if(!scanId) return;
    const to = prompt('اكتب الإيميل لإرسال التقرير:', 'amirabotbk@gmail.com');
    if(!to) return;
    const j = await post(`{{ url('/superadmin/security/email') }}/${scanId}`, {to});
    alert(j.ok ? 'تم الإرسال ✅' : 'فشل الإرسال ❌');
  });

  refresh();
})();
</script>
@endsection