{% extends "base.html" %}
{% block title %}Email Security · SD RMM{% endblock %}
{% block content %}
{% include "_email_nav.html" %}
{% set k = dash.kpi %}

<style>
  .em-head { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
  .em-nav { display:flex; gap:8px; flex-wrap:wrap; }
  .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; box-shadow:var(--shadow-1); margin-bottom:14px; }
  .card h2 { font-size:12px; font-weight:700; margin:0 0 12px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
  .kpis { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:14px; }
  @media (max-width:920px){ .kpis { grid-template-columns:repeat(3,1fr); } } @media (max-width:560px){ .kpis { grid-template-columns:repeat(2,1fr); } }
  .kpi { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; }
  a.kpi { display:block; text-decoration:none; color:inherit; transition:border-color .12s, transform .12s; }
  a.kpi:hover { border-color:var(--accent-ring); transform:translateY(-1px); }
  .kpi .v { font:700 22px/1 var(--font-sans); font-variant-numeric:tabular-nums; } .kpi .v.bad { color:#fca5a5; } .kpi .v.ok { color:var(--ok); }
  .kpi .k { font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:700; margin-top:6px; }
  .grid2 { display:grid; grid-template-columns:1.4fr 1fr; gap:14px; } @media (max-width:820px){ .grid2 { grid-template-columns:1fr; } }
  .grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; } @media (max-width:820px){ .grid3 { grid-template-columns:1fr; } }
  .trend { display:flex; align-items:flex-end; gap:4px; height:120px; }
  .tcol { flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:3px; }
  .tbar { width:70%; min-height:2px; background:var(--accent-soft, #2b3b57); border-radius:3px 3px 0 0; position:relative; }
  .tbar .q { position:absolute; bottom:0; left:0; right:0; background:#f97373; border-radius:0 0 0 0; }
  .tlab { font-size:9px; color:var(--muted-2); }
  .bars .row { display:flex; align-items:center; gap:8px; margin:6px 0; font-size:12.5px; }
  .bars .nm { width:74px; color:var(--ink-2); text-transform:capitalize; } .bars .track { flex:1; height:9px; background:var(--surface-3); border-radius:3px; overflow:hidden; }
  .bars .fill { height:100%; border-radius:3px; } .bars .c { width:34px; text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; }
  table.tt { width:100%; border-collapse:collapse; font-size:12.5px; } table.tt td { padding:5px 6px; border-bottom:1px solid var(--line-soft); }
  table.tt td.n { text-align:right; color:#fca5a5; font-weight:700; font-variant-numeric:tabular-nums; } .mono { font-family:var(--font-mono); } .muted { color:var(--muted); }
  .banner.ok { background:rgba(74,222,128,.1); border:1px solid rgba(74,222,128,.3); color:var(--ok); padding:9px 12px; border-radius:var(--r-md); font-size:12.5px; margin-bottom:12px; }
  .banner.err { background:rgba(249,115,115,.1); border:1px solid rgba(249,115,115,.35); color:#fca5a5; padding:9px 12px; border-radius:var(--r-md); font-size:12.5px; margin-bottom:12px; }
  .sev { display:inline-block; padding:1px 7px; border-radius:999px; font:700 10px/1.5 var(--font-sans); }
  .sev-crit { background:rgba(249,115,115,.16); color:#fca5a5; } .sev-warn { background:rgba(251,191,36,.16); color:#fbbf24; } .sev-low { background:rgba(96,165,250,.15); color:#93c5fd; }
  .setup { border-left:3px solid var(--accent-ring); background:rgba(96,165,250,.07); border:1px solid rgba(96,165,250,.25); border-radius:var(--r-md); padding:12px 14px; font-size:12.5px; }
  .setup code { background:var(--surface-3); padding:1px 5px; border-radius:4px; }
</style>

<div style="display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px;">
  {% if orgs and orgs|length > 1 %}
  <form method="get" action="/email" style="display:flex; gap:8px; align-items:center;">
    <label class="muted" style="font-size:10px; text-transform:uppercase; letter-spacing:.5px; font-weight:700;">Organization</label>
    <select name="org" onchange="this.form.submit()" class="btn btn-ghost" style="padding:7px 10px;">
      {% for o in orgs %}<option value="{{ o.id }}" {{ 'selected' if sel and o.id == sel.id else '' }}>{{ o.name }}</option>{% endfor %}
    </select>
  </form>
  {% else %}<span></span>{% endif %}
  {% if accounts %}
  <form method="post" action="/email/scan">{% if sel %}<input type="hidden" name="org" value="{{ sel.id }}">{% endif %}<button class="btn btn-primary" type="submit">Scan mailboxes now</button></form>
  {% endif %}
</div>

{% if saved %}<div class="banner ok">{{ {'connected':'Mailbox connected.','scanned':'Scan complete.','disconnected':'Mailbox disconnected.'}.get(saved, 'Saved.') }}</div>{% endif %}
{% if err %}<div class="banner err">{{ {'state':'Could not verify the sign-in (session/cookie). Try again in a normal browser.','org':'No organization selected for this mailbox.','noaccess':'You do not have access to that mailbox.'}.get(err, 'Connection failed (' ~ err ~ '). Check the OAuth app config + redirect URI.') }}</div>{% endif %}

<div class="kpis">
  <div class="kpi"><div class="v">{{ "{:,}".format(k.scanned) }}</div><div class="k">Messages scanned</div></div>
  <a class="kpi" href="/email/flagged{% if sel %}?org={{ sel.id }}{% endif %}"><div class="v">{{ "{:,}".format(k.flagged) }}</div><div class="k">Flagged</div></a>
  <a class="kpi" href="/email/quarantine{% if sel %}?org={{ sel.id }}{% endif %}"><div class="v {{ 'bad' if k.serious else '' }}">{{ "{:,}".format(k.serious) }}</div><div class="k">Serious (warn/crit)</div></a>
  <div class="kpi"><div class="v {{ 'ok' if k.mailboxes else '' }}">{{ "{:,}".format(k.mailboxes) }}</div><div class="k">Mailboxes</div></div>
  <a class="kpi" href="/email/gateway{% if sel %}?org={{ sel.id }}{% endif %}"><div class="v">{{ "{:,}".format(k.processed) }}</div><div class="k">Gateway processed</div></a>
  <a class="kpi" href="/email/policies{% if sel %}?org={{ sel.id }}{% endif %}"><div class="v">{{ k.policies }}</div><div class="k">Policy rules</div></a>
</div>

<div class="grid2">
  <div class="card">
    <h2>Mail flagged &mdash; 14 days</h2>
    <div class="trend">
      {% for t in dash.trend %}
      <div class="tcol">
        <div class="tbar" style="height:{{ (t.n / dash.tmax * 110)|round(0,'ceil')|int if t.n else 2 }}px;" title="{{ t.day }}: {{ t.n }} flagged, {{ t.q }} serious">
          <div class="q" style="height:{{ (t.q / t.n * 100)|round(0,'ceil')|int if t.n else 0 }}%;"></div>
        </div>
        <div class="tlab">{{ t.day }}</div>
      </div>
      {% endfor %}
    </div>
    <p class="muted" style="font-size:11px; margin:8px 0 0;"><span style="color:#f97373;">&#9632;</span> serious (warn/crit) &nbsp; <span style="color:var(--muted-2);">&#9632;</span> total flagged</p>
  </div>

  <div class="card">
    <h2>Threats by type</h2>
    {% set tmaxv = (dash.by_type.values()|list|max) if dash.by_type else 1 %}
    <div class="bars">
      {% for tt, c in dash.by_type.items() %}
      <div class="row"><span class="nm">{{ tt }}</span><span class="track"><span class="fill" style="width:{{ (c/tmaxv*100)|int }}%; background:{{ {'malware':'#fca5a5','phishing':'#fbbf24','spoofing':'#c084fc','spam':'#60a5fa'}.get(tt,'#94a3b8') }};"></span></span><span class="c">{{ c }}</span></div>
      {% else %}<p class="muted">No threats recorded yet.</p>{% endfor %}
    </div>
    <h2 style="margin-top:16px;">By severity</h2>
    <div class="bars">
      {% set smaxv = (dash.by_sev.values()|list|max) if dash.by_sev else 1 %}
      {% for sv in ['crit','warn','low'] %}{% if dash.by_sev.get(sv) %}
      <div class="row"><span class="nm">{{ sv }}</span><span class="track"><span class="fill" style="width:{{ (dash.by_sev[sv]/smaxv*100)|int }}%; background:{{ {'crit':'#fca5a5','warn':'#fbbf24','low':'#93c5fd'}[sv] }};"></span></span><span class="c">{{ dash.by_sev[sv] }}</span></div>
      {% endif %}{% endfor %}
    </div>
  </div>
</div>

<div class="grid3">
  <div class="card">
    <h2>Most-flagged senders</h2>
    <table class="tt"><tbody>
      {% for s in dash.top_senders %}<tr><td class="mono" style="word-break:break-all;">{{ s.v }}</td><td class="n">{{ s.c }}</td></tr>
      {% else %}<tr><td class="muted">No serious senders flagged.</td></tr>{% endfor %}
    </tbody></table>
    <p class="muted" style="font-size:10.5px; margin:8px 0 0;">senders of warn/critical mail only</p>
  </div>
  <div class="card">
    <h2>Most-targeted recipients</h2>
    <table class="tt"><tbody>
      {% for t in dash.top_targets %}<tr><td class="mono" style="word-break:break-all;">{{ t.v }}</td><td class="n">{{ t.c }}</td></tr>
      {% else %}<tr><td class="muted">None yet.</td></tr>{% endfor %}
    </tbody></table>
    <p class="muted" style="font-size:10.5px; margin:8px 0 0;">recipients of warn/critical mail only</p>
  </div>
  <div class="card">
    <h2>Flagged by organization</h2>
    <table class="tt"><tbody>
      {% for o in dash.per_org %}<tr><td>{{ o.org }}</td><td class="n">{{ o.n }}</td></tr>
      {% else %}<tr><td class="muted">No flagged mail yet.</td></tr>{% endfor %}
    </tbody></table>
    <p class="muted" style="font-size:10.5px; margin:8px 0 0;">flagged messages (gateway + mailbox scan)</p>
  </div>
</div>

<div class="card">
  <h2>Recently flagged</h2>
  {% if recent %}
  <table class="tt"><thead><tr><th style="text-align:left; color:var(--muted); font-size:10px; text-transform:uppercase;">Time</th><th style="text-align:left; color:var(--muted); font-size:10px; text-transform:uppercase;">From</th><th style="text-align:left; color:var(--muted); font-size:10px; text-transform:uppercase;">Subject</th><th></th></tr></thead>
    <tbody>
      {% for g in recent %}
      <tr>
        <td class="mono muted">{{ g.ts| pt('%m-%d %H:%M') }}</td>
        <td class="mono" style="max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{ g.sender }}</td>
        <td style="max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"><span class="sev sev-{{ g.severity }}">{{ g.severity }}</span> {{ g.subject or '—' }}</td>
        <td style="text-align:right;"><a class="btn btn-ghost" href="{{ g.link }}">View</a></td>
      </tr>
      {% endfor %}
    </tbody></table>
  {% else %}<p class="muted">No flagged mail yet. Connect a mailbox below and scan, send a test through the <a href="/email/gateway">gateway</a>, or try the <a href="/email/test">analyzer</a>.</p>{% endif %}
</div>

<div class="card">
  <h2>Connect a mailbox (API scanning)</h2>
  {% if not configured %}
  <div class="setup"><strong>Optional — OAuth not configured.</strong> The gateway (MX-mode) works without this. To also scan an existing Gmail/Outlook mailbox via API, create an OAuth app and set <code>RMM_GMAIL_CLIENT_ID/SECRET</code> or <code>RMM_MS_CLIENT_ID/SECRET</code> in <code>/etc/rmm/rmm.env</code>, then restart <code>rmm</code>. Redirect URI: <code>https://rmm.example.com/email/oauth/&lt;gmail|outlook&gt;/callback</code>.</div>
  {% else %}
  <div style="display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px;">
    {% if providers.gmail %}<a class="btn btn-primary" href="/email/connect/gmail{% if sel %}?org={{ sel.id }}{% endif %}">Connect Gmail</a>{% endif %}
    {% if providers.outlook %}<a class="btn btn-primary" href="/email/connect/outlook{% if sel %}?org={{ sel.id }}{% endif %}">Connect Outlook</a>{% endif %}
  </div>
  {% endif %}
  {% if accounts %}
  <table class="tt" style="margin-top:8px;"><tbody>
    {% for a in accounts %}
    <tr><td class="mono">{{ a.email_address }}</td><td class="muted">{{ a.provider }}</td><td class="muted">{{ a.last_status or '—' }}</td>
      <td style="text-align:right;"><form method="post" action="/email/accounts/{{ a.id }}/disconnect"><button class="btn btn-ghost" type="submit">Disconnect</button></form></td></tr>
    {% endfor %}
  </tbody></table>
  {% endif %}
</div>

{% endblock %}