{% extends 'base.html' %}
{% from '_macros.html' import product_card, star_rating with context %}

{% block title %}{{ product.title }} · TradeHub{% endblock %}

{% block content %}
<div class="container">

  <div style="margin: var(--space-5) 0; font-size: 13px; color: var(--color-text-muted);">
    <a href="{{ url_for('main.index') }}" style="color: var(--color-text-muted);">Home</a>
    &rsaquo;
    <a href="{{ url_for('main.index', category=product.category) }}" style="color: var(--color-text-muted);">{{ product.category_label }}</a>
    &rsaquo;
    <span>{{ product.title }}</span>
  </div>

  <div class="product-detail">
    {# Left: Image gallery #}
    <div>
      <div class="gallery-main" data-gallery-main>
        <img src="{{ product.primary_image }}" alt="{{ product.title }}">
      </div>
      {% if product.images and product.images | length > 1 %}
      <div class="gallery-thumbs">
        {% for img in product.images %}
          <div class="gallery-thumb {% if loop.first %}active{% endif %}" data-gallery-thumb data-src="{{ img.image_url }}">
            <img src="{{ img.image_url }}" alt="Thumbnail {{ loop.index }}">
          </div>
        {% endfor %}
      </div>
      {% endif %}
    </div>

    {# Right: Info + CTAs #}
    <div>
      <div class="detail-header">
        <h1 class="detail-title">{{ product.title }}</h1>
        <div class="detail-price">${{ '%.2f' % product.price }}</div>

        <div style="display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;">
          <span class="cond-tag cond-{{ product.condition }}">{{ product.condition_label }}</span>
          {% if product.status != 'active' %}
            <span class="status-badge status-{{ product.status }}">{{ product.status | title }}</span>
          {% endif %}
        </div>
      </div>

      <div class="detail-meta">
        <div class="detail-meta-item">
          <i data-lucide="clock" width="16" height="16"></i>
          {{ product.created_at | time_ago }}
        </div>
        {% if product.location %}
        <div class="detail-meta-item">
          <i data-lucide="map-pin" width="16" height="16"></i>
          {{ product.location }}
        </div>
        {% endif %}
        <div class="detail-meta-item">
          <i data-lucide="eye" width="16" height="16"></i>
          {{ product.views or 0 }} views
        </div>
        <div class="detail-meta-item">
          <i data-lucide="heart" width="16" height="16"></i>
          {{ product.wishlist_count }} likes
        </div>
      </div>

      {% if product.description %}
      <div class="detail-description">{{ product.description }}</div>
      {% endif %}

      {# Action buttons #}
      <div class="detail-actions">
        {% if current_user.is_authenticated and current_user.id == product.seller_id %}
          <a href="{{ url_for('products.edit', product_id=product.id) }}" class="btn btn-outline btn-lg">
            <i data-lucide="edit-3" width="18" height="18"></i> Edit listing
          </a>
          {% if product.status == 'active' %}
          <form method="POST" action="{{ url_for('products.mark_sold', product_id=product.id) }}" style="flex:1;">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button type="submit" class="btn btn-success btn-lg w-full">
              <i data-lucide="check" width="18" height="18"></i> Mark as sold
            </button>
          </form>
          {% endif %}
        {% elif product.status == 'active' %}
          <a href="{{ url_for('messages.start', other_user_id=product.seller_id, product_id=product.id) }}" class="btn btn-outline btn-lg">
            <i data-lucide="message-circle" width="18" height="18"></i> Chat
          </a>
          <a href="{{ url_for('orders.buy', product_id=product.id) }}" class="btn btn-primary btn-lg">
            <i data-lucide="shopping-cart" width="18" height="18"></i> Buy now
          </a>
          {% if current_user.is_authenticated %}
          <button type="button" class="btn btn-ghost btn-icon {% if is_wishlisted %}active{% endif %}" data-wishlist-toggle="{{ product.id }}" aria-label="Wishlist"
                  style="border: 1px solid var(--color-border);">
            <i data-lucide="heart" width="20" height="20"></i>
          </button>
          {% endif %}
        {% else %}
          <button type="button" class="btn btn-outline btn-lg w-full" disabled>This item is no longer available</button>
        {% endif %}
      </div>
    </div>
  </div>

  {# Seller card #}
  <div class="seller-card">
    <img src="{{ product.seller.avatar }}" alt="{{ product.seller.username }}" class="avatar avatar-lg">
    <div class="seller-card-info">
      <strong>
        <a href="{{ url_for('users.profile', username=product.seller.username) }}">{{ product.seller.username }}</a>
      </strong>
      <small>
        {% if product.seller.rating_count > 0 %}
          {{ star_rating(product.seller.rating_avg) }}
          {{ product.seller.rating_avg }} ({{ product.seller.rating_count }} reviews)
        {% else %}
          No reviews yet
        {% endif %}
        &middot; Joined {{ product.seller.created_at | time_ago }}
      </small>
    </div>
    <a href="{{ url_for('users.profile', username=product.seller.username) }}" class="btn btn-outline btn-sm">
      View profile
    </a>
  </div>

  {# Reviews #}
  {% if reviews %}
  <h2 class="section-title">Reviews</h2>
  <div class="form-card" style="max-width: none;">
    {% for review in reviews %}
      <div class="review-item">
        <img src="{{ review.reviewer.avatar }}" alt="{{ review.reviewer.username }}" class="avatar">
        <div class="review-body">
          <div class="review-header">
            <span class="review-author">{{ review.reviewer.username }}</span>
            {{ star_rating(review.rating, 14) }}
            <span class="review-time">{{ review.created_at | time_ago }}</span>
          </div>
          {% if review.content %}
            <p class="review-content">{{ review.content }}</p>
          {% endif %}
        </div>
      </div>
    {% endfor %}
  </div>
  {% endif %}

  {# Related products #}
  {% if related %}
  <h2 class="section-title">You may also like</h2>
  <div class="product-grid">
    {% for p in related %}
      {{ product_card(p) }}
    {% endfor %}
  </div>
  {% endif %}

</div>

{# Lightbox #}
<div class="lightbox" data-lightbox>
  <button class="lightbox-close" aria-label="Close">&times;</button>
  <img src="" alt="Full-size view">
</div>

{% endblock %}