{% extends "base.html" %}
{% from "components/pagination.html" import render_pagination %}
{% from "components/empty_state.html" import empty_state %}
{% from "components/page_header.html" import page_header %}

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

{% block content %}
<div class="dashboard-page messages-inbox">
  {{ page_header('Messages', pagination.total|string ~ ' active conversation' ~ ('' if pagination.total == 1 else 's')) }}

  {% if pagination.items %}
    <div class="messages-toolbar">
      <div class="messages-search">
        <i class="bi bi-search messages-search-icon" aria-hidden="true"></i>
        <input type="search" id="messagesSearch" class="messages-search-input"
               placeholder="Search messages" aria-label="Search messages" autocomplete="off">
        <span class="messages-search-kbd" aria-hidden="true">&#8984;K</span>
      </div>

      <div class="dropdown messages-sort">
        <button class="messages-sort-btn" type="button" data-bs-toggle="dropdown"
                aria-expanded="false" aria-label="Sort conversations">
          <i class="bi bi-arrow-down-up" aria-hidden="true"></i>
          <span class="messages-sort-label d-none d-sm-inline">Sort</span>
          <i class="bi bi-chevron-down messages-sort-caret" aria-hidden="true"></i>
        </button>
        <ul class="dropdown-menu dropdown-menu-end messages-sort-menu">
          <li><span class="messages-sort-heading">Sort By</span></li>
          {% for key, label in sort_options %}
            <li>
              <a class="dropdown-item messages-sort-item {{ 'is-selected' if key == sort }}"
                 href="{{ url_for('chat.inbox', sort=key) }}">
                <i class="bi bi-check2 messages-sort-check" aria-hidden="true"></i>
                <span>{{ label }}{% if key == 'newest' %} (Default){% endif %}</span>
              </a>
            </li>
          {% endfor %}
        </ul>
      </div>
    </div>

    <div class="conversation-list" id="conversationList">
      {% for conversation in pagination.items %}
        {% set other = conversation.seller if conversation.buyer_id == current_user.id else conversation.buyer %}
        {% set other_name = other.profile.full_name if other.profile else other.email %}
        {% set cover = conversation.listing.images[0] if conversation.listing.images else None %}
        {% set activity = conversation.last_message_at or conversation.conversation_started_at %}
        {% set is_unread = conversation.id in unread_ids %}
        <a class="conversation-card {{ 'is-unread' if is_unread }}"
           href="{{ url_for('chat.thread', public_id=conversation.public_id) }}"
           data-search="{{ (conversation.listing.title ~ ' ' ~ other_name)|lower }}">
          <div class="conversation-thumb-wrap">
            {% if cover %}
              <img class="conversation-thumb"
                   src="{{ url_for('marketplace.listing_image', filename=cover.image_path) }}"
                   alt="{{ conversation.listing.title }}" loading="lazy" decoding="async">
            {% else %}
              <div class="conversation-thumb conversation-thumb-ph">
                <i class="bi bi-image" aria-hidden="true"></i>
                <span class="visually-hidden">No image</span>
              </div>
            {% endif %}
            {% if is_unread %}
              <span class="conversation-unread-dot" aria-label="Unread messages"></span>
            {% endif %}
          </div>

          <div class="conversation-body">
            <div class="conversation-row-top">
              <h3 class="conversation-title">{{ conversation.listing.title }}</h3>
              <time class="conversation-time" data-relative
                    datetime="{{ activity.isoformat() }}">{{ activity.strftime('%d %b') }}</time>
            </div>
            <p class="conversation-with">with {{ other_name }}</p>
          </div>
        </a>
      {% endfor %}
    </div>

    <p class="messages-no-results d-none" id="messagesNoResults">No conversations match your search.</p>

    {{ render_pagination(pagination, 'chat.inbox', {'sort': sort if sort != 'newest' else none}) }}
  {% else %}
    {{ empty_state('bi-chat-dots', 'No messages yet',
         'When you message a seller about a listing, your conversations will appear here.',
         cta_label='Browse Marketplace', cta_url=url_for('main.marketplace'), cta_icon='bi-shop') }}
  {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
  // Client-side conversation filter + ⌘K / Ctrl+K focus (presentation only — no
  // backend search route exists; this filters the already-rendered cards).
  (function () {
    var input = document.getElementById('messagesSearch');
    var list = document.getElementById('conversationList');
    var noResults = document.getElementById('messagesNoResults');
    if (input && list) {
      input.addEventListener('input', function () {
        var q = input.value.trim().toLowerCase();
        var visible = 0;
        list.querySelectorAll('.conversation-card').forEach(function (card) {
          var hay = card.getAttribute('data-search') || '';
          var show = !q || hay.indexOf(q) !== -1;
          card.style.display = show ? '' : 'none';
          if (show) visible++;
        });
        if (noResults) noResults.classList.toggle('d-none', visible !== 0);
      });
    }
    window.addEventListener('keydown', function (e) {
      if ((e.metaKey || e.ctrlKey) && (e.key === 'k' || e.key === 'K') && input) {
        e.preventDefault();
        input.focus();
      }
    });
  })();
</script>
{% endblock %}