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

{% block title %}{{ university }} · Campus Overview · Admin{% endblock %}

{% macro kpi(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 %}

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

{% block content %}
<div class="admin-page">
  {# ---------- Header ---------- #}
  <div class="d-flex flex-wrap align-items-start justify-content-between gap-3 mb-3">
    <div>
      <h1 class="h3 fw-bold mb-1"><i class="bi bi-building me-2" aria-hidden="true"></i>{{ university }}</h1>
      <div class="text-uppercase text-muted small fw-semibold mb-1">Campus Overview</div>
      <p class="text-muted small mb-0">Verification and marketplace insights for this university.</p>
    </div>
    <a class="btn btn-outline-secondary" href="{{ url_for('admin.verifications') }}">
      <i class="bi bi-arrow-left me-1" aria-hidden="true"></i> Back to University Analytics
    </a>
  </div>

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

  <div class="row g-4 mb-4">
    {# ---------- Verified Student Directory ---------- #}
    <div class="col-12 col-xl-7">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-header border-0 px-4 py-3 d-flex flex-wrap align-items-center justify-content-between gap-2">
          <h2 class="h6 mb-0">Verified Student Directory</h2>
          <a class="btn btn-sm btn-outline-primary" href="{{ url_for('admin.verifications', university=university) }}">
            <i class="bi bi-hourglass-split me-1" aria-hidden="true"></i> View Pending Verification Requests
          </a>
        </div>
        {% if students.items %}
          <div class="table-responsive">
            <table class="table align-middle mb-0">
              <thead>
                <tr><th class="ps-4">Student</th><th>Student ID</th><th>Verified On</th><th class="text-end pe-4">Status</th></tr>
              </thead>
              <tbody>
                {% for u in students.items %}
                  {% set p = u.profile %}
                  <tr>
                    <td class="ps-4">
                      <a class="d-inline-flex align-items-center gap-2 text-decoration-none text-body"
                         href="{{ url_for('admin.verification_detail', public_id=u.public_id) }}">
                        <span class="admin-user-avatar">
                          {% if p and p.profile_picture %}<img src="{{ url_for('auth.profile_picture', filename=p.profile_picture) }}" alt="">
                          {% else %}{{ (p.full_name if p else u.email)[0]|upper }}{% endif %}
                        </span>
                        <span class="fw-semibold">{{ p.full_name if p else u.email }}</span>
                      </a>
                    </td>
                    <td>{{ p.university_student_id or '—' if p else '—' }}</td>
                    <td class="text-nowrap text-muted small">
                      {% if p and p.verification_reviewed_at %}{{ p.verification_reviewed_at.strftime('%d %b %Y') }}{% else %}—{% endif %}
                    </td>
                    <td class="text-end pe-4"><span class="badge text-bg-success">Verified</span></td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% if students.pages > 1 %}
            <div class="p-3">
              {{ render_pagination(students, 'admin.campus_overview', {'university_name': university}) }}
            </div>
          {% endif %}
        {% else %}
          <div class="card-body">
            <p class="text-muted text-center py-4 mb-0">No verification data is available for this university.</p>
          </div>
        {% endif %}
      </div>
    </div>

    {# ---------- University Verification Timeline (reuses history) ---------- #}
    <div class="col-12 col-xl-5">
      <div class="card border-0 shadow-sm h-100">
        <div class="card-header border-0 px-4 py-3"><h2 class="h6 mb-0">Verification Timeline</h2></div>
        <div class="card-body p-0">
          <ul class="list-group list-group-flush">
            {% for a in 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>
    </div>
  </div>

  {# ---------- Marketplace Snapshot (Version 2 — live analytics) ---------- #}
  {% macro metric(label, value, icon, color, sub=None) %}
    <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>
          {% if sub %}<div class="small text-muted mt-1">{{ sub }}</div>{% endif %}
        </div>
      </div>
    </div>
  {% endmacro %}

  <h2 class="admin-section-title">Marketplace Snapshot</h2>
  {% if marketplace.listing.total == 0 %}
    <div class="card border-0 shadow-sm mb-4">
      <div class="card-body text-center text-muted py-5">
        <i class="bi bi-box-seam fs-2 d-block mb-2" aria-hidden="true"></i>
        No marketplace activity yet.
      </div>
    </div>
  {% else %}
    {# Listings by status #}
    <div class="row g-3 mb-3">
      {{ metric('Total Listings', "{:,}".format(marketplace.listing.total), 'bi-box-seam-fill', 'primary') }}
      {{ metric('Active Listings', "{:,}".format(marketplace.listing.active), 'bi-lightning-charge-fill', 'success') }}
      {{ metric('Sold Listings', "{:,}".format(marketplace.listing.sold), 'bi-cart-check-fill', 'info') }}
      {{ metric('Reserved Listings', "{:,}".format(marketplace.listing.reserved), 'bi-bookmark-check-fill', 'warning') }}
      {{ metric('Expired Listings', "{:,}".format(marketplace.listing.expired), 'bi-hourglass-bottom', 'secondary') }}
    </div>

    {# Module KPIs #}
    <div class="row g-3 mb-4">
      {{ metric('Premium Members', "{:,}".format(marketplace.premium.premium_members), 'bi-star-fill', 'warning',
                sub="%.1f%% of verified"|format(marketplace.premium.premium_rate)) }}
      {{ metric('Saved Listings', "{:,}".format(marketplace.saved.total_favorites), 'bi-bookmark-fill', 'primary',
                sub="%s avg / listing"|format(marketplace.saved.avg_per_listing)) }}
      {{ metric('Total Reports', "{:,}".format(marketplace.report.total), 'bi-flag-fill', 'danger',
                sub="%d pending · %d resolved"|format(marketplace.report.pending, marketplace.report.resolved)) }}
      {{ metric('Conversations', "{:,}".format(marketplace.message.total_conversations), 'bi-chat-dots-fill', 'info',
                sub="%d active"|format(marketplace.message.active_conversations)) }}
      {{ metric('Total Messages', "{:,}".format(marketplace.message.total_messages), 'bi-envelope-fill', 'success') }}
      {# Meetups — module not implemented yet #}
      <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-secondary-subtle text-secondary"><i class="bi bi-calendar-check-fill"></i></span>
            <div class="admin-metric-value text-muted">—</div>
            <div class="admin-metric-label">Meetups <span class="badge text-bg-light border ms-1">Coming Soon</span></div>
          </div>
        </div>
      </div>
    </div>

    {# Top Categories #}
    <div class="row g-4 mb-4">
      <div class="col-12 col-xl-5">
        <div class="card border-0 shadow-sm h-100">
          <div class="card-header border-0 px-4 py-3"><h2 class="h6 mb-0">Top Categories</h2></div>
          <div class="table-responsive">
            <table class="table align-middle mb-0">
              <thead><tr><th class="ps-4">Category</th><th class="text-end pe-4">Listings</th></tr></thead>
              <tbody>
                {% for c in marketplace.top_categories %}
                  <tr><td class="ps-4">{{ c.category }}</td><td class="text-end pe-4 fw-semibold">{{ "{:,}".format(c.listings) }}</td></tr>
                {% else %}
                  <tr><td colspan="2" class="text-muted text-center py-4">No categories yet.</td></tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {# Campus Health #}
      <div class="col-12 col-xl-7">
        <div class="card border-0 shadow-sm h-100">
          <div class="card-header border-0 px-4 py-3"><h2 class="h6 mb-0">Campus Health</h2></div>
          <div class="card-body">
            <div class="row g-3">
              {% for label, value, icon, color in [
                ('Verification Rate', marketplace.health.verification_rate, 'bi-patch-check', 'primary'),
                ('Premium Adoption', marketplace.health.premium_adoption, 'bi-star', 'warning'),
                ('Report Rate', marketplace.health.report_rate, 'bi-flag', 'danger'),
                ('Active Listing Rate', marketplace.health.active_listing_rate, 'bi-lightning-charge', 'success')
              ] %}
                <div class="col-6">
                  <div class="border rounded-3 p-3 h-100">
                    <div class="text-{{ color }} mb-1"><i class="bi {{ icon }}" aria-hidden="true"></i></div>
                    <div class="h4 fw-bold mb-0">{{ "%.1f%%"|format(value) }}</div>
                    <div class="small text-muted">{{ label }}</div>
                  </div>
                </div>
              {% endfor %}
            </div>
          </div>
        </div>
      </div>
    </div>

    {# ---------- Marketplace Insights ---------- #}
    <h2 class="admin-section-title">Marketplace Insights</h2>
    <div class="row g-4 mb-4">
      {# Top Sellers #}
      <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"><h2 class="h6 mb-0">Top Sellers</h2></div>
          <div class="table-responsive">
            <table class="table align-middle mb-0">
              <thead><tr><th class="ps-4">Student</th><th class="text-end">Listings</th><th class="text-end">Active</th><th class="text-end pe-4">Sold</th></tr></thead>
              <tbody>
                {% for s in marketplace.insights.top_sellers %}
                  <tr>
                    <td class="ps-4"><a class="text-decoration-none fw-semibold" href="{{ url_for('admin.user_detail', public_id=s.public_id) }}">{{ s.name }}</a></td>
                    <td class="text-end">{{ s.listings }}</td>
                    <td class="text-end">{{ s.active }}</td>
                    <td class="text-end pe-4">{{ s.sold }}</td>
                  </tr>
                {% else %}
                  <tr><td colspan="4" class="text-muted text-center py-4">No sellers yet.</td></tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {# Most Popular Categories #}
      <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"><h2 class="h6 mb-0">Most Popular Categories</h2></div>
          <div class="table-responsive">
            <table class="table align-middle mb-0">
              <thead><tr><th class="ps-4">Category</th><th class="text-end">Listings</th><th class="text-end pe-4">Favorites</th></tr></thead>
              <tbody>
                {% for c in marketplace.insights.popular_categories %}
                  <tr><td class="ps-4">{{ c.category }}</td><td class="text-end">{{ c.listings }}</td><td class="text-end pe-4">{{ c.favorites }}</td></tr>
                {% else %}
                  <tr><td colspan="3" class="text-muted text-center py-4">No categories yet.</td></tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {# Most Saved Listings #}
      <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"><h2 class="h6 mb-0">Most Saved Listings</h2></div>
          <div class="table-responsive">
            <table class="table align-middle mb-0">
              <thead><tr><th class="ps-4">Listing</th><th>Seller</th><th class="text-end pe-4">Saves</th></tr></thead>
              <tbody>
                {% for l in marketplace.insights.most_saved %}
                  <tr>
                    <td class="ps-4"><a class="text-decoration-none" href="{{ url_for('admin.listing_detail', public_id=l.public_id) }}">{{ l.title }}</a></td>
                    <td class="text-muted">{{ l.seller }}</td>
                    <td class="text-end pe-4 fw-semibold">{{ l.saves }}</td>
                  </tr>
                {% else %}
                  <tr><td colspan="3" class="text-muted text-center py-4">No saved listings yet.</td></tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {# Most Reported Listings #}
      <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"><h2 class="h6 mb-0">Most Reported Listings</h2></div>
          <div class="table-responsive">
            <table class="table align-middle mb-0">
              <thead><tr><th class="ps-4">Listing</th><th class="text-end pe-4">Reports</th></tr></thead>
              <tbody>
                {% for l in marketplace.insights.most_reported %}
                  <tr>
                    <td class="ps-4"><a class="text-decoration-none" href="{{ url_for('admin.listing_detail', public_id=l.public_id) }}">{{ l.title }}</a></td>
                    <td class="text-end pe-4 fw-semibold">{{ l.reports }}</td>
                  </tr>
                {% else %}
                  <tr><td colspan="2" class="text-muted text-center py-4">No reported listings yet.</td></tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    {# ---------- Activity Feed (verification + listings + reports) ---------- #}
    <h2 class="admin-section-title">Activity Feed</h2>
    <div class="card border-0 shadow-sm mb-2">
      <ul class="list-group list-group-flush">
        {% for e in marketplace.activity_feed %}
          <li class="list-group-item d-flex align-items-center justify-content-between px-4 py-3">
            <span class="d-inline-flex align-items-center gap-2">
              <i class="bi {{ e.icon }} text-{{ e.tone }}" aria-hidden="true"></i>{{ e.text }}
            </span>
            <time class="text-muted small text-nowrap" data-relative datetime="{{ e.created_at.isoformat() }}">{{ e.created_at.strftime('%d %b %Y') }}</time>
          </li>
        {% else %}
          <li class="list-group-item text-muted text-center py-4">No campus activity yet.</li>
        {% endfor %}
      </ul>
    </div>
  {% endif %}
</div>
{% endblock %}