{% extends "base.html" %}
{% block title %}Connect Microsoft 365 — ai-offboard{% endblock %}

{% block content %}
  <section class="hero">
    <h1>Connect your Microsoft 365 tenant</h1>
    <p class="tag">Sign in as a Global Administrator to let ai-offboard scan your tenant.
      No secrets, no configuration.</p>
  </section>

  <div class="card" style="text-align:center">
    <div style="font-size:60px;margin:18px 0 10px">🔑</div>
    <h2>Step 1: Open the login URL</h2>
    <p class="note" style="margin:4px 0 18px;font-size:15px">
      <a href="{{ verification_uri }}" target="_blank" rel="noopener"
         style="font-size:17px;font-weight:700" id="loginLink">{{ verification_uri }}</a>
      <br>or open <code>{{ verification_uri }}</code> in your browser.
    </p>

    <h2 style="margin-top:22px">Step 2: Enter this code</h2>
    <div style="font-size:42px;letter-spacing:12px;font-weight:800;background:#0d1426;border:1px solid var(--border);border-radius:12px;padding:24px;margin:10px auto;max-width:360px;font-family:monospace"
         id="userCode">{{ user_code }}</div>
    <p class="note" style="margin:10px 0 4px">The code expires in 15 minutes.</p>

    <div style="margin-top:28px">
      <div class="pill" id="statusPill">
        <span class="dot" style="background:var(--amber);animation:pulse 1.2s infinite"></span>
        Waiting for sign-in…
      </div>
    </div>
    <p class="note" style="margin-top:12px">
      <a href="/">← Back to audit page</a>
    </p>
  </div>

  <style>
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
  </style>
{% endblock %}

{% block scripts %}
<script>
(function() {
  var polling = true;
  var flowId = "{{ flow_id }}";
  var pollEl = document.getElementById("statusPill");
  var codeEl = document.getElementById("userCode");
  var linkEl = document.getElementById("loginLink");

  async function poll() {
    if (!polling) return;
    try {
      var r = await fetch("/auth/poll?flow_id=" + encodeURIComponent(flowId));
      var data = await r.json();
      if (data.status === "connected") {
        pollEl.innerHTML = '<span class="dot" style="background:var(--green)"></span> Connected!';
        polling = false;
        setTimeout(function() { window.location.href = "/"; }, 1200);
      } else if (data.status === "error") {
        pollEl.innerHTML = '<span class="dot" style="background:var(--red)"></span> Failed: ' + data.error;
        polling = false;
      } else {
        // Still waiting
        setTimeout(poll, 2500);
      }
    } catch(e) {
      setTimeout(poll, 3000);
    }
  }
  setTimeout(poll, 1000);
})();
</script>
{% endblock %}