{% extends 'base.html' %}

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

{% block content %}
<div class="container">
  <div class="chat-layout {% if active_id %}has-active{% endif %}">

    {# Sidebar — conversation list #}
    <aside class="chat-sidebar">
      <div class="chat-sidebar-header">
        <h3>Messages</h3>
      </div>
      {% if conversations %}
        {% for c in conversations %}
          <a href="{{ url_for('messages.thread', conversation_id=c.id) }}"
             class="conv-item {% if active_id == c.id %}active{% endif %} {% if c.unread_count > 0 %}conv-unread{% endif %}"
             data-conv-id="{{ c.id }}">
            <img src="{{ c.other_user.avatar }}" alt="{{ c.other_user.username }}" class="avatar">
            <div class="conv-body">
              <div class="conv-top">
                <span class="conv-name">{{ c.other_user.username }}</span>
                <span class="conv-time">
                  {% if c.last_message %}{{ c.last_message.created_at | time_ago }}{% endif %}
                </span>
              </div>
              <div class="conv-preview">
                {% if c.product %}<em>[{{ c.product.title | truncate(24) }}]</em> {% endif %}
                {% if c.last_message %}{{ c.last_message.content | truncate(40) }}
                {% else %}<span class="text-subtle">No messages yet</span>{% endif %}
              </div>
            </div>
            {% if c.unread_count > 0 %}
              <span class="conv-dot"></span>
            {% endif %}
          </a>
        {% endfor %}
      {% else %}
        <div class="empty-state" style="padding: var(--space-8) var(--space-4);">
          <i data-lucide="message-circle" width="40" height="40"></i>
          <p class="text-sm">No conversations yet</p>
        </div>
      {% endif %}
    </aside>

    {# Main — active chat thread #}
    <section class="chat-main">
      {% if active_conv %}
        <div data-chat data-conversation-id="{{ active_conv.id }}" data-user-id="{{ current_user.id }}"
             style="display: contents;">

          <div class="chat-header">
            <a href="{{ url_for('messages.inbox') }}" class="btn btn-ghost btn-icon" style="margin-right: var(--space-2);" aria-label="Back">
              <i data-lucide="arrow-left" width="18" height="18"></i>
            </a>
            <img src="{{ other_user.avatar }}" alt="{{ other_user.username }}" class="avatar">
            <div class="chat-header-info">
              <strong>
                <a href="{{ url_for('users.profile', username=other_user.username) }}">{{ other_user.username }}</a>
              </strong>
              <small>Online status unknown</small>
            </div>
          </div>

          {# Product context #}
          {% if active_conv.product %}
          <a href="{{ url_for('products.detail', product_id=active_conv.product.id) }}" class="chat-product-card" style="color: inherit;">
            <img src="{{ active_conv.product.primary_image }}" alt="{{ active_conv.product.title }}">
            <div style="flex:1;">
              <strong>{{ active_conv.product.title }}</strong>
              <span>${{ '%.2f' % active_conv.product.price }}</span>
            </div>
            <i data-lucide="chevron-right" width="18" height="18" style="color: var(--color-text-muted);"></i>
          </a>
          {% endif %}

          {# Messages #}
          <div class="chat-messages" data-chat-messages>
            {% for msg in messages %}
              {% set is_me = msg.sender_id == current_user.id %}
              <div class="msg {% if is_me %}me{% else %}them{% endif %}">
                <div class="msg-bubble">{{ msg.content }}</div>
                <div class="msg-time">{{ msg.created_at.strftime('%H:%M') }}</div>
              </div>
            {% endfor %}
          </div>

          {# Composer #}
          <form class="chat-composer" data-chat-composer onsubmit="return false;">
            <textarea data-chat-input placeholder="Type a message..." rows="1"></textarea>
            <button type="submit" data-chat-send aria-label="Send">
              <i data-lucide="send" width="18" height="18"></i>
            </button>
          </form>
        </div>
      {% else %}
        <div class="chat-empty">
          <i data-lucide="message-square" width="64" height="64"></i>
          <h3>Select a conversation</h3>
          <p>Choose a conversation from the sidebar to start chatting.</p>
        </div>
      {% endif %}
    </section>
  </div>
</div>
{% endblock %}

{% block scripts %}
{% if active_conv %}
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
<script src="{{ url_for('static', filename='js/chat.js') }}"></script>
{% endif %}
{% endblock %}