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

{% block title %}Student Verifications · Admin{% endblock %}

{% macro kpi(label, value, icon, color) %}
  <div class="col-6 col-md-4 col-xl">
    <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 %}

{# A university name links to its Campus Overview page. #}
{% macro uni_link(name) %}
  <a href="{{ url_for('admin.campus_overview', university_name=name) }}"
     title="View Campus Overview">{{ name }}</a>
{% endmacro %}

{# Rank medal for the top three, plain number afterwards. #}
{% set medals = {1: '🥇', 2: '🥈', 3: '🥉'} %}

{% set action_tone = {'submitted': 'info', 'updated': 'warning', 'approved': 'success', 'rejected': 'danger'} %}

{% block content %}
<div class="admin-page">
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb small">
      <li class="breadcrumb-item"><a href="{{ url_for('admin.analytics') }}">Admin</a></li>
      <li class="breadcrumb-item active" aria-current="page">Student Verification</li>
    </ol>
  </nav>
  <div class="page-header mb-4">
    <h1 class="h3 fw-bold mb-1">Student Verifications</h1>
    <p class="text-muted mb-0">Review pending Verified-Student requests and approve or reject them.</p>
  </div>

  {# ---------- Dashboard statistics (all computed in the service) ---------- #}
  <div class="row g-3 mb-4">
    {{ kpi('Pending Verification', "{:,}".format(dashboard.pending), 'bi-hourglass-split', 'warning') }}
    {{ kpi('Verified Students', "{:,}".format(dashboard.verified), 'bi-patch-check-fill', 'success') }}
    {{ kpi('Rejected', "{:,}".format(dashboard.rejected), 'bi-x-circle-fill', 'danger') }}
    {{ kpi('Verification Rate', "%.1f%%"|format(dashboard.verification_rate), 'bi-graph-up-arrow', 'primary') }}
    {{ kpi('Avg Review Time',
           (("%.1f Days"|format(dashboard.avg_review_days)) if dashboard.avg_review_days is not none else '—'),
           'bi-clock-history', 'info') }}
  </div>

  {# ---------- Recent verification activity ---------- #}
  <div class="card border-0 shadow-sm mb-4">
    <div class="card-header border-0 px-4 py-3"><h2 class="h6 mb-0">Recent verification activity</h2></div>
    <div class="card-body p-0">
      <ul class="list-group list-group-flush">
        {% for a in dashboard.recent_activity %}
          <li class="list-group-item d-flex align-items-center justify-content-between px-4 py-3">
            <div>
              <span class="fw-semibold">{{ a.name }}</span>
              <span class="badge text-bg-{{ action_tone.get(a.action, 'secondary') }} ms-2">{{ a.action|capitalize }}</span>
            </div>
            <time class="text-muted small text-nowrap" data-relative datetime="{{ a.created_at.isoformat() }}">{{ a.created_at.strftime('%d %b %Y') }}</time>
          </li>
        {% else %}
          <li class="list-group-item text-muted text-center py-4 px-4">No verification activity yet.</li>
        {% endfor %}
      </ul>
    </div>
  </div>

  {# ---------- University Analytics (presentation only — figures from the service) ---------- #}
  <h2 class="admin-section-title mb-1">University Analytics</h2>
  <p class="text-muted mb-4">Insights into verification activity across participating universities.</p>

  {% if universities.total_universities == 0 %}
    {# Empty state — no university has submitted anything yet #}
    {{ empty_state('bi-building', 'No university verification data yet',
         'Analytics will appear once students begin submitting verification requests.') }}
  {% else %}
    {% set single = universities.total_universities == 1 %}

    {# ----- Growth insight cards ----- #}
    <div class="row g-3 mb-4">
      <div class="col-12 col-md-4">
        <div class="card border-0 shadow-sm h-100">
          <div class="card-body">
            <div class="text-muted small text-uppercase mb-1">Total Universities</div>
            <div class="h3 fw-bold mb-0">{{ "{:,}".format(universities.total_universities) }}</div>
            <div class="text-muted small">Submitted at least one request</div>
          </div>
        </div>
      </div>
      {% if single %}
        {# One university → the min/max/top stats would be redundant; show context. #}
        <div class="col-12 col-md-8">
          <div class="card border-0 shadow-sm h-100">
            <div class="card-body d-flex align-items-start gap-3">
              <span class="admin-metric-icon text-bg-info-subtle text-info"><i class="bi bi-info-circle"></i></span>
              <div>
                <div class="fw-semibold mb-1">University analytics will become more meaningful as additional universities join Student Bazaar.</div>
                <div class="text-muted small">Current participating university:
                  <strong>{{ universities.breakdown[0].university if universities.breakdown else '—' }}</strong></div>
              </div>
            </div>
          </div>
        </div>
      {% else %}
        <div class="col-12 col-md-4">
          <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
              <div class="text-muted small text-uppercase mb-1"><i class="bi bi-trophy-fill text-warning me-1"></i>Largest Campus</div>
              <div class="h5 fw-bold mb-0 text-truncate">{{ universities.largest.university if universities.largest else '—' }}</div>
              <div class="text-muted small">{{ universities.largest.verified ~ ' Verified Students' if universities.largest else 'No verified students yet' }}</div>
            </div>
          </div>
        </div>
        <div class="col-12 col-md-4">
          <div class="card border-0 shadow-sm h-100">
            <div class="card-body">
              <div class="text-muted small text-uppercase mb-1"><i class="bi bi-mortarboard-fill text-primary me-1"></i>Smallest Active Campus</div>
              <div class="h5 fw-bold mb-0 text-truncate">{{ universities.smallest_active.university if universities.smallest_active else '—' }}</div>
              <div class="text-muted small">{{ universities.smallest_active.verified ~ ' Verified Student' + ('s' if universities.smallest_active.verified != 1 else '') if universities.smallest_active else 'No verified students yet' }}</div>
            </div>
          </div>
        </div>
      {% endif %}
    </div>

    <div class="row g-4 mb-4">
      {% if not single %}
        {# ----- Top Verified Universities (hidden when only one university) ----- #}
        <div class="col-12 col-xl-6">
          <div class="card border-0 shadow-sm h-100">
            <div class="card-header border-0 px-4 py-3"><h3 class="h6 mb-0">Top Verified Universities</h3></div>
            <div class="table-responsive">
              <table class="table align-middle mb-0">
                <thead>
                  <tr><th class="ps-4">#</th><th>University</th><th class="text-end">Verified</th><th class="text-end pe-4">%</th></tr>
                </thead>
                <tbody>
                  {% for r in universities.top_verified %}
                    <tr class="{{ 'is-active-university' if r.university == university_filter }}">
                      <td class="ps-4 fs-6">{{ medals.get(r.rank, r.rank) }}</td>
                      <td>{{ uni_link(r.university) }}</td>
                      <td class="text-end">{{ "{:,}".format(r.verified) }}</td>
                      <td class="text-end pe-4">{{ "%.1f%%"|format(r.pct) }}</td>
                    </tr>
                  {% else %}
                    <tr><td colspan="4" class="text-center text-muted py-4">No verified students yet.</td></tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      {% endif %}

      {# ----- University Verification Breakdown (client-side search) ----- #}
      <div class="{{ 'col-12 col-xl-6' if not single else 'col-12' }}">
        <div class="card border-0 shadow-sm h-100">
          <div class="card-header border-0 px-4 py-3 d-flex flex-wrap gap-2 align-items-center justify-content-between">
            <h3 class="h6 mb-0">University Verification Breakdown</h3>
            <div class="activity-search">
              <i class="bi bi-search" aria-hidden="true"></i>
              <input type="search" id="uniSearch" class="form-control form-control-sm" placeholder="Search university…" aria-label="Search university" autocomplete="off">
            </div>
          </div>
          <div class="table-responsive">
            <table class="table align-middle mb-0" id="uniBreakdownTable">
              <thead>
                <tr><th class="ps-4">University</th><th class="text-end">Pending</th><th class="text-end">Verified</th><th class="text-end">Rejected</th><th class="text-end pe-4">Total</th></tr>
              </thead>
              <tbody>
                {% for r in universities.breakdown %}
                  <tr data-university="{{ r.university|lower }}" class="{{ 'is-active-university' if r.university == university_filter }}">
                    <td class="ps-4">{{ uni_link(r.university) }}</td>
                    <td class="text-end">{{ r.pending }}</td>
                    <td class="text-end">{{ r.verified }}</td>
                    <td class="text-end">{{ r.rejected }}</td>
                    <td class="text-end pe-4 fw-semibold">{{ r.total }}</td>
                  </tr>
                {% endfor %}
                <tr data-uni-noresults hidden><td colspan="5" class="text-center text-muted py-4">No universities match your search.</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  {% endif %}

  {# ---------- Pending queue (optionally filtered by university) ---------- #}
  <h2 class="admin-section-title">Pending queue</h2>
  {% if university_filter %}
    <div class="alert alert-info d-flex flex-wrap align-items-center justify-content-between gap-2" role="alert">
      <div class="mb-0">
        Showing verification requests for
        <strong><i class="bi bi-building me-1" aria-hidden="true"></i>{{ university_filter }}</strong>
      </div>
      <a class="btn btn-sm btn-outline-secondary" href="{{ url_for('admin.verifications') }}">
        <i class="bi bi-arrow-left me-1" aria-hidden="true"></i> View All Universities
      </a>
    </div>
  {% endif %}
  {% if pending %}
    <div class="card border-0 shadow-sm">
      <div class="table-responsive">
        <table class="table align-middle mb-0">
          <thead>
            <tr>
              <th class="ps-4">Student</th>
              <th>University</th>
              <th>Student ID</th>
              <th>Mobile</th>
              <th>Submitted</th>
              <th class="text-end pe-4">Action</th>
            </tr>
          </thead>
          <tbody>
            {% for user in pending %}
              {% set p = user.profile %}
              <tr>
                <td class="ps-4">
                  <div class="fw-semibold">{{ p.full_name if p else user.email }}</div>
                  <div class="text-muted small">{{ user.email }}</div>
                </td>
                <td>{{ p.university_name or '—' }}</td>
                <td>{{ p.university_student_id or '—' }}</td>
                <td>{{ p.phone_number or '—' }}</td>
                <td class="text-nowrap text-muted small">
                  {% if p and p.verification_submitted_at %}{{ p.verification_submitted_at.strftime('%d %b %Y') }}{% else %}—{% endif %}
                </td>
                <td class="text-end pe-4">
                  <a class="btn btn-sm btn-outline-primary" href="{{ url_for('admin.verification_detail', public_id=user.public_id) }}">
                    Review
                  </a>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  {% else %}
    {{ empty_state('bi-patch-check', 'No pending verifications',
         'Student verification requests awaiting review will appear here.') }}
  {% endif %}
</div>

<script>
  // Client-side filter for the university breakdown table.
  (function () {
    var input = document.getElementById('uniSearch');
    if (!input) return;
    var rows = Array.prototype.slice.call(
      document.querySelectorAll('#uniBreakdownTable tbody tr[data-university]'));
    var noResults = document.querySelector('[data-uni-noresults]');
    input.addEventListener('input', function () {
      var q = input.value.trim().toLowerCase();
      var any = false;
      rows.forEach(function (row) {
        var match = !q || row.getAttribute('data-university').indexOf(q) !== -1;
        row.hidden = !match;
        if (match) any = true;
      });
      if (noResults) noResults.hidden = any || rows.length === 0;
    });
  })();
</script>
{% endblock %}