{% extends "base.html" %}
{% from "components/pagination.html" import render_pagination %}
{% from "components/empty_state.html" import empty_state %}

{% block title %}User Management · Admin{% endblock %}

{% macro card(label, value, icon, color) %}
  <div class="col-6 col-md-4 col-xl-2">
    <div class="card admin-metric-card h-100 border-0 shadow-sm">
      <div class="card-body">
        <span class="admin-metric-icon text-bg-{{ color }}-subtle text-{{ color }}"><i class="bi {{ icon }}"></i></span>
        <div class="admin-metric-value">{{ value }}</div>
        <div class="admin-metric-label">{{ label }}</div>
      </div>
    </div>
  </div>
{% endmacro %}

{% block content %}
<div class="admin-page">
  <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
    <div>
      <h1 class="page-title mb-1">User Management</h1>
      <p class="text-muted mb-0">Search, filter and manage marketplace users.</p>
    </div>
    <a class="btn btn-outline-secondary" href="{{ url_for('admin.analytics') }}"><i class="bi bi-graph-up-arrow me-1"></i> Analytics</a>
  </div>

  {# ---------- Summary ---------- #}
  {% set s = summary %}
  <div class="row g-3 mb-4">
    {{ card('Total Users', "{:,}".format(s.total_users), 'bi-people-fill', 'primary') }}
    {{ card('Premium', "{:,}".format(s.premium_users), 'bi-star-fill', 'warning') }}
    {{ card('Free', "{:,}".format(s.free_users), 'bi-person', 'secondary') }}
    {{ card('New (30d)', "{:,}".format(s.new_users_30d), 'bi-person-plus-fill', 'info') }}
    {{ card('Suspended', "{:,}".format(s.suspended_users), 'bi-slash-circle', 'danger') }}
    {{ card('Avg Listings/User', s.avg_listings_per_user, 'bi-box-seam', 'success') }}
  </div>

  {# ---------- Filters (sticky) ---------- #}
  <form method="get" action="{{ url_for('admin.users') }}" class="admin-filters card border-0 shadow-sm mb-3">
    <div class="card-body">
      <div class="row g-2 align-items-end">
        <div class="col-md-4">
          <label class="form-label small mb-1" for="userSearch">Search</label>
          <input id="userSearch" class="form-control" type="search" name="q" value="{{ q }}" placeholder="Name, email or ID">
        </div>
        <div class="col-6 col-md-2">
          <label class="form-label small mb-1" for="fPremium">Premium</label>
          <select id="fPremium" class="form-select" name="premium">
            {% for val, lbl in premium_options %}<option value="{{ val }}" {{ 'selected' if premium == val }}>{{ lbl }}</option>{% endfor %}
          </select>
        </div>
        <div class="col-6 col-md-2">
          <label class="form-label small mb-1" for="fStatus">Status</label>
          <select id="fStatus" class="form-select" name="status">
            {% for val, lbl in status_options %}<option value="{{ val }}" {{ 'selected' if status == val }}>{{ lbl }}</option>{% endfor %}
          </select>
        </div>
        <div class="col-6 col-md-1">
          <label class="form-label small mb-1" for="fRole">Role</label>
          <select id="fRole" class="form-select" name="role">
            {% for val, lbl in role_options %}<option value="{{ val }}" {{ 'selected' if role == val }}>{{ lbl }}</option>{% endfor %}
          </select>
        </div>
        <div class="col-6 col-md-2">
          <label class="form-label small mb-1" for="fSort">Sort</label>
          <select id="fSort" class="form-select" name="sort">
            {% for val, lbl in sort_options %}<option value="{{ val }}" {{ 'selected' if sort == val }}>{{ lbl }}</option>{% endfor %}
          </select>
        </div>
        <div class="col-md-1 d-grid">
          <button type="submit" class="btn btn-primary"><i class="bi bi-funnel"></i></button>
        </div>
      </div>
    </div>
  </form>

  {# ---------- Table ---------- #}
  <div class="card border-0 shadow-sm">
    <div class="table-responsive">
      <table class="table admin-table align-middle mb-0">
        <thead>
          <tr>
            <th>User</th><th>Role</th><th>Premium</th>
            <th class="text-end">Listings</th><th class="text-end">Featured</th>
            <th>Joined</th><th>Last Login</th><th>Status</th><th class="text-end">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for r in rows %}
            {% set detail_url = url_for('admin.user_detail', public_id=r.public_id) %}
            <tr class="admin-row-clickable" data-href="{{ detail_url }}">
              <td>
                <div class="d-flex align-items-center gap-2">
                  <span class="admin-user-avatar">
                    {% if r.profile_picture %}<img src="{{ url_for('auth.profile_picture', filename=r.profile_picture) }}" alt="">
                    {% else %}{{ r.full_name[0]|upper }}{% endif %}
                  </span>
                  <div class="min-w-0">
                    <a class="fw-semibold text-decoration-none d-block text-truncate" href="{{ detail_url }}">{{ r.full_name }}</a>
                    <span class="text-muted small">{{ r.email }}</span>
                  </div>
                </div>
              </td>
              <td><span class="badge {{ 'text-bg-dark' if r.role == 'super_admin' else 'text-bg-light' }}">{{ 'Admin' if r.role == 'super_admin' else 'Student' }}</span></td>
              <td>{% if r.is_premium %}<span class="badge text-bg-warning">Premium</span>{% else %}<span class="badge text-bg-secondary-subtle text-secondary">Free</span>{% endif %}</td>
              <td class="text-end">{{ "{:,}".format(r.listings) }}</td>
              <td class="text-end">{{ "{:,}".format(r.featured) }}</td>
              <td class="text-nowrap">{{ r.joined.strftime('%d %b %Y') }}</td>
              <td class="text-nowrap">{% if r.last_login %}{{ r.last_login.strftime('%d %b %Y') }}{% else %}<span class="text-muted">—</span>{% endif %}</td>
              <td><span class="badge status-{{ r.account_status }}">{{ r.account_status|title }}</span></td>
              <td class="text-end">
                <a class="btn btn-sm btn-outline-primary" href="{{ detail_url }}">Manage <i class="bi bi-arrow-right" aria-hidden="true"></i></a>
              </td>
            </tr>
          {% else %}
            <tr>
              <td colspan="9" class="p-0">
                {{ empty_state('bi-people', 'No users found',
                     'No users match the current search and filters.',
                     reset_label='Reset filters', reset_url=url_for('admin.users'), compact=true) }}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  {{ render_pagination(pagination, 'admin.users', filter_args) }}
</div>
{% endblock %}