<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ZATCA — WhatsApp Authentication</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; height: 100%; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #0b141a; color: #e9edef;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 24px; padding: 24px;
    }
    h1 { color: #25d366; margin: 0; font-weight: 600; letter-spacing: 0.5px; }
    .card {
      background: #202c33; padding: 32px; border-radius: 12px;
      max-width: 380px; width: 100%; text-align: center;
      box-shadow: 0 6px 24px rgba(0,0,0,0.4);
    }
    .qr-frame { background: #fff; padding: 16px; border-radius: 8px; display: inline-block; }
    .qr-frame img { display: block; width: 100%; max-width: 320px; height: auto; }
    .status { font-size: 15px; line-height: 1.5; }
    .ok { color: #25d366; font-size: 28px; margin-bottom: 8px; }
    .muted { color: #8696a0; font-size: 13px; margin-top: 12px; }
    .err { color: #f15c6d; }
  </style>
</head>
<body>
  <h1>ZATCA WhatsApp</h1>
  <div class="card">
    <div id="content" class="status">Checking connection…</div>
  </div>
  <script>
    const content = document.getElementById('content');
    let lastQr = null;
    let pollHandle = null;

    function stopPolling() {
      if (pollHandle !== null) { clearInterval(pollHandle); pollHandle = null; }
    }

    async function poll() {
      try {
        const res = await fetch('/Wa/Status', { cache: 'no-store' });
        if (!res.ok) throw new Error('status ' + res.status);
        const data = await res.json();

        if (data.connected) {
          stopPolling();
          content.innerHTML =
            '<div class="ok">✓ Connected</div>' +
            '<div>WhatsApp is paired and ready.</div>' +
            '<div class="muted">You can close this page.</div>';
          return;
        }

        if (data.dashboardUrl && data.qr !== lastQr) {
          lastQr = data.qr;
          content.innerHTML =
            '<div class="qr-frame"><img alt="WhatsApp pairing QR" src="' + data.dashboardUrl + '"></div>' +
            '<div class="muted">Phone → WhatsApp → Settings → Linked Devices → Link a Device → scan</div>';
        } else if (!data.dashboardUrl) {
          content.innerHTML = '<div>Waiting for pairing code…</div>' +
            '<div class="muted">If this hangs, restart the zatca container.</div>';
          lastQr = null;
        }
      } catch (e) {
        content.innerHTML = '<div class="err">Status check failed</div>' +
          '<div class="muted">' + (e && e.message ? e.message : e) + '</div>';
      }
    }

    function startPolling() {
      if (pollHandle !== null) return;
      poll();
      pollHandle = setInterval(poll, 3000);
    }

    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'visible' && pollHandle === null) startPolling();
    });

    startPolling();
  </script>
</body>
</html>