{% extends "base.html" %}
{% block title %}Analytics · Networthy HQ{% endblock %}
{% block main_class %}wide{% endblock %}
{% block content %}

<section class="nw-page-head">
  <h1>Analytics</h1>
  <p class="muted">
    Adoption at a glance — account &amp; usage metadata only, no financial values.
    The demo account is excluded.
  </p>
</section>

<!-- Signups -->
<section class="adm-stats">
  <div class="dash-card adm-stat">
    <span class="eyebrow">Total users</span>
    <span class="adm-figure num">{{ total_users }}</span>
    <span class="hero-note">{{ new_today }} today</span>
  </div>
  <div class="dash-card adm-stat">
    <span class="eyebrow">New · 7 days</span>
    <span class="adm-figure num">{{ new_7d }}</span>
  </div>
  <div class="dash-card adm-stat">
    <span class="eyebrow">New · 30 days</span>
    <span class="adm-figure num">{{ new_30d }}</span>
  </div>
  <div class="dash-card adm-stat">
    <span class="eyebrow">Returning</span>
    <span class="adm-figure num">{{ returning }}</span>
    <span class="hero-note">signed in on ≥2 days</span>
  </div>
</section>

<!-- Sign-ins -->
<section class="adm-stats">
  <div class="dash-card adm-stat">
    <span class="eyebrow">Signed in · 24h</span>
    <span class="adm-figure num">{{ logins_24h }}</span>
  </div>
  <div class="dash-card adm-stat">
    <span class="eyebrow">Signed in · 7 days</span>
    <span class="adm-figure num">{{ logins_7d }}</span>
  </div>
  <div class="dash-card adm-stat">
    <span class="eyebrow">Signed in · 30 days</span>
    <span class="adm-figure num">{{ logins_30d }}</span>
  </div>
  <div class="dash-card adm-stat">
    <span class="eyebrow">Total sign-ins</span>
    <span class="adm-figure num">{{ logins_total }}</span>
  </div>
</section>

<!-- Growth -->
{% if signup_chart|length > 1 %}
<section class="dash-card">
  <h2 class="adm-h2">Signups over time</h2>
  <div id="chart"></div>
</section>
{% endif %}

<!-- Funnel -->
<section class="dash-card">
  <h2 class="adm-h2">Activation</h2>
  <div class="adm-funnel">
    {% for f in funnel %}
    <div class="adm-funnel-row">
      <span class="adm-funnel-label">{{ f.label }}</span>
      <div class="goal-bar"><span style="width: {{ '%.1f'|format([f.pct, 100]|min) }}%; background: var(--brand);"></span></div>
      <span class="adm-funnel-val num">{{ f.users }} <span class="muted">· {{ "%.0f"|format(f.pct) }}%</span></span>
    </div>
    {% endfor %}
  </div>
</section>

<!-- Feature adoption -->
<section class="dash-card">
  <h2 class="adm-h2">Feature adoption</h2>
  <table class="holdings adm-features">
    <tbody>
      {% for f in features %}
      <tr>
        <td class="adm-feat-name">{{ f.label }}</td>
        <td class="adm-feat-bar">
          <div class="goal-bar"><span style="width: {{ '%.1f'|format([f.pct, 100]|min) }}%; background: var(--copper);"></span></div>
        </td>
        <td class="num adm-feat-val">{{ f.users }} <span class="muted">· {{ "%.0f"|format(f.pct) }}%</span></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</section>

<!-- Users -->
<section class="dash-card">
  <details {{ 'open' if recent|length <= 25 else '' }}>
    <summary class="adm-summary">Users <span class="muted">· {{ recent|length }} shown</span></summary>
    <table class="holdings adm-users">
      <thead>
        <tr><th>Email</th><th>Joined</th><th>Last seen</th></tr>
      </thead>
      <tbody>
        {% for u in recent %}
        <tr>
          <td class="h-name">{{ u.email }}</td>
          <td>{{ u.joined or "—" }}</td>
          <td>{{ u.last_seen or "—" }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </details>
</section>

{% if signup_chart|length > 1 %}
<script src="/static/chart.js?v={{ version }}"></script>
<script>drawChart({{ signup_chart | tojson }}, {fmt: function (v) { return Math.round(v).toLocaleString('en-IN'); }, label: 'Signups over time'});</script>
{% endif %}

<!-- Feedback -->
{# Kept on the owner-only page because a mailer failure must not mean a report is
   lost. This is the one part of /admin that isn't metadata — it's what people
   chose to write to you. The form asks them not to paste figures. #}
<section class="dash-card adm-feedback">
  <h2>Reports &amp; feedback</h2>
  {% if reports %}
  <ul class="adm-fb-list">
    {% for r in reports %}
    <li>
      <div class="adm-fb-head">
        <span class="adm-fb-kind">{{ r.kind }}</span>
        <span class="muted">{{ r.created_at }}</span>
        <span class="muted adm-fb-from">
          {{ r.reply_to or r.account_email or 'anonymous' }}
        </span>
      </div>
      <p class="adm-fb-msg">{{ r.message }}</p>
    </li>
    {% endfor %}
  </ul>
  {% else %}
  <p class="muted">Nothing yet.</p>
  {% endif %}

  {% if spam_reports %}
  {# Shown, not deleted, and with the reason for each: a filter whose decisions
     can't be inspected is one nobody trusts enough to leave switched on. #}
  <details class="adm-spam">
    <summary>{{ spam_reports|length }} held as spam</summary>
    <ul class="adm-fb-list">
      {% for r in spam_reports %}
      <li>
        <div class="adm-fb-head">
          <span class="adm-fb-kind">{{ r.spam }}</span>
          <span class="muted">{{ r.created_at }}</span>
          <span class="muted adm-fb-from">{{ r.reply_to or 'anonymous' }}</span>
        </div>
        <p class="adm-fb-msg muted">{{ r.message }}</p>
      </li>
      {% endfor %}
    </ul>
  </details>
  {% endif %}
</section>

{% endblock %}