{% extends "base.html" %}
{% block title %}ai-offboard — AI Access Audit{% endblock %}

{% block content %}
  <section class="hero">
    <h1>Audit your AI access. Hand over the report.</h1>
    <p class="tag">Scan a Microsoft 365 tenant, find risky &amp; orphaned AI access, and produce a
      compliance-ready audit you can hand to an insurer or auditor. Read-only by design.</p>
  </section>

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

  {% if auth_connected %}
    <div class="alert ok">
      Connected to tenant <code>{{ auth_tenant }}</code>.
      <a href="/auth/logout">Disconnect</a>
    </div>
  {% elif configured %}
    <div class="alert ok">Client credentials configured for tenant <code>{{ tenant_id }}</code>.</div>
  {% else %}
    <div class="alert warn">
      Not connected yet.
      <a href="/auth/start">Connect Microsoft 365</a> (one-click login as Global Admin)
      or run <code>offboard setup</code> for client credentials.
    </div>
  {% endif %}

  <div class="card">
    <h2>Run a live audit</h2>
    <p class="sub">Scans the tenant for AI app assignments, access grants, and risk findings.</p>
    <form method="post" action="/scan" onsubmit="setLoading(this)">
      <label for="tenant">Tenant ID (optional — auto-detected when signed in)</label>
      <input type="text" id="tenant" name="tenant_id"
             placeholder="00000000-0000-0000-0000-000000000000" value="{{ tenant_id }}">
      <input type="hidden" name="mock" value="0">
      <button class="btn" type="submit" {% if not configured and not auth_connected %}disabled{% endif %}>
        <span class="spinner" style="display:none"></span>
        <span class="btn-label">
          {% if auth_connected %}Scan tenant (live){% elif configured %}Scan tenant (live){% else %}Scan tenant (live){% endif %}
        </span>
      </button>
    </form>
    {% if not configured and not auth_connected %}
      <p class="note" style="margin:10px 0 0">
        <a href="/auth/start">Connect Microsoft 365</a> first, or run <code>offboard setup</code>.
      </p>
    {% endif %}

    <div class="or">or</div>

    <form method="post" action="/scan" onsubmit="setLoading(this)">
      <input type="hidden" name="tenant_id" value="demo">
      <input type="hidden" name="mock" value="1">
      <button class="btn ghost" type="submit">
        <span class="spinner" style="display:none"></span>
        <span class="btn-label">Run demo scan — no setup, instant results</span>
      </button>
    </form>
      </div>

      {% if mode == "demo" and demo_findings %}
      <div class="card">
        <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px">
          <h2 style="margin:0">Sample — AI Access Audit</h2>
          <span class="pill demo"><span class="dot"></span>pre-seeded demo</span>
        </div>
        <p class="sub">A demo scan is pre-loaded. Start here to see what ai-offboard produces.</p>
        <div class="stats" style="margin:16px 0 20px">
          <div class="stat accent"><b>{{ demo_principals }}</b><span>principals</span></div>
          <div class="stat green"><b>{{ demo_apps }}</b><span>app assignments</span></div>
          <div class="stat amber"><b>{{ demo_findings }}</b><span>findings</span></div>
        </div>
        <div class="actions">
          <a class="btn" href="/report.md" download>Download report.md</a>
          <a class="btn ghost" href="/report.html" download>Download report.html</a>
          <a class="btn ghost" href="/" onclick="event.preventDefault();document.querySelector('form:has(input[value=\"1\"][name=\"mock\"]) button').click()">Re-run demo</a>
        </div>
      </div>
      {% endif %}
{% endblock %}

{% block scripts %}
<script>
function setLoading(form) {
  var btn = form.querySelector("button[type=submit]");
  btn.disabled = true;
  var spin = btn.querySelector(".spinner");
  var label = btn.querySelector(".btn-label");
  var text = label ? label.textContent : btn.textContent;
  if (spin) spin.style.display = "inline-block";
  if (label) label.textContent = "Scanning…";
  else btn.textContent = "Scanning…";
}
</script>
{% endblock %}