{% extends "base.html" %}

{% block title %}{{ listing.title }} · Listing · Admin{% endblock %}

{% set seller = listing.seller %}
{% set profile = seller.profile if seller else None %}
{% set seller_name = profile.full_name if profile else (seller.email.split('@')[0] if seller else '—') %}
{% set is_deleted = listing.deleted_at is not none %}
{% set status = listing.status.value %}

{# One quick-action form: posts a single `action` to the shared endpoint. #}
{% macro action(label, value, icon, cls, confirm=None) %}
  <form method="post" action="{{ url_for('admin.listing_action', public_id=listing.public_id) }}"
        {% if confirm %}onsubmit="return confirm('{{ confirm|e }}');"{% endif %}>
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <input type="hidden" name="action" value="{{ value }}">
    <button class="btn btn-sm {{ cls }}"><i class="bi {{ icon }} me-1"></i>{{ label }}</button>
  </form>
{% endmacro %}

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

  {# ---------- Header ---------- #}
  <div class="card border-0 shadow-sm mb-4">
    <div class="card-body p-4">
      <div class="row g-4">
        {# Gallery #}
        <div class="col-lg-5">
          {% if listing.images %}
            <div class="admin-gallery">
              <div class="admin-gallery-main">
                <img src="{{ url_for('marketplace.listing_image', filename=listing.images[0].image_path) }}" alt="{{ listing.title }}">
              </div>
              {% if listing.images|length > 1 %}
                <div class="admin-gallery-thumbs">
                  {% for img in listing.images %}
                    <span class="admin-gallery-thumb"><img src="{{ url_for('marketplace.listing_image', filename=img.image_path) }}" alt=""></span>
                  {% endfor %}
                </div>
              {% endif %}
            </div>
          {% else %}
            <div class="admin-listing-thumb" style="height: 220px; border-radius: 0.75rem;"><i class="bi bi-image"></i></div>
          {% endif %}
        </div>

        {# Info #}
        <div class="col-lg-7">
          <div class="d-flex flex-wrap align-items-center gap-2 mb-2">
            <h1 class="h4 fw-bold mb-0">{{ listing.title }}</h1>
            <span class="badge status-{{ status }}">{{ status|title }}</span>
            {% if detail.is_featured %}<span class="badge featured-badge"><i class="bi bi-stars"></i> Featured</span>{% endif %}
            {% if detail.is_reported %}<a class="badge reported-badge text-decoration-none" href="{{ url_for('admin.reports', q=listing.public_id) }}"><i class="bi bi-flag-fill"></i> Reported</a>{% endif %}
          </div>
          <div class="h4 text-primary fw-bold mb-3">&#8377;{{ "{:,.0f}".format(listing.price) }}
            {% if listing.negotiable %}<span class="badge text-bg-light fw-normal align-middle ms-1">Negotiable</span>{% endif %}
          </div>

          <dl class="row small mb-3">
            <dt class="col-4 col-sm-3 text-muted fw-normal">Category</dt><dd class="col-8 col-sm-9">{{ listing.category.name if listing.category else '—' }}</dd>
            <dt class="col-4 col-sm-3 text-muted fw-normal">Condition</dt><dd class="col-8 col-sm-9 text-capitalize">{{ listing.condition.value }}</dd>
            {% if listing.location %}<dt class="col-4 col-sm-3 text-muted fw-normal">Location</dt><dd class="col-8 col-sm-9">{{ listing.location }}</dd>{% endif %}
            <dt class="col-4 col-sm-3 text-muted fw-normal">Listing ID</dt><dd class="col-8 col-sm-9"><code>{{ listing.public_id }}</code></dd>
            <dt class="col-4 col-sm-3 text-muted fw-normal">Created</dt><dd class="col-8 col-sm-9">{{ listing.created_at.strftime('%d %b %Y, %H:%M') }}</dd>
            {% if listing.expires_at %}<dt class="col-4 col-sm-3 text-muted fw-normal">Expires</dt><dd class="col-8 col-sm-9">{{ listing.expires_at.strftime('%d %b %Y') }}</dd>{% endif %}
            {% if is_deleted %}<dt class="col-4 col-sm-3 text-muted fw-normal">Deleted</dt><dd class="col-8 col-sm-9 text-danger">{{ listing.deleted_at.strftime('%d %b %Y, %H:%M') }}</dd>{% endif %}
          </dl>

          {# Seller #}
          <div class="d-flex align-items-center gap-2 mb-3">
            <span class="admin-user-avatar">
              {% if profile and profile.profile_picture %}<img src="{{ url_for('auth.profile_picture', filename=profile.profile_picture) }}" alt="">
              {% else %}{{ seller_name[0]|upper }}{% endif %}
            </span>
            <div class="min-w-0">
              <a class="fw-semibold text-decoration-none d-block text-truncate"
                 href="{{ url_for('admin.user_detail', public_id=seller.public_id) }}">{{ seller_name }}{% if detail.seller_is_premium %} <span class="badge text-bg-warning">Premium</span>{% endif %}</a>
              <span class="text-muted small">{{ seller.email if seller else '—' }}</span>
            </div>
          </div>

          {# ---------- Quick actions (only valid ones) ---------- #}
          <div class="d-flex flex-wrap gap-2">
            {% if not is_deleted %}
              <a class="btn btn-sm btn-outline-primary" href="{{ url_for('marketplace.listing_detail', public_id=listing.public_id) }}" target="_blank" rel="noopener">
                <i class="bi bi-box-arrow-up-right me-1"></i> View Public Listing
              </a>
            {% endif %}

            {% if detail.is_featured %}
              {{ action('Remove Feature', 'unfeature', 'bi-star', 'btn-outline-warning') }}
            {% elif not is_deleted and status == 'available' %}
              {{ action('Feature Listing', 'feature', 'bi-stars', 'btn-warning') }}
            {% endif %}

            {% if not is_deleted and status == 'available' %}
              {{ action('Mark Reserved', 'reserved', 'bi-bookmark-check', 'btn-outline-secondary') }}
            {% endif %}
            {% if not is_deleted and status in ['available', 'reserved'] %}
              {{ action('Mark Sold', 'sold', 'bi-cart-check', 'btn-outline-secondary', confirm='Mark this listing as sold?') }}
            {% endif %}

            {% if is_deleted %}
              {{ action('Restore', 'restore', 'bi-arrow-counterclockwise', 'btn-outline-success') }}
            {% else %}
              {{ action('Soft Delete', 'delete', 'bi-trash3', 'btn-outline-danger', confirm='Soft-delete this listing? It will be removed from the marketplace.') }}
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>

  {# ---------- Analytics ---------- #}
  {% set a = detail.analytics %}
  <div class="row g-3 mb-4">
    {% for label, value, icon, color in [
      ('Views', a.views, 'bi-eye-fill', 'info'),
      ('Favorites', a.favorites, 'bi-heart-fill', 'danger'),
      ('Offers', a.offers, 'bi-tag-fill', 'secondary'),
      ('Conversations', a.conversations, 'bi-chat-dots-fill', 'primary')
    ] %}
      <div class="col-6 col-xl-3">
        <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">{{ "{:,}".format(value) }}</div>
            <div class="admin-metric-label">{{ label }}</div>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>

  <div class="row g-4">
    {# ---------- Featured + view history ---------- #}
    <div class="col-lg-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">Featured status &amp; view history</h2></div>
        <div class="card-body p-4">
          {% if detail.is_featured %}
            <p class="mb-3"><span class="badge featured-badge"><i class="bi bi-stars"></i> Featured</span>
              until <strong>{{ detail.featured_until.strftime('%d %b %Y') }}</strong>
              ({{ detail.featured_days_left }} day{{ '' if detail.featured_days_left == 1 else 's' }} left)</p>
          {% else %}
            <p class="text-muted mb-3">This listing is not currently featured.</p>
          {% endif %}
          {% set vh = detail.view_history %}
          <dl class="row mb-0 small">
            <dt class="col-7 text-muted fw-normal">Total view events</dt><dd class="col-5 text-end fw-semibold">{{ "{:,}".format(vh.events) }}</dd>
            <dt class="col-7 text-muted fw-normal">Unique signed-in viewers</dt><dd class="col-5 text-end fw-semibold">{{ "{:,}".format(vh.unique_viewers) }}</dd>
            <dt class="col-7 text-muted fw-normal">Unique sessions</dt><dd class="col-5 text-end fw-semibold">{{ "{:,}".format(vh.unique_sessions) }}</dd>
            <dt class="col-7 text-muted fw-normal">Last viewed</dt><dd class="col-5 text-end fw-semibold">{{ vh.last_viewed.strftime('%d %b %Y') if vh.last_viewed else '—' }}</dd>
          </dl>
        </div>
      </div>
    </div>

    {# ---------- Recent activity ---------- #}
    <div class="col-lg-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">Recent activity</h2></div>
        <div class="card-body p-3">
          {% if detail.recent_activity %}
            <ul class="analytics-timeline">
              {% for act in detail.recent_activity %}
                <li class="analytics-timeline-item">
                  <span class="analytics-timeline-ico"><i class="bi {{ act.icon }}"></i></span>
                  <div>
                    <p class="analytics-timeline-text mb-0">{{ act.text }}</p>
                    <time class="analytics-timeline-time" data-relative datetime="{{ act.timestamp.isoformat() }}">{{ act.timestamp.strftime('%d %b %Y') }}</time>
                  </div>
                </li>
              {% endfor %}
            </ul>
          {% else %}
            <p class="text-muted text-center py-4 mb-0">No recent activity.</p>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  {# ---------- Description ---------- #}
  <h2 class="admin-section-title mt-4">Description</h2>
  <div class="card border-0 shadow-sm">
    <div class="card-body p-4">
      <p class="mb-0" style="white-space: pre-wrap;">{{ listing.description }}</p>
    </div>
  </div>
</div>
{% endblock %}