{{-- resources/views/superadmin/whatsapp/bridge/index.blade.php --}}
@extends('layouts.superadmin')

@section('title','مراقبة ربط الواتساب — AmirOS')
@section('page-title','🛰️ مراقبة ربط الواتساب (AI Bridge)')

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

    {{-- HERO / INTRO --}}
    <div class="rounded-3xl bg-slate-900/90 border border-white/10 p-6 sm:p-7 shadow-2xl relative overflow-hidden">
      <div class="pointer-events-none absolute -top-24 -left-24 w-56 h-56 rounded-full bg-indigo-500/25 blur-3xl"></div>
      <div class="pointer-events-none absolute -bottom-24 -right-24 w-56 h-56 rounded-full bg-sky-500/20 blur-3xl"></div>

      <div class="relative space-y-3">
        <h1 class="text-2xl sm:text-3xl font-extrabold text-white mb-1">
          🛰️ مراقبة ربط بوت الواتساب
        </h1>
        <p class="text-sm text-slate-300 leading-relaxed">
          هنا تتابع حالة ربط البوت مع البرنامج في الزمن الحقيقي:
          <b>فحص سريع</b>، <b>إشارة مرور</b>، <b>Latency</b>، وسجل آخر الفحوصات — بدون إعادة تحميل الصفحة.
        </p>

        <div class="flex flex-wrap items-center gap-2 text-[11px] text-slate-200 mt-1">
          <span class="px-2 py-1 rounded-full bg-black/30 border border-white/10">
            <i class="fa-solid fa-traffic-light me-1"></i> إشارة مرور حية
          </span>
          <span class="px-2 py-1 rounded-full bg-black/30 border border-white/10">
            <i class="fa-solid fa-bolt me-1"></i> فحص فعلي للـ Endpoint
          </span>
          <span class="px-2 py-1 rounded-full bg-black/30 border border-white/10">
            <i class="fa-solid fa-clock-rotate-left me-1"></i> سجل آخر 12 فحص (local)
          </span>
        </div>

        <div class="mt-3 rounded-2xl bg-slate-800/80 border border-amber-400/40 px-4 py-3 text-xs text-amber-100 flex items-start gap-3">
          <i class="fa-solid fa-circle-info text-sm mt-0.5"></i>
          <div>
            <div class="font-semibold">معلومة مهمة</div>
            <div class="mt-0.5 text-[11px] leading-5">
              إذا كان البوت على سيرفر آخر، لا تستخدم
              <code class="px-1 rounded bg-black/40">127.0.0.1</code>
              بل استخدم IP أو دومين البوت الحقيقي.
              استقرارية الربط تؤثر مباشرة على كل تقارير الواتساب في النظام.
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- FLASH MESSAGES --}}
    @if (session('success'))
      <div class="rounded-2xl bg-emerald-500/15 border border-emerald-500/40 px-4 py-3 text-sm text-emerald-100">
        <i class="fa-solid fa-circle-check me-1"></i> {!! session('success') !!}
      </div>
    @endif
    @if (session('error'))
      <div class="rounded-2xl bg-rose-500/15 border border-rose-500/40 px-4 py-3 text-sm text-rose-100">
        <i class="fa-solid fa-triangle-exclamation me-1"></i> {!! session('error') !!}
      </div>
    @endif

    {{-- MAIN CARD: SETTINGS + STATUS + LOG --}}
    <div class="rounded-3xl bg-slate-900/90 border border-white/10 p-5 sm:p-6 shadow-2xl space-y-5">

      {{-- SETTINGS ROW --}}
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">

        <div class="space-y-3">
          <div class="flex items-center justify-between gap-2">
            <div class="flex items-center gap-2">
              <span class="inline-flex items-center justify-center w-9 h-9 rounded-2xl bg-sky-500/20 border border-sky-400/40">
                <i class="fa-solid fa-sliders text-sky-200 text-sm"></i>
              </span>
              <div>
                <div class="text-sm font-semibold text-white">إعدادات الربط</div>
                <div class="text-[11px] text-slate-400">تعديل عنوان البوت + المسار + مهلة الاتصال</div>
              </div>
            </div>
            <span class="hidden sm:inline-block text-[11px] px-2 py-1 rounded-full bg-black/40 border border-white/10 text-slate-200">
              للإدارة العليا فقط
            </span>
          </div>

          {{-- ✅ Form 1: SAVE SETTINGS (بدون تداخل فورمات) --}}
          <form method="POST" action="{{ route('superadmin.whatsapp.bridge.save') }}" class="space-y-3 mt-1">
            @csrf

            <div>
              <label class="block text-xs text-slate-300 mb-1">سيرفر البوت (URL + PORT)</label>
              <input name="bot_url" value="{{ old('bot_url', $bot_url) }}" dir="ltr"
                     placeholder="http://127.0.0.1:3000"
                     class="w-full rounded-2xl bg-black/30 border border-white/10 text-white placeholder-white/25 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/50">
              @error('bot_url') <div class="mt-1 text-[11px] text-rose-300">{{ $message }}</div> @enderror
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
              <div>
                <label class="block text-xs text-slate-300 mb-1">المسار (Endpoint)</label>
                <input name="send_path" value="{{ old('send_path', $send_path) }}" dir="ltr"
                       placeholder="/send-group"
                       class="w-full rounded-2xl bg-black/30 border border-white/10 text-white placeholder-white/25 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/50">
              </div>
              <div>
                <label class="block text-xs text-slate-300 mb-1">مهلة الاتصال (ثواني)</label>
                <select name="timeout"
                        class="w-full rounded-2xl bg-black/30 border border-white/10 text-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/50">
                    @for($i=1;$i<=10;$i++)
                        <option value="{{ $i }}" {{ (int)old('timeout',$timeout)===$i ? 'selected' : '' }}>{{ $i }} ثانية</option>
                    @endfor
                </select>
              </div>
            </div>

            <div class="flex flex-col sm:flex-row gap-2 pt-1">
              <button type="submit"
                      class="w-full inline-flex items-center justify-center gap-2 px-3 py-2.5 rounded-2xl text-sm font-semibold bg-indigo-600/90 hover:bg-indigo-500 text-white">
                <i class="fa-solid fa-floppy-disk text-xs"></i>
                حفظ الإعدادات
              </button>

              <button type="button" id="btnCheck"
                      class="w-full inline-flex items-center justify-center gap-2 px-3 py-2.5 rounded-2xl text-sm font-semibold bg-white/5 hover:bg-white/10 text-white border border-white/10">
                <i class="fa-solid fa-bolt text-xs"></i>
                فحص الآن
              </button>
            </div>
          </form>

          {{-- ✅ Form 2: TEST SEND (منفصل) --}}
          <form method="POST" action="{{ route('superadmin.whatsapp.bridge.testSend') }}" class="pt-1">
            @csrf
            <button type="submit"
                    class="w-full inline-flex items-center justify-center gap-2 px-3 py-2.5 rounded-2xl text-sm font-semibold bg-amber-500/90 hover:bg-amber-400 text-black">
              <i class="fa-solid fa-paper-plane text-xs"></i>
              اختبار إرسال فعلي للجروب
            </button>
          </form>
        </div>
{{-- ✅ Bot Folder Traffic Light (Standalone - No Controller Change) --}}
<div id="waBotFolderBox"
     data-fs-path="/web/wa-group-bot"
     data-url-base="/wa-group-bot"
     class="mt-3 rounded-2xl bg-black/30 border border-white/10 px-4 py-3">

  <div class="flex items-start justify-between gap-3">
    <div>
      <div class="text-xs text-slate-400">Bot Folder</div>
      <div class="flex items-center gap-2 mt-0.5">
        <div id="waBotFolderTitle" class="text-sm font-semibold text-white">غير مفحوص</div>
        <span id="waBotFolderBadge"
              class="text-[11px] px-2 py-0.5 rounded-full bg-black/40 border border-white/10 text-slate-200">
          —
        </span>
      </div>

      <div class="mt-1 text-[11px] text-slate-400 leading-5">
        يفحص
        <code id="waBotFolderFsPath" dir="ltr" class="px-1 rounded bg-black/40">/web/wa-group-bot</code>
        (وجود المجلد + ملفات التشغيل) — بدون أي تأثير على النظام.
      </div>
    </div>

    <div class="flex flex-col items-end gap-2">
      {{-- traffic light --}}
      <div class="flex items-center gap-1 px-2 py-1 rounded-full bg-black/40 border border-white/10">
        <span id="waBotFolderRed"    class="w-2.5 h-2.5 rounded-full bg-white/10 border border-white/10"></span>
        <span id="waBotFolderYellow" class="w-2.5 h-2.5 rounded-full bg-white/10 border border-white/10"></span>
        <span id="waBotFolderGreen"  class="w-2.5 h-2.5 rounded-full bg-white/10 border border-white/10"></span>
      </div>

      <button type="button" id="waBotFolderCheckBtn"
              class="text-[11px] px-3 py-1.5 rounded-full bg-white/5 hover:bg-white/10 text-white border border-white/10">
        فحص المجلد
      </button>
    </div>
  </div>

  <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 mt-3 text-xs text-slate-200">
    <div class="rounded-2xl bg-slate-900/70 border border-white/5 px-3 py-2">
      <div class="text-[10px] text-slate-400">marker</div>
      <div id="waBotMarker" dir="ltr" class="mt-1 text-[11px]">—</div>
    </div>
    <div class="rounded-2xl bg-slate-900/70 border border-white/5 px-3 py-2">
      <div class="text-[10px] text-slate-400">package.json</div>
      <div id="waBotPkg" dir="ltr" class="mt-1 text-[11px]">—</div>
    </div>
    <div class="rounded-2xl bg-slate-900/70 border border-white/5 px-3 py-2">
      <div class="text-[10px] text-slate-400">index.js</div>
      <div id="waBotIndex" dir="ltr" class="mt-1 text-[11px]">—</div>
    </div>
    <div class="rounded-2xl bg-slate-900/70 border border-white/5 px-3 py-2">
      <div class="text-[10px] text-slate-400">checked</div>
      <div id="waBotCheckedAt" class="mt-1 text-[11px]">—</div>
    </div>
  </div>
</div>

<script>
/**
 * ✅ WA Bot Folder Monitor (Standalone + Server FS check)
 * - لا يلمس الكنترولرات ولا سكربتات المراقبة الحالية.
 * - يفحص مجلد البوت من السيرفر عن طريق wa-bot-folder-status.php.
 */
(() => {
  const box = document.getElementById('waBotFolderBox');
  if (!box) return;

  const apiUrl = '/wa-bot-folder-status.php'; // ملف الـ PHP اللي فوق

  const el = (id) => document.getElementById(id);

  const titleEl   = el('waBotFolderTitle');
  const badgeEl   = el('waBotFolderBadge');
  const fsPathEl  = el('waBotFolderFsPath');

  const dotR = el('waBotFolderRed');
  const dotY = el('waBotFolderYellow');
  const dotG = el('waBotFolderGreen');

  const markerEl  = el('waBotMarker');
  const pkgEl     = el('waBotPkg');
  const idxEl     = el('waBotIndex');
  const checkedEl = el('waBotCheckedAt');

  const btn       = el('waBotFolderCheckBtn');

  // نعرض مسار السيرفر اللي مهتمين فيه (فقط عرض)
  fsPathEl.textContent = box.dataset.fsPath || '/web/wa-group-bot';

  const baseDot = 'w-2.5 h-2.5 rounded-full border ';
  const offDot  = 'bg-white/10 border-white/10';
  const on = {
    red:    'bg-rose-500 border-rose-300/60',
    yellow: 'bg-amber-400 border-amber-200/60',
    green:  'bg-emerald-500 border-emerald-300/60',
  };

  function setLight(state) {
    dotR.className = baseDot + (state === 'red'    ? on.red    : offDot);
    dotY.className = baseDot + (state === 'yellow' ? on.yellow : offDot);
    dotG.className = baseDot + (state === 'green'  ? on.green  : offDot);
  }

  function fmtNow() {
    return new Date().toLocaleString('ar-EG', { hour12:true });
  }

  async function checkFolder() {
    try {
      const res = await fetch(apiUrl + '?_=' + Date.now(), {
        headers: { 'Accept': 'application/json' },
        cache: 'no-store'
      });
      const data = await res.json();

      markerEl.textContent = data.marker_exists  ? 'OK' : '—';
      pkgEl.textContent    = data.package_exists ? 'OK' : '—';
      idxEl.textContent    = data.index_exists   ? 'OK' : '—';
      checkedEl.textContent= fmtNow();

      // إشارة المرور حسب status
      if (data.status === 'ok') {
        setLight('green');
        titleEl.textContent = '✅ موجود وجاهز';
        badgeEl.textContent = 'OK';
      } else if (data.status === 'partial') {
        setLight('yellow');
        titleEl.textContent = '⚠️ شبه مكتمل / راجع الملفات';
        badgeEl.textContent = 'CHECK';
      } else {
        setLight('red');
        titleEl.textContent = '🛑 غير موجود / المسار خاطئ';
        badgeEl.textContent = 'MISSING';
      }

      if (data.abs_path) {
        fsPathEl.textContent = data.abs_path;
      }

    } catch (e) {
      setLight('red');
      titleEl.textContent = '🛑 خطأ في الفحص';
      badgeEl.textContent = 'ERROR';
      markerEl.textContent = '—';
      pkgEl.textContent    = '—';
      idxEl.textContent    = '—';
      checkedEl.textContent= fmtNow();
      console.error('Bot folder check error:', e);
    }
  }

  // نربطه مع زر الفحص
  btn?.addEventListener('click', checkFolder);

  // فحص أولي + جدولة بسيطة حسب Mode (Manual/Live) بدون لمس سكربت تاني
  function isLiveMode() {
    const mode = document.getElementById('modeLabel')?.textContent || '';
    return mode.trim().toLowerCase() === 'live';
  }

  let timer = null;
  function schedule() {
    if (timer) clearInterval(timer);
    const ms = isLiveMode() ? 1000 : 8000;
    timer = setInterval(checkFolder, ms);
  }

  checkFolder();
  schedule();
  setInterval(schedule, 1500); // يضبط نفسه إذا غيّرت الـ Mode
})();
</script>
        {{-- STATUS + TRAFFIC --}}
        <div class="space-y-3">
          <div class="flex items-center justify-between gap-2">
            <div class="flex items-center gap-2">
              <span class="inline-flex items-center justify-center w-9 h-9 rounded-2xl bg-rose-500/20 border border-rose-400/40">
                <i class="fa-solid fa-heart-pulse text-rose-100 text-sm"></i>
              </span>
              <div>
                <div class="text-sm font-semibold text-white">حالة الربط</div>
                <div class="text-[11px] text-slate-400">إشارة مرور + Live Monitoring</div>
              </div>
            </div>

            <button type="button" id="btnLive"
                    class="inline-flex items-center justify-center gap-2 px-3 py-2 rounded-2xl text-xs font-semibold bg-emerald-600/90 hover:bg-emerald-500 text-white">
              <i class="fa-solid fa-wifi text-[10px]"></i>
              بدء المراقبة (Live)
            </button>
          </div>
{{-- ✅ Bot Folder Traffic Light (READ ONLY) --}}
<div class="mt-2 flex items-center justify-between gap-2">
  <div class="flex items-center gap-2 text-[11px] text-slate-200">
    <span class="inline-flex items-center gap-2 px-2 py-1 rounded-full bg-black/40 border border-white/10">
      <i class="fa-solid fa-folder-tree text-[10px]"></i>

      <span id="botFsRed" class="w-2.5 h-2.5 rounded-full bg-white/10 border border-white/10"></span>
      <span id="botFsYellow" class="w-2.5 h-2.5 rounded-full bg-white/10 border border-white/10"></span>
      <span id="botFsGreen" class="w-2.5 h-2.5 rounded-full bg-white/10 border border-white/10"></span>

      <span id="botFsBadge" class="ms-1">Bot Folder: غير مفحوص</span>
    </span>
  </div>

  <div class="text-[11px] text-slate-400">
    يفحص <b dir="ltr">/web/wa-group-bot</b> (وجود المجلد + ملفات التشغيل)
  </div>
</div>
          {{-- Traffic light + headline --}}
          <div class="rounded-2xl bg-black/30 border border-white/10 px-4 py-3 space-y-3">
            <div class="flex items-center justify-between gap-2">
              <div>
                <div id="statusTitle" class="text-base font-bold text-white">غير مفحوص</div>
                <div class="text-[11px] text-slate-400 mt-0.5">
                  آخر تحديث:
                  <span id="checkedAt">—</span>
                  <span class="mx-2">•</span>
                  عدد الفحوصات:
                  <span id="checksCount">0</span>
                </div>
              </div>

              <div class="flex items-center gap-2 text-[11px] text-slate-200">
                <span id="liveBadge" class="hidden items-center gap-1 px-2 py-1 rounded-full bg-emerald-500/15 border border-emerald-400/40">
                  <span class="relative flex h-2.5 w-2.5">
                    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-60"></span>
                    <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-400"></span>
                  </span>
                  LIVE
                </span>
                <div class="flex items-center gap-1 px-2 py-1 rounded-full bg-black/40 border border-white/10">
                  <span id="lightRed" class="w-2.5 h-2.5 rounded-full bg-white/10 border border-white/10"></span>
                  <span id="lightYellow" class="w-2.5 h-2.5 rounded-full bg-white/10 border border-white/10"></span>
                  <span id="lightGreen" class="w-2.5 h-2.5 rounded-full bg-white/10 border border-white/10"></span>
                  <span id="statusBadge" class="ms-2">غير مفحوص</span>
                </div>
              </div>
            </div>

            {{-- quick stats --}}
            <div class="grid grid-cols-2 sm:grid-cols-3 gap-2 text-xs text-slate-200">
              <div class="rounded-2xl bg-slate-900/70 border border-white/5 px-3 py-2">
                <div class="text-[10px] text-slate-400">Endpoint</div>
                <div id="endpoint" dir="ltr" class="mt-1 text-[11px] break-all">—</div>
              </div>
              <div class="rounded-2xl bg-slate-900/70 border border-white/5 px-3 py-2">
                <div class="text-[10px] text-slate-400">Latency</div>
                <div class="mt-1 text-sm text-white"><span id="latency">—</span> <span class="text-[10px] text-slate-400">ms</span></div>
              </div>
              <div class="rounded-2xl bg-slate-900/70 border border-white/5 px-3 py-2">
                <div class="text-[10px] text-slate-400">HTTP send</div>
                <div id="sendCode" class="mt-1 text-sm text-white">—</div>
              </div>
              <div class="rounded-2xl bg-slate-900/70 border border-white/5 px-3 py-2">
                <div class="text-[10px] text-slate-400">HTTP health</div>
                <div id="healthCode" class="mt-1 text-sm text-white">—</div>
              </div>
              <div class="rounded-2xl bg-slate-900/70 border border-white/5 px-3 py-2">
                <div class="text-[10px] text-slate-400">Timeout</div>
                <div class="mt-1 text-sm text-white">{{ (int)$timeout }} <span class="text-[10px] text-slate-400">ث</span></div>
              </div>
              <div class="rounded-2xl bg-slate-900/70 border border-white/5 px-3 py-2">
                <div class="text-[10px] text-slate-400">Mode</div>
                <div id="modeLabel" class="mt-1 text-sm text-white">Manual</div>
              </div>
            </div>

            <div id="hintBox" class="hidden mt-2 rounded-2xl bg-amber-500/10 border border-amber-500/40 px-3 py-2 text-[11px] text-amber-100"></div>
            <div id="errorBox" class="hidden mt-2 rounded-2xl bg-rose-500/10 border border-rose-500/40 px-3 py-2 text-[11px] text-rose-100"></div>
          </div>
        </div>
      </div>

      {{-- LOG --}}
      <div class="rounded-2xl bg-slate-900/80 border border-white/10 px-4 py-3">
        <div class="flex items-center justify-between gap-2">
          <div class="flex items-center gap-2 text-sm font-semibold text-white">
            <i class="fa-solid fa-clock-rotate-left text-xs text-slate-200"></i>
            سجل الفحوصات <span class="text-[11px] text-slate-400">(آخر 12)</span>
          </div>
          <button id="btnClearLog"
                  class="text-[11px] px-3 py-1.5 rounded-full bg-white/5 hover:bg-white/10 text-white border border-white/10">
            مسح السجل
          </button>
        </div>

        <div id="logList" class="mt-3 space-y-2 text-[11px] text-slate-200"></div>

        <div class="mt-3 text-[11px] text-slate-500 border-t border-slate-800 pt-2">
          السجل يتم حفظه في <b>LocalStorage</b> على هذا المتصفح فقط، لتخفيف الضغط على قاعدة البيانات.
        </div>
      </div>
    </div>

  </div>
</div>
<script>
(() => {
  const url = @json(route('superadmin.whatsapp.bridge.botFolderStatus'));

  const el = (id) => document.getElementById(id);

  const r = el('botFsRed');
  const y = el('botFsYellow');
  const g = el('botFsGreen');
  const badge = el('botFsBadge');

  // عناصر من صفحتك (عشان نشتغل مع Live الموجود عندك)
  const liveBadge = el('liveBadge'); // موجود عندك
  const btnCheck  = el('btnCheck');  // موجود عندك
  const btnLive   = el('btnLive');   // موجود عندك

  if (!r || !y || !g || !badge) return;

  let t = null;

  function setLights(status) {
    const base = 'w-2.5 h-2.5 rounded-full border ';
    const off  = 'bg-white/10 border-white/10';
    const rOn  = 'bg-rose-500 border-rose-300/60';
    const yOn  = 'bg-amber-400 border-amber-200/60';
    const gOn  = 'bg-emerald-500 border-emerald-300/60';

    r.className = base + (status === 'down' ? rOn : off);
    y.className = base + (status === 'degraded' ? yOn : off);
    g.className = base + (status === 'up' ? gOn : off);
  }

  function label(status) {
    if (status === 'up') return 'Bot Folder: جاهز 🟢';
    if (status === 'degraded') return 'Bot Folder: ناقص 🟡';
    if (status === 'down') return 'Bot Folder: مش موجود 🔴';
    return 'Bot Folder: غير مفحوص';
  }

  async function checkOnce() {
    try {
      const res = await fetch(url + '?_=' + Date.now(), {
        headers: { 'Accept': 'application/json' },
        cache: 'no-store'
      });

      const data = await res.json();
      const s = data.status || 'unknown';

      setLights(s);
      badge.textContent = label(s);

      // (اختياري) لو بدك تلميح سريع على نفس الشارة:
      // if (data.hint) badge.textContent = label(s) + ' — ' + data.hint;

    } catch (e) {
      setLights('down');
      badge.textContent = 'Bot Folder: خطأ اتصال';
    }
  }

  function isLiveOn() {
    // liveBadge عندك بصير hidden/visible
    return !!liveBadge && !liveBadge.classList.contains('hidden');
  }

  function startLiveFs() {
    stopLiveFs();
    checkOnce();
    t = setInterval(checkOnce, 1000);
  }

  function stopLiveFs() {
    if (t) clearInterval(t);
    t = null;
  }

  function syncWithLive() {
    if (isLiveOn()) startLiveFs();
    else stopLiveFs();
  }

  // ربط مع أزرارك بدون تعديل سكربتك
  btnCheck?.addEventListener('click', () => checkOnce());
  btnLive?.addEventListener('click', () => setTimeout(syncWithLive, 50));

  // لو الـ liveBadge تغير بدون كبسة (احتياط)
  if (liveBadge) {
    const obs = new MutationObserver(() => syncWithLive());
    obs.observe(liveBadge, { attributes: true, attributeFilter: ['class'] });
  }

  // أول دخول
  checkOnce();
})();
</script>
{{-- ================= JS (LIVE MONITOR) ================= --}}
<script>
(() => {
    const statusUrl = @json(route('superadmin.whatsapp.bridge.status'));
    const el = id => document.getElementById(id);

    const lightRed    = el('lightRed');
    const lightYellow = el('lightYellow');
    const lightGreen  = el('lightGreen');

    const statusBadge = el('statusBadge');
    const statusTitle = el('statusTitle');
    const checkedAt   = el('checkedAt');
    const checksCount = el('checksCount');

    const endpointEl  = el('endpoint');
    const latencyEl   = el('latency');
    const sendCodeEl  = el('sendCode');
    const healthCodeEl= el('healthCode');
    const modeLabel   = el('modeLabel');

    const hintBox     = el('hintBox');
    const errorBox    = el('errorBox');
    const liveBadge   = el('liveBadge');

    const btnCheck    = el('btnCheck');
    const btnLive     = el('btnLive');
    const btnClearLog = el('btnClearLog');
    const logList     = el('logList');

    const STORAGE_KEY = 'wa_bridge_log_v1';

    let live = false;
    let timer = null;
    let checks = 0;

    function setLightStatus(status) {
        const base = 'w-2.5 h-2.5 rounded-full border ';
        const off  = 'bg-white/10 border-white/10';
        const rOn  = 'bg-rose-500 border-rose-300/60';
        const yOn  = 'bg-amber-400 border-amber-200/60';
        const gOn  = 'bg-emerald-500 border-emerald-300/60';

        if (lightRed)    lightRed.className    = base + (status === 'down'     ? rOn : off);
        if (lightYellow) lightYellow.className = base + (status === 'degraded' ? yOn : off);
        if (lightGreen)  lightGreen.className  = base + (status === 'up'       ? gOn : off);
    }

    function label(status) {
        if (status === 'up') return 'مستقر';
        if (status === 'degraded') return 'شبه مستقر';
        if (status === 'down') return 'متوقف';
        return 'غير مفحوص';
    }

    function headline(status) {
        if (status === 'up') return '✅ الربط مستقر';
        if (status === 'degraded') return '⚠️ الربط شبه مستقر';
        if (status === 'down') return '🛑 الربط متوقف';
        return 'غير مفحوص';
    }

    function fmt(iso) {
        if (!iso) return '—';
        const d = new Date(iso);
        return d.toLocaleString('ar-EG', { hour12: true });
    }

    function loadLog() {
        try {
            const raw = localStorage.getItem(STORAGE_KEY);
            return raw ? JSON.parse(raw) : [];
        } catch {
            return [];
        }
    }
    function saveLog(items) {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(items.slice(0, 40)));
    }
    function pushLog(item) {
        const items = loadLog();
        items.unshift(item);
        saveLog(items);
        renderLog();
    }

    function renderLog() {
        const items = loadLog().slice(0, 12);
        if (!logList) return;

        logList.innerHTML = '';
        if (!items.length) {
            logList.innerHTML = `<div class="text-[11px] text-slate-500">
              لا توجد بيانات بعد. اضغط <b>فحص الآن</b> أو فعّل <b>المراقبة Live</b>.
            </div>`;
            return;
        }

        for (const it of items) {
            let tone = 'bg-slate-900/60 border-slate-700 text-slate-100';
            let icon = '•';
            if (it.status === 'up') {
                tone = 'bg-emerald-500/15 border-emerald-500/40 text-emerald-50';
                icon = '✅';
            } else if (it.status === 'degraded') {
                tone = 'bg-amber-500/15 border-amber-500/40 text-amber-50';
                icon = '⚠️';
            } else if (it.status === 'down') {
                tone = 'bg-rose-500/15 border-rose-500/40 text-rose-50';
                icon = '🛑';
            }

            logList.insertAdjacentHTML('beforeend', `
              <div class="rounded-2xl border ${tone} px-3 py-2 flex items-center justify-between gap-2">
                <div class="text-[11px]">
                  <span class="me-1">${icon}</span>
                  <b>${label(it.status)}</b>
                  <span class="text-slate-200/60 ms-1">${it.time}</span>
                </div>
                <div class="text-[11px] text-slate-200/80">
                  ${it.latency ?? '—'}ms • send:${it.send ?? '—'} • health:${it.health ?? '—'}
                </div>
              </div>
            `);
        }
    }

    function showHint(text) {
        if (!hintBox) return;
        if (!text) { hintBox.classList.add('hidden'); hintBox.textContent=''; return; }
        hintBox.classList.remove('hidden');
        hintBox.textContent = text;
    }
    function showError(text) {
        if (!errorBox) return;
        if (!text) { errorBox.classList.add('hidden'); errorBox.textContent=''; return; }
        errorBox.classList.remove('hidden');
        errorBox.textContent = text;
    }

    async function fetchStatus() {
        try {
            const res = await fetch(statusUrl + '?_=' + Date.now(), {
                headers: { 'Accept': 'application/json' },
                cache: 'no-store'
            });

            if (!res.ok) throw new Error('HTTP ' + res.status);
            const data = await res.json();

            checks++;
            if (checksCount) checksCount.textContent = String(checks);

            // ✅ Fix: اعتبر /health 404 طبيعي إذا endpoint الإرسال شغال
            let s = (data.status || 'unknown');
            const healthCode = data.checks?.health?.code ?? null;
            const sendOk = !!(data.checks?.send?.ok);

            if (s === 'degraded' && sendOk && (healthCode === 404 || healthCode === 405 || healthCode === null)) {
                s = 'up';
                if (!data.hint) data.hint = 'مسار /health غير مدعوم على البوت — طالما الإرسال شغال فالربط مستقر.';
            }

            setLightStatus(s);
            if (statusBadge) statusBadge.textContent = label(s);
            if (statusTitle) statusTitle.textContent = headline(s);

            if (checkedAt) checkedAt.textContent = fmt(data.checked_at);

            const endpoint = (data.bot_url && data.send_path) ? (String(data.bot_url) + String(data.send_path)) : '—';
            if (endpointEl) endpointEl.textContent = endpoint;

            if (latencyEl) latencyEl.textContent  = (data.latency_ms ?? '—');
            if (sendCodeEl) sendCodeEl.textContent = (data.checks?.send?.code ?? '—');
            if (healthCodeEl) healthCodeEl.textContent = (data.checks?.health?.code ?? '—');

            showHint(data.hint || null);
            showError(data.error || null);

            pushLog({
                status : s,
                time   : fmt(data.checked_at),
                latency: data.latency_ms ?? null,
                send   : data.checks?.send?.code ?? null,
                health : data.checks?.health?.code ?? null,
            });

        } catch (e) {
            checks++;
            if (checksCount) checksCount.textContent = String(checks);

            setLightStatus('down');
            if (statusBadge) statusBadge.textContent = 'متوقف';
            if (statusTitle) statusTitle.textContent = '🛑 الربط متوقف';

            showHint(null);
            showError((e && e.message) ? e.message : 'تعذر الاتصال بواجهة الفحص.');

            pushLog({
                status : 'down',
                time   : fmt(new Date().toISOString()),
                latency: null,
                send   : null,
                health : null,
            });
        }
    }

    function startLive() {
        live = true;

        if (liveBadge) {
            liveBadge.classList.remove('hidden');
            liveBadge.classList.add('flex');
        }
        if (modeLabel) modeLabel.textContent = 'Live';

        if (btnLive) {
            btnLive.classList.remove('bg-emerald-600/90','hover:bg-emerald-500');
            btnLive.classList.add('bg-rose-600/90','hover:bg-rose-500');
            btnLive.innerHTML = `<i class="fa-solid fa-circle-stop text-[10px]"></i> إيقاف المراقبة (Live)`;
        }

        if (timer) clearInterval(timer);
        fetchStatus();
        timer = setInterval(fetchStatus, 1000);
    }

    function stopLive() {
        live = false;

        if (liveBadge) {
            liveBadge.classList.add('hidden');
            liveBadge.classList.remove('flex');
        }
        if (modeLabel) modeLabel.textContent = 'Manual';

        if (btnLive) {
            btnLive.classList.remove('bg-rose-600/90','hover:bg-rose-500');
            btnLive.classList.add('bg-emerald-600/90','hover:bg-emerald-500');
            btnLive.innerHTML = `<i class="fa-solid fa-wifi text-[10px]"></i> بدء المراقبة (Live)`;
        }

        if (timer) clearInterval(timer);
        timer = null;
    }

    // Events
    if (btnCheck) btnCheck.addEventListener('click', () => fetchStatus());
    if (btnLive) btnLive.addEventListener('click', () => live ? stopLive() : startLive());
    if (btnClearLog) btnClearLog.addEventListener('click', () => {
        localStorage.removeItem(STORAGE_KEY);
        renderLog();
    });

    // Init
    renderLog();
    setLightStatus('unknown');
    fetchStatus(); // ✅ تعبئة فورية بدون أي Refresh
})();
</script>
@endsection