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

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

{% block admin_head %}
<style>
  .funnel-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  @media (min-width: 768px) {
    .funnel-grid { grid-template-columns: repeat(5, 1fr); }
  }
</style>
{% endblock %}

{% block admin_content %}
  <header class="flex justify-between items-center mb-8">
    <div>
      <h1 class="text-2xl">Admin Dashboard</h1>
      {% if session.get('admin_impersonating') %}
      <div class="flex items-center gap-2 mt-2">
        <span class="badge-warning">Currently impersonating a user</span>
        <form method="post" action="{{ url_for('admin.stop_impersonating') }}" class="m-0">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit" class="btn-outline btn-sm">Stop</button>
        </form>
      </div>
      {% endif %}
    </div>
    <form method="post" action="{{ url_for('auth.logout') }}">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <button type="submit" class="btn-outline">Sign Out</button>
    </form>
  </header>

  <!-- Stats Grid -->
  <div class="grid-3 mb-8">
    <div class="card text-center">
      <p class="card-header">Total Users</p>
      <p class="text-3xl font-bold text-navy metric">{{ stats.users_total }}</p>
      <p class="text-xs text-slate mt-1">+{{ stats.users_today }} today, +{{ stats.users_week }} this week</p>
    </div>
    <div class="card text-center">
      <p class="card-header">Active Subscriptions</p>
      <p class="text-3xl font-bold text-navy metric">{{ stats.active_subscriptions }}</p>
    </div>
    <div class="card text-center">
      <p class="card-header">Task Queue</p>
      <p class="text-3xl font-bold text-navy metric">{{ stats.tasks_pending }} <span class="text-base font-normal text-slate">pending</span></p>
      {% if stats.tasks_failed > 0 %}
      <p class="text-xs text-danger mt-1">{{ stats.tasks_failed }} failed</p>
      {% else %}
      <p class="text-xs text-accent mt-1">0 failed</p>
      {% endif %}
    </div>
  </div>

  <!-- Lead Funnel -->
  <p class="text-xs font-semibold text-slate uppercase tracking-wider mb-2">Lead Funnel</p>
  <div class="funnel-grid mb-8">
    <div class="card text-center border-l-4 border-l-electric" style="padding:0.75rem">
      <p class="text-xs text-slate">Planner Users</p>
      <p class="text-xl font-bold text-navy">{{ stats.planner_users }}</p>
    </div>
    <div class="card text-center border-l-4 border-l-electric" style="padding:0.75rem">
      <p class="text-xs text-slate">Total Leads</p>
      <p class="text-xl font-bold text-navy">{{ stats.leads_total }}</p>
    </div>
    <div class="card text-center border-l-4 border-l-electric" style="padding:0.75rem">
      <p class="text-xs text-slate">New</p>
      <p class="text-xl font-bold text-navy">{{ stats.leads_new }}</p>
    </div>
    <div class="card text-center border-l-4 border-l-electric" style="padding:0.75rem">
      <p class="text-xs text-slate">Verified</p>
      <p class="text-xl font-bold text-navy">{{ stats.leads_verified }}</p>
    </div>
    <div class="card text-center border-l-4 border-l-electric" style="padding:0.75rem">
      <p class="text-xs text-slate">Unlocked</p>
      <p class="text-xl font-bold text-navy">{{ stats.leads_unlocked }}</p>
    </div>
  </div>

  <!-- Supplier Stats -->
  <p class="text-xs font-semibold text-slate uppercase tracking-wider mb-2">Supplier Funnel</p>
  <div class="funnel-grid mb-8">
    <div class="card text-center border-l-4 border-l-accent" style="padding:0.75rem">
      <p class="text-xs text-slate">Claimed Suppliers</p>
      <p class="text-xl font-bold text-navy">{{ stats.suppliers_claimed }}</p>
    </div>
    <div class="card text-center border-l-4 border-l-accent" style="padding:0.75rem">
      <p class="text-xs text-slate">Growth Tier</p>
      <p class="text-xl font-bold text-navy">{{ stats.suppliers_growth }}</p>
    </div>
    <div class="card text-center border-l-4 border-l-accent" style="padding:0.75rem">
      <p class="text-xs text-slate">Pro Tier</p>
      <p class="text-xl font-bold text-navy">{{ stats.suppliers_pro }}</p>
    </div>
    <div class="card text-center border-l-4 border-l-accent" style="padding:0.75rem">
      <p class="text-xs text-slate">Credits Spent</p>
      <p class="text-xl font-bold text-navy">{{ stats.total_credits_spent }}</p>
    </div>
    <div class="card text-center border-l-4 border-l-accent" style="padding:0.75rem">
      <p class="text-xs text-slate">Leads Forwarded</p>
      <p class="text-xl font-bold text-navy">{{ stats.leads_unlocked_by_suppliers }}</p>
    </div>
  </div>

  <div class="grid-2">
    <!-- Recent Users -->
    <section>
      <h2 class="text-xl mb-4">Recent Users</h2>
      <div class="card">
        {% 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>{{ u.plan or 'free' }}</td>
              <td class="mono text-sm">{{ u.created_at[:10] }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
        <a href="{{ url_for('admin.users') }}" class="text-sm mt-3 inline-block">View all &rarr;</a>
        {% else %}
        <p class="text-slate text-sm">No users yet.</p>
        {% endif %}
      </div>
    </section>

    <!-- Failed Tasks -->
    <section>
      <h2 class="text-xl mb-4">Failed Tasks</h2>
      <div class="card">
        {% 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>{{ task.task_name }}</td>
              <td><span class="text-xs text-slate">{{ task.error[:50] }}...</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>
        <a href="{{ url_for('admin.tasks') }}" class="text-sm mt-3 inline-block">View all &rarr;</a>
        {% else %}
        <p class="text-accent text-sm">No failed tasks</p>
        {% endif %}
      </div>
    </section>
  </div>
{% endblock %}
