{% extends "admin/index.html" %}
{% load admin_dashboard %}

{% comment %}
Admin home page with an analytics dashboard rendered above the standard
app/model list. Extends Django's built-in admin/index.html so the app list and
"recent actions" sidebar are preserved via {{ block.super }}.

Time window is driven by ?period=day|week|month|year|all and read by the
admin_dashboard_stats template tag.
{% endcomment %}

{% block content %}
{% admin_dashboard_stats as stats %}
<div class="dash-wrap">

  <div class="dash-head">
    <h1 class="dash-title">Control&nbsp;Center</h1>
    <span class="dash-pulse">● LIVE</span>
    <nav class="period-nav" aria-label="Time window">
      {% for p in stats.periods %}
        <a class="period-pill{% if p.active %} active{% endif %}" href="{{ p.url }}">{{ p.label }}</a>
      {% endfor %}
    </nav>
  </div>

  {# pending-work strip #}
  <div class="pending-strip">
    {% for p in stats.pending %}
      <a class="pending-item{% if p.hot %} hot{% endif %}" href="{{ p.action }}">
        <span class="pending-val">{{ p.value }}</span>
        <span class="pending-label">{{ p.label }}</span>
      </a>
    {% endfor %}
  </div>

  {# headline cards #}
  <div class="stat-grid">
    {% for card in stats.cards %}
    <a class="stat-card tone-{{ card.tone }}{% if card.attention %} attention{% endif %}"
       href="{{ card.action }}">
      <div class="stat-icon">{{ card.icon }}</div>
      <div class="stat-body">
        <div class="stat-label">{{ card.label }}</div>
        <div class="stat-value">{{ card.value }}</div>
        <div class="stat-sub">{{ card.sub }}</div>
      </div>
      <span class="scope-badge scope-{{ card.scope }}">{{ card.scope }}</span>
      {% if card.attention %}<span class="stat-flag">!</span>{% endif %}
    </a>
    {% endfor %}
  </div>

  {# graphical charts #}
  <div class="chart-row">
    <div class="chart-panel">
      <div class="chart-head"><h2>Account Status</h2><span>current</span></div>
      <div class="donut-block">
        <div class="donut" style="background: {{ stats.charts.status.gradient }}">
          <div class="donut-hole">
            <span class="donut-total">{{ stats.charts.status.total }}</span>
            <span class="donut-cap">accounts</span>
          </div>
        </div>
        <ul class="donut-legend">
          {% for seg in stats.charts.status.legend %}
          <li>
            <span class="dot" style="background: {{ seg.color }}"></span>
            <span class="leg-label">{{ seg.label }}</span>
            <span class="leg-val">{{ seg.count }} · {{ seg.pct }}%</span>
          </li>
          {% endfor %}
        </ul>
      </div>
    </div>

    <div class="chart-panel">
      <div class="chart-head"><h2>Deposits by Agent</h2><span>{{ stats.period_label }}</span></div>
      <div class="bar-chart">
        {% for b in stats.charts.deposit_bars %}
        <div class="bar-row">
          <span class="bar-name">{{ b.name }}</span>
          <div class="bar-track"><div class="bar-fill" style="width: {{ b.pct }}%"></div></div>
          <span class="bar-val">{{ b.value }}</span>
        </div>
        {% empty %}
        <p class="agent-empty">No deposit data for this window.</p>
        {% endfor %}
      </div>
    </div>
  </div>

  {# per-agent analytics #}
  <div class="agent-panel">
    <div class="agent-panel-head">
      <h2>Agent Analytics</h2>
      <span class="agent-panel-sub">flows scoped to <strong>{{ stats.period_label }}</strong> · downline &amp; commission per agent</span>
    </div>
    <div class="agent-table-wrap">
      <table class="agent-table">
        <thead>
          <tr>
            <th>Agent</th>
            <th class="num">Users</th>
            <th class="num">New</th>
            <th class="num">Deposits</th>
            <th class="num">Withdrawals</th>
            <th class="num">Commission</th>
          </tr>
        </thead>
        <tbody>
          {% for a in stats.agent_rows %}
          <tr{% if a.unassigned %} class="row-unassigned"{% endif %}>
            <td>
              <div class="agent-name">
                {{ a.name }}
                {% if not a.is_active %}<span class="badge-off">inactive</span>{% endif %}
              </div>
              {% if a.code %}<div class="agent-meta">#{{ a.uid }} · {{ a.code }}</div>{% endif %}
            </td>
            <td class="num strong">{{ a.total_users }}</td>
            <td class="num">{% if a.new_users %}<span class="up">+{{ a.new_users }}</span>{% else %}0{% endif %}</td>
            <td class="num">{{ a.deposits }}</td>
            <td class="num">{{ a.withdrawals }}</td>
            <td class="num commission-cell">{{ a.commission }}</td>
          </tr>
          {% empty %}
          <tr><td colspan="6" class="agent-empty">No agents registered yet.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

</div>

{{ block.super }}
{% endblock %}