{#
  Reusable marketplace listing card.

  Usage:
    {% from "components/listing_card.html" import listing_card %}
    {{ listing_card(listing,
                    actions=['view', 'edit', 'delete'],
                    show_status=true,
                    meta=['condition', 'date']) }}

  Parameters:
    listing      - a Listing model instance (required).
    actions      - ordered list of action keys to render in the footer.
                   Supported: 'view', 'edit', 'delete', 'quickview', 'remove_saved'.
                   'edit'/'delete'/'remove_saved' are rendered "soft-disabled"
                   (visible, Coming-Soon toast) until their features ship.
    show_status  - show the listing status badge (top-right). Default: false.
    meta         - ordered list of meta rows under the price.
                   Supported: 'condition', 'location', 'date'. Default: ['condition', 'date'].

  The component never fabricates data: it only renders fields present on the
  listing. Keep page-specific wiring (modals, etc.) on the page, not here.
#}

{% from "components/premium_badge.html" import premium_badge_pill, featured_badge %}
{% from "components/badges.html" import mk_badge %}
{% from "components/reputation.html" import rep_inline %}
{% from "components/trust_badges.html" import trust_badge_top %}

{% macro listing_card(listing, actions=['view'], show_status=false, meta=['condition', 'date'], saved_at=none, favorite=false, premium_ids=none, section_badge=none, reputations=none, badges=none) %}
  {% set cover = listing.images[0] if listing.images else None %}
  {% set detail_url = url_for('marketplace.listing_detail', public_id=listing.public_id) %}
  <div class="col">
    <div class="card listing-card h-100">
      <div class="listing-thumb-wrap">
        <a class="listing-thumb-link" href="{{ detail_url }}" aria-label="{{ listing.title }}">
          {% if cover %}
            <img class="listing-thumb"
                 src="{{ url_for('marketplace.listing_image', filename=cover.image_path) }}"
                 alt="{{ listing.title }}" loading="lazy" decoding="async">
          {% else %}
            <div class="listing-thumb-placeholder">
              <i class="bi bi-image fs-3" aria-hidden="true"></i>
              <span class="visually-hidden">No image available</span>
            </div>
          {% endif %}
        </a>
        {#
          Single top overlay: a flex row spanning the image. The left cluster
          holds the category + section badges (each sized to its content); the
          right cluster holds the status badge and the fixed favorite button.
          justify-content: space-between guarantees the badge and the heart can
          never overlap, for any badge type or screen size — no margin hacks.
        #}
        <div class="listing-overlay-top">
          <div class="listing-overlay-left">
            <span class="listing-cat-badge">{{ listing.category.name }}</span>
            {% if section_badge %}{{ mk_badge(section_badge) }}{% endif %}
          </div>
          <div class="listing-overlay-right">
            {% if show_status %}
              <span class="badge listing-status-badge status-{{ listing.status.value }}">
                {{ listing.status.value|title }}
              </span>
            {% endif %}
            {% if favorite %}
              {% if current_user.is_authenticated and listing.seller_id != current_user.id %}
                <form class="listing-fav-form" method="post"
                      action="{{ url_for('marketplace.favorite', public_id=listing.public_id) }}">
                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                  <input type="hidden" name="next" value="{{ request.full_path }}">
                  <button type="submit" class="listing-fav-btn" aria-label="Save {{ listing.title }}">
                    <i class="bi bi-heart" aria-hidden="true"></i>
                  </button>
                </form>
              {% elif not current_user.is_authenticated %}
                <a class="listing-fav-btn" href="{{ url_for('auth.login') }}"
                   aria-label="Log in to save {{ listing.title }}">
                  <i class="bi bi-heart" aria-hidden="true"></i>
                </a>
              {% endif %}
            {% endif %}
          </div>
        </div>
      </div>

      <div class="card-body d-flex flex-column">
        <h2 class="h6 listing-title mb-1 text-break">
          <a href="{{ detail_url }}">{{ listing.title }}</a>
        </h2>
        <div class="listing-price mb-2">&#8377;{{ "{:,.2f}".format(listing.price) }}</div>
        {# Seller reputation — read from the precomputed cache map (one query/page,
           no N+1). Absent row / no reviews renders a subtle "New Seller". #}
        {% if reputations is not none %}
          <div class="listing-rep mb-2">
            {{ rep_inline(reputations.get(listing.seller_id)) }}
            {# Highest-priority badge only, to keep the card compact. #}
            {% if badges is not none %}{{ trust_badge_top(badges.get(listing.seller_id)) }}{% endif %}
          </div>
        {% endif %}
        {# Grids pass a precomputed `premium_ids` set (one query/page) so we check
           the seller_id column and never load the seller or query per card.
           Without it (single-card use), fall back to the permissions helper. #}
        {% set seller_is_premium = (listing.seller_id in premium_ids) if premium_ids is not none else show_premium_badge(listing.seller) %}
        {% set listing_featured = is_featured_now(listing) %}
        {# In discovery rows the overlay section_badge already conveys the listing's
           status, so the in-body Featured badge is suppressed there — a card never
           stacks a section badge and a Featured badge at once. #}
        {% set show_featured = listing_featured and not section_badge %}
        {% if show_featured or seller_is_premium %}
          <div class="mb-2 d-flex flex-wrap gap-1">
            {% if show_featured %}{{ featured_badge('sm') }}{% endif %}
            {% if seller_is_premium %}{{ premium_badge_pill('Premium Seller', 'sm') }}{% endif %}
          </div>
        {% endif %}

        {% if meta or saved_at %}
          <ul class="listing-meta-list small text-muted mb-3">
            {% if 'condition' in meta %}
              <li><i class="bi bi-patch-check" aria-hidden="true"></i> {{ listing.condition.value|title }}</li>
            {% endif %}
            {% if 'location' in meta %}
              <li><i class="bi bi-geo-alt" aria-hidden="true"></i> {{ listing.location or 'On campus' }}</li>
            {% endif %}
            {% if 'date' in meta %}
              <li>
                <i class="bi bi-clock" aria-hidden="true"></i>
                <span>Listed <time data-relative datetime="{{ listing.created_at.isoformat() }}">{{ listing.created_at.strftime('%d %b %Y') }}</time></span>
              </li>
            {% endif %}
            {% if saved_at %}
              <li>
                <i class="bi bi-bookmark-check" aria-hidden="true"></i>
                Saved <time data-relative datetime="{{ saved_at.isoformat() }}">{{ saved_at.strftime('%d %b %Y') }}</time>
              </li>
            {% endif %}
          </ul>
        {% endif %}

        {% if actions %}
          <div class="listing-actions mt-auto d-flex gap-2">
            {% if 'view_details' in actions %}
              <a class="mk-btn-view" href="{{ detail_url }}">
                <i class="bi bi-eye" aria-hidden="true"></i> View Details
              </a>
            {% endif %}
            {% if 'view' in actions %}
              <a class="btn btn-sm btn-outline-primary flex-fill" href="{{ detail_url }}">
                <i class="bi bi-eye" aria-hidden="true"></i> View
              </a>
            {% endif %}
            {% if 'quickview' in actions %}
              <button type="button" class="btn btn-sm btn-light flex-fill quick-view-btn"
                      data-bs-toggle="modal" data-bs-target="#quickViewModal"
                      data-qv-title="{{ listing.title }}"
                      data-qv-price="&#8377;{{ '%.2f'|format(listing.price) }}"
                      data-qv-category="{{ listing.category.name }}"
                      data-qv-condition="{{ listing.condition.value|title }}"
                      data-qv-location="{{ listing.location or 'On campus' }}"
                      data-qv-negotiable="{{ 'Negotiable' if listing.negotiable else '' }}"
                      data-qv-seller="{{ listing.seller.profile.full_name if listing.seller.profile else listing.seller.email }}"
                      data-qv-desc="{{ listing.description }}"
                      data-qv-url="{{ detail_url }}"
                      {% if cover %}data-qv-image="{{ url_for('marketplace.listing_image', filename=cover.image_path) }}"{% endif %}>
                Quick View
              </button>
            {% endif %}
            {% if 'edit' in actions %}
              <a class="btn btn-sm btn-outline-secondary"
                 href="{{ url_for('marketplace.edit_listing', public_id=listing.public_id) }}"
                 title="Edit" aria-label="Edit listing">
                <i class="bi bi-pencil" aria-hidden="true"></i>
              </a>
            {% endif %}
            {% if 'delete' in actions %}
              <button type="button" class="btn btn-sm btn-outline-danger"
                      data-bs-toggle="modal" data-bs-target="#deleteListingModal"
                      data-del-url="{{ url_for('marketplace.delete_listing', public_id=listing.public_id) }}"
                      data-del-title="{{ listing.title }}"
                      title="Delete" aria-label="Delete listing">
                <i class="bi bi-trash" aria-hidden="true"></i>
              </button>
            {% endif %}
            {% if 'feature' in actions and listing.status.value == 'available' %}
              {% if can_feature_listing(current_user) %}
                {% if listing_featured %}
                  {% set days_left = featured_days_left(listing) %}
                  <div class="d-flex flex-column align-items-start gap-1">
                    <button type="button" class="btn btn-sm btn-warning" disabled title="This listing is featured">
                      <i class="bi bi-star-fill" aria-hidden="true"></i> Featured
                    </button>
                    <small class="text-muted featured-expiry">
                      Expires in {{ days_left }} day{{ '' if days_left == 1 else 's' }}
                    </small>
                    <a class="small" href="{{ url_for('premium.feature_listing') }}">Change Featured</a>
                  </div>
                {% else %}
                  <form method="post" class="m-0"
                        action="{{ url_for('marketplace.feature_listing_view', public_id=listing.public_id) }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button type="submit" class="btn btn-sm btn-outline-warning" title="Feature this listing">
                      <i class="bi bi-star" aria-hidden="true"></i> Feature Listing
                    </button>
                  </form>
                {% endif %}
              {% else %}
                <a class="btn btn-sm btn-outline-secondary" href="{{ url_for('premium.index') }}"
                   title="Featuring is a Premium feature — upgrade to unlock">
                  <i class="bi bi-lock-fill" aria-hidden="true"></i> Upgrade to Premium
                  <span class="badge premium-required-badge ms-1">Premium</span>
                </a>
              {% endif %}
            {% endif %}
            {% if 'remove_saved' in actions %}
              <form method="post"
                    action="{{ url_for('marketplace.unfavorite', public_id=listing.public_id) }}"
                    class="m-0">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit" class="btn btn-sm btn-outline-danger"
                        title="Remove from Saved" aria-label="Remove from Saved">
                  <i class="bi bi-bookmark-x" aria-hidden="true"></i>
                </button>
              </form>
            {% endif %}
          </div>
        {% endif %}
      </div>
    </div>
  </div>
{% endmacro %}