{# Reusable components / partials #}

{# ------ Product card ------ #}
{% macro product_card(product, is_wishlisted=false) -%}
<div class="product-card">
  <a href="{{ url_for('products.detail', product_id=product.id) }}" class="product-card-media">
    <img src="{{ product.primary_image }}" alt="{{ product.title }}" loading="lazy">
    <span class="price-badge">${{ '%.2f' % product.price }}</span>
    {% if current_user.is_authenticated and current_user.id != product.seller_id %}
      <button type="button" class="wishlist-btn {% if is_wishlisted %}active{% endif %}"
              data-wishlist-toggle="{{ product.id }}" aria-label="Add to wishlist">
        <i data-lucide="heart" width="18" height="18"></i>
      </button>
    {% endif %}
  </a>
  <div class="product-card-body">
    <a href="{{ url_for('products.detail', product_id=product.id) }}" class="product-card-title">{{ product.title }}</a>
    <div class="product-card-meta">
      <span class="cond-tag cond-{{ product.condition }}">{{ product.condition_label }}</span>
      <span>&middot;</span>
      <span>{{ product.created_at | time_ago }}</span>
    </div>
    {% if product.seller %}
      <div class="product-card-seller">
        <img src="{{ product.seller.avatar }}" alt="{{ product.seller.username }}" class="avatar avatar-sm" style="width:20px; height:20px;">
        <span>{{ product.seller.username }}</span>
      </div>
    {% endif %}
  </div>
</div>
{%- endmacro %}


{# ------ Star rating display (read-only) ------ #}
{% macro star_rating(rating, size=14) -%}
<span class="rating-stars" style="font-size: {{ size }}px;">
  {% for i in range(1, 6) %}
    {% if i <= rating|int %}
      <i data-lucide="star" width="{{ size }}" height="{{ size }}" style="fill: currentColor;"></i>
    {% else %}
      <i data-lucide="star" width="{{ size }}" height="{{ size }}"></i>
    {% endif %}
  {% endfor %}
</span>
{%- endmacro %}


{# ------ Form field ------ #}
{% macro form_field(field, placeholder='', type=None, hint=None) -%}
<div class="form-group">
  {{ field.label(class="form-label") }}
  {% set ftype = type or field.type %}
  {% if ftype == 'TextAreaField' %}
    {{ field(class="form-textarea" + (' error' if field.errors else ''), placeholder=placeholder) }}
  {% elif ftype == 'SelectField' %}
    {{ field(class="form-select" + (' error' if field.errors else '')) }}
  {% elif ftype == 'BooleanField' %}
    <label class="form-check">
      {{ field() }}
      <span>{{ field.label.text }}</span>
    </label>
  {% else %}
    {{ field(class="form-input" + (' error' if field.errors else ''), placeholder=placeholder) }}
  {% endif %}
  {% if hint and not field.errors %}
    <div class="form-hint">{{ hint }}</div>
  {% endif %}
  {% if field.errors %}
    {% for e in field.errors %}
      <div class="form-error">{{ e }}</div>
    {% endfor %}
  {% endif %}
</div>
{%- endmacro %}


{# ------ Empty state ------ #}
{% macro empty_state(icon='package', title='Nothing here yet', message='Check back later.', cta_url=None, cta_text=None) -%}
<div class="empty-state">
  <i data-lucide="{{ icon }}" width="56" height="56"></i>
  <h3>{{ title }}</h3>
  <p>{{ message }}</p>
  {% if cta_url %}
    <a href="{{ cta_url }}" class="btn btn-primary mt-4">{{ cta_text }}</a>
  {% endif %}
</div>
{%- endmacro %}