{% extends "base.html.twig" %}

{% set otherName = otherUser.firstName ~ ' ' ~ otherUser.lastName %}
{% if not otherName|trim %}
    {% set otherName = otherUser.username %}
{% endif %}
{% set otherAvatar = otherUser.image and not (otherUser.image starts with 'default_profile_pic') ? asset('uploads/profile/img/' ~ otherUser.image) : asset('bundles/syndexacademic/images/default-avatar.png') %}

{% block title %}{{ otherName }} — {{ 'chat.messages'|trans({}, 'Chat') }}{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
/* ===== Chat Conversation Styles ===== */
html, body {
    height: 100%;
    overflow: hidden;
}

body {
    padding-bottom: 0 !important;
}

.chat-conv-container {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    --chat-footer-offset: 0px;
    bottom: var(--chat-footer-offset);
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 56px - var(--chat-footer-offset));
    height: calc(100dvh - 56px - var(--chat-footer-offset));
    overflow: hidden;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Top bar */
.chat-topbar {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
    gap: 12px;
    flex-shrink: 0;
    z-index: 10;
}

.chat-topbar-back {
    color: #00a550;
    font-size: 18px;
    text-decoration: none;
    margin-inline-end: 4px;
}

.chat-topbar-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e8e8e8;
}

.chat-topbar-info {
    flex: 1;
    min-width: 0;
}

.chat-topbar-name {
    font-weight: 700;
    font-size: 15px;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-topbar-name a {
    color: inherit;
    text-decoration: none;
}

.chat-topbar-name a:hover {
    color: #00a550;
}

.chat-topbar-status {
    font-size: 12px;
    color: #999;
}

.chat-topbar-actions {
    display: flex;
    gap: 8px;
}

.chat-topbar-actions button {
    background: none;
    border: none;
    color: #777;
    font-size: 16px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}

.chat-topbar-actions button:hover {
    background: #f0f0f0;
    color: #333;
}

.chat-topbar-actions button.blocked {
    color: #cc3333;
}

/* Messages area */
.chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 20px 18px;
    background: #f7f8fa;
    display: flex;
    flex-direction: column;
    direction: ltr;
    gap: 4px;
    box-sizing: border-box;
}

.chat-date-divider {
    text-align: center;
    margin: 16px 0 8px;
    font-size: 12px;
    color: #999;
}

.chat-date-divider span {
    background: #eee;
    padding: 3px 12px;
    border-radius: 12px;
}

.chat-msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: calc(100% - 10px);
    min-width: 0;
    margin-bottom: 2px;
    width: auto;
}

.chat-msg.mine {
    align-self: flex-end;
}

.chat-msg.theirs {
    align-self: flex-start;
}

.chat-msg-bubble {
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
    position: relative;
    max-width: 100%;
    direction: auto;
    text-align: start;
    unicode-bidi: plaintext;
}

.chat-msg.mine .chat-msg-bubble {
    background: #00a550;
    color: #fff;
    border-bottom-right: 4px;
    border-end-end-radius: 4px;
}

html[dir="rtl"] .chat-msg.mine .chat-msg-bubble {
    border-end-end-radius: 18px;
    border-end-start-radius: 4px;
}

.chat-msg.theirs .chat-msg-bubble {
    background: #fff;
    color: #1a1a1a;
    border-end-start-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

html[dir="rtl"] .chat-msg.theirs .chat-msg-bubble {
    border-end-start-radius: 18px;
    border-end-end-radius: 4px;
}

.chat-msg-time {
    font-size: 11px;
    color: #bbb;
    margin-top: 2px;
    white-space: nowrap;
}

.chat-msg.mine .chat-msg-time {
    text-align: end;
    color: rgba(255,255,255,0.7);
}

.chat-msg-read {
    font-size: 10px;
    color: rgba(255,255,255,0.6);
}

.chat-msg-deleted {
    font-style: italic;
    opacity: 0.6;
}

/* Context menu on hover */
.chat-msg-actions {
    display: none;
    position: absolute;
    top: 4px;
    right: -30px;
}

html[dir="rtl"] .chat-msg-actions {
    right: auto;
    left: -30px;
}

.chat-msg:hover .chat-msg-actions {
    display: block;
}

.chat-msg-actions button {
    background: rgba(0,0,0,0.05);
    border: none;
    color: #999;
    font-size: 12px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
}

.chat-msg-actions button:hover {
    background: rgba(204,51,51,0.1);
    color: #cc3333;
}

/* Load older */
.chat-load-older {
    text-align: center;
    padding: 10px;
}

.chat-load-older button {
    background: none;
    border: 1px solid #ddd;
    color: #666;
    padding: 6px 18px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
}

.chat-load-older button:hover {
    border-color: #00a550;
    color: #00a550;
}

/* Typing indicator */
.chat-typing {
    font-size: 13px;
    color: #999;
    padding: 4px 0;
    min-height: 22px;
}

/* Input area */
.chat-input-area {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: end;
    direction: ltr;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid #e8e8e8;
    gap: 10px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.chat-input-area textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 1.4;
    resize: none;
    max-height: 120px;
    min-height: 42px;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
}

.chat-input-area textarea:focus {
    border-color: #00a550;
}

.chat-send-btn {
    background: #00a550;
    border: none;
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.1s;
    flex-shrink: 0;
    min-width: 42px;
    justify-self: end;
}

.chat-send-btn:hover {
    background: #008c44;
}

.chat-send-btn:active {
    transform: scale(0.94);
}

.chat-send-btn:disabled {
    background: #ccc;
    cursor: default;
}

/* Blocked banner */
.chat-blocked-banner {
    text-align: center;
    padding: 14px;
    background: #fff3f3;
    color: #cc3333;
    font-size: 14px;
    border-top: 1px solid #ffdddd;
}

/* Scroll to bottom */
.chat-scroll-bottom {
    position: fixed;
    bottom: 90px;
    right: 50%;
    transform: translateX(50%);
    background: #00a550;
    color: #fff;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: none;
    z-index: 20;
}

.chat-scroll-bottom.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 600px) {
    .chat-conv-container {
        top: 56px;
        left: 0;
        right: 0;
        max-width: 100%;
        width: 100%;
        height: calc(100vh - 56px - var(--chat-footer-offset));
        height: calc(100dvh - 56px - var(--chat-footer-offset));
    }
    .chat-msg {
        max-width: calc(100% - 8px);
    }
    .chat-messages {
        padding: 12px 10px;
    }
    .chat-input-area {
        grid-template-columns: minmax(0, 1fr) 42px;
        gap: 8px;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    }
}
</style>
{% endblock %}

{% block footer %}{% endblock %}

{% block body %}
<div class="chat-conv-container" id="chatConvContainer"
     data-conversation-id="{{ conversation.id }}"
     data-other-username="{{ otherUser.username }}"
     data-is-blocked="{{ conversation.isBlocked ? '1' : '0' }}"
     data-is-blocked-by-me="{{ conversation.isBlockedBy(app.user) ? '1' : '0' }}">

    {# Top Bar #}
    <div class="chat-topbar">
        <a href="{{ path('app_chat_inbox') }}" class="chat-topbar-back" title="{{ 'chat.back_to_inbox'|trans({}, 'Chat') }}">
            <i class="fa fa-arrow-{{ app.request.locale == 'ar' ? 'right' : 'left' }}"></i>
        </a>
        <a href="{{ path('user_profile_show', {'username': otherUser.username}) }}">
            <img class="chat-topbar-avatar" src="{{ otherAvatar }}" alt="" onerror="this.onerror=null; this.src='/bundles/user/img/default_profile_pic_m.png'">
        </a>
        <div class="chat-topbar-info">
            <div class="chat-topbar-name">
                <a href="{{ path('user_profile_show', {'username': otherUser.username}) }}">{{ otherName }}</a>
            </div>
            <div class="chat-topbar-status" id="chatTypingIndicator"></div>
        </div>
        <div class="chat-topbar-actions">
            <button type="button" id="chatBlockBtn" class="{{ conversation.isBlockedBy(app.user) ? 'blocked' : '' }}" title="{{ 'chat.block_user'|trans({}, 'Chat') }}">
                <i class="fa fa-ban"></i>
            </button>
        </div>
    </div>

    {# Messages #}
    <div class="chat-messages" id="chatMessages">
        <div class="chat-load-older" id="chatLoadOlder" style="display:none;">
            <button type="button" id="chatLoadOlderBtn">{{ 'chat.load_older'|trans({}, 'Chat') }}</button>
        </div>
        <div class="chat-loading" id="chatLoading" style="text-align:center;padding:40px;color:#999;">
            <i class="fa fa-spinner fa-spin"></i>
        </div>
    </div>

    {# Scroll to bottom #}
    <button type="button" class="chat-scroll-bottom" id="chatScrollBottom" title="{{ 'chat.scroll_bottom'|trans({}, 'Chat') }}">
        <i class="fa fa-chevron-down"></i>
    </button>

    {# Blocked Banner #}
    {% if conversation.isBlocked %}
    <div class="chat-blocked-banner" id="chatBlockedBanner">
        {{ 'chat.conversation_blocked'|trans({}, 'Chat') }}
    </div>
    {% endif %}

    {# Input Area #}
    <div class="chat-input-area" id="chatInputArea" {% if conversation.isBlocked %}style="display:none;"{% endif %}>
        <textarea id="chatInput" rows="1" dir="auto" placeholder="{{ 'chat.type_message'|trans({}, 'Chat') }}" maxlength="5000"></textarea>
        <button type="button" class="chat-send-btn" id="chatSendBtn" disabled>
            <i class="fa fa-paper-plane{{ app.request.locale == 'ar' ? ' fa-flip-horizontal' : '' }}"></i>
        </button>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
(function() {
    var chatApiBase = '{{ path('api_chat_inbox')|replace({'/inbox': ''}) }}';
    var container = document.getElementById('chatConvContainer');
    var messagesEl = document.getElementById('chatMessages');
    var input = document.getElementById('chatInput');
    var sendBtn = document.getElementById('chatSendBtn');
    var loadOlderEl = document.getElementById('chatLoadOlder');
    var loadOlderBtn = document.getElementById('chatLoadOlderBtn');
    var loadingEl = document.getElementById('chatLoading');
    var blockBtn = document.getElementById('chatBlockBtn');
    var scrollBottomBtn = document.getElementById('chatScrollBottom');
    var typingIndicator = document.getElementById('chatTypingIndicator');
    var blockedBanner = document.getElementById('chatBlockedBanner');
    var inputArea = document.getElementById('chatInputArea');

    var convId = parseInt(container.getAttribute('data-conversation-id'));
    var isBlocked = container.getAttribute('data-is-blocked') === '1';
    var lastMessageId = 0;
    var firstMessageId = 0;
    var pollInterval = null;
    var isLoadingOlder = false;
    var isSending = false;

    function escapeHtml(text) {
        var div = document.createElement('div');
        div.appendChild(document.createTextNode(text || ''));
        return div.innerHTML;
    }

    // Convert URLs in text to clickable links (after HTML escaping)
    function linkifyText(escapedText) {
        // URL regex - matches http(s)://, www., and relative paths starting with /
        var urlPattern = /(https?:\/\/[^\s<]+)|(www\.[^\s<]+)|(\/[a-zA-Z0-9\-_\/]+)/gi;
        return escapedText.replace(urlPattern, function(match) {
            var url = match;
            // Add protocol if missing for www links
            if (match.startsWith('www.')) {
                url = 'https://' + match;
            } else if (match.startsWith('/')) {
                // Relative paths - keep as-is
                url = match;
            }
            return '<a href="' + url + '" target="_blank" rel="noopener" style="color:#00a550;text-decoration:underline;">' + match + '</a>';
        });
    }

    // Convert newlines to <br> tags for HTML display
    function nl2br(text) {
        return text.replace(/\n/g, '<br>');
    }

    function formatTime(dateStr) {
        if (!dateStr) return '';
        var d = new Date(dateStr.replace(' ', 'T'));
        var h = d.getHours();
        var m = d.getMinutes();
        return (h < 10 ? '0' : '') + h + ':' + (m < 10 ? '0' : '') + m;
    }

    function formatDate(dateStr) {
        if (!dateStr) return '';
        return dateStr.split(' ')[0];
    }

    function renderMessage(msg, showDate) {
        var html = '';
        if (showDate) {
            html += '<div class="chat-date-divider"><span>' + escapeHtml(formatDate(msg.createdAt)) + '</span></div>';
        }

        var cls = msg.isMine ? 'mine' : 'theirs';
        html += '<div class="chat-msg ' + cls + '" data-mid="' + msg.id + '">';
        html += '<div class="chat-msg-bubble">';

        if (msg.isDeleted) {
            html += '<span class="chat-msg-deleted">{{ "chat.message_deleted"|trans({}, "Chat")|e("js") }}</span>';
        } else {
            // Escape HTML first (XSS prevention), then linkify URLs, then convert newlines to <br>
            html += nl2br(linkifyText(escapeHtml(msg.body)));
        }

        html += '<div class="chat-msg-time">' + formatTime(msg.createdAt);
        if (msg.isMine && msg.isRead) {
            html += ' <span class="chat-msg-read">✓✓</span>';
        }
        html += '</div>';

        // Delete action (own messages only)
        if (msg.isMine && !msg.isDeleted) {
            html += '<div class="chat-msg-actions"><button type="button" onclick="deleteMsg(' + msg.id + ')" title="{{ "chat.delete_message"|trans({}, "Chat")|e("js") }}"><i class="fa fa-trash-o"></i></button></div>';
        }

        html += '</div></div>';
        return html;
    }

    function scrollToBottom(smooth) {
        if (smooth) {
            messagesEl.scrollTo({ top: messagesEl.scrollHeight, behavior: 'smooth' });
        } else {
            messagesEl.scrollTop = messagesEl.scrollHeight;
        }
    }

    function isNearBottom() {
        return (messagesEl.scrollHeight - messagesEl.scrollTop - messagesEl.clientHeight) < 200;
    }

    // Load initial messages
    function loadMessages() {
        fetch(chatApiBase + '/' + convId + '/messages?limit=50', { credentials: 'same-origin' })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                var msgs = data.messages || [];
                if (loadingEl) loadingEl.remove();

                if (msgs.length === 0) {
                    messagesEl.innerHTML = '<div class="chat-empty" style="flex:1;display:flex;align-items:center;justify-content:center;"><div><i class="fa fa-commenting-o" style="font-size:48px;color:#ddd;display:block;margin-bottom:12px;"></i><p style="color:#999;">{{ "chat.start_conversation"|trans({}, "Chat")|e("js") }}</p></div></div>';
                    return;
                }

                var html = '<div class="chat-load-older" id="chatLoadOlder"><button type="button" id="chatLoadOlderBtn">{{ "chat.load_older"|trans({}, "Chat")|e("js") }}</button></div>';
                var lastDate = '';
                for (var i = 0; i < msgs.length; i++) {
                    var msgDate = formatDate(msgs[i].createdAt);
                    var showDate = msgDate !== lastDate;
                    lastDate = msgDate;
                    html += renderMessage(msgs[i], showDate);
                }
                messagesEl.innerHTML = html;

                firstMessageId = msgs[0].id;
                lastMessageId = msgs[msgs.length - 1].id;

                // Show load older if we got a full page
                if (msgs.length >= 50) {
                    var lo = document.getElementById('chatLoadOlder');
                    if (lo) lo.style.display = 'block';
                }

                // Re-bind load older
                var lob = document.getElementById('chatLoadOlderBtn');
                if (lob) lob.addEventListener('click', loadOlder);

                scrollToBottom(false);
                startPolling();

                // Mark as read
                fetch(chatApiBase + '/' + convId + '/read', {
                    method: 'POST',
                    credentials: 'same-origin',
                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                });
            })
            .catch(function() {
                if (loadingEl) loadingEl.textContent = '{{ "chat.error_loading"|trans({}, "Chat")|e("js") }}';
            });
    }

    // Load older messages
    function loadOlder() {
        if (isLoadingOlder || firstMessageId === 0) return;
        isLoadingOlder = true;

        var prevScrollHeight = messagesEl.scrollHeight;

        fetch(chatApiBase + '/' + convId + '/messages?before=' + firstMessageId + '&limit=30', { credentials: 'same-origin' })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                var msgs = data.messages || [];
                isLoadingOlder = false;

                if (msgs.length === 0) {
                    var lo = document.getElementById('chatLoadOlder');
                    if (lo) lo.style.display = 'none';
                    return;
                }

                var html = '';
                var lastDate = '';
                for (var i = 0; i < msgs.length; i++) {
                    var msgDate = formatDate(msgs[i].createdAt);
                    var showDate = msgDate !== lastDate;
                    lastDate = msgDate;
                    html += renderMessage(msgs[i], showDate);
                }

                var lo = document.getElementById('chatLoadOlder');
                if (lo) lo.insertAdjacentHTML('afterend', html);

                firstMessageId = msgs[0].id;

                if (msgs.length < 30) {
                    if (lo) lo.style.display = 'none';
                }

                // Maintain scroll position
                messagesEl.scrollTop = messagesEl.scrollHeight - prevScrollHeight;
            })
            .catch(function() {
                isLoadingOlder = false;
            });
    }

    // Poll for new messages
    function startPolling() {
        if (pollInterval) clearInterval(pollInterval);
        pollInterval = setInterval(function() {
            if (lastMessageId === 0) return;
            fetch(chatApiBase + '/' + convId + '/messages?after=' + lastMessageId, { credentials: 'same-origin' })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var msgs = data.messages || [];
                    if (msgs.length === 0) return;

                    var wasNearBottom = isNearBottom();
                    var html = '';
                    for (var i = 0; i < msgs.length; i++) {
                        html += renderMessage(msgs[i], false);
                        lastMessageId = msgs[i].id;
                    }
                    messagesEl.insertAdjacentHTML('beforeend', html);

                    if (wasNearBottom) scrollToBottom(true);

                    // Mark as read
                    fetch(chatApiBase + '/' + convId + '/read', {
                        method: 'POST',
                        credentials: 'same-origin',
                        headers: { 'X-Requested-With': 'XMLHttpRequest' }
                    });
                });
        }, 3000); // Poll every 3 seconds
    }

    // Send message
    function sendMessage() {
        if (isSending || isBlocked) return;
        var body = (input.value || '').trim();
        if (!body) return;

        isSending = true;
        sendBtn.disabled = true;
        var originalBody = body;
        input.value = '';
        autoResize();

        fetch(chatApiBase + '/' + convId + '/send', {
            method: 'POST',
            credentials: 'same-origin',
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify({ body: originalBody })
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            isSending = false;
            if (data.success && data.message) {
                // Remove empty state if present
                var empty = messagesEl.querySelector('.chat-empty');
                if (empty) empty.remove();

                var html = renderMessage(data.message, false);
                messagesEl.insertAdjacentHTML('beforeend', html);
                lastMessageId = data.message.id;
                if (!firstMessageId) firstMessageId = data.message.id;
                scrollToBottom(true);
                if (!pollInterval) startPolling();
            } else if (data.error === 'blocked') {
                alert('{{ "chat.conversation_blocked"|trans({}, "Chat")|e("js") }}');
            }
            updateSendBtn();
        })
        .catch(function() {
            isSending = false;
            input.value = originalBody;
            updateSendBtn();
        });
    }

    // Auto-resize textarea
    function autoResize() {
        input.style.height = 'auto';
        input.style.height = Math.min(input.scrollHeight, 120) + 'px';
    }

    function updateSendBtn() {
        sendBtn.disabled = !input.value.trim() || isSending || isBlocked;
    }

    if (input) {
        input.addEventListener('input', function() {
            autoResize();
            updateSendBtn();
        });

        input.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
                e.preventDefault();
                sendMessage();
            }
        });
    }

    if (sendBtn) {
        sendBtn.addEventListener('click', sendMessage);
    }

    // Delete message
    window.deleteMsg = function(mid) {
        if (!confirm('{{ "chat.confirm_delete_msg"|trans({}, "Chat")|e("js") }}')) return;
        fetch(chatApiBase + '/message/' + mid + '/delete', {
            method: 'POST',
            credentials: 'same-origin',
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        }).then(function(r) { return r.json(); }).then(function(data) {
            if (data.success) {
                var el = messagesEl.querySelector('.chat-msg[data-mid="' + mid + '"] .chat-msg-bubble');
                if (el) {
                    el.innerHTML = '<span class="chat-msg-deleted">{{ "chat.message_deleted"|trans({}, "Chat")|e("js") }}</span>';
                }
            }
        });
    };

    // Block toggle
    if (blockBtn) {
        blockBtn.addEventListener('click', function() {
            var confirmMsg = isBlocked
                ? '{{ "chat.confirm_unblock"|trans({}, "Chat")|e("js") }}'
                : '{{ "chat.confirm_block"|trans({}, "Chat")|e("js") }}';
            if (!confirm(confirmMsg)) return;

            fetch(chatApiBase + '/' + convId + '/block', {
                method: 'POST',
                credentials: 'same-origin',
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            }).then(function(r) { return r.json(); }).then(function(data) {
                isBlocked = data.blocked;
                container.setAttribute('data-is-blocked', isBlocked ? '1' : '0');
                if (isBlocked) {
                    blockBtn.classList.add('blocked');
                    if (inputArea) inputArea.style.display = 'none';
                    if (!blockedBanner) {
                        var banner = document.createElement('div');
                        banner.id = 'chatBlockedBanner';
                        banner.className = 'chat-blocked-banner';
                        banner.textContent = '{{ "chat.conversation_blocked"|trans({}, "Chat")|e("js") }}';
                        container.insertBefore(banner, inputArea);
                        blockedBanner = banner;
                    }
                } else {
                    blockBtn.classList.remove('blocked');
                    if (inputArea) inputArea.style.display = 'flex';
                    if (blockedBanner) blockedBanner.remove();
                    blockedBanner = null;
                }
                updateSendBtn();
            });
        });
    }

    // Scroll-to-bottom button
    if (messagesEl && scrollBottomBtn) {
        messagesEl.addEventListener('scroll', function() {
            if (isNearBottom()) {
                scrollBottomBtn.classList.remove('show');
            } else {
                scrollBottomBtn.classList.add('show');
            }
        });
        scrollBottomBtn.addEventListener('click', function() {
            scrollToBottom(true);
        });
    }

    // Init
    loadMessages();

    // Focus input
    if (input && !isBlocked) {
        setTimeout(function() { input.focus(); }, 300);
    }

    // Cleanup on page leave
    window.addEventListener('beforeunload', function() {
        if (pollInterval) clearInterval(pollInterval);
    });
})();
</script>
{% endblock %}