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

{% block title %}Reports · Admin{% endblock %}

{% set status_badge = {'pending': 'warning', 'under_review': 'info', 'resolved': 'success', 'dismissed': 'secondary'} %}

{% 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">Reports &amp; Moderation</h1>
      <p class="text-muted mb-0">Review and resolve reports raised by the campus community.</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('Pending', "{:,}".format(s.pending), 'bi-hourglass-split', 'warning') }}
    {{ card('Under Review', "{:,}".format(s.under_review), 'bi-search', 'info') }}
    {{ card('Resolved', "{:,}".format(s.resolved), 'bi-check-circle-fill', 'success') }}
    {{ card('Dismissed', "{:,}".format(s.dismissed), 'bi-slash-circle', 'secondary') }}
    {{ card("Today", "{:,}".format(s.today), 'bi-calendar-day-fill', 'primary') }}
    {{ card('This Month', "{:,}".format(s.this_month), 'bi-calendar-month-fill', 'primary') }}
  </div>

  {% if seller %}
    <div class="alert alert-info d-flex align-items-center justify-content-between py-2 mb-3">
      <span><i class="bi bi-funnel-fill me-1"></i> Showing reports for a single seller.</span>
      <a class="btn btn-sm btn-outline-secondary" href="{{ url_for('admin.reports') }}">Clear seller filter</a>
    </div>
  {% endif %}

  {# ---------- Filters (sticky) ---------- #}
  <form method="get" action="{{ url_for('admin.reports') }}" class="admin-filters card border-0 shadow-sm mb-3">
    {% if seller %}<input type="hidden" name="seller" value="{{ seller }}">{% endif %}
    <div class="card-body">
      <div class="row g-2 align-items-end">
        <div class="col-md-3">
          <label class="form-label small mb-1" for="reportSearch">Search</label>
          <input id="reportSearch" class="form-control" type="search" name="q" value="{{ q }}" placeholder="Entity, reporter or seller">
        </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-2">
          <label class="form-label small mb-1" for="fReason">Reason</label>
          <select id="fReason" class="form-select" name="reason">
            {% for val, lbl in reason_options %}<option value="{{ val }}" {{ 'selected' if reason == val }}>{{ lbl }}</option>{% endfor %}
          </select>
        </div>
        <div class="col-6 col-md-2">
          <label class="form-label small mb-1" for="fType">Entity</label>
          <select id="fType" class="form-select" name="entity_type">
            {% for val, lbl in entity_type_options %}<option value="{{ val }}" {{ 'selected' if entity_type == val }}>{{ lbl }}</option>{% endfor %}
          </select>
        </div>
        <div class="col-6 col-md-2">
          <label class="form-label small mb-1" for="fAssigned">Assignment</label>
          <select id="fAssigned" class="form-select" name="assigned">
            {% for val, lbl in assigned_options %}<option value="{{ val }}" {{ 'selected' if assigned == val }}>{{ lbl }}</option>{% endfor %}
          </select>
        </div>
        <div class="col-6 col-md-1">
          <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-12 col-md-2 d-grid">
          <button type="submit" class="btn btn-primary"><i class="bi bi-funnel me-1"></i> Filter</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>Report</th><th>Date</th><th>Reporter</th><th>Reported Entity</th>
            <th>Seller</th><th>Reason</th><th>Status</th><th>Moderator</th><th class="text-end">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for r in rows %}
            {% set detail_url = url_for('admin.report_detail', public_id=r.public_id) %}
            <tr class="admin-row-clickable" data-href="{{ detail_url }}">
              <td><code class="small">{{ r.short_id }}</code></td>
              <td class="text-nowrap"><time data-relative datetime="{{ r.created_at.isoformat() }}">{{ r.created_at.strftime('%d %b %Y') }}</time></td>
              <td class="text-truncate" style="max-width: 12rem">{{ r.reporter_name }}</td>
              <td>
                <span class="badge text-bg-light text-capitalize me-1">{{ r.entity_type }}</span>
                <span class="text-truncate d-inline-block align-middle" style="max-width: 10rem">{{ r.entity_name }}</span>
              </td>
              <td class="text-truncate" style="max-width: 12rem">{{ r.seller_name }}</td>
              <td>{{ r.reason }}</td>
              <td><span class="badge text-bg-{{ status_badge.get(r.status, 'secondary') }}">{{ r.status_label }}</span></td>
              <td>{% if r.moderator_name %}{{ r.moderator_name }}{% else %}<span class="text-muted">Unassigned</span>{% endif %}</td>
              <td class="text-end">
                <a class="btn btn-sm btn-outline-primary" href="{{ detail_url }}">Review <i class="bi bi-arrow-right" aria-hidden="true"></i></a>
              </td>
            </tr>
          {% else %}
            <tr>
              <td colspan="9" class="p-0">
                {{ empty_state('bi-shield-check', 'No reports have been submitted.',
                     "When students report inappropriate listings, they'll appear here for review.",
                     reset_label=('Reset filters' if filter_args else none),
                     reset_url=(url_for('admin.reports') if filter_args else none),
                     compact=true) }}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

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