<div class="content-wrapper android-mikrotik-import">
  <main class="ami-main">
    <header class="ami-heading">
      <div><span>MikroTik Sync</span><h1>استيراد المشتركين</h1><p>عاين حسابات Hotspot وPPPoE أولاً، ثم أضفها إلى قاعدة بيانات النسخة الرئيسية.</p></div>
      <div class="ami-heading-icon"><i class="fa fa-download"></i></div>
    </header>

    <div class="ami-notice"><i class="fa fa-shield"></i><p><b>عملية آمنة للراوتر</b><span>الاستيراد يقرأ الحسابات ولا يعدّل أي بيانات داخل MikroTik.</span></p></div>

    <section class="ami-section">
      <div class="ami-section-head"><div><span>مصادر الحسابات</span><h2>خيارات الاستيراد</h2></div><i class="fa fa-list-check"></i></div>
      <div class="ami-options" data-ua-android-native-layout>
        <label><input type="checkbox" id="optHotspot" checked><span><i class="fa fa-wifi"></i><b>Hotspot Users</b><small>حسابات نقاط الاتصال</small></span></label>
        <label><input type="checkbox" id="optPPP" checked><span><i class="fa fa-link"></i><b>PPPoE Secrets</b><small>حسابات الاتصال المباشر</small></span></label>
        <label class="is-warning"><input type="checkbox" id="optOverwrite"><span><i class="fa fa-pencil"></i><b>تحديث الموجود</b><small>الكتابة فوق بيانات المشترك عند الحاجة</small></span></label>
      </div>
      <p class="ami-help">افتراضياً لن تتغير بيانات أي مشترك موجود بالاسم نفسه إلا في الحقول الفارغة.</p>
      <div class="ami-actions">
        <button type="button" id="btnPreview"><i class="fa fa-eye"></i><span>معاينة الحسابات</span></button>
        <button type="button" id="btnImport" class="is-import" disabled><i class="fa fa-download"></i><span>تنفيذ الاستيراد</span></button>
      </div>
      <div id="importStatus" class="ami-status">ابدأ بالمعاينة قبل الاستيراد</div>
      <div class="ami-progress" id="importProgressWrap" hidden><div><span id="importProgressText">بانتظار البدء…</span><b id="importProgressPct">0%</b></div><span><i id="importProgressFill"></i></span></div>
    </section>

    <section class="ami-section ami-results" id="resultsSection" hidden>
      <div class="ami-section-head"><div><span>Preview</span><h2>نتائج المعاينة</h2></div><i class="fa fa-users"></i></div>
      <div id="summaryBox" class="ami-summary"></div>
      <div id="previewCards" class="ami-cards"></div>
      <p class="ami-limit-note">تظهر أول 200 نتيجة للسرعة، بينما يشمل التنفيذ كامل القائمة.</p>
    </section>
  </main>
</div>
<script>
(function(){
  const byId=id=>document.getElementById(id);
  const optHotspot=byId('optHotspot'),optPPP=byId('optPPP'),optOverwrite=byId('optOverwrite');
  const btnPreview=byId('btnPreview'),btnImport=byId('btnImport'),status=byId('importStatus');
  const progressWrap=byId('importProgressWrap'),progressFill=byId('importProgressFill'),progressPct=byId('importProgressPct'),progressText=byId('importProgressText');
  const results=byId('resultsSection'),summary=byId('summaryBox'),cards=byId('previewCards');
  let progressTimer=null,progressValue=0;
  function query(){const p=new URLSearchParams();p.set('hotspot',optHotspot.checked?'1':'0');p.set('ppp',optPPP.checked?'1':'0');p.set('overwrite',optOverwrite.checked?'1':'0');return p.toString();}
  async function fetchJson(url,options){const response=await fetch(url,Object.assign({credentials:'same-origin'},options||{}));const text=await response.text();let data;try{data=JSON.parse(text);}catch(error){throw new Error(text?text.substring(0,180):('HTTP '+response.status));}if(!response.ok&&data?.error)throw new Error(data.message||data.error);return data;}
  function setStatus(text,state){status.textContent=text;status.className='ami-status '+(state||'');}
  function setProgress(value,text){progressValue=Math.max(0,Math.min(100,Number(value||0)));progressWrap.hidden=false;progressFill.style.width=progressValue+'%';progressPct.textContent=Math.round(progressValue)+'%';if(text)progressText.textContent=text;}
  function startProgress(text){stopProgress();setProgress(5,text);progressTimer=setInterval(()=>setProgress(Math.min(progressValue+(progressValue<60?7:progressValue<88?3:1),92)),450);}
  function stopProgress(value,text){if(progressTimer){clearInterval(progressTimer);progressTimer=null;}if(typeof value!=='undefined')setProgress(value,text);}
  function bytes(value){let amount=Number(value||0);if(!amount)return '—';const units=['B','KB','MB','GB','TB'];let i=0;while(amount>=1024&&i<units.length-1){amount/=1024;i++;}return (Math.round(amount*100)/100)+' '+units[i];}
  function addData(parent,label,value){const cell=document.createElement('div');const small=document.createElement('span');const strong=document.createElement('strong');small.textContent=label;strong.textContent=value||'—';cell.append(small,strong);parent.appendChild(cell);}
  function render(items){cards.replaceChildren();(items||[]).forEach(item=>{const card=document.createElement('article');card.className='ami-card '+(item.exists?'is-existing':'is-new');const head=document.createElement('header');const icon=document.createElement('i');icon.className='fa '+((item.type||'').toLowerCase().includes('ppp')?'fa-link':'fa-wifi');const title=document.createElement('div');const name=document.createElement('h3');const type=document.createElement('span');const badge=document.createElement('b');name.textContent=item.username||'بدون اسم';type.textContent=item.type||'Account';badge.textContent=item.exists?'موجود':'جديد';title.append(name,type);head.append(icon,title,badge);const grid=document.createElement('div');grid.className='ami-card-data';addData(grid,'Profile / Service',item.profile||item.service);addData(grid,'Speed / Rate',item.rate_limit||item.speed);addData(grid,'الحجم',item.limit_bytes_total?bytes(item.limit_bytes_total):((item.limit_bytes_in||item.limit_bytes_out)?bytes(item.limit_bytes_in)+' / '+bytes(item.limit_bytes_out):'—'));addData(grid,'الحالة',(item.disabled?'معطّل':'فعال')+(item.comment?' · '+item.comment:''));card.append(head,grid);cards.appendChild(card);});if(!(items||[]).length){cards.innerHTML='<div class="ami-empty"><i class="fa fa-inbox"></i><b>لا توجد حسابات للعرض</b></div>';}}
  btnPreview.addEventListener('click',async()=>{btnImport.disabled=true;results.hidden=true;setStatus('جارٍ قراءة الحسابات…','is-loading');startProgress('جارٍ الاتصال بـ MikroTik للمعاينة…');try{const data=await fetchJson('api/mikrotik_import_preview.php?'+query());if(!data.ok)throw new Error(data.error||'Error');render(data.preview||[]);summary.innerHTML='<div><strong>'+(data.total||0)+'</strong><span>الإجمالي</span></div><div><strong>'+(data.new_count||0)+'</strong><span>جديد</span></div><div><strong>'+(data.existing_count||0)+'</strong><span>موجود</span></div>';results.hidden=false;btnImport.disabled=(data.total||0)===0;stopProgress(100,'اكتملت المعاينة: '+(data.total||0)+' حساب');setStatus('المعاينة جاهزة','is-ok');}catch(error){stopProgress(100,'فشلت المعاينة');setStatus('فشلت المعاينة: '+(error?.message||''),'is-error');}});
  btnImport.addEventListener('click',async()=>{btnImport.disabled=true;setStatus('جارٍ تنفيذ الاستيراد…','is-loading');startProgress('جارٍ إضافة الحسابات إلى قاعدة البيانات…');try{const data=await fetchJson('api/mikrotik_import_run.php?'+query(),{method:'POST'});if(!data.ok)throw new Error(data.error||'Error');stopProgress(100,'اكتمل الاستيراد');setStatus('تم الاستيراد — إضافة: '+(data.inserted||0)+'، تحديث: '+(data.updated||0)+'، تخطي: '+(data.skipped||0),'is-ok');}catch(error){stopProgress(100,'فشل الاستيراد');setStatus('فشل الاستيراد: '+(error?.message||''),'is-error');btnImport.disabled=false;}});
})();
</script>
