{% extends "admin/base_site.html" %}
{% load i18n static admin_dashboard %}
{% block bodyclass %}{{ block.super }} dashboard premium-dashboard{% endblock %}
{% block breadcrumbs %}{% endblock %}
{% block content_title %}{% endblock %}

{% block content %}
{% admin_dashboard_stats as stats %}
<section class="command-hero">
  <div><span class="hero-kicker">LIVE ORGANISATION OVERVIEW</span><h1>Good day, {{ request.user.first_name|default:request.user.username }}.</h1><p>Everything that matters across membership, ministry and stewardship—at a glance.</p></div>
  <div class="hero-status"><i></i><span>Systems operational</span><strong>{% now "H:i" %}</strong></div>
</section>

<section class="metric-grid">
  <article class="metric-card violet"><span class="metric-icon">↗</span><small>Registered members</small><strong>{{ stats.members }}</strong><em>+{{ stats.new_members }} this month</em></article>
  <article class="metric-card cyan"><span class="metric-icon">⌂</span><small>Active campuses</small><strong>{{ stats.campuses }}</strong><em>{{ stats.leaders }} leaders serving</em></article>
  <article class="metric-card amber"><span class="metric-icon">◎</span><small>Approved income</small><strong>GHS {{ stats.income|floatformat:0 }}</strong><em>Balance GHS {{ stats.balance|floatformat:0 }}</em></article>
  <article class="metric-card rose"><span class="metric-icon">✦</span><small>Ministry reach</small><strong>{{ stats.attendance }}</strong><em>{{ stats.souls }} souls won</em></article>
</section>

<section class="premium-panel" style="margin-bottom: 1.5rem">
  <div class="panel-title"><div><span>SMS GATEWAY</span><h2>Arkesel balance</h2></div><button type="button" class="button" id="refresh-sms-balance">Refresh balance</button></div>
  <div id="sms-balance" aria-live="polite">Checking current balance&hellip;</div>
</section>

<section class="insight-grid">
  <article class="premium-panel chart-panel"><div class="panel-title"><div><span>FINANCIAL MOMENTUM</span><h2>Income vs expenditure</h2></div><span class="live-chip">Approved</span></div><canvas id="finance-chart" height="230"></canvas></article>
  <article class="premium-panel mix-panel"><div class="panel-title"><div><span>COMMUNITY</span><h2>Member composition</h2></div></div><div class="donut-layout"><canvas id="member-chart" width="190" height="190"></canvas><div id="member-legend"></div></div></article>
</section>

<section class="lower-grid">
  <article class="premium-panel"><div class="panel-title"><div><span>ATTENTION QUEUE</span><h2>Approvals</h2></div></div><a class="approval-row" href="{% url 'admin:activities_activityreport_changelist' %}?approved__exact=0"><span>Activity reports</span><strong>{{ stats.pending_activities }}</strong></a><a class="approval-row" href="{% url 'admin:finance_financeentry_changelist' %}?approved__exact=0"><span>Finance entries</span><strong>{{ stats.pending_finance }}</strong></a></article>
  <article class="premium-panel"><div class="panel-title"><div><span>NEW CONNECTIONS</span><h2>Recent members</h2></div><a href="{% url 'admin:accounts_member_changelist' %}">View all</a></div>{% for member in stats.recent_members %}<a class="member-row" href="{% url 'admin:accounts_member_change' member.pk %}"><span class="avatar">{{ member.first_name|first|default:"M" }}{{ member.last_name|first }}</span><span><strong>{{ member.first_name }} {{ member.last_name }}</strong><small>{{ member.campus|default:"Campus pending" }}</small></span><time>{{ member.created_at|timesince }} ago</time></a>{% empty %}<p class="empty-state">No members yet.</p>{% endfor %}</article>
</section>

{{ stats.chart_data|json_script:"dashboard-chart-data" }}
<script>
  (() => {
    const output = document.getElementById('sms-balance');
    const button = document.getElementById('refresh-sms-balance');
    async function refreshBalance() {
      button.disabled = true;
      output.textContent = 'Checking current balance…';
      try {
        const response = await fetch("{% url 'admin:sms_balance' %}", {headers: {'Accept': 'application/json'}});
        const data = await response.json();
        if (!response.ok) throw new Error(data.message || 'Balance check failed.');
        output.innerHTML = `<strong>${data.sms_balance}</strong> SMS credits &nbsp;·&nbsp; Main balance <strong>${data.main_balance}</strong>`;
      } catch (error) { output.textContent = error.message; }
      finally { button.disabled = false; }
    }
    button.addEventListener('click', refreshBalance);
    refreshBalance();
  })();
</script>
{% endblock %}

{% block sidebar %}{% endblock %}