{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="/static/css/messages.css">
{% endblock %}
{% block content %}
<h1 class="sr-only">Messages</h1>
<div class="page-messages">
<div class="messages-layout">
    <div class="messages-list">
        <div class="messages-list-header">
            <input type="text" id="message-search" placeholder="Search conversations..." value="{{ search }}">
        </div>

        <div class="messages-conversations">
            {% for conv in conversations %}
            <a href="/messages?with_uid={{ conv.other_user['uid'] }}" class="conversation-item {% if current_conversation == conv.other_user['uid'] %}active{% endif %}">
                <img src="{{ avatar_url('multiavatar', conv.other_user['username'], 32) }}" class="avatar-img avatar-sm" alt="{{ conv.other_user['username'] }}" loading="lazy">
                <div class="conversation-info">
                    <div class="conversation-name">{{ conv.other_user['username'] }}</div>
                    <div class="conversation-preview">{{ conv.last_message[:60] }}</div>
                </div>
                <span class="conversation-time">{{ format_date(conv.last_message_at) }}</span>
            </a>
            {% else %}
            <div class="empty-state" style="border: none;">No conversations yet</div>
            {% endfor %}
        </div>
    </div>

    <div class="messages-main">
        {% if other_user %}
        <div class="messages-main-header">
            <button class="messages-back-btn" id="messages-back-btn" aria-label="Back to conversations">&#x2190;</button>
            <a href="/profile/{{ other_user['username'] }}">
            <img src="{{ avatar_url('multiavatar', other_user['username'], 32) }}" class="avatar-img avatar-sm" alt="{{ other_user['username'] }}" loading="lazy">
            </a>
            <a href="/profile/{{ other_user['username'] }}"><h3>{{ other_user['username'] }}</h3></a>
        </div>

        <div class="messages-thread">
            {% for msg in messages %}
            <div class="message-bubble {% if msg.is_mine %}mine{% else %}theirs{% endif %}">
                <div class="rendered-content" data-render>{{ msg.message['content'] }}</div>
                {% if msg.attachments %}
                {% with attachments=msg.attachments %}
                {% include "_attachment_display.html" %}
                {% endwith %}
                {% endif %}
                <span class="message-time">{{ msg.time_ago }}</span>
            </div>
            {% endfor %}
        </div>

        <form class="messages-input-area" method="POST" action="/messages/send">
            <input type="hidden" name="receiver_uid" value="{{ other_user['uid'] }}">
            <input type="text" name="content" placeholder="Type a message..." required maxlength="2000" autocomplete="off" autofocus data-mention>
            <div class="attachment-upload-container" data-attachment-upload
                 data-max-size="{{ max_upload_size_mb() }}"
                 data-max-files="5"
                 data-allowed-types="{{ allowed_file_types() }}"></div>
            <button type="submit" class="messages-send-btn">&#x27A4;</button>
        </form>
        {% else %}
        <div class="messages-empty">
            <p>Select a conversation to start chatting</p>
        </div>
        {% endif %}
    </div>
</div>
</div>

{% block extra_js %}
{% if other_user %}
<script>
document.addEventListener("DOMContentLoaded", function() {
    var input = document.querySelector('.messages-input-area input[name="content"]');
    if (input) {
        var scrollTarget = document.querySelector('.messages-thread');
        if (scrollTarget) {
            scrollTarget.scrollTop = scrollTarget.scrollHeight;
        }
        input.focus();
    }
});
</script>
{% endif %}
{% endblock %}
{% endblock %}