<h1>Dashboard</h1>

<div class="card">
  <p style="margin:0">Signed in as <strong><%= adminUser.email %></strong> <span class="role-badge"><%= adminUser.role %></span></p>
</div>

<%
  const fmtMoney = (n, ccy) => `${ccy || 'GHS'} ${Number(n || 0).toLocaleString()}`;
  const needsAttention = [];
  if (ticketStats && ticketStats.overdueCount > 0) needsAttention.push({ label: 'Overdue support tickets', count: ticketStats.overdueCount, href: '/support/tickets' });
  if (complianceStats && complianceStats.overdueDsars > 0) needsAttention.push({ label: 'Overdue DSAR requests', count: complianceStats.overdueDsars, href: '/compliance/dsar' });
  if (complianceStats && complianceStats.openBreaches > 0) needsAttention.push({ label: 'Open breach incidents', count: complianceStats.openBreaches, href: '/compliance/breach' });
  if (alertStats && alertStats.threatCount > 0) needsAttention.push({ label: 'Open threat-detection alerts', count: alertStats.threatCount, href: '/security-alerts' });
  if (alertStats && alertStats.loginAnomalyCount > 0) needsAttention.push({ label: 'Open login-anomaly alerts', count: alertStats.loginAnomalyCount, href: '/security-alerts' });
  if (usageStats && usageStats.atRiskCount > 0) needsAttention.push({ label: 'At-risk firms (churn signal)', count: usageStats.atRiskCount, href: '/analytics' });
  if (firmStats && firmStats.byStatus.pending_review > 0) needsAttention.push({ label: 'Signups awaiting review', count: firmStats.byStatus.pending_review, href: '/tenants' });
  if (healthStats && healthStats.upCount < healthStats.total) needsAttention.push({ label: 'Services not fully healthy', count: healthStats.total - healthStats.upCount, href: '/monitoring' });
  if (deliveryFailureCount > 0) needsAttention.push({ label: 'Failed alert deliveries (SMS/email)', count: deliveryFailureCount, href: '/alerting' });
%>

<% if (needsAttention.length) { %>
<div class="card">
  <h2 style="font-size:15px;margin-top:0">Needs attention</h2>
  <div style="display:flex;flex-direction:column;gap:2px">
    <% needsAttention.forEach((item) => { %>
      <a href="<%= item.href %>" style="display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:6px;color:var(--text)">
        <span style="display:flex;align-items:center;gap:8px"><span style="width:8px;height:8px;border-radius:50%;background:var(--danger);flex-shrink:0" aria-hidden="true"></span><%= item.label %></span>
        <span class="badge badge-danger"><%= item.count %></span>
      </a>
    <% }); %>
  </div>
</div>
<% } else { %>
<div class="card">
  <p style="margin:0;color:var(--ok)">✓ No outstanding issues across tenants, billing, support, compliance, or monitoring.</p>
</div>
<% } %>

<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px">
  <% if (firmStats) { %>
    <div class="card" style="margin-bottom:0"><p style="color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.03em;margin:0 0 6px">Total Firms</p><p style="font-size:26px;font-weight:700;margin:0;color:#fff"><%= firmStats.total %></p></div>
  <% } %>
  <% if (revenueStats) { %>
    <div class="card" style="margin-bottom:0"><p style="color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.03em;margin:0 0 6px">MRR</p><p style="font-size:26px;font-weight:700;margin:0;color:#fff"><%= fmtMoney(revenueStats.mrr) %></p></div>
    <div class="card" style="margin-bottom:0"><p style="color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.03em;margin:0 0 6px">Active Subscriptions</p><p style="font-size:26px;font-weight:700;margin:0;color:#fff"><%= revenueStats.activeSubscriptions %></p></div>
    <div class="card" style="margin-bottom:0"><p style="color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.03em;margin:0 0 6px">Churn (30d)</p><p style="font-size:26px;font-weight:700;margin:0;color:#fff"><%= revenueStats.churn.churnRatePercent %>%</p></div>
  <% } %>
  <% if (ticketStats) { %>
    <div class="card" style="margin-bottom:0"><p style="color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.03em;margin:0 0 6px">Open Tickets</p><p style="font-size:26px;font-weight:700;margin:0;color:#fff"><%= ticketStats.openCount %></p></div>
  <% } %>
  <% if (alertStats) { %>
    <div class="card" style="margin-bottom:0"><p style="color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.03em;margin:0 0 6px">Open Security Alerts</p><p style="font-size:26px;font-weight:700;margin:0;color:#fff"><%= alertStats.openCount %></p></div>
  <% } %>
  <% if (notificationStats) { %>
    <div class="card" style="margin-bottom:0"><p style="color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.03em;margin:0 0 6px">Unread Notifications</p><p style="font-size:26px;font-weight:700;margin:0;color:#fff"><%= notificationStats.unreadCount %></p></div>
  <% } %>
  <% if (resourceUsageStats && resourceUsageStats.firmCount > 0) { %>
    <div class="card" style="margin-bottom:0"><p style="color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.03em;margin:0 0 6px">Total Storage</p><p style="font-size:26px;font-weight:700;margin:0;color:#fff"><%= (resourceUsageStats.totalStorageBytes / (1024*1024)).toFixed(0) %> MB</p></div>
  <% } %>
</div>

<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;margin-top:20px">

  <% if (firmStats && firmStats.total > 0) {
    const segs = [
      { key: 'active', label: 'Active', color: 'var(--ok)' },
      { key: 'pending_review', label: 'Pending Review', color: 'var(--accent)' },
      { key: 'suspended', label: 'Suspended', color: 'var(--warn)' },
      { key: 'offboarding', label: 'Offboarding', color: 'var(--danger)' },
    ];
  %>
  <div class="card">
    <h2 style="font-size:15px;margin-top:0">Firms by Status</h2>
    <div style="display:flex;height:14px;border-radius:7px;overflow:hidden;background:#0d0f14;margin-bottom:14px" role="img" aria-label="Firms by status breakdown">
      <% segs.forEach((s) => { const pct = (firmStats.byStatus[s.key] / firmStats.total) * 100; if (pct > 0) { %>
        <div style="width:<%= pct %>%;background:<%= s.color %>;border-right:2px solid #0d0f14" title="<%= s.label %>: <%= firmStats.byStatus[s.key] %>"></div>
      <% } }); %>
    </div>
    <div style="display:flex;flex-direction:column;gap:6px">
      <% segs.forEach((s) => { %>
        <div style="display:flex;align-items:center;justify-content:space-between;font-size:13px">
          <span style="display:flex;align-items:center;gap:8px"><span style="width:10px;height:10px;border-radius:2px;background:<%= s.color %>;flex-shrink:0" aria-hidden="true"></span><%= s.label %></span>
          <span style="color:var(--muted)"><%= firmStats.byStatus[s.key] %></span>
        </div>
      <% }); %>
    </div>
  </div>
  <% } %>

  <% if (revenueStats) { %>
  <div class="card">
    <h2 style="font-size:15px;margin-top:0">Subscription Mix</h2>
    <p style="color:var(--muted);font-size:12px;margin:0 0 10px"><%= revenueStats.activeSubscriptions %> active subscriptions total &mdash; trialing and comped are independent, not mutually exclusive, categories</p>
    <%
      const subTotal = revenueStats.activeSubscriptions;
      const subSegs = [
        { label: 'Trialing', count: revenueStats.trialingCount, color: 'var(--accent)' },
        { label: 'Comped', count: revenueStats.compedCount, color: 'var(--warn)' },
      ];
    %>
    <div style="display:flex;flex-direction:column;gap:10px">
      <% subSegs.forEach((s) => { const pct = subTotal > 0 ? (s.count / subTotal) * 100 : 0; %>
        <div>
          <div style="display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:3px"><span><%= s.label %></span><span><%= s.count %> of <%= subTotal %></span></div>
          <div style="height:8px;border-radius:4px;background:#0d0f14;overflow:hidden"><div style="height:100%;width:<%= pct %>%;background:<%= s.color %>;border-radius:4px"></div></div>
        </div>
      <% }); %>
    </div>
    <p style="color:var(--muted);font-size:12px;margin:14px 0 0">Plan changes (30d): <%= revenueStats.trend.upgrades %> upgrade<%= revenueStats.trend.upgrades === 1 ? '' : 's' %>, <%= revenueStats.trend.downgrades %> downgrade<%= revenueStats.trend.downgrades === 1 ? '' : 's' %></p>
  </div>
  <% } %>

  <% if (healthStats && healthStats.services.length) { %>
  <div class="card">
    <h2 style="font-size:15px;margin-top:0">Service Health</h2>
    <div style="display:flex;flex-direction:column;gap:8px">
      <% healthStats.services.forEach((svc) => {
        const color = svc.status === 'up' ? 'var(--ok)' : svc.status === 'degraded' ? 'var(--warn)' : 'var(--danger)';
      %>
        <div style="display:flex;align-items:center;justify-content:space-between;font-size:13px">
          <span style="display:flex;align-items:center;gap:8px"><span style="width:9px;height:9px;border-radius:50%;background:<%= color %>;flex-shrink:0" aria-hidden="true"></span><%= svc.service %></span>
          <span style="color:var(--muted)"><%= svc.status %><% if (svc.uptimePercent24h != null) { %> · <%= svc.uptimePercent24h %>% (24h)<% } %></span>
        </div>
      <% }); %>
    </div>
  </div>
  <% } %>

  <% if (notificationStats && notificationStats.recent.length) { %>
  <div class="card">
    <h2 style="font-size:15px;margin-top:0">Recent Notifications</h2>
    <div style="display:flex;flex-direction:column;gap:8px">
      <% notificationStats.recent.forEach((n) => { %>
        <div style="display:flex;align-items:center;justify-content:space-between;font-size:13px;gap:8px">
          <span style="display:flex;align-items:center;gap:8px;min-width:0">
            <span class="badge <%= { info: 'badge-ok', warning: 'badge-warn', critical: 'badge-danger' }[n.severity] %>" style="flex-shrink:0"><%= n.severity %></span>
            <% if (n.link) { %><a href="<%= n.link %>" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap"><%= n.title %></a><% } else { %><span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap"><%= n.title %></span><% } %>
          </span>
          <span style="color:var(--muted);font-size:11px;flex-shrink:0"><%= new Date(n.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) %></span>
        </div>
      <% }); %>
    </div>
    <p style="margin:12px 0 0"><a href="/notifications" style="font-size:12px">View all notifications &rarr;</a></p>
  </div>
  <% } %>

  <% if (resourceUsageStats && resourceUsageStats.firmCount > 0) { %>
  <div class="card">
    <h2 style="font-size:15px;margin-top:0">Resource Usage Summary</h2>
    <div style="display:flex;flex-direction:column;gap:8px">
      <div style="display:flex;align-items:center;justify-content:space-between;font-size:13px"><span>Firms rolled up</span><span style="color:var(--muted)"><%= resourceUsageStats.firmCount %></span></div>
      <div style="display:flex;align-items:center;justify-content:space-between;font-size:13px"><span>Total documents</span><span style="color:var(--muted)"><%= resourceUsageStats.totalDocuments.toLocaleString() %></span></div>
      <div style="display:flex;align-items:center;justify-content:space-between;font-size:13px"><span>Total storage</span><span style="color:var(--muted)"><%= (resourceUsageStats.totalStorageBytes / (1024*1024)).toFixed(1) %> MB</span></div>
      <div style="display:flex;align-items:center;justify-content:space-between;font-size:13px"><span>Sessions (24h)</span><span style="color:var(--muted)"><%= resourceUsageStats.totalSessions24h %></span></div>
    </div>
    <p style="margin:12px 0 0"><a href="/resource-usage" style="font-size:12px">View per-firm breakdown &rarr;</a></p>
  </div>
  <% } %>

</div>

<div class="card" style="margin-top:20px">
  <h2 style="font-size:15px;margin-top:0">Quick links</h2>
  <p><a href="/tenants">Firm directory</a> &middot; <a href="/billing/revenue">Revenue</a> &middot; <a href="/monitoring">Monitoring</a> &middot; <a href="/notifications">Notifications</a> &middot; <a href="/alerting">Alerting &amp; Escalation</a> &middot; <a href="/resource-usage">Resource Usage</a> &middot; <a href="/admin-users">Admin-console accounts</a> &middot; <a href="/audit-log">Audit trail</a></p>
</div>
