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

{% block title %}Dashboard · TradeHub{% endblock %}

{% block content %}
<div class="container">
  <div class="page-header">
    <h1>Dashboard</h1>
    <p>Manage your listings, orders, wishlist, and more.</p>
  </div>

  <nav class="tabs">
    <a href="{{ url_for('users.dashboard', tab='listings') }}"
       class="tab {% if tab == 'listings' %}active{% endif %}">
      <i data-lucide="package" width="14" height="14"></i> Listings
    </a>
    <a href="{{ url_for('users.dashboard', tab='buying') }}"
       class="tab {% if tab == 'buying' %}active{% endif %}">
      <i data-lucide="shopping-bag" width="14" height="14"></i> Buying
    </a>
    <a href="{{ url_for('users.dashboard', tab='selling') }}"
       class="tab {% if tab == 'selling' %}active{% endif %}">
      <i data-lucide="dollar-sign" width="14" height="14"></i> Selling
    </a>
    <a href="{{ url_for('users.dashboard', tab='wishlist') }}"
       class="tab {% if tab == 'wishlist' %}active{% endif %}">
      <i data-lucide="heart" width="14" height="14"></i> Wishlist
    </a>
  </nav>

  {# ============ Listings tab ============ #}
  {% if tab == 'listings' %}
    <div style="display:flex; justify-content:flex-end; margin-bottom: var(--space-5);">
      <a href="{{ url_for('products.publish') }}" class="btn btn-primary">
        <i data-lucide="plus" width="16" height="16"></i> New listing
      </a>
    </div>
    {% if listings %}
      <div class="product-grid">
        {% for product in listings %}
          <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>
            </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="status-badge status-{{ product.status }}">{{ product.status }}</span>
                <span>&middot;</span>
                <span>{{ product.views or 0 }} views</span>
              </div>
              <div style="display:flex; gap: 4px; margin-top: var(--space-3);">
                <a href="{{ url_for('products.edit', product_id=product.id) }}" class="btn btn-outline btn-sm" style="flex:1;">
                  <i data-lucide="edit-3" width="12" height="12"></i> Edit
                </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-ghost btn-sm w-full">Sold</button>
                </form>
                {% endif %}
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
    {% else %}
      {{ empty_state(icon='package-plus', title='No listings yet', message='Create your first listing to start selling.',
                     cta_url=url_for('products.publish'), cta_text='Create listing') }}
    {% endif %}

  {# ============ Buying tab ============ #}
  {% elif tab == 'buying' %}
    {% if buying %}
      <div class="order-list">
        {% for order in buying %}
          <div class="order-card">
            <a href="{{ url_for('products.detail', product_id=order.product.id) }}" class="order-card-img">
              <img src="{{ order.product.primary_image }}" alt="{{ order.product.title }}">
            </a>
            <div>
              <div class="order-card-title">{{ order.product.title }}</div>
              <div class="order-card-price">${{ '%.2f' % order.product.price }}</div>
              <div class="order-meta">
                <span class="status-badge status-{{ order.status }}">{{ order.status_label }}</span>
                <span>Seller: {{ order.product.seller.username }}</span>
                <span>{{ order.created_at.strftime('%b %d') }}</span>
              </div>
            </div>
            <div class="order-actions">
              <a href="{{ url_for('orders.my_orders', tab='buying') }}" class="btn btn-outline btn-sm">Manage</a>
            </div>
          </div>
        {% endfor %}
      </div>
    {% else %}
      {{ empty_state(icon='shopping-bag', title='No purchases yet', message='Browse the marketplace to find something you like.',
                     cta_url=url_for('main.index'), cta_text='Browse items') }}
    {% endif %}

  {# ============ Selling tab ============ #}
  {% elif tab == 'selling' %}
    {% if selling %}
      <div class="order-list">
        {% for order in selling %}
          <div class="order-card">
            <a href="{{ url_for('products.detail', product_id=order.product.id) }}" class="order-card-img">
              <img src="{{ order.product.primary_image }}" alt="{{ order.product.title }}">
            </a>
            <div>
              <div class="order-card-title">{{ order.product.title }}</div>
              <div class="order-card-price">${{ '%.2f' % order.product.price }}</div>
              <div class="order-meta">
                <span class="status-badge status-{{ order.status }}">{{ order.status_label }}</span>
                <span>Buyer: {{ order.buyer.username }}</span>
                <span>{{ order.created_at.strftime('%b %d') }}</span>
              </div>
            </div>
            <div class="order-actions">
              <a href="{{ url_for('orders.my_orders', tab='selling') }}" class="btn btn-outline btn-sm">Manage</a>
            </div>
          </div>
        {% endfor %}
      </div>
    {% else %}
      {{ empty_state(icon='inbox', title='No incoming orders', message='When someone buys your item, it will appear here.') }}
    {% endif %}

  {# ============ Wishlist tab ============ #}
  {% elif tab == 'wishlist' %}
    {% if wishlist_items %}
      <div class="product-grid">
        {% for w in wishlist_items %}
          {{ product_card(w.product, is_wishlisted=true) }}
        {% endfor %}
      </div>
    {% else %}
      {{ empty_state(icon='heart', title='Your wishlist is empty',
                     message='Tap the heart icon on any product to save it for later.',
                     cta_url=url_for('main.index'), cta_text='Browse items') }}
    {% endif %}
  {% endif %}

</div>
{% endblock %}