<%- include('partials/header', { title, flash, session, csrf }) %>
<div class="grid two">
  <section class="card">
    <h2>الحالة الحالية</h2>
    <dl class="details">
      <dt>الحالة</dt><dd id="wa-state"><%= whatsappStatus.state %></dd>
      <dt>الرقم المتصل</dt><dd id="wa-phone"><%= whatsappStatus.phone || '-' %></dd>
      <dt>الرقم المتوقع</dt><dd><%= expectedNumber || 'غير محدد' %></dd>
      <dt>الاسم</dt><dd id="wa-name"><%= whatsappStatus.name || '-' %></dd>
      <dt>آخر خطأ</dt><dd id="wa-error"><%= whatsappStatus.lastError || '-' %></dd>
    </dl>
    <% if (expectedNumber && whatsappStatus.phone && expectedNumber !== whatsappStatus.phone) { %><div class="alert alert-error">الرقم المتصل لا يطابق رقم البوت المتوقع. احذف الجلسة واربط الرقم الصحيح.</div><% } %>
    <div class="actions">
      <form method="post" action="/connection/restart"><input type="hidden" name="_csrf" value="<%= csrf %>"><button class="button primary">إعادة الاتصال</button></form>
      <form method="post" action="/connection/logout" onsubmit="return confirm('سيتم حذف الجلسة الحالية وإنشاء QR جديد. متابعة؟')"><input type="hidden" name="_csrf" value="<%= csrf %>"><button class="button danger">حذف الجلسة وربط رقم جديد</button></form>
    </div>
  </section>
  <section class="card qr-card">
    <h2>رمز QR</h2>
    <p>من واتساب: الأجهزة المرتبطة ← ربط جهاز.</p>
    <div id="qr-container">
      <% if (whatsappStatus.qrDataUrl) { %><img id="qr-image" src="<%= whatsappStatus.qrDataUrl %>" alt="WhatsApp QR"><% } else { %><div class="empty" id="qr-empty">سيظهر الرمز عند الحاجة.</div><% } %>
    </div>
  </section>
</div>
<script>
setInterval(async () => {
  try {
    const response = await fetch('/api/status', { credentials: 'same-origin' });
    const status = await response.json();
    document.getElementById('wa-state').textContent = status.state || '-';
    document.getElementById('wa-phone').textContent = status.phone || '-';
    document.getElementById('wa-name').textContent = status.name || '-';
    document.getElementById('wa-error').textContent = status.lastError || '-';
    const container = document.getElementById('qr-container');
    if (status.qrDataUrl) container.innerHTML = '<img id="qr-image" src="' + status.qrDataUrl + '" alt="WhatsApp QR">';
    else container.innerHTML = '<div class="empty">' + (status.state === 'connected' ? 'تم الاتصال بنجاح.' : 'سيظهر الرمز عند الحاجة.') + '</div>';
  } catch {}
}, 3000);
</script>
<%- include('partials/footer') %>
