{% extends "base.html" %}
{% from "components/listing_card.html" import listing_card with context %}
{% from "components/premium_badge.html" import premium_badge %}
{% from "components/reputation.html" import rep_detail %}
{% from "components/trust_badges.html" import trust_badges %}

{% block title %}{{ listing.title }} · CampusCart{% endblock %}

{% block content %}
{% set seller = listing.seller %}
{% set seller_name = seller.profile.full_name if seller.profile else seller.email %}
{% set seller_pic = seller.profile.profile_picture if seller.profile else None %}
{% set can_toggle = current_user.is_authenticated and not is_owner %}
{% if can_toggle %}
  {# One toggle endpoint reused by the heart and the Save button. #}
  {% set fav_action = url_for('marketplace.unfavorite' if is_saved else 'marketplace.favorite', public_id=listing.public_id) %}
{% endif %}

<div class="item-view">
  <div class="row g-4">
    <!-- ============ Left: gallery + description ============ -->
    <div class="col-lg-8">

      <!-- Gallery -->
      <div class="iv-card iv-gallery mb-4">
        <div class="iv-hero">
          {% if listing.images %}
            {% set cover = listing.images[0] %}
            <img data-gallery-main
                 src="{{ url_for('marketplace.listing_image', filename=cover.image_path) }}"
                 alt="{{ listing.title }}" decoding="async" fetchpriority="high">
          {% else %}
            <div class="iv-hero-ph">
              <i class="bi bi-image" aria-hidden="true"></i>
              <span class="visually-hidden">No image available</span>
            </div>
          {% endif %}

          {% if can_toggle %}
            <form method="post" action="{{ fav_action }}" class="m-0">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <input type="hidden" name="next" value="{{ request.path }}">
              <button type="submit" class="iv-fav {{ 'is-saved' if is_saved }}"
                      aria-pressed="{{ 'true' if is_saved else 'false' }}"
                      aria-label="{{ 'Remove from Saved' if is_saved else 'Save to favorites' }}">
                <i class="bi {{ 'bi-heart-fill' if is_saved else 'bi-heart' }}" aria-hidden="true"></i>
              </button>
            </form>
          {% elif not current_user.is_authenticated %}
            <a class="iv-fav" href="{{ url_for('auth.login', next=request.path) }}" aria-label="Log in to save">
              <i class="bi bi-heart" aria-hidden="true"></i>
            </a>
          {% endif %}
        </div>

        {% if listing.images|length > 1 %}
          <div class="iv-thumbs no-scrollbar">
            {% for image in listing.images %}
              <button type="button" class="iv-thumb {{ 'active' if loop.first }}"
                      data-gallery-thumb
                      data-full-src="{{ url_for('marketplace.listing_image', filename=image.image_path) }}"
                      aria-label="View photo {{ loop.index }}">
                <img src="{{ url_for('marketplace.listing_image', filename=image.image_path) }}"
                     alt="{{ image.caption or listing.title }}" loading="lazy" decoding="async">
              </button>
            {% endfor %}
          </div>
        {% endif %}
      </div>

      <!-- Description -->
      <div class="iv-card iv-desc-card">
        <h2 class="iv-section-title">Product Description</h2>
        <p class="iv-desc">{{ listing.description }}</p>
      </div>
    </div>

    <!-- ============ Right: sticky info / seller / safety ============ -->
    <div class="col-lg-4">
      <div class="iv-sticky">

        <!-- Product info -->
        <div class="iv-card iv-info mb-4">
          <div class="iv-info-top">
            <span class="iv-cat-badge">{{ listing.category.name }}</span>
            <span class="iv-posted">
              <i class="bi bi-clock" aria-hidden="true"></i>
              <time data-relative datetime="{{ listing.created_at.isoformat() }}">{{ listing.created_at.strftime('%d %b %Y') }}</time>
            </span>
          </div>

          {% if is_featured_now(listing) %}
            <div class="iv-featured-banner">
              <i class="bi bi-star-fill" aria-hidden="true"></i> Featured Listing
              <span class="iv-featured-until">· Featured until {{ listing.featured_until.strftime('%d %B %Y') }}</span>
            </div>
          {% endif %}

          <h1 class="iv-title text-break">{{ listing.title }}</h1>
          <p class="iv-price">&#8377;{{ "{:,.2f}".format(listing.price) }}</p>

          {% if listing.status.value == 'reserved' %}
            <div class="alert alert-warning py-2 px-3 mb-3 small" role="status">
              <i class="bi bi-clock-history me-1" aria-hidden="true"></i>
              This item is currently reserved for another buyer.
            </div>
          {% elif listing.status.value == 'sold' %}
            <div class="alert alert-secondary py-2 px-3 mb-3 small" role="status">
              <i class="bi bi-bag-check me-1" aria-hidden="true"></i>
              This item has been sold.
            </div>
          {% endif %}

          <div class="iv-tiles">
            <div class="iv-tile">
              <span class="iv-tile-label">Condition</span>
              <div class="iv-tile-value">
                <i class="bi bi-shield-check iv-ico-green" aria-hidden="true"></i>
                {{ listing.condition.value|title }}
              </div>
            </div>
            <div class="iv-tile">
              <span class="iv-tile-label">Location</span>
              <div class="iv-tile-value">
                <i class="bi bi-geo-alt-fill iv-ico-blue" aria-hidden="true"></i>
                {{ listing.location or 'On campus' }}
              </div>
            </div>
          </div>

          {% if not is_owner %}
            <div class="iv-actions">
              {% if current_user.is_authenticated and listing.status.value == 'available' %}
                <a class="iv-btn iv-btn-primary" href="{{ url_for('chat.start', listing_public_id=listing.public_id) }}">
                  <i class="bi bi-chat-left-text" aria-hidden="true"></i> Message Seller
                </a>
              {% elif current_user.is_authenticated and listing.status.value != 'available' %}
                <button type="button" class="iv-btn iv-btn-primary" disabled>
                  <i class="bi bi-chat-left-text" aria-hidden="true"></i> Message Seller
                </button>
              {% else %}
                <a class="iv-btn iv-btn-primary" href="{{ url_for('auth.login', next=request.path) }}">
                  <i class="bi bi-chat-left-text" aria-hidden="true"></i> Message Seller
                </a>
              {% endif %}

              {% if can_toggle %}
                <form method="post" action="{{ fav_action }}">
                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                  <input type="hidden" name="next" value="{{ request.path }}">
                  <button type="submit" class="iv-btn iv-btn-secondary">
                    <i class="bi {{ 'bi-bookmark-check-fill' if is_saved else 'bi-bookmark' }}" aria-hidden="true"></i>
                    {{ 'Saved' if is_saved else 'Save for Later' }}
                  </button>
                </form>
              {% else %}
                <a class="iv-btn iv-btn-secondary" href="{{ url_for('auth.login', next=request.path) }}">
                  <i class="bi bi-bookmark" aria-hidden="true"></i> Save for Later
                </a>
              {% endif %}
            </div>
            {# ---- Review CTA (buyer of a completed transaction) ---- #}
            {% if review_ctx %}
              <div class="iv-actions mt-2">
                {% if review_ctx.already_reviewed %}
                  <p class="iv-review-done mb-0"><i class="bi bi-check-circle-fill" aria-hidden="true"></i> Review submitted</p>
                {% else %}
                  <a class="iv-btn iv-btn-secondary" href="{{ url_for('reviews.submit', public_id=review_ctx.transaction.public_id) }}">
                    <i class="bi bi-star" aria-hidden="true"></i> Leave Review for {{ review_ctx.review_for|title }}
                  </a>
                {% endif %}
              </div>
            {% endif %}
            {% if listing.negotiable %}
              <p class="iv-note">Negotiate with the seller through secure chat.</p>
            {% endif %}

            {# ---- Report listing ---- #}
            {% if can_report %}
              {% if already_reported %}
                <p class="iv-report-note text-muted small mb-0"><i class="bi bi-flag me-1"></i> You've reported this listing — our moderators are reviewing it.</p>
              {% else %}
                <button type="button" class="iv-report-link" data-bs-toggle="modal" data-bs-target="#reportModal">
                  <i class="bi bi-flag" aria-hidden="true"></i> Report Listing
                </button>
              {% endif %}
            {% elif not current_user.is_authenticated %}
              <a class="iv-report-link" href="{{ url_for('auth.login', next=request.path) }}">
                <i class="bi bi-flag" aria-hidden="true"></i> Report Listing
              </a>
            {% endif %}
          {% endif %}
        </div>

        {# ---- Listing Tools (owner only) ----
             Full-width, vertically-stacked management actions grouped into
             Premium Features and Manage Listing. Every action maps to an
             existing route; premium-gated tools degrade to an upsell and
             lifecycle actions that aren't valid yet render disabled. Buyers
             never reach this block (guarded by is_owner). #}
        {% if is_owner %}
          {% set _premium = can_feature_listing(current_user) %}
          {% set _featured = is_featured_now(listing) %}
          {% set _status = listing.status.value %}
          <div class="iv-card iv-tools mb-4">
            <div class="iv-tools-head">
              <h3 class="iv-tools-title mb-0"><i class="bi bi-sliders me-2" aria-hidden="true"></i> Listing Tools</h3>
              {% if _premium %}<span class="badge text-bg-warning">Premium</span>{% endif %}
            </div>

            {# ---- Premium Features ---- #}
            <div class="iv-tools-group">
              <p class="iv-tools-label">Premium Features</p>
              {% if _premium %}
                {% if _featured %}
                  <a class="iv-tool-btn iv-tool-warning" href="{{ url_for('premium.feature_listing') }}">
                    <i class="bi bi-arrow-repeat" aria-hidden="true"></i>
                    <span>Change Featured</span>
                    <small class="iv-tool-note">Featured · {{ featured_days_left(listing) }} day{{ '' if featured_days_left(listing) == 1 else 's' }} left</small>
                  </a>
                {% elif _status == 'available' %}
                  <form method="post" 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="iv-tool-btn iv-tool-warning">
                      <i class="bi bi-stars" aria-hidden="true"></i> <span>Feature Listing</span>
                    </button>
                  </form>
                {% else %}
                  <span class="iv-tool-btn is-disabled" title="Only available listings can be featured.">
                    <i class="bi bi-stars" aria-hidden="true"></i> <span>Feature Listing</span>
                  </span>
                {% endif %}
                <a class="iv-tool-btn" href="{{ url_for('premium.analytics') }}">
                  <i class="bi bi-graph-up-arrow" aria-hidden="true"></i> <span>View Analytics</span>
                </a>
              {% else %}
                <a class="iv-tool-btn iv-tool-locked" href="{{ url_for('premium.index') }}">
                  <i class="bi bi-stars" aria-hidden="true"></i> <span>Feature Listing</span>
                  <i class="bi bi-lock-fill iv-tool-lock" aria-hidden="true"></i>
                </a>
                <a class="iv-tool-btn iv-tool-locked" href="{{ url_for('premium.index') }}">
                  <i class="bi bi-graph-up-arrow" aria-hidden="true"></i> <span>View Analytics</span>
                  <i class="bi bi-lock-fill iv-tool-lock" aria-hidden="true"></i>
                </a>
                <p class="iv-tools-hint mb-0"><i class="bi bi-lock-fill" aria-hidden="true"></i>
                  Upgrade to Premium to feature listings and unlock seller analytics.</p>
              {% endif %}
            </div>

            <hr class="iv-tools-divider">

            {# ---- Manage Listing ---- #}
            <div class="iv-tools-group">
              <p class="iv-tools-label">Manage Listing</p>
              <a class="iv-tool-btn" href="{{ url_for('marketplace.edit_listing', public_id=listing.public_id) }}">
                <i class="bi bi-pencil" aria-hidden="true"></i> <span>Edit Listing</span>
              </a>
              {% if _status == 'reserved' %}
                <button type="button" class="iv-tool-btn iv-tool-success"
                        data-bs-toggle="modal" data-bs-target="#completeTransactionModal">
                  <i class="bi bi-check2-circle" aria-hidden="true"></i> <span>Complete Transaction</span>
                </button>
              {% elif _status == 'sold' %}
                <span class="iv-tool-btn is-disabled">
                  <i class="bi bi-check2-circle" aria-hidden="true"></i> <span>Transaction Completed</span>
                </span>
              {% else %}
                <span class="iv-tool-btn is-disabled" title="You can complete the sale once a buyer reserves it with an accepted offer.">
                  <i class="bi bi-check2-circle" aria-hidden="true"></i> <span>Complete Transaction</span>
                </span>
              {% endif %}
              {# ---- Review CTA (seller of a completed transaction) ---- #}
              {% if review_ctx %}
                {% if review_ctx.already_reviewed %}
                  <span class="iv-tool-btn is-disabled"><i class="bi bi-check-circle" aria-hidden="true"></i> <span>Review Submitted</span></span>
                {% else %}
                  <a class="iv-tool-btn iv-tool-warning" href="{{ url_for('reviews.submit', public_id=review_ctx.transaction.public_id) }}">
                    <i class="bi bi-star" aria-hidden="true"></i> <span>Leave Review for {{ review_ctx.review_for|title }}</span>
                  </a>
                {% endif %}
              {% endif %}
              <button type="button" class="iv-tool-btn iv-tool-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 }}">
                <i class="bi bi-trash" aria-hidden="true"></i> <span>Delete Listing</span>
              </button>
            </div>
          </div>
        {% endif %}

        <!-- Seller (whole card links to the public profile) -->
        <div class="iv-card iv-seller mb-4 position-relative">
          <h3 class="iv-seller-title">Seller Information</h3>
          <div class="iv-seller-row">
            <div class="iv-seller-avatar-wrap">
              {% if seller_pic %}
                <img class="iv-seller-avatar" src="{{ url_for('auth.profile_picture', filename=seller_pic) }}"
                     alt="{{ seller_name }}">
              {% else %}
                <span class="iv-seller-avatar" aria-hidden="true">{{ seller_name[0]|upper }}</span>
              {% endif %}
              {% if seller.is_student_verified %}
                <span class="iv-seller-check" aria-hidden="true"><i class="bi bi-check-lg"></i></span>
              {% endif %}
            </div>
            <div class="min-w-0">
              <div class="iv-seller-name d-flex align-items-center gap-2 flex-wrap">
                {{ seller_name }}
                {{ premium_badge(seller, 'Premium Seller', 'sm') }}
              </div>
              <div class="iv-seller-sub">{{ 'Verified student' if seller.is_student_verified else 'Student' }}</div>
            </div>
            <a class="iv-seller-link stretched-link"
               href="{{ url_for('auth.public_profile', public_id=seller.public_id) }}">View Profile</a>
          </div>
          {# Seller reputation — cached values only (no AVG/COUNT at render). #}
          {{ rep_detail(seller_reputation) }}
          {# All earned trust badges (auto-derived from cached reputation). #}
          {{ trust_badges(seller_badges) }}
          <div class="iv-seller-meta">
            <div class="iv-seller-meta-row">
              <span class="k">Member since</span>
              <span class="v">{{ seller.created_at.strftime('%b %Y') }}</span>
            </div>
            <div class="iv-seller-meta-row">
              <span class="k">Status</span>
              <span class="v">{{ 'Verified' if seller.is_student_verified else 'Active' }}</span>
            </div>
          </div>
        </div>

        <!-- Safety tips -->
        <div class="iv-safety">
          <div class="iv-safety-head">
            <i class="bi bi-shield-lock-fill" aria-hidden="true"></i>
            <span>Safe Buying Tips</span>
          </div>
          <p>Meet in public campus areas, inspect items before payment, and keep the whole conversation on CampusCart until you're ready.</p>
        </div>

      </div>
    </div>
  </div>

  <!-- ============ Related listings ============ -->
  {% if related %}
    <section class="iv-related">
      <div class="iv-related-head">
        <h2 class="iv-section-title mb-0">You may also like</h2>
        <a class="iv-related-link" href="{{ url_for('main.marketplace', category=listing.category_id) }}">
          See all <i class="bi bi-arrow-right" aria-hidden="true"></i>
        </a>
      </div>
      <div class="marketplace-catalog">
        <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4">
          {% for item in related %}
            {{ listing_card(item,
                            actions=['view_details'],
                            show_status=false,
                            meta=['condition', 'location'],
                            favorite=false,
                            premium_ids=premium_seller_ids,
                            reputations=reputation_map,
                            badges=badge_map) }}
          {% endfor %}
        </div>
      </div>
    </section>
  {% endif %}
</div>

{# ---- Report Listing modal ---- #}
{% if can_report and not already_reported and report_form %}
  <div class="modal fade" id="reportModal" tabindex="-1" aria-labelledby="reportModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <form class="modal-content" method="post" action="{{ url_for('marketplace.report_listing', public_id=listing.public_id) }}">
        {{ report_form.hidden_tag() }}
        <div class="modal-header">
          <h5 class="modal-title" id="reportModalLabel"><i class="bi bi-flag-fill text-danger me-2"></i>Report Listing</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p class="text-muted small">Tell us what's wrong with “{{ listing.title }}”. Reports are reviewed by our moderators and are confidential.</p>
          <div class="mb-3">
            {{ report_form.reason.label(class="form-label") }}
            {{ report_form.reason(class="form-select") }}
          </div>
          <div class="mb-1">
            {{ report_form.description.label(class="form-label") }}
            {{ report_form.description(class="form-control") }}
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-danger"><i class="bi bi-flag me-1"></i> Submit report</button>
        </div>
      </form>
    </div>
  </div>
{% endif %}

{# ---- Delete confirmation modal (owner only) ---- #}
{% if is_owner %}
  {% include "components/delete_listing_modal.html" %}
{% endif %}

{# ---- Complete Transaction confirmation (owner, reserved listing) ---- #}
{% if is_owner and listing.status.value == 'reserved' %}
  <div class="modal fade" id="completeTransactionModal" tabindex="-1"
       aria-labelledby="completeTransactionLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <form class="modal-content" method="post"
            action="{{ url_for('marketplace.complete_transaction', public_id=listing.public_id) }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="modal-header">
          <h2 class="modal-title h5" id="completeTransactionLabel">
            <i class="bi bi-check2-circle text-success me-1" aria-hidden="true"></i> Complete Transaction?
          </h2>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p class="mb-2">This confirms that the item has been successfully exchanged with the buyer.</p>
          <p class="mb-0 text-muted small">
            <i class="bi bi-star me-1" aria-hidden="true"></i>
            Once completed, both buyer and seller will be able to leave a review.
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-success">
            <i class="bi bi-check2-circle me-1" aria-hidden="true"></i> Complete Transaction
          </button>
        </div>
      </form>
    </div>
  </div>
{% endif %}
{% endblock %}