{% 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 style="border:1px solid var(--green, #3fb950);border-radius:14px;padding:20px 24px;margin:4px 0 18px;text-align:center;background:linear-gradient(180deg, rgba(63,185,80,0.10), rgba(63,185,80,0.02));">
          <div style="font-size:1.15rem;font-weight:700;margin-bottom:6px">✓ Connected</div>
          <p style="margin:0 0 14px;color:var(--text-dim);font-size:0.9rem">
            Connected to tenant <code>{{ auth_tenant }}</code>. Ready to run a live audit.
          </p>
          <form method="post" action="/auth/logout" style="display:inline">
            <button class="btn" type="submit"
                    style="font-size:0.95rem;padding:10px 22px;background:transparent;border:1px solid var(--red, #da3633);color:var(--red, #da3633)">
              ← Disconnect from Microsoft
            </button>
          </form>
          <p class="note" style="margin:10px 0 0">Disconnecting returns you to a clean setup — no app ID retained.</p>
        </div>
      {% elif configured %}
        <div class="alert ok">Client credentials configured for tenant <code>{{ tenant_id }}</code>.</div>
    {% else %}
      <div class="connect-cta" style="border:1px solid var(--accent);border-radius:14px;padding:22px 24px;margin:4px 0 18px;text-align:center;background:linear-gradient(180deg, rgba(79,140,255,0.10), rgba(79,140,255,0.02));">
        <div style="font-size:1.15rem;font-weight:700;margin-bottom:6px">Get connected in ~2 minutes</div>
        <p style="margin:0 0 14px;color:var(--text-dim);font-size:0.9rem">
          Connect Microsoft 365 to run your first live audit. One-time app setup,
          then sign in as Global Admin — no secrets to handle.
        </p>
        <a class="btn" href="/auth/start" style="font-size:1.05rem;padding:12px 26px">
          ⚡ Connect Microsoft 365
        </a>
        <p class="note" style="margin:12px 0 0">
          or use the terminal: <code>offboard auth register</code> then <code>offboard auth login</code>
        </p>
      </div>
    {% endif %}

  <div class="card">
    <h2>Run a live audit</h2>
    <p class="sub">Scans the tenant for enterprise apps, 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>enterprise apps</span></div>
                  <div class="stat amber"><b>{{ demo_findings }}</b><span>findings</span></div>
                </div>

                {% if policy_evals %}
                <div style="margin:0 0 20px">
                  <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:10px">
                    <h3 style="margin:0">Zero Trust policy compliance</h3>
                    <span style="font-size:0.78rem;font-weight:600;padding:3px 10px;border-radius:99px;background:{{ '#123524' if policy_summary.overall == 'PASS' else '#3a2418' }};color:{{ '#4ade80' if policy_summary.overall == 'PASS' else '#fb923c' }}">
                      {{ policy_summary.overall }} · {{ policy_summary.compliant }}/{{ policy_summary.total }} passing
                    </span>
                  </div>
                  <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px">
                    {% for e in policy_evals %}
                    <div style="border:1px solid var(--border);border-radius:8px;padding:10px 12px;background:var(--bg)">
                      <div style="display:flex;justify-content:space-between;align-items:center;gap:8px">
                        <b style="font-size:0.9rem">{{ e.id }}</b>
                        <span style="font-size:0.72rem;font-weight:700;padding:2px 8px;border-radius:99px;background:{{ '#123524' if e.compliant else '#3d1a1a' }};color:{{ '#4ade80' if e.compliant else '#f87171' }}">
                          {{ 'PASS' if e.compliant else 'FAIL' }}
                        </span>
                      </div>
                      <div style="font-size:0.82rem;color:var(--text-dim);margin-top:2px">{{ e.name }}</div>
                      {% if not e.compliant and e.evidence %}
                      <div style="font-size:0.75rem;color:var(--text-dim);margin-top:6px;line-height:1.4">{{ e.evidence[0] }}</div>
                      {% endif %}
                    </div>
                    {% endfor %}
                  </div>
                </div>
                {% endif %}

                <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 %}