<div class="content-wrapper android-mikrotik-dashboard" data-android-mikrotik-dashboard>
  <main class="amd-main">
    <header class="amd-heading">
      <div><span>مراقبة مباشرة</span><h1>لوحة MikroTik</h1><p>حالة الاتصال والجلسات والسرعات من شاشة واحدة ملائمة للهاتف.</p></div>
      <button type="button" id="amdRefresh"><i class="fa fa-refresh"></i><b>تحديث</b></button>
    </header>

    <section class="amd-summary">
      <article class="amd-status-card" id="amdStatusCard">
        <span class="amd-icon"><i class="fa fa-heartbeat"></i></span>
        <div><small>حالة الراوتر</small><strong id="mkStatus">جاري الفحص…</strong><em id="amdLastUpdate">—</em></div>
        <i class="amd-dot"></i>
      </article>
      <article class="amd-traffic-card">
        <span class="amd-icon"><i class="fa fa-exchange"></i></span>
        <div><small>إرسال المشتركين</small><strong id="subsTraffic" dir="ltr">0 Mbps</strong><em>Subscribers TX</em></div>
      </article>
    </section>

    <nav class="amd-quick-actions" aria-label="إجراءات MikroTik">
      <a href="mikrotik.php"><i class="fa fa-cog"></i><span>الإعدادات</span></a>
      <a href="automation_billing.php?ua_android=1#run" class="is-danger"><i class="fa fa-bolt"></i><span>فحص الحصة</span></a>
      <button type="button" id="btnApiAny"><i class="fa fa-globe"></i><span>API Any</span></button>
    </nav>

    <section class="amd-panel">
      <header><div><span>PPPoE</span><h2>الجلسات النشطة</h2></div><b id="amdPppCount">0</b></header>
      <div class="amd-list" id="pppList"><div class="amd-loading"><i class="fa fa-spinner fa-spin"></i><span>جاري تحميل الجلسات</span></div></div>
    </section>

    <section class="amd-panel">
      <header><div><span>Simple Queues</span><h2>قواعد السرعة</h2></div><b id="amdQueueCount">0</b></header>
      <div class="amd-list" id="queueList"><div class="amd-loading"><i class="fa fa-spinner fa-spin"></i><span>جاري تحميل القواعد</span></div></div>
    </section>
  </main>
</div>

<script>
(function(){
  const statusEl=document.getElementById('mkStatus');
  const statusCard=document.getElementById('amdStatusCard');
  const trafficEl=document.getElementById('subsTraffic');
  const pppList=document.getElementById('pppList');
  const queueList=document.getElementById('queueList');
  const pppCount=document.getElementById('amdPppCount');
  const queueCount=document.getElementById('amdQueueCount');
  const lastUpdate=document.getElementById('amdLastUpdate');
  const refreshButton=document.getElementById('amdRefresh');
  const apiButton=document.getElementById('btnApiAny');
  const esc=value=>String(value??'').replace(/[&<>"']/g,char=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[char]));
  const fetchJson=async url=>{const response=await fetch(url,{credentials:'same-origin'});return response.json();};
  const empty=(icon,title,text)=>`<div class="amd-empty"><i class="fa ${icon}"></i><strong>${title}</strong><span>${text}</span></div>`;

  function renderPpp(rows){
    pppCount.textContent=rows.length;
    if(!rows.length){pppList.innerHTML=empty('fa-wifi','لا توجد جلسات نشطة','ستظهر الجلسات هنا عند اتصال المشتركين.');return;}
    pppList.innerHTML=rows.slice(0,20).map(row=>`<article class="amd-session"><span class="amd-avatar"><i class="fa fa-user"></i></span><div><strong>${esc(row.name||'—')}</strong><small dir="ltr">${esc(row.address||'—')}</small></div><div class="amd-session-meta"><b>${esc(row.uptime||'—')}</b><span>${esc(row.service||'PPPoE')}</span></div></article>`).join('');
  }
  function renderQueues(rows){
    queueCount.textContent=rows.length;
    if(!rows.length){queueList.innerHTML=empty('fa-tasks','لا توجد قواعد سرعة','لم يُرجع الراوتر أي Simple Queues.');return;}
    queueList.innerHTML=rows.slice(0,30).map(row=>{const disabled=String(row.disabled||'').toLowerCase()==='true';return `<article class="amd-queue ${disabled?'is-disabled':''}"><header><div><strong>${esc(row.name||'—')}</strong><small dir="ltr">${esc(row.target||'—')}</small></div><span>${disabled?'متوقف':'مفعّل'}</span></header><div><p><small>الحد الأقصى</small><b dir="ltr">${esc(row.max_limit||'—')}</b></p><p><small>الاستهلاك</small><b dir="ltr">${esc(row.bytes||'—')}</b></p></div></article>`;}).join('');
  }
  async function refresh(){
    refreshButton.disabled=true;refreshButton.classList.add('is-loading');
    try{const state=await fetchJson('api/mikrotik_status.php');const connected=!!state.connected;statusEl.textContent=connected?'متصل':'غير متصل';statusCard.classList.toggle('is-online',connected);statusCard.classList.toggle('is-offline',!connected);}catch(error){statusEl.textContent='غير متصل';statusCard.classList.remove('is-online');statusCard.classList.add('is-offline');}
    try{const data=await fetchJson('api/mikrotik_monitor.php');if(!data.ok)throw new Error(data.error||'');trafficEl.textContent=(((data.traffic||{}).tx_bps||0)/1e6).toFixed(2)+' Mbps';renderPpp(data.pppoe_active||[]);renderQueues(data.queues||[]);}catch(error){trafficEl.textContent='0 Mbps';pppCount.textContent='—';queueCount.textContent='—';pppList.innerHTML=empty('fa-exclamation-circle','تعذر جلب الجلسات','تحقق من اتصال الراوتر وإعدادات API.');queueList.innerHTML=empty('fa-exclamation-circle','تعذر جلب القواعد','سيعاد المحاولة تلقائياً.');}
    lastUpdate.textContent='آخر تحديث '+new Date().toLocaleTimeString('ar',{hour:'2-digit',minute:'2-digit'});refreshButton.disabled=false;refreshButton.classList.remove('is-loading');
  }
  refreshButton.addEventListener('click',refresh);
  apiButton.addEventListener('click',async function(){if(!confirm('هل تريد إتاحة خدمة API لأي عنوان (0.0.0.0/0)؟'))return;apiButton.disabled=true;try{const response=await fetch('api/mikrotik_set_api_any.php',{method:'POST',headers:{'Content-Type':'application/json'},credentials:'same-origin',body:'{}'});const data=await response.json();alert(data&&data.ok?'تم ضبط API بنجاح':'فشل: '+(data.error||data.msg||'خطأ غير معروف'));}catch(error){alert('فشل الاتصال: '+error.message);}finally{apiButton.disabled=false;}});
  refresh();setInterval(refresh,10000);
})();
</script>
