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

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

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

{% 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">Listing Management</h1>
      <p class="text-muted mb-0">Monitor and manage every marketplace listing.</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', "{:,}".format(s.total_listings), 'bi-box-seam-fill', 'primary') }}
    {{ card('Active', "{:,}".format(s.active_listings), 'bi-bag-check-fill', 'success') }}
    {{ card('Reserved', "{:,}".format(s.reserved_listings), 'bi-bookmark-check-fill', 'warning') }}
    {{ card('Sold', "{:,}".format(s.sold_listings), 'bi-cart-check-fill', 'secondary') }}
    {{ card('Featured', "{:,}".format(s.featured_listings), 'bi-stars', 'warning') }}
    {{ card('Deleted', "{:,}".format(s.deleted_listings), 'bi-trash3-fill', 'danger') }}
    {{ card('Avg Views', s.avg_views, 'bi-eye-fill', 'info') }}
    {{ card('Avg Favorites', s.avg_favorites, 'bi-heart-fill', 'danger') }}
  </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 listings for a single seller.</span>
      <a class="btn btn-sm btn-outline-secondary" href="{{ url_for('admin.listings') }}">Clear seller filter</a>
    </div>
  {% endif %}

  {# ---------- Filters (sticky) ---------- #}
  <form method="get" action="{{ url_for('admin.listings') }}" 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="listingSearch">Search</label>
          <input id="listingSearch" class="form-control" type="search" name="q" value="{{ q }}" placeholder="Title, seller or ID">
        </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="fFeatured">Featured</label>
          <select id="fFeatured" class="form-select" name="featured">
            {% for val, lbl in featured_options %}<option value="{{ val }}" {{ 'selected' if featured == val }}>{{ lbl }}</option>{% endfor %}
          </select>
        </div>
        <div class="col-6 col-md-2">
          <label class="form-label small mb-1" for="fCategory">Category</label>
          <select id="fCategory" class="form-select" name="category">
            {% for val, lbl in category_options %}<option value="{{ val }}" {{ 'selected' if category == 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 + bulk toolbar ---------- #}
  <form method="post" action="{{ url_for('admin.listing_bulk_action') }}" id="bulkForm" data-bulk-form>
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

    <div class="admin-bulk-bar card border-0 shadow-sm mb-2 d-none" data-bulk-bar>
      <div class="card-body py-2 d-flex flex-wrap align-items-center gap-2">
        <span class="fw-semibold me-2"><span data-bulk-count>0</span> selected</span>
        <button class="btn btn-sm btn-warning" name="action" value="feature"><i class="bi bi-stars me-1"></i>Feature</button>
        <button class="btn btn-sm btn-outline-warning" name="action" value="unfeature">Unfeature</button>
        <button class="btn btn-sm btn-outline-secondary" name="action" value="reserved">Mark Reserved</button>
        <button class="btn btn-sm btn-outline-secondary" name="action" value="sold">Mark Sold</button>
        <button class="btn btn-sm btn-outline-success" name="action" value="restore">Restore</button>
        <button class="btn btn-sm btn-outline-danger" name="action" value="delete" data-bulk-confirm="Delete the selected listings?"><i class="bi bi-trash3 me-1"></i>Delete</button>
      </div>
    </div>

    <div class="card border-0 shadow-sm">
      <div class="table-responsive">
        <table class="table admin-table align-middle mb-0">
          <thead>
            <tr>
              <th style="width:2.5rem"><input class="form-check-input" type="checkbox" data-bulk-all aria-label="Select all"></th>
              <th>Listing</th><th>Seller</th><th>Category</th>
              <th class="text-end">Price</th><th>Condition</th>
              <th class="text-end">Views</th><th class="text-end">Favs</th><th class="text-end">Offers</th>
              <th>Status</th><th>Created</th><th class="text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for r in rows %}
              {% set detail_url = url_for('admin.listing_detail', public_id=r.public_id) %}
              <tr class="admin-row-clickable" data-href="{{ detail_url }}">
                <td><input class="form-check-input" type="checkbox" name="selected" value="{{ r.public_id }}" data-bulk-item aria-label="Select listing"></td>
                <td>
                  <div class="d-flex align-items-center gap-2">
                    <span class="admin-listing-thumb admin-listing-thumb-sm">
                      {% if r.thumbnail %}<img src="{{ url_for('marketplace.listing_image', filename=r.thumbnail) }}" alt="">
                      {% else %}<i class="bi bi-image"></i>{% endif %}
                    </span>
                    <div class="min-w-0">
                      <a class="fw-semibold text-decoration-none d-block text-truncate" href="{{ detail_url }}">{{ r.title }}</a>
                      {% if r.is_featured %}<span class="badge featured-badge"><i class="bi bi-stars"></i> Featured</span>{% endif %}
                      {% if r.is_reported %}<span class="badge reported-badge"><i class="bi bi-flag-fill"></i> Reported</span>{% endif %}
                    </div>
                  </div>
                </td>
                <td>
                  <div class="min-w-0">
                    <span class="d-block text-truncate">{{ r.seller_name }}{% if r.seller_is_premium %} <i class="bi bi-star-fill text-warning" title="Premium seller"></i>{% endif %}</span>
                    <span class="text-muted small">{{ r.seller_email }}</span>
                  </div>
                </td>
                <td class="text-nowrap">{{ r.category }}</td>
                <td class="text-end text-nowrap">&#8377;{{ "{:,.0f}".format(r.price) }}</td>
                <td><span class="text-capitalize">{{ r.condition }}</span></td>
                <td class="text-end">{{ "{:,}".format(r.views) }}</td>
                <td class="text-end">{{ "{:,}".format(r.favorites) }}</td>
                <td class="text-end">{{ "{:,}".format(r.offers) }}</td>
                <td><span class="badge status-{{ r.status }}">{{ r.status|title }}</span></td>
                <td class="text-nowrap">{{ r.created.strftime('%d %b %Y') }}</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="12" class="p-0">
                  {{ empty_state('bi-box-seam', 'No listings found.',
                       'No listings match the current search and filters.',
                       reset_label='Reset filters', reset_url=url_for('admin.listings'), compact=true) }}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </form>

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