{% set admin_page = "dashboard" %}
{% extends "admin/base_admin.html" %}

{% block title %}Dashboard - {{ config.APP_NAME }} Admin{% endblock %}
{% block topbar_title %}Dashboard{% endblock %}

{% block admin_content %}
  <!-- Stats Grid -->
  <div class="grid-4 mb-8">
    <div class="card text-center" style="margin-bottom:0;">
      <p class="card-header">Total Users</p>
      <p class="text-3xl font-bold metric" style="color:#2C1810;">{{ stats.users_total }}</p>
      <p class="text-xs text-stone mt-1">+{{ stats.users_today }} today &middot; +{{ stats.users_week }} this week</p>
    </div>
    <div class="card text-center" style="margin-bottom:0;">
      <p class="card-header">Active Subscriptions</p>
      <p class="text-3xl font-bold metric" style="color:#2C1810;">{{ stats.active_subscriptions }}</p>
      <p class="text-xs text-stone mt-1">&nbsp;</p>
    </div>
    <div class="card text-center" style="margin-bottom:0;">
      <p class="card-header">Task Queue</p>
      <p class="text-3xl font-bold metric" style="color:#2C1810;">{{ stats.tasks_pending }} <span class="text-base font-normal text-stone">pending</span></p>
      {% if stats.tasks_failed > 0 %}
      <p class="text-xs mt-1" style="color:#EF4444;">{{ stats.tasks_failed }} failed</p>
      {% else %}
      <p class="text-xs mt-1" style="color:#15803D;">All clear</p>
      {% endif %}
    </div>
    <div class="card text-center" style="margin-bottom:0;">
      <p class="card-header">Coffee Data</p>
      <p class="text-3xl font-bold metric" style="color:#2C1810;">{{ stats.commodity_count }}</p>
      <p class="text-xs text-stone mt-1">commodities &middot; {{ stats.data_year_range }}</p>
    </div>
  </div>

  <!-- Feedback/Waitlist row -->
  <div class="grid-2 mb-8">
    <div class="card" style="margin-bottom:0;">
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;">
        <p class="card-header" style="margin:0;">Waitlist</p>
        <a href="{{ url_for('admin.waitlist') }}" class="text-xs" style="color:#B45309;">View all &rarr;</a>
      </div>
      <p class="text-2xl font-bold metric" style="color:#2C1810;">{{ stats.waitlist_count }}</p>
      <p class="text-xs text-stone mt-1">people waiting</p>
    </div>
    <div class="card" style="margin-bottom:0;">
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;">
        <p class="card-header" style="margin:0;">Feedback</p>
        <a href="{{ url_for('admin.feedback') }}" class="text-xs" style="color:#B45309;">View all &rarr;</a>
      </div>
      <p class="text-2xl font-bold metric" style="color:#2C1810;">{{ stats.feedback_unread }}</p>
      <p class="text-xs text-stone mt-1">unread messages</p>
    </div>
  </div>

  <div class="grid-2">
    <!-- Recent Users -->
    <section>
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
        <h2 class="text-xl" style="margin:0;">Recent Users</h2>
        <a href="{{ url_for('admin.users') }}" class="text-sm">View all &rarr;</a>
      </div>
      <div class="card" style="padding:0;overflow:hidden;">
        {% if recent_users %}
        <table class="table">
          <thead>
            <tr>
              <th>Email</th>
              <th>Plan</th>
              <th>Joined</th>
            </tr>
          </thead>
          <tbody>
            {% for u in recent_users %}
            <tr>
              <td><a href="{{ url_for('admin.user_detail', user_id=u.id) }}">{{ u.email }}</a></td>
              <td>
                {% if u.plan %}
                <span class="badge">{{ u.plan }}</span>
                {% else %}
                <span class="text-xs text-stone">free</span>
                {% endif %}
              </td>
              <td class="mono text-sm">{{ u.created_at[:10] }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
        {% else %}
        <p class="text-stone text-sm" style="padding:16px;">No users yet.</p>
        {% endif %}
      </div>
    </section>

    <!-- Failed Tasks -->
    <section>
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
        <h2 class="text-xl" style="margin:0;">Failed Tasks</h2>
        <a href="{{ url_for('admin.tasks') }}" class="text-sm">View all &rarr;</a>
      </div>
      <div class="card" style="padding:0;overflow:hidden;">
        {% if failed_tasks %}
        <table class="table">
          <thead>
            <tr>
              <th>Task</th>
              <th>Error</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for task in failed_tasks[:5] %}
            <tr>
              <td><code class="text-xs px-1 rounded" style="background:#F5F0EB;">{{ task.task_name }}</code></td>
              <td><span class="text-xs text-stone">{{ (task.error or '')[:50] }}{% if task.error and task.error|length > 50 %}...{% endif %}</span></td>
              <td>
                <form method="post" action="{{ url_for('admin.task_retry', task_id=task.id) }}" class="m-0">
                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                  <button type="submit" class="btn-outline btn-sm">Retry</button>
                </form>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
        {% else %}
        <p class="text-sm" style="padding:16px;color:#15803D;">No failed tasks &mdash; all clear.</p>
        {% endif %}
      </div>
    </section>
  </div>
{% endblock %}
