{% extends 'admin/base.html' %}
{% block title %}Dashboard{% endblock %}
{% block page_title %}Dashboard{% endblock %}
{% block content %}



<div class="stats-grid">
  <div class="stat-card">
    <div class="stat-icon purple">👥</div>
    <div><div class="stat-val">{{ total }}</div><div class="stat-label">Total Subscribers</div></div>
  </div>
  <div class="stat-card">
    <div class="stat-icon green">✅</div>
    <div><div class="stat-val">{{ active }}</div><div class="stat-label">Active Now</div></div>
  </div>
  <div class="stat-card">
    <div class="stat-icon red">❌</div>
    <div><div class="stat-val">{{ expired }}</div><div class="stat-label">Expired</div></div>
  </div>
  <div class="stat-card">
    <div class="stat-icon amber">⏳</div>
    <div><div class="stat-val">{{ pending }}</div><div class="stat-label">Pending Payment</div></div>
  </div>
  <div class="stat-card">
    <div class="stat-icon blue">📡</div>
    <div><div class="stat-val">{{ mt_sessions }}</div><div class="stat-label">Online on Hotspot</div></div>
  </div>
  <div class="stat-card">
    <div class="stat-icon green">💰</div>
    <div>
      <div class="stat-val" style="font-size:18px;">₦{{ "{:,.0f}".format(revenue) }}</div>
      <div class="stat-label">Total Collected</div>
    </div>
  </div>
</div>

{% if is_super %}
<div class="card" style="margin-bottom: 20px;">
    <div class="card-title">Site Distribution Breakdown</div>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
        {% for site in site_breakdown %}
        <div style="background: rgba(255,255,255,0.03); padding: 15px; border-radius: 10px; border-left: 4px solid #6b3fa0;">
            <h4 style="margin: 0 0 10px 0; color: #9b6dce;">{{ site.name }}</h4>
            <div style="font-size: 13px; color: #ccc;">
                ✅ Active: <strong>{{ site.active }}</strong><br>
                📡 Online: <strong>{{ mt_sessions_split.get(site.name.lower(), 0) }}</strong><br>
                💰 Revenue: <strong>₦{{ "{:,.0f}".format(site.revenue) }}</strong>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

<div class="two-col">
  <div class="card">
    <div class="card-title">Recent Registrations</div>
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Status</th>
            <th>Uptime</th>
            <th>Joined</th>
          </tr>
        </thead>
        <tbody>
          {% for s in recent %}
          <tr>
            <td><strong style="color:white;">{{ s.first_name }} {{ s.surname }}</strong></td>
            <td class="mono">{{ s.email }}</td>
            <td><span class="badge {{ s.payment_status }}">{{ s.payment_status }}</span></td>
            <td class="mono">
              {% set uptime = mt_uptime.get(s.email, '') %}
              {% if uptime %}
                <span class="badge online">{{ uptime }}</span>
              {% else %}
                <span style="color:var(--muted);">Offline</span>
              {% endif %}
            </td>
            <td class="mono">{{ s.created_at.strftime('%d %b %Y') if s.created_at else '—' }}</td>
          </tr>
          {% else %}
          <tr>
            <td colspan="5" style="text-align:center;color:var(--muted);padding:24px;">No subscribers yet</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <div style="margin-top:14px;">
      <a href="/admin/subscribers" class="btn btn-purple">View All Subscribers →</a>
    </div>
  </div>

  <div class="card">
    <div class="card-title">Quick Actions</div>
    <div style="display:flex;flex-direction:column;gap:10px;">
      <a href="/admin/manage-admins" class="btn btn-purple" style="justify-content:center;padding:12px; border: 1px solid #6b3fa0; background: transparent;">
  🔐 &nbsp;Manage Admin Accounts
      </a>
      <a href="/admin/subscribers" class="btn btn-purple" style="justify-content:center;padding:12px;">👥 &nbsp;Manage Subscribers</a>
      <a href="/admin/sessions"    class="btn btn-green"  style="justify-content:center;padding:12px;">📡 &nbsp;View Live Sessions</a>
      <a href="/admin/payments"    class="btn btn-amber"  style="justify-content:center;padding:12px;">💳 &nbsp;Payment History</a>
      <a href="/admin/export/csv"  class="btn btn-purple" style="justify-content:center;padding:12px;">📥 &nbsp;Export Subscribers CSV</a>
    </div>
    {% if expiring > 0 %}
    <div style="margin-top:16px;padding:12px 16px;background:rgba(245,158,11,0.1);
                border:1px solid rgba(245,158,11,0.3);border-radius:10px;">
      <div style="color:#fcd34d;font-weight:700;font-size:13px;">
        ⚠️ {{ expiring }} subscriber{{ 's' if expiring > 1 }} expiring within 3 days
      </div>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}