{% extends "base.html" %}
{% from "components/my_listing_card.html" import my_listing_card with context %}
{% from "components/activity_feed_card.html" import activity_feed_card %}
{% from "components/pagination.html" import render_pagination %}
{% from "components/empty_state.html" import empty_state %}
{% from "components/page_header.html" import page_header %}

{% block title %}My Listings · CampusCart{% endblock %}

{% block content %}
<div class="dashboard-page my-listings-page">
  {{ page_header('My Listings', "Items you've listed for sale.") }}

  {% if not has_any %}
    {{ empty_state('bi-bag-plus', "You haven't listed anything yet",
         'Add your first campus item and start managing your marketplace presence from one polished dashboard.',
         cta_label='Create new listing', cta_url=url_for('marketplace.create_listing_view'), cta_icon='bi-plus-lg') }}
  {% else %}
    {% set ns = namespace(sort_label='Newest') %}
    {% for key, label in sort_options %}
      {% if key == sort %}{% set ns.sort_label = label %}{% endif %}
    {% endfor %}

    {# ---------- KPI cards ---------- #}
    <section class="seller-kpi-grid mb-4" aria-label="Seller performance">
      {% for label, value, icon, tone in [
        ('Total Listings', overview.total_listings, 'bi-collection-fill', 'primary'),
        ('Total Views', overview.total_views, 'bi-eye-fill', 'info'),
        ('Favorites', overview.total_favorites, 'bi-heart-fill', 'danger'),
        ('Conversations', overview.total_conversations, 'bi-chat-dots-fill', 'success')
      ] %}
        <div class="seller-kpi-card">
          <span class="seller-kpi-ico seller-kpi-ico--{{ tone }}" aria-hidden="true"><i class="bi {{ icon }}"></i></span>
          <div class="seller-kpi-value">{{ "{:,}".format(value) }}</div>
          <div class="seller-kpi-label">{{ label }}</div>
        </div>
      {% endfor %}
    </section>

    {# ---------- Weekly insights ---------- #}
    <section class="seller-insights mb-4" aria-label="This week">
      <div class="seller-insights-head">
        <span class="seller-insights-ico" aria-hidden="true"><i class="bi bi-graph-up-arrow"></i></span>
        <div>
          <h2 class="seller-insights-title">This week's activity</h2>
          <p class="seller-insights-sub mb-0">A quick pulse on how your listings performed in the last 7 days.</p>
        </div>
      </div>
      <div class="seller-insights-metrics">
        <div class="seller-insight"><span class="seller-insight-value">+{{ "{:,}".format(overview.views_7d) }}</span><span class="seller-insight-label">Views</span></div>
        <div class="seller-insight"><span class="seller-insight-value">+{{ "{:,}".format(overview.favorites_7d) }}</span><span class="seller-insight-label">New saves</span></div>
        <div class="seller-insight"><span class="seller-insight-value">+{{ "{:,}".format(overview.conversations_7d) }}</span><span class="seller-insight-label">New chats</span></div>
        {% if overview.top_listing %}
          <div class="seller-insight seller-insight--top">
            <span class="seller-insight-label"><i class="bi bi-trophy-fill" aria-hidden="true"></i> Top listing</span>
            <a class="seller-insight-top-name" href="{{ url_for('marketplace.listing_detail', public_id=overview.top_listing.public_id) }}">{{ overview.top_listing.title }}</a>
            <span class="seller-insight-label">{{ "{:,}".format(overview.top_listing.views) }} views</span>
          </div>
        {% endif %}
      </div>
    </section>

    {# ---------- Premium Insights (Premium-only; free sees upgrade card) ---------- #}
    {% include "marketplace/_premium_insights.html" %}

    {# ---------- Compact activity preview ---------- #}
    {{ activity_feed_card(recent_activity) }}

    {# ---------- Filters + chips with counts ---------- #}
    <section class="card my-listings-filter-panel mb-4 border-0 shadow-sm">
      <div class="card-body p-4">
        <form method="get" class="row gy-3 gx-3 align-items-center" role="search">
          {% if status %}<input type="hidden" name="status" value="{{ status }}">{% endif %}
          <div class="col-12 col-lg-6">
            <div class="input-group filter-search position-relative">
              <span class="input-group-text bg-white border-0"><i class="bi bi-search"></i></span>
              <input class="form-control border border-1 rounded-pill ps-0" type="search" name="q" value="{{ q }}"
                     placeholder="Search your listings..." aria-label="Search your listings">
            </div>
          </div>
          <div class="col-12 col-lg-auto d-grid">
            <button class="btn btn-primary btn-lg px-4" type="submit">Search</button>
          </div>
          <div class="col-12 col-lg-4">
            <div class="position-relative">
              <select class="form-select sort-select rounded-pill ps-4 pe-5" name="sort" aria-label="Sort listings">
                {% for key, label in sort_options %}
                  <option value="{{ key }}" {{ 'selected' if key == sort }}>{{ label }}</option>
                {% endfor %}
              </select>
              <span class="sort-arrow"><i class="bi bi-chevron-down"></i></span>
            </div>
          </div>
        </form>

        <div class="my-listings-chip-row mt-4 d-flex flex-wrap gap-2 overflow-x-auto no-scrollbar pb-2">
          <a class="seller-chip {{ 'active' if not status }}" href="{{ url_for('marketplace.my_listings', q=q or none, sort=sort) }}">
            All <span class="seller-chip-count">{{ status_counts.total }}</span>
          </a>
          {% for s in statuses %}
            {% set count = status_counts.by_status.get(s, 0) %}
            <a class="seller-chip {{ 'active' if status == s }}"
               href="{{ url_for('marketplace.my_listings', q=q or none, status=s, sort=sort) }}">
              {{ s|title }} <span class="seller-chip-count">{{ count }}</span>
            </a>
          {% endfor %}
        </div>
      </div>
    </section>

    {% if pagination.items %}
      <section class="row row-cols-1 row-cols-sm-2 row-cols-xl-3 row-cols-xxl-4 g-4">
        {% for listing in pagination.items %}
          {{ my_listing_card(listing, premium_ids=premium_seller_ids, offers=offers_by_listing.get(listing.id, 0)) }}
        {% endfor %}

        <div class="col">
          <a href="{{ url_for('marketplace.create_listing_view') }}" class="card create-listing-card h-100 text-decoration-none text-body">
            <div class="card-body d-flex flex-column align-items-center justify-content-center text-center p-4">
              <span class="create-listing-icon mb-3"><i class="bi bi-plus-lg"></i></span>
              <h3 class="h6 fw-bold mb-1">Create New Listing</h3>
              <p class="text-muted small mb-3">Post another item to the campus marketplace in seconds.</p>
              <span class="btn btn-outline-primary btn-sm"><i class="bi bi-plus-lg me-1"></i> Sell an item</span>
            </div>
          </a>
        </div>
      </section>

      <div class="mt-4">
        {{ render_pagination(pagination, 'marketplace.my_listings',
                             {'q': q or none, 'status': status or none, 'sort': sort}) }}
      </div>
    {% else %}
      {{ empty_state('bi-search', 'No listings match your search',
           'Try adjusting your search term or switching the filter to see more results.',
           cta_label='Clear filters', cta_url=url_for('marketplace.my_listings')) }}
    {% endif %}

    {% include "components/delete_listing_modal.html" %}
  {% endif %}
</div>
{% endblock %}