{% extends "base.html" %}
{% block title %}Microsoft 365 · SD RMM{% endblock %}
{% block content %}

<style>
  .ms-intro { color:var(--muted); max-width:780px; margin-bottom:18px; }
  .ms-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:start; }
  @media (max-width:900px){ .ms-grid{ grid-template-columns:1fr; } }
  .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--shadow-1); margin-bottom:16px; }
  .card h2 { font-size:15px; margin:0 0 10px; }
  .statusline { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
  .dot { width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
  .dot.on { background:#22c55e; } .dot.off { background:var(--muted-2); } .dot.err { background:#ef4444; }
  .kv { display:grid; grid-template-columns:130px 1fr; gap:6px 12px; font-size:13px; margin:10px 0; }
  .kv .k { color:var(--muted); }
  .field { margin:10px 0; }
  .field label { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }
  .field input { width:100%; background:var(--surface-3); border:1px solid var(--line); border-radius:8px;
                 padding:8px 10px; color:var(--fg); font:13px var(--font-mono); }
  .scopes { list-style:none; padding:0; margin:8px 0; }
  .scopes li { font:12px var(--font-mono); color:var(--muted); padding:3px 0; }
  .scopes li::before { content:"\2713"; color:#22c55e; margin-right:8px; }
  ol.guide { margin:6px 0 0; padding-left:18px; color:var(--muted); font-size:12.5px; line-height:1.55; }
  ol.guide code { background:var(--surface-3); padding:1px 5px; border-radius:5px; font-size:11.5px; }
  .err-box { border:1px solid rgba(239,68,68,.3); background:rgba(239,68,68,.07); border-radius:var(--r-md);
             padding:9px 12px; font-size:12px; color:#fca5a5; margin:8px 0; word-break:break-word; }
  .orgbar { margin-bottom:14px; }
  .orgbar select { background:var(--surface-3); border:1px solid var(--line); border-radius:8px; padding:6px 9px; color:var(--fg); }
  .row-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
</style>

<h1 class="page-title">Microsoft 365 &mdash; Entra ID &amp; Intune</h1>
<p class="ms-intro">Connect an organization's Microsoft tenant to sync its Entra ID device objects and Intune managed devices into SD RMM &mdash; device IDs, serial numbers, disk space, compliance state and primary user, alongside the native RMM agent data. Read-only, app-only (client-credentials): no signed-in user is required and SD RMM can never change anything in your tenant.</p>

{% if orgs|length > 1 %}
<div class="orgbar">
  <form method="get" style="display:inline">
    <label style="color:var(--muted);font-size:12px;margin-right:6px">Organization</label>
    <select name="org" onchange="this.form.submit()">
      {% for o in orgs %}<option value="{{ o.id }}" {% if sel and o.id==sel.id %}selected{% endif %}>{{ o.name }}</option>{% endfor %}
    </select>
  </form>
</div>
{% endif %}

{% if not sel %}
  <div class="card"><p class="ms-intro" style="margin:0">You have no organizations yet. Create one in <a href="/admin/">Admin</a> first.</p></div>
{% else %}
<div class="ms-grid">
  <div>
    <div class="card">
      <h2>Connection status</h2>
      <div class="statusline">
        {% if tenant and tenant.status=='connected' %}
          <span class="dot on"></span><strong>Connected</strong>
        {% elif tenant and tenant.status=='error' %}
          <span class="dot err"></span><strong>Connection error</strong>
        {% else %}
          <span class="dot off"></span><strong>Disconnected</strong> &mdash; preview mode
        {% endif %}
      </div>
      {% if tenant %}
        <div class="kv">
          <span class="k">Tenant ID</span><span style="font-family:var(--font-mono)">{{ tenant.tenant_id }}</span>
          <span class="k">Client ID</span><span style="font-family:var(--font-mono)">{{ tenant.client_id }}</span>
          <span class="k">Devices synced</span><span>{{ tenant.device_count }}</span>
          <span class="k">Last sync</span><span>{{ tenant.last_sync_at| pt('%Y-%m-%d %H:%M') if tenant.last_sync_at else 'never' }}</span>
        </div>
        {% if tenant.last_error %}<div class="err-box">{{ tenant.last_error }}</div>{% endif %}
        <div class="row-actions">
          <a class="btn" href="/integrations/microsoft/devices?org={{ sel.id }}">View devices &rarr;</a>
          <form method="post" action="/integrations/microsoft/sync" class="inline">
            <input type="hidden" name="org" value="{{ sel.id }}"><button class="btn btn-ghost" type="submit">Sync now</button>
          </form>
          <form method="post" action="/integrations/microsoft/disconnect" class="inline"
                onsubmit="return confirm('Disconnect this tenant and clear its synced devices?')">
            <input type="hidden" name="org" value="{{ sel.id }}"><button class="btn btn-ghost" type="submit">Disconnect</button>
          </form>
        </div>
      {% else %}
        <p class="ms-intro" style="margin:0">No tenant connected for <strong>{{ sel.name }}</strong>. The Devices view shows the field schema as a preview until you connect below.</p>
        <div class="row-actions" style="margin-top:10px">
          <a class="btn btn-ghost" href="/integrations/microsoft/devices?org={{ sel.id }}">Preview device fields &rarr;</a>
        </div>
      {% endif %}
    </div>

    <div class="card">
      <h2>{% if tenant %}Update credentials{% else %}Connect a tenant{% endif %}</h2>
      <form method="post" action="/integrations/microsoft/connect">
        <input type="hidden" name="org" value="{{ sel.id }}">
        <div class="field"><label>Directory (tenant) ID</label>
          <input name="tenant_id" placeholder="00000000-0000-0000-0000-000000000000" value="{{ tenant.tenant_id if tenant else '' }}" required></div>
        <div class="field"><label>Application (client) ID</label>
          <input name="client_id" placeholder="application client id" value="{{ tenant.client_id if tenant else '' }}" required></div>
        <div class="field"><label>Client secret {% if tenant %}<span style="color:var(--muted-2)">(leave blank to keep current)</span>{% endif %}</label>
          <input name="client_secret" type="password" placeholder="client secret value" {% if not tenant %}required{% endif %}></div>
        <button class="btn" type="submit">Test &amp; save connection</button>
      </form>
    </div>
  </div>

  <div>
    <div class="card">
      <h2>Required Graph permissions</h2>
      <ul class="scopes">
        {% for s in scopes %}<li>{{ s }}</li>{% endfor %}
      </ul>
      <p style="color:var(--muted-2);font-size:11.5px;margin:4px 0 0">Application permissions, admin-consented.</p>
    </div>
    <div class="card">
      <h2>Setup (one-time, in Entra admin center)</h2>
      <ol class="guide">
        <li>Go to <code>entra.microsoft.com</code> &rarr; <em>Identity &rarr; Applications &rarr; App registrations</em> &rarr; <em>New registration</em>. Name it &ldquo;SD RMM Connector&rdquo;, single tenant.</li>
        <li>Copy the <strong>Directory (tenant) ID</strong> and <strong>Application (client) ID</strong> from the overview.</li>
        <li><em>API permissions</em> &rarr; <em>Add a permission</em> &rarr; <em>Microsoft Graph &rarr; Application permissions</em> &rarr; add the three scopes listed left &rarr; <strong>Grant admin consent</strong>.</li>
        <li><em>Certificates &amp; secrets</em> &rarr; <em>New client secret</em> &rarr; copy the secret <strong>Value</strong> (shown once).</li>
        <li>Paste all three into the form and <em>Test &amp; save</em>. SD RMM stores the secret encrypted at rest and syncs hourly.</li>
      </ol>
    </div>
  </div>
</div>
{% endif %}

{% endblock %}