{% extends "base.html" %}

{% block title %}Verification · {{ account.email }} · Admin{% endblock %}

{% set name = profile.full_name if profile else account.email.split('@')[0] %}
{% set status = profile.verification_status.value if profile else 'not_verified' %}
{% set action_tone = {'submitted': 'info', 'updated': 'warning', 'approved': 'success', 'rejected': 'danger'} %}

{% block content %}
<div class="admin-page">
  <a class="premium-back" href="{{ url_for('admin.verifications') }}"><i class="bi bi-arrow-left"></i> Back to verifications</a>

  <div class="card border-0 shadow-sm mb-4">
    <div class="card-body p-4">
      <div class="d-flex flex-wrap align-items-center gap-3 mb-3">
        <span class="admin-user-avatar admin-user-avatar-lg">
          {% if profile and profile.profile_picture %}<img src="{{ url_for('auth.profile_picture', filename=profile.profile_picture) }}" alt="">
          {% else %}{{ name[0]|upper }}{% endif %}
        </span>
        <div class="flex-grow-1 min-w-0">
          <div class="d-flex flex-wrap align-items-center gap-2 mb-1">
            <h1 class="h4 fw-bold mb-0">{{ name }}</h1>
            {% if status == 'verified' %}<span class="badge text-bg-success">Verified</span>
            {% elif status == 'pending' %}<span class="badge text-bg-warning">Pending Review</span>
            {% elif status == 'rejected' %}<span class="badge text-bg-danger">Rejected</span>
            {% else %}<span class="badge text-bg-secondary">Not Verified</span>{% endif %}
          </div>
          <p class="text-muted mb-0">{{ account.email }}</p>
        </div>
      </div>

      {# ---------- Submitted information ---------- #}
      <h2 class="admin-section-title">Submitted information</h2>
      <dl class="row g-2 mb-0">
        <dt class="col-sm-3 text-muted">Mobile number</dt><dd class="col-sm-9">{{ profile.phone_number or '—' if profile else '—' }}</dd>
        <dt class="col-sm-3 text-muted">University</dt><dd class="col-sm-9">{{ profile.university_name or '—' if profile else '—' }}</dd>
        <dt class="col-sm-3 text-muted">Student ID</dt><dd class="col-sm-9">{{ profile.university_student_id or '—' if profile else '—' }}</dd>
        <dt class="col-sm-3 text-muted">Submitted</dt>
        <dd class="col-sm-9">{% if profile and profile.verification_submitted_at %}{{ profile.verification_submitted_at.strftime('%d %b %Y, %H:%M') }}{% else %}—{% endif %}</dd>
        {% if status == 'rejected' and profile and profile.verification_reason %}
          <dt class="col-sm-3 text-muted">Rejection reason</dt><dd class="col-sm-9">{{ profile.verification_reason }}</dd>
        {% endif %}
      </dl>
    </div>
  </div>

  {# ---------- Verification timeline (immutable audit trail, newest first) ---------- #}
  <div class="card border-0 shadow-sm mb-4">
    <div class="card-header border-0 px-4 py-3"><h2 class="h6 mb-0">Verification timeline</h2></div>
    <div class="card-body p-4">
      {% if history %}
        <ul class="verify-timeline list-unstyled mb-0">
          {% for h in history %}
            <li class="verify-timeline-item">
              <span class="verify-timeline-dot verify-timeline-dot--{{ action_tone.get(h.action, 'secondary') }}"></span>
              <div class="verify-timeline-body">
                <div class="d-flex flex-wrap align-items-center gap-2">
                  <span class="badge text-bg-{{ action_tone.get(h.action, 'secondary') }}">{{ h.action|upper }}</span>
                  <time class="text-muted small" data-relative datetime="{{ h.created_at.isoformat() }}">{{ h.created_at.strftime('%d %b %Y, %H:%M') }}</time>
                </div>
                {% if h.action in ('submitted', 'updated') %}
                  <dl class="row g-1 small mt-2 mb-0">
                    <dt class="col-sm-3 text-muted">University</dt><dd class="col-sm-9 mb-0">{{ h.university or '—' }}</dd>
                    <dt class="col-sm-3 text-muted">Student ID</dt><dd class="col-sm-9 mb-0">{{ h.student_id or '—' }}</dd>
                    <dt class="col-sm-3 text-muted">Phone</dt><dd class="col-sm-9 mb-0">{{ h.phone or '—' }}</dd>
                  </dl>
                {% elif h.action == 'approved' %}
                  <div class="small text-muted mt-1">By: {{ h.reviewer or '—' }}</div>
                {% elif h.action == 'rejected' %}
                  <div class="small text-muted mt-1">By: {{ h.reviewer or '—' }}</div>
                  {% if h.reason %}<div class="small mt-1"><span class="text-muted">Reason:</span> {{ h.reason }}</div>{% endif %}
                {% endif %}
              </div>
            </li>
          {% endfor %}
        </ul>
      {% else %}
        <p class="text-muted mb-0">No verification history yet.</p>
      {% endif %}
    </div>
  </div>

  {# ---------- Moderation actions (only while pending) ---------- #}
  {% if status == 'pending' %}
    <div class="card border-0 shadow-sm">
      <div class="card-header border-0 px-4 py-3"><h2 class="h6 mb-0">Review decision</h2></div>
      <div class="card-body p-4">
        <div class="d-flex flex-wrap gap-3 align-items-start">
          <form method="post" action="{{ url_for('admin.approve_verification', public_id=account.public_id) }}"
                onsubmit="return confirm('Approve verification for {{ account.email|e }}?');">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button class="btn btn-success"><i class="bi bi-check-lg me-1"></i> Approve &amp; grant badge</button>
          </form>

          <form method="post" action="{{ url_for('admin.reject_verification', public_id=account.public_id) }}" class="flex-grow-1">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <label class="form-label small text-muted" for="reason">Rejection reason (optional)</label>
            <div class="input-group">
              <input type="text" class="form-control" id="reason" name="reason" maxlength="300"
                     placeholder="e.g. Student ID doesn't match university records">
              <button class="btn btn-outline-danger" type="submit"><i class="bi bi-x-lg me-1"></i> Reject</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  {% else %}
    <p class="text-muted">This request has already been reviewed — no further action is available.</p>
  {% endif %}
</div>
{% endblock %}