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

{% block title %}{{ user.username }} · TradeHub{% endblock %}

{% block content %}
<div class="container">
  <section class="profile-header">
    <img src="{{ user.avatar }}" alt="{{ user.username }}" class="avatar avatar-xl">
    <div class="profile-info">
      <h1>{{ user.username }}</h1>
      {% if user.bio %}
        <p class="profile-bio">{{ user.bio }}</p>
      {% else %}
        <p class="profile-bio">Member since {{ user.created_at.strftime('%B %Y') }}</p>
      {% endif %}

      <div class="profile-stats">
        <div class="stat">
          <span class="stat-value">{{ user.items_listed_count }}</span>
          <span class="stat-label">Listed</span>
        </div>
        <div class="stat">
          <span class="stat-value">{{ user.items_sold_count }}</span>
          <span class="stat-label">Sold</span>
        </div>
        <div class="stat">
          <span class="stat-value">
            {% if user.rating_count > 0 %}{{ user.rating_avg }}{% else %}—{% endif %}
          </span>
          <span class="stat-label">Rating ({{ user.rating_count }})</span>
        </div>
      </div>
    </div>
    {% if current_user.is_authenticated and current_user.id == user.id %}
      <a href="{{ url_for('users.edit_profile') }}" class="btn btn-outline">
        <i data-lucide="edit" width="16" height="16"></i> Edit profile
      </a>
    {% elif current_user.is_authenticated %}
      <a href="{{ url_for('messages.start', other_user_id=user.id) }}" class="btn btn-primary">
        <i data-lucide="message-circle" width="16" height="16"></i> Message
      </a>
    {% endif %}
  </section>

  <nav class="tabs">
    <a href="{{ url_for('users.profile', username=user.username, tab='listings') }}"
       class="tab {% if tab == 'listings' %}active{% endif %}">
      Listings ({{ listings | length }})
    </a>
    <a href="{{ url_for('users.profile', username=user.username, tab='reviews') }}"
       class="tab {% if tab == 'reviews' %}active{% endif %}">
      Reviews ({{ reviews | length }})
    </a>
  </nav>

  {% if tab == 'listings' %}
    {% if listings %}
      <div class="product-grid">
        {% for product in listings %}{{ product_card(product) }}{% endfor %}
      </div>
    {% else %}
      {{ empty_state(icon='package', title='No active listings', message='This user has no items for sale right now.') }}
    {% endif %}
  {% elif tab == 'reviews' %}
    {% if reviews %}
      <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) }}
                <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>
    {% else %}
      {{ empty_state(icon='star', title='No reviews yet', message='Reviews from completed orders will appear here.') }}
    {% endif %}
  {% endif %}
</div>
{% endblock %}