{% extends "base.html" %}
{% from "components/listing_card.html" import listing_card with context %}
{% from "components/pagination.html" import render_pagination %}
{% from "components/discovery_section.html" import discovery_row, discovery_categories with context %}
{% from "components/skeleton.html" import skeleton_row %}
{% from "components/empty_state.html" import empty_state %}

{% block title %}Marketplace · CampusCart{% endblock %}

{% block head_extra %}
<style>
  /* Page-scoped loading overlay shown while a filtered request is in flight. */
  .catalog-results { position: relative; }
  .catalog-loading {
    position: absolute;
    inset: 0;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 4rem;
    background: rgba(248, 250, 252, 0.72);
    backdrop-filter: blur(2px);
    border-radius: 1rem;
    z-index: 5;
  }
  .catalog-loading.is-active { display: flex; }
</style>
{% endblock %}

{% block content %}
{% set has_filters = q or category_id or condition or min_price or max_price %}
<div class="marketplace-catalog">

  {# Welcome banner: real greeting + real live listing count (dismissible). #}
  {% if current_user.is_authenticated %}
    {% set welcome_name = current_user.profile.full_name.split(' ')[0] if current_user.profile and current_user.profile.full_name else none %}
    <div class="mk-welcome" id="mkWelcome" role="status">
      <div class="mk-welcome-content">
        <span class="mk-welcome-icon"><i class="bi bi-check-circle-fill" aria-hidden="true"></i></span>
        <p class="mk-welcome-text">
          Welcome back{% if welcome_name %}, {{ welcome_name }}{% endif %}! Browse
          {{ pagination.total }} verified campus listing{{ '' if pagination.total == 1 else 's' }} available right now.
        </p>
      </div>
      <button type="button" class="mk-welcome-close" id="mkWelcomeClose" aria-label="Dismiss">
        <i class="bi bi-x-lg" aria-hidden="true"></i>
      </button>
    </div>
  {% endif %}

  {# Premium nudge: shown to members with no featured listing. Dismissible per
     session (sessionStorage) so it never nags. #}
  {% if premium_feature_reminder %}
    <div class="mk-premium-nudge" id="mkPremiumNudge" data-dismiss-key="premiumFeatureNudge" role="status" hidden>
      <span class="mk-premium-nudge-ico"><i class="bi bi-stars" aria-hidden="true"></i></span>
      <p class="mk-premium-nudge-text mb-0">Increase visibility by featuring one of your listings.</p>
      <a class="btn btn-sm btn-warning" href="{{ url_for('premium.feature_listing') }}">Feature Listing</a>
      <button type="button" class="mk-premium-nudge-close" data-nudge-dismiss aria-label="Dismiss">
        <i class="bi bi-x-lg" aria-hidden="true"></i>
      </button>
    </div>
  {% endif %}

  {# Sponsored showcase: the same reusable SaaS banner as the landing page,
     driven by the real active marketplace ad — only the content differs. #}
  {% if marketplace_ad %}
    {% with ad = marketplace_ad %}
      {% include "advertisements/_ad_showcase.html" %}
    {% endwith %}
  {% endif %}

  {# ---------- Discovery homepage (default, unfiltered view only) ---------- #}
  {% if discovery %}
    {% set dp = discovery_premium_ids %}
    <div class="discovery-home">
      {# Skeleton shimmer shown only while the root has `is-loading` (removed on
         DOMContentLoaded); no-JS visitors get the real content straight away. #}
      <div class="discovery-skeletons" aria-hidden="true">
        {% for _ in range(3) %}
          <section class="discovery-section">
            <div class="mk-skeleton mk-skeleton-line mk-skeleton-heading"></div>
            {{ skeleton_row(6) }}
          </section>
        {% endfor %}
      </div>

      <div class="discovery-real">
        {{ discovery_row('Trending', '🔥', discovery.trending,
              url_for('main.marketplace', sort='newest'), dp, badge='trending',
              empty_icon='bi-fire', empty_text='Nothing is trending yet. Be the first to list an item!',
              cta_label='Sell an item', cta_url=url_for('marketplace.create_listing_view')) }}
        {# Featured: shown as a carousel when available; when a promoted listing
           exists but is currently unavailable, show an informative empty state
           rather than hiding the section. Hidden entirely if nothing is featured. #}
        {{ discovery_row('Featured', '⭐', discovery.featured, none, dp, badge='featured',
              empty_icon='bi-star',
              empty_text=('There are currently no featured listings available. Featured listings will appear here when Premium sellers feature an available item.' if discovery.featured_exists else none)) }}
        {{ discovery_row('Recommended for you', '❤️', discovery.recommendations, none, dp,
              empty_icon='bi-stars', empty_text="Browse a few listings and we'll personalize this section for you.",
              cta_label='Start browsing', cta_url=url_for('main.marketplace', sort='newest')) }}
        {{ discovery_row('Popular', '📈', discovery.popular_this_week, none, dp, badge='popular',
              empty_icon='bi-graph-up-arrow', empty_text='No standout listings yet — check back soon.') }}
        {{ discovery_row('New arrivals', '🆕', discovery.new_arrivals,
              url_for('main.marketplace', sort='newest'), dp, badge='new',
              empty_icon='bi-box-seam', empty_text='No listings yet. Be the first to sell on campus!',
              cta_label='Sell an item', cta_url=url_for('marketplace.create_listing_view')) }}
        {# Recently viewed is personal history: hidden entirely for anonymous
           visitors and when the user has no history (no empty-state placeholder). #}
        {{ discovery_row('Recently viewed', '🕒', discovery.recently_viewed, none, dp) }}
      </div>
    </div>
  {% endif %}

  {# ---------- Browse all listings (compact catalog section) ---------- #}
  <section class="mk-catalog" aria-label="{{ 'Browse all listings' if discovery else 'Marketplace' }}">
    {# Compact header: title on the left, live count on the right #}
    <div class="mk-catalog-head" id="browse-all">
      <div class="mk-catalog-head-text">
        <h2 class="mk-catalog-title">{{ 'Browse all listings' if discovery else 'Marketplace' }}</h2>
        <p class="mk-catalog-sub">Discover everything currently available on campus.</p>
      </div>
      <span class="mk-catalog-count">{{ "{:,}".format(pagination.total) }} listing{{ '' if pagination.total == 1 else 's' }}</span>
    </div>

    {# Browse categories — compact chips, immediately below the header #}
    {% if discovery and discovery.categories %}
      <nav class="mk-cat-chips" aria-label="Browse categories">
        {% for item in discovery.categories %}
          <a class="mk-cat-chip {{ 'active' if category_id == item.category.id }}"
             href="{{ url_for('main.marketplace', category=item.category.id) }}">
            {{ item.category.name }} <span class="mk-cat-chip-count">{{ item.count }}</span>
          </a>
        {% endfor %}
        <a class="mk-cat-chip mk-cat-chip--more" href="#catalog-category">More <i class="bi bi-arrow-right" aria-hidden="true"></i></a>
      </nav>
    {% endif %}

    {# Compact filter toolbar (same fields, same behaviour) #}
    <form method="get" action="{{ url_for('main.marketplace') }}" class="mk-filter-bar mk-filter-grid"
          role="search" data-catalog-filters aria-label="Filter listings">
      <div class="mk-field mk-col-5">
        <label for="catalog-q" class="mk-label">Search</label>
        <div class="mk-input-search">
          <span class="mk-input-search-icon"><i class="bi bi-search" aria-hidden="true"></i></span>
          <input id="catalog-q" class="mk-input" type="search" name="q" value="{{ q }}"
                 placeholder="Search textbooks, electronics&hellip;" aria-label="Search listings"
                 autocomplete="off" role="combobox" aria-expanded="false" aria-controls="catalog-suggestions">
          <div class="mk-suggestions" id="catalog-suggestions" data-suggestions
               data-suggest-url="{{ url_for('main.marketplace_suggestions') }}" role="listbox" hidden></div>
        </div>
      </div>

      <div class="mk-field mk-col-3">
        <label for="catalog-category" class="mk-label">Category</label>
        <div class="mk-select-wrap">
          <select id="catalog-category" class="mk-select" name="category" aria-label="Filter by category">
            <option value="">All categories</option>
            {% for category in categories %}
              <option value="{{ category.id }}" {{ 'selected' if category_id == category.id }}>{{ category.name }}</option>
            {% endfor %}
          </select>
          <span class="mk-select-arrow"><i class="bi bi-chevron-down" aria-hidden="true"></i></span>
        </div>
      </div>

      <div class="mk-field mk-col-2">
        <label for="catalog-condition" class="mk-label">Condition</label>
        <div class="mk-select-wrap">
          <select id="catalog-condition" class="mk-select" name="condition" aria-label="Filter by condition">
            <option value="">Any condition</option>
            {% for value, label in condition_options %}
              <option value="{{ value }}" {{ 'selected' if condition == value }}>{{ label }}</option>
            {% endfor %}
          </select>
          <span class="mk-select-arrow"><i class="bi bi-chevron-down" aria-hidden="true"></i></span>
        </div>
      </div>

      <div class="mk-field mk-col-2">
        <label for="catalog-sort" class="mk-label">Sort by</label>
        <div class="mk-select-wrap">
          <select id="catalog-sort" class="mk-select" 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="mk-select-arrow"><i class="bi bi-chevron-down" aria-hidden="true"></i></span>
        </div>
      </div>

      <div class="mk-field mk-col-3">
        <label for="catalog-min-price" class="mk-label">Min price (&#8377;)</label>
        <input id="catalog-min-price" class="mk-input" type="number" inputmode="decimal"
               min="0" step="1" name="min_price" value="{{ min_price }}" placeholder="0" aria-label="Minimum price">
      </div>

      <div class="mk-field mk-col-3">
        <label for="catalog-max-price" class="mk-label">Max price (&#8377;)</label>
        <input id="catalog-max-price" class="mk-input" type="number" inputmode="decimal"
               min="0" step="1" name="max_price" value="{{ max_price }}" placeholder="Any" aria-label="Maximum price">
      </div>

      <div class="mk-field mk-col-2">
        <label for="catalog-rating" class="mk-label">Seller rating</label>
        <div class="mk-select-wrap">
          <select id="catalog-rating" class="mk-select" name="seller_rating" aria-label="Filter by seller rating">
            {% for value, label in rating_options %}
              <option value="{{ value }}" {{ 'selected' if seller_rating == value }}>{{ label }}</option>
            {% endfor %}
          </select>
          <span class="mk-select-arrow"><i class="bi bi-chevron-down" aria-hidden="true"></i></span>
        </div>
      </div>

      <div class="mk-field mk-col-2">
        <label for="catalog-badge" class="mk-label">Seller badge</label>
        <div class="mk-select-wrap">
          <select id="catalog-badge" class="mk-select" name="badge" aria-label="Filter by seller badge">
            {% for value, label in badge_options %}
              <option value="{{ value }}" {{ 'selected' if badge == value }}>{{ label }}</option>
            {% endfor %}
          </select>
          <span class="mk-select-arrow"><i class="bi bi-chevron-down" aria-hidden="true"></i></span>
        </div>
      </div>

      <div class="mk-field mk-col-2 mk-field-check">
        <label class="mk-check">
          <input type="checkbox" name="trusted" value="1" {{ 'checked' if trusted_only }}>
          <span>🛡 Trusted sellers only</span>
        </label>
      </div>

      <div class="mk-field mk-col-6 mk-field-actions">
        {% if has_filters %}
          <a class="mk-btn-clear" href="{{ url_for('main.marketplace') }}" data-catalog-loading>Clear</a>
        {% endif %}
        <button class="mk-btn-apply mk-lift" type="submit">
          <i class="bi bi-funnel" aria-hidden="true"></i> Apply filters
        </button>
      </div>
    </form>

    {# Active filter chips — each removes just its own filter. #}
    {% if filter_chips %}
      <div class="mk-active-filters" aria-label="Active filters">
        {% for chip in filter_chips %}
          <a class="mk-chip-active" href="{{ chip.remove_url }}">
            <span>{{ chip.label }}</span>
            <span class="mk-chip-x" aria-hidden="true"><i class="bi bi-x"></i></span>
            <span class="visually-hidden">Remove filter {{ chip.label }}</span>
          </a>
        {% endfor %}
        <a class="mk-chip-clear" href="{{ url_for('main.marketplace') }}">Clear all</a>
      </div>
    {% endif %}

    <div class="catalog-results">
      <div class="catalog-loading" id="catalogLoading" aria-hidden="true">
        <div class="spinner-border text-primary" role="status">
          <span class="visually-hidden">Loading listings&hellip;</span>
        </div>
      </div>

    {% if pagination.items %}
      <section class="mk-grid">
        {% for listing in pagination.items %}
          {{ listing_card(listing,
                          actions=['view_details'],
                          show_status=false,
                          meta=['condition', 'location', 'date'],
                          favorite=true,
                          premium_ids=premium_seller_ids,
                          reputations=reputation_map,
                          badges=badge_map) }}
        {% endfor %}
      </section>

      <div class="mt-4">
        {{ render_pagination(pagination, 'main.marketplace',
                             {'q': q or none, 'category': category_id or none,
                              'condition': condition or none, 'min_price': min_price or none,
                              'max_price': max_price or none, 'sort': sort,
                              'seller_rating': seller_rating or none,
                              'trusted': '1' if trusted_only else none, 'badge': badge or none}) }}
      </div>
    {% elif has_filters %}
      <div class="mk-empty-search text-center py-5">
        <div class="mk-empty-icon" aria-hidden="true"><i class="bi bi-search"></i></div>
        <h3 class="h5 fw-bold mb-2">No matching listings found.</h3>
        <p class="text-muted mb-2">Try:</p>
        <ul class="mk-empty-tips list-unstyled text-muted mb-4">
          <li>widening your price range</li>
          <li>removing filters</li>
          <li>searching another keyword</li>
        </ul>
        <a class="btn btn-primary" href="{{ url_for('main.marketplace') }}">
          <i class="bi bi-funnel me-1"></i> Clear Filters
        </a>
      </div>
    {% else %}
      {{ empty_state('bi-bag-plus', 'No listings yet',
           'The marketplace is just getting started. Be the first to list a campus item.',
           cta_label='Create a listing', cta_url=url_for('marketplace.create_listing_view'), cta_icon='bi-plus-lg') }}
    {% endif %}
    </div>
  </section>
</div>
{% endblock %}

{% block scripts %}
<script>
  // Loading state: reveal the overlay when the filter form is submitted or when
  // navigating via pagination / clear, giving immediate feedback before the
  // server-rendered page arrives.
  (function () {
    var overlay = document.getElementById('catalogLoading');
    if (!overlay) return;

    function showLoading() {
      overlay.classList.add('is-active');
      overlay.setAttribute('aria-hidden', 'false');
    }

    var form = document.querySelector('[data-catalog-filters]');
    if (form) form.addEventListener('submit', showLoading);

    document.querySelectorAll('.catalog-results .pagination a.page-link, [data-catalog-loading]')
      .forEach(function (link) {
        link.addEventListener('click', function () {
          if (link.getAttribute('href') && link.getAttribute('href') !== '#') showLoading();
        });
      });
  })();

  // Live search suggestions (listing titles). Debounced fetch → JSON → dropdown.
  // Pure vanilla JS, no framework. Titles are escaped before insertion.
  (function () {
    var input = document.getElementById('catalog-q');
    var box = document.querySelector('[data-suggestions]');
    if (!input || !box) return;
    var url = box.getAttribute('data-suggest-url');
    var timer;

    function hide() { box.hidden = true; box.innerHTML = ''; input.setAttribute('aria-expanded', 'false'); }
    function esc(s) { var d = document.createElement('div'); d.textContent = s; return d.innerHTML; }

    input.addEventListener('input', function () {
      var q = input.value.trim();
      if (q.length < 2) { hide(); return; }
      clearTimeout(timer);
      timer = setTimeout(function () {
        fetch(url + '?q=' + encodeURIComponent(q))
          .then(function (r) { return r.json(); })
          .then(function (list) {
            if (!list || !list.length) { hide(); return; }
            box.innerHTML = list.map(function (t) {
              return '<button type="button" class="mk-suggestion" role="option">' + esc(t) + '</button>';
            }).join('');
            box.hidden = false;
            input.setAttribute('aria-expanded', 'true');
          }).catch(hide);
      }, 180);
    });

    box.addEventListener('click', function (e) {
      var btn = e.target.closest('.mk-suggestion');
      if (!btn) return;
      input.value = btn.textContent;
      hide();
      if (input.form) input.form.submit();
    });
    document.addEventListener('click', function (e) {
      if (e.target !== input && !box.contains(e.target)) hide();
    });
    input.addEventListener('keydown', function (e) { if (e.key === 'Escape') hide(); });
  })();

  // Dismiss the welcome banner (session-scoped so it stays hidden while browsing).
  (function () {
    var banner = document.getElementById('mkWelcome');
    var closeBtn = document.getElementById('mkWelcomeClose');
    if (!banner || !closeBtn) return;
    try {
      if (sessionStorage.getItem('mkWelcomeDismissed') === '1') {
        banner.style.display = 'none';
        return;
      }
    } catch (e) { /* storage unavailable — banner simply stays until reload */ }
    closeBtn.addEventListener('click', function () {
      banner.style.opacity = '0';
      window.setTimeout(function () { banner.style.display = 'none'; }, 300);
      try { sessionStorage.setItem('mkWelcomeDismissed', '1'); } catch (e) {}
    });
  })();
</script>
{% endblock %}