{% extends 'base.html' %}
{% from '_macros.html' import empty_state %}

{% block title %}My orders · TradeHub{% endblock %}

{% block content %}
<div class="container">
  <div class="page-header">
    <h1>My orders</h1>
    <p>Track your buying and selling activity.</p>
  </div>

  <div class="tabs">
    <a href="{{ url_for('orders.my_orders', tab='buying') }}"
       class="tab {% if tab == 'buying' %}active{% endif %}">Buying</a>
    <a href="{{ url_for('orders.my_orders', tab='selling') }}"
       class="tab {% if tab == 'selling' %}active{% endif %}">Selling</a>
  </div>

  {% if orders %}
  <div class="order-list">
    {% for order in orders %}
      {% set product = order.product %}
      {% set is_seller = (tab == 'selling') %}
      <div class="order-card">
        <a href="{{ url_for('products.detail', product_id=product.id) }}" class="order-card-img">
          <img src="{{ product.primary_image }}" alt="{{ product.title }}">
        </a>
        <div>
          <div class="order-card-title">{{ product.title }}</div>
          <div class="order-card-price">${{ '%.2f' % product.price }}</div>
          <div class="order-meta">
            <span class="status-badge status-{{ order.status }}">{{ order.status_label }}</span>
            <span>
              <i data-lucide="user" width="13" height="13" style="vertical-align:middle;"></i>
              {% if is_seller %}Buyer: {{ order.buyer.username }}
              {% else %}Seller: {{ product.seller.username }}{% endif %}
            </span>
            <span>
              <i data-lucide="calendar" width="13" height="13" style="vertical-align:middle;"></i>
              {{ order.created_at.strftime('%b %d, %Y') }}
            </span>
          </div>
          {% if order.note %}
            <p class="text-sm text-muted" style="margin-top: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--color-bg); border-radius: var(--radius-sm);">
              <strong>Note:</strong> {{ order.note }}
            </p>
          {% endif %}
        </div>

        <div class="order-actions">
          {# Chat button (both roles) — other user is the opposite of current role #}
          {% set other_id = order.buyer_id if is_seller else product.seller_id %}
          <a href="{{ url_for('messages.start', other_user_id=other_id, product_id=product.id) }}" class="btn btn-outline btn-sm">
            <i data-lucide="message-circle" width="14" height="14"></i> Chat
          </a>

          {# Seller actions #}
          {% if is_seller %}
            {% if order.status == 'pending' %}
              <form method="POST" action="{{ url_for('orders.accept', order_id=order.id) }}">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit" class="btn btn-success btn-sm w-full">
                  <i data-lucide="check" width="14" height="14"></i> Accept
                </button>
              </form>
              <form method="POST" action="{{ url_for('orders.reject', order_id=order.id) }}">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit" class="btn btn-ghost btn-sm w-full">Reject</button>
              </form>
            {% endif %}
          {% endif %}

          {# Complete (both parties can do it) #}
          {% if order.status == 'confirmed' %}
            <form method="POST" action="{{ url_for('orders.complete', order_id=order.id) }}">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <button type="submit" class="btn btn-success btn-sm w-full">
                <i data-lucide="check-check" width="14" height="14"></i> Complete
              </button>
            </form>
          {% endif %}

          {# Cancel (buyer) #}
          {% if not is_seller and order.status in ('pending', 'confirmed') %}
            <form method="POST" action="{{ url_for('orders.cancel', order_id=order.id) }}">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <button type="submit" class="btn btn-ghost btn-sm w-full">Cancel</button>
            </form>
          {% endif %}

          {# Leave review (buyer, completed, no review yet) #}
          {% if not is_seller and order.status == 'completed' and not order.review %}
            <a href="{{ url_for('reviews.new', order_id=order.id) }}" class="btn btn-primary btn-sm">
              <i data-lucide="star" width="14" height="14"></i> Review
            </a>
          {% endif %}

          {# Already reviewed #}
          {% if not is_seller and order.review %}
            <a href="{{ url_for('reviews.edit', review_id=order.review.id) }}" class="btn btn-ghost btn-sm">
              Edit review
            </a>
          {% endif %}
        </div>
      </div>
    {% endfor %}
  </div>
  {% else %}
    {{ empty_state(
        icon='shopping-bag',
        title='No orders yet',
        message='Browse the marketplace to find something you like.' if tab == 'buying' else 'No incoming orders — list something to start selling.',
        cta_url=url_for('main.index') if tab == 'buying' else url_for('products.publish'),
        cta_text='Browse items' if tab == 'buying' else 'List an item'
    ) }}
  {% endif %}

</div>
{% endblock %}