{% extends "base.html" %}
{% block title %}Register the app — ai-offboard{% endblock %}

{% block content %}
  <section class="hero">
    <h1>One-time Azure app registration</h1>
    <p class="tag">
      ai-offboard signs in as a Global Administrator using Microsoft's device-code
      flow. That needs a <b>public-client app</b> in your tenant that only your
      organization controls. Register it once (2 minutes), paste its ID, done.
    </p>
  </section>

  {% if error %}
    <div class="alert error">{{ error }}</div>
  {% endif %}

  <div class="card">
    <h2>Register the app in the Azure portal</h2>
    <ol style="line-height:1.9;margin:12px 0 18px">
      <li>Open <a href="https://portal.azure.com" target="_blank" rel="noopener">portal.azure.com</a>
          → <b>Microsoft Entra ID</b> → <b>App registrations</b> → <b>New registration</b>.</li>
      <li><b>Name:</b> <code id="appName">ai-offboard</code><button type="button" class="copy-btn" onclick="copyText('appName', this)" title="Copy app name"
                  style="background:none;border:1px solid var(--border);border-radius:6px;padding:2px 8px;margin-left:8px;cursor:pointer;vertical-align:middle;color:var(--text-dim)">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
          </button>.
          Under <b>Supported account types</b> choose
          <b>"Multiple Entra ID tenants"</b> — the second radio option. When it expands, select
          <b>"Allow all tenants"</b> (not "Allow only certain tenants"). This is what the
          device-code flow requires; your admin still approves the read-only scopes at first
          sign-in. Leave redirect URI empty. Click <b>Register</b>.</li>
      <li>In the left menu, open <b>Authentication (Preview)</b>. Scroll to
          <b>Settings → Allow public client flows</b> and set it to <b>Enabled</b> (it may default
          off — flip it if so). Then click <b>Save</b> at the top. (This is what enables the
          device-code login.)</li>
      <li>Copy the <b>Application (client) ID</b> on the overview page (a UUID like
          <code>0f0f0f0f-…</code>) and paste it below.</li>
    </ol>
    <p class="note">
      Read scopes (<code>User.Read.All</code>, <code>Group.Read.All</code>,
      <code>Application.Read.All</code>, <code>Directory.Read.All</code>) are requested at the
      consent screen on first sign-in — no need to configure API permissions in the portal.
    </p>

    <form method="post" action="/auth/register" style="margin-top:14px">
      <label for="client_id" style="display:flex;align-items:center;gap:8px">Application (client) ID
        <button type="button" onclick="pasteClientId(this)" title="Paste from clipboard"
                style="background:none;border:1px solid var(--border);border-radius:6px;padding:3px 10px;cursor:pointer;color:var(--text-dim);font-size:12px">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-2px"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
          Paste from clipboard
        </button>
      </label>
      <input type="text" id="client_id" name="client_id" required
             placeholder="00000000-0000-0000-0000-000000000000"
             style="font-family:monospace">
      <button class="btn" type="submit">Save and sign in</button>
    </form>
    {% if env_path %}
      <p class="note" style="margin-top:12px">
        This writes <code>OFFBOARD_PUBLIC_CLIENT_ID</code> to the local <code>.env</code> file next to
        your installation. It's a public identifier, not a secret — the app has no client secret.
      </p>
    {% endif %}
    <p class="note"><a href="/">← Back to audit page</a></p>
  </div>
{% endblock %}

{% block scripts %}
<script>
function copyText(id, btn) {
  var el = document.getElementById(id);
  if (!el) return;
  var text = el.value !== undefined ? el.value : el.textContent;
  var done = function() {
    var original = btn.innerHTML;
    btn.innerHTML = "✓ Copied";
    setTimeout(function() { btn.innerHTML = original; }, 1500);
  };
  if (navigator.clipboard && navigator.clipboard.writeText) {
    navigator.clipboard.writeText(text.trim()).then(done, function() { fallbackCopy(text, done); });
  } else {
    fallbackCopy(text, done);
  }
}
function pasteClientId(btn) {
  var input = document.getElementById("client_id");
  if (!input) return;
  // Clipboard read APIs need a secure context (HTTPS). Over plain HTTP,
  // fall back to focusing the field so Ctrl+V works — one click, then paste.
  if (!window.isSecureContext || !navigator.clipboard || !navigator.clipboard.readText) {
    input.focus();
    input.select();
    btn.innerHTML = "Ready — press Ctrl+V to paste";
    setTimeout(function() { btn.innerHTML = "Paste from clipboard"; }, 2500);
    return;
  }
  var done = function(text) {
    input.value = (text || "").trim();
    input.focus();
    var original = btn.innerHTML;
    btn.innerHTML = "✓ Pasted";
    setTimeout(function() { btn.innerHTML = original; }, 1500);
  };
  navigator.clipboard.readText().then(done, function() {
    input.focus();
    input.select();
    btn.innerHTML = "Ready — press Ctrl+V to paste";
    setTimeout(function() { btn.innerHTML = "Paste from clipboard"; }, 2500);
  });
}
function fallbackCopy(text, done) {
  var ta = document.createElement("textarea");
  ta.value = text;
  ta.style.position = "fixed";
  ta.style.opacity = "0";
  document.body.appendChild(ta);
  ta.select();
  try { document.execCommand("copy"); } catch (e) {}
  document.body.removeChild(ta);
  done();
}
</script>
{% endblock %}