{% extends 'base.html' %}

{% block content %}
  <section class="hero-card admin-hero">
    <div>
      <p class="eyebrow">Admin Overview</p>
      <h2>{{ admin.display_name }}，欢迎来到春日行动指挥台</h2>
      <p class="lead">你可以在这里维护用户、分组、活动任务和图片审核流程。</p>
    </div>
    <div class="hero-badges">
      <span class="pill">角色 {{ '超级管理员' if admin.role == 'superadmin' else '管理员' }}</span>
      <span class="pill">待审核 {{ stats.pending_count }} 项</span>
      <span class="pill">在线管理员 {{ stats.online_admin_count }}</span>
    </div>
  </section>

  <section class="stats-grid">
    <article class="glass-card stat-card">
      <span>用户总数</span>
      <strong>{{ stats.user_count }}</strong>
    </article>
    <article class="glass-card stat-card">
      <span>小组数量</span>
      <strong>{{ stats.group_count }}</strong>
    </article>
    <article class="glass-card stat-card">
      <span>活动数量</span>
      <strong>{{ stats.activity_count }}</strong>
    </article>
    <article class="glass-card stat-card">
      <span>在线用户</span>
      <strong>{{ stats.online_user_count }}</strong>
    </article>
  </section>

  <section class="two-column-layout">
    <article class="glass-card quick-panel">
      <div class="section-head">
        <div>
          <p class="eyebrow">Quick Links</p>
          <h3>常用入口</h3>
        </div>
      </div>
      <div class="action-grid">
        <a class="btn btn-secondary" href="/admin/users">录入用户</a>
        <a class="btn btn-secondary" href="/admin/groups">管理小组</a>
        <a class="btn btn-secondary" href="/admin/activities">发布活动</a>
        <a class="btn btn-primary" href="/admin/reviews">进入审核中心</a>
      </div>
    </article>

    <article class="glass-card quick-panel">
      <div class="section-head">
        <div>
          <p class="eyebrow">Recent Activities</p>
          <h3>最近创建的活动</h3>
        </div>
      </div>
      <div class="stack-list">
        {% for activity in recent_activities %}
          <div class="stack-item">
            <div>
              <strong>{{ activity.title }}</strong>
              <p class="muted">{{ activity.tasks|length }} 个任务 · {{ activity.start_at|datetime_local }}</p>
              <p class="muted">{{ '用户端可见' if activity.is_visible else '用户端隐藏' }} · {{ '排行榜可见' if activity.leaderboard_visible else '排行榜隐藏' }}</p>
            </div>
            <span class="status-badge {% if activity.is_visible %}status-approved{% else %}status-rejected{% endif %}">{{ '活动可见' if activity.is_visible else '活动隐藏' }}</span>
          </div>
        {% else %}
          <p class="muted">还没有发布活动。</p>
        {% endfor %}
      </div>
    </article>
  </section>

  {% if online_overview %}
    <section class="page-grid admin-page-grid">
      <article class="glass-card table-panel">
        <div class="section-head">
          <div>
            <p class="eyebrow">Presence</p>
            <h3>管理员在线状态</h3>
          </div>
        </div>
        <div class="stack-list">
          {% for item in online_overview.admins %}
            <div class="stack-item">
              <strong>{{ item.name }}</strong>
              <span class="status-badge {% if item.is_online %}status-approved{% else %}status-rejected{% endif %}">
                {{ '在线' if item.is_online else '离线' }} · {{ item.last_seen_at }}
              </span>
            </div>
          {% endfor %}
        </div>
      </article>

      <article class="glass-card table-panel">
        <div class="section-head">
          <div>
            <p class="eyebrow">Presence</p>
            <h3>用户在线状态</h3>
          </div>
        </div>
        <div class="stack-list">
          {% for item in online_overview.users[:18] %}
            <div class="stack-item">
              <strong>{{ item.name }}</strong>
              <span class="status-badge {% if item.is_online %}status-approved{% else %}status-rejected{% endif %}">
                {{ '在线' if item.is_online else '离线' }} · {{ item.last_seen_at }}
              </span>
            </div>
          {% else %}
            <p class="muted">暂无用户。</p>
          {% endfor %}
        </div>
      </article>
    </section>
  {% endif %}
{% endblock %}