@extends('layouts.app')

@section('title', 'Messenger')

@push('styles')
@include('messenger.partials.avatar-styles')
@include('messenger.partials.attachment-styles')
@include('messenger.partials.profile-panel-styles')
@include('messenger.partials.emoji-styles')
@endpush

@section('contents')
<section class="content">
    <div class="container-fluid">
        <div class="msgr-shell" id="msgrShell">
            <aside class="msgr-sidebar" id="msgrSidebar" aria-label="Conversations">
                <div class="msgr-sidebar__head">
                    <div class="msgr-sidebar__tabs" role="tablist" aria-label="Messenger views">
                        <span class="msgr-sidebar__tab is-active" role="tab" aria-selected="true" id="msgrTabChats">Chats</span>
                    </div>
                    <div class="msgr-search-wrap">
                        <i class="fas fa-search" aria-hidden="true"></i>
                        <input type="search" class="form-control form-control-sm" id="msgrConvSearch" placeholder="Search people or chats…" autocomplete="off" aria-label="Search conversations">
                        <div class="msgr-user-results" id="msgrUserResults" role="listbox"></div>
                    </div>
                </div>
                <div class="msgr-conv-list" id="msgrConvList" aria-live="polite">
                    <div class="msgr-skeleton" aria-hidden="true">
                        <div class="sk msgr-skeleton__avatar"></div>
                        <div class="msgr-skeleton__lines flex-grow-1">
                            <div class="sk" style="height:10px;width:58%;margin-bottom:6px"></div>
                            <div class="sk" style="height:9px;width:80%"></div>
                        </div>
                    </div>
                </div>
            </aside>

            <div class="msgr-main" id="msgrMain">
                <div class="msgr-empty" id="msgrEmptyState">
                    <div class="msgr-empty__icon" aria-hidden="true"><i class="far fa-comments"></i></div>
                    <p class="msgr-empty__title">Select a conversation</p>
                    <p class="small mb-0 text-muted">Choose a chat from the list or search for a colleague to start messaging.</p>
                </div>

                <div id="msgrChatPanel" class="d-none flex-column flex-grow-1" style="min-height:0">
                    <header class="msgr-chat-head" id="msgrChatHead">
                        <button type="button" class="msgr-back-btn" id="msgrBackBtn" title="Back to conversations" aria-label="Back to conversations">
                            <i class="fas fa-arrow-left" aria-hidden="true"></i>
                        </button>
                        <div class="d-flex align-items-center flex-grow-1 min-w-0" style="gap:0.625rem">
                            <button type="button" class="msgr-profile-trigger p-0 border-0 bg-transparent flex-shrink-0" id="msgrHeadAvatarBtn" data-user-id="" title="View profile" aria-label="View profile photo">
                                <span id="msgrHeadAvatarWrap"></span>
                            </button>
                            <div class="min-w-0 flex-grow-1">
                                <button type="button" class="msgr-profile-trigger msgr-chat-head__name text-truncate d-block w-100 p-0 border-0 bg-transparent text-left" id="msgrHeadNameBtn" data-user-id="" title="View profile">
                                    <span id="msgrHeadName">—</span>
                                </button>
                                <span class="msgr-chat-head__subtitle text-truncate d-block" id="msgrHeadSubtitle">Offline</span>
                            </div>
                        </div>
                    </header>
                    <div class="msgr-messages" id="msgrMessages" role="log" aria-live="polite"></div>
                    <div class="text-center py-1 d-none" id="msgrLoadMoreWrap">
                        <button type="button" class="btn btn-sm btn-link" id="msgrLoadMore">Load older messages</button>
                    </div>
                    @if ($canSend)
                    <div class="msgr-composer-wrap">
                        <div class="msgr-attach-pending d-none" id="msgrAttachPending" aria-live="polite"></div>
                        <div class="msgr-attach-errors" id="msgrAttachErrors" role="alert"></div>
                        <form class="msgr-composer" id="msgrComposerForm">
                            <input type="file" id="msgrAttachInput" class="d-none" multiple
                                accept=".jpg,.jpeg,.png,.webp,.gif,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.csv,.zip,.rar,.7z">
                            <button type="button" class="msgr-composer__attach-btn" id="msgrAttachBtn" title="Attach files" aria-label="Attach files">
                                <i class="fas fa-paperclip"></i>
                            </button>
                            <button type="button" class="msgr-composer__emoji-btn" id="msgrEmojiBtn" title="Insert emoji" aria-label="Insert emoji">
                                <i class="far fa-smile"></i>
                            </button>
                            <label for="msgrComposerInput" class="sr-only">Message</label>
                            <textarea class="form-control flex-grow-1" id="msgrComposerInput" rows="1" placeholder="Type a message…" maxlength="5000"></textarea>
                            <button type="submit" class="btn btn-primary msgr-composer__send-btn" aria-label="Send message">
                                <i class="fas fa-paper-plane" aria-hidden="true"></i>
                            </button>
                        </form>
                    </div>
                    @else
                    <div class="msgr-composer text-muted small justify-content-center">
                        You do not have permission to send messages.
                    </div>
                    @endif
                </div>
            </div>

            <aside class="msgr-profile-panel" id="msgrProfilePanel" aria-hidden="true" aria-label="User profile">
                <div class="msgr-profile-panel__backdrop" id="msgrProfileBackdrop" data-msgr-profile-close></div>
                <div class="msgr-profile-panel__sheet">
                    <div class="msgr-profile-panel__head">
                        <h2 class="msgr-profile-panel__head-title">Profile</h2>
                        <button type="button" class="msgr-profile-panel__close" data-msgr-profile-close aria-label="Close profile">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="msgr-profile-panel__body" id="msgrProfileBody">
                        <div class="msgr-profile-loading text-muted">Select a user to view their profile.</div>
                    </div>
                </div>
            </aside>
        </div>
    </div>

    <div class="msgr-lightbox" id="msgrLightbox" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="msgrLightboxTitle">
        <div class="msgr-lightbox__backdrop" data-msgr-lightbox-close></div>
        <div class="msgr-lightbox__panel">
            <div class="msgr-lightbox__head">
                <span id="msgrLightboxTitle">Image</span>
                <button type="button" class="close" data-msgr-lightbox-close aria-label="Close">&times;</button>
            </div>
            <div class="msgr-lightbox__body">
                <img src="" alt="" id="msgrLightboxImg">
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
@include('messenger.partials.avatar-script')
@include('messenger.partials.attachment-script')
@include('messenger.partials.profile-panel-script')
@include('messenger.partials.emoji-script')
<script>
document.addEventListener('DOMContentLoaded', function() {
    var routes = {
        conversations: @json(route('messenger.conversations.index')),
        storeConversation: @json(route('messenger.conversations.store')),
        messages: function(id) { return @json(url('messenger/conversations')) + '/' + id + '/messages'; },
        sendMessage: function(id) { return @json(url('messenger/conversations')) + '/' + id + '/messages'; },
        markRead: function(id) { return @json(url('messenger/conversations')) + '/' + id + '/read'; },
        deleteMessage: function(id) { return @json(url('messenger/messages')) + '/' + id; },
        toggleReaction: function(id) { return @json(url('messenger/messages')) + '/' + id + '/reactions'; },
        searchUsers: @json(route('messenger.users.search')),
        presence: @json(route('messenger.presence')),
        storeConversationPost: @json(route('messenger.conversations.store'))
    };
    var csrfMeta = document.querySelector('meta[name="csrf-token"]');
    var csrf = csrfMeta ? csrfMeta.getAttribute('content') : '';
    var canSend = @json($canSend);
    var canDeleteOwn = @json($canDeleteOwn);
    var canManage = @json($canManage);
    var canReact = @json($canReact);
    var initialConversationId = @json($initialConversationId);
    var initialUserId = @json($initialUserId);
    var pollMs = 5000;
    var state = {
        conversations: [],
        activeId: null,
        messages: [],
        pagination: null,
        loadingMessages: false,
        pollTimer: null,
        presenceTimer: null,
        lastMessageId: null,
        profileUserId: null,
        activePeerUserId: null,
        reactionsFingerprint: ''
    };

    function fetchJson(url, options) {
        options = options || {};
        options.headers = Object.assign({
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': csrf
        }, options.headers || {});
        return fetch(url, options).then(function(r) {
            return r.json().then(function(data) {
                if (!r.ok) {
                    var err = new Error((data && data.message) || 'Request failed');
                    err.status = r.status;
                    err.payload = data;
                    throw err;
                }
                return data;
            }).catch(function(parseErr) {
                if (!r.ok) {
                    var err = new Error('Request failed');
                    err.status = r.status;
                    throw err;
                }
                throw parseErr;
            });
        });
    }

    var escapeHtml = window.pmsEscapeHtml;

    function normalizeAvatarUser(u) {
        u = u || {};
        var imageUrl = (u.image_url || '').trim();
        var hasImage = u.has_image !== undefined && u.has_image !== null
            ? !!u.has_image
            : imageUrl !== '';
        return {
            name: u.name || 'User',
            image_url: imageUrl,
            has_image: hasImage,
            initials: u.initials || '',
            is_online: !!u.is_online,
            designation: u.designation || ''
        };
    }

    function emptyStateHtml(icon, title, subtitle) {
        return '<div class="msgr-empty py-4 px-3">' +
            '<div class="msgr-empty__icon" aria-hidden="true"><i class="' + icon + '"></i></div>' +
            '<p class="msgr-empty__title">' + escapeHtml(title) + '</p>' +
            (subtitle ? '<p class="small mb-0 text-muted">' + escapeHtml(subtitle) + '</p>' : '') +
            '</div>';
    }

    function renderConversations() {
        var list = document.getElementById('msgrConvList');
        if (!state.conversations.length) {
            list.innerHTML = emptyStateHtml('far fa-inbox', 'No conversations yet', 'Search above to find a colleague and start messaging.');
            return;
        }
        list.innerHTML = state.conversations.map(function(c) {
            var u = normalizeAvatarUser(c.other_user);
            var active = state.activeId === c.id ? ' is-active' : '';
            var unreadCls = c.unread_count > 0 ? ' has-unread' : '';
            var unread = c.unread_count > 0 ? '<span class="msgr-unread-badge" aria-label="' + c.unread_count + ' unread">' + (c.unread_count > 99 ? '99+' : c.unread_count) + '</span>' : '';
            var preview = c.last_message ? (c.last_message.is_mine ? 'You: ' : '') + escapeHtml(c.last_message.body_preview) : 'No messages yet';
            var time = c.last_message && c.last_message.created_at_human ? c.last_message.created_at_human : '';
            var designation = u.designation || (c.other_user && c.other_user.designation) || '';
            var desigHtml = designation
                ? '<div class="msgr-conv-designation text-truncate">' + escapeHtml(designation) + '</div>'
                : '';
            return '<button type="button" class="msgr-conv-item' + active + unreadCls + '" data-id="' + c.id + '">' +
                '<span class="msgr-conv-item__avatar">' + window.msgrRenderAvatar(u, { size: 'sm', showStatus: true }) + '</span>' +
                '<span class="msgr-conv-meta">' +
                '<span class="msgr-conv-row msgr-conv-row--top">' +
                '<span class="msgr-conv-name text-truncate">' + escapeHtml(u.name) + '</span>' +
                '<span class="msgr-conv-time">' + escapeHtml(time) + '</span></span>' +
                desigHtml +
                '<span class="msgr-conv-row msgr-conv-row--bottom">' +
                '<span class="msgr-conv-preview text-truncate">' + preview + '</span>' +
                (unread ? '<span class="msgr-conv-badge-wrap">' + unread + '</span>' : '') +
                '</span></span></button>';
        }).join('');
        list.querySelectorAll('.msgr-conv-item').forEach(function(btn) {
            btn.addEventListener('click', function() {
                openConversation(parseInt(btn.dataset.id, 10));
            });
        });
        if (typeof window.pmsUpdateMessengerBadge === 'function') {
            var total = state.conversations.reduce(function(s, c) { return s + (c.unread_count || 0); }, 0);
            window.pmsUpdateMessengerBadge(total);
        }
    }

    function showChatPanel(show) {
        var empty = document.getElementById('msgrEmptyState');
        var panel = document.getElementById('msgrChatPanel');
        var shell = document.getElementById('msgrShell');
        if (show) {
            empty.classList.add('d-none');
            panel.classList.remove('d-none');
            panel.classList.add('d-flex');
            shell.classList.add('chat-open');
        } else {
            empty.classList.remove('d-none');
            panel.classList.add('d-none');
            panel.classList.remove('d-flex');
            shell.classList.remove('chat-open');
        }
    }

    function openConversation(id) {
        state.activeId = id;
        renderConversations();
        showChatPanel(true);
        state.messages = [];
        state.pagination = null;
        state.lastMessageId = null;
        document.getElementById('msgrMessages').innerHTML = '<div class="text-center text-muted py-3"><i class="fas fa-spinner fa-spin"></i></div>';
        loadMessages(id, 1, true);
        markRead(id);
        startPolling();
    }

    function loadMessages(convId, page, scrollBottom) {
        if (state.loadingMessages) return;
        state.loadingMessages = true;
        var url = routes.messages(convId) + '?page=' + page;
        fetchJson(url).then(function(data) {
            if (parseInt(state.activeId, 10) !== parseInt(convId, 10)) return;
            var peer = normalizeAvatarUser(data.other_user);
            state.activePeerUserId = (data.other_user && data.other_user.id) ? data.other_user.id : null;
            document.getElementById('msgrHeadName').textContent = peer.name || '—';
            var headUid = state.activePeerUserId || '';
            ['msgrHeadAvatarBtn', 'msgrHeadNameBtn'].forEach(function(id) {
                var el = document.getElementById(id);
                if (el) el.setAttribute('data-user-id', headUid);
            });
            window.msgrApplyAvatarToHead(peer);
            var subtitle = document.getElementById('msgrHeadSubtitle');
            if (subtitle) {
                var des = (data.other_user && data.other_user.designation) ? data.other_user.designation + ' · ' : '';
                subtitle.textContent = des + (peer.is_online ? 'Online' : 'Offline');
            }
            if (page === 1) {
                state.messages = data.messages || [];
            } else {
                state.messages = (data.messages || []).concat(state.messages);
            }
            state.pagination = data.pagination;
            state.lastMessageId = state.messages.length ? state.messages[state.messages.length - 1].id : null;
            renderMessages();
            var wrap = document.getElementById('msgrLoadMoreWrap');
            wrap.classList.toggle('d-none', !(data.pagination && data.pagination.has_more));
            if (scrollBottom) scrollMessagesToEnd();
        }).catch(function() {
            document.getElementById('msgrMessages').innerHTML = '<p class="text-danger text-center">Could not load messages.</p>';
        }).finally(function() {
            state.loadingMessages = false;
        });
    }

    function renderMessages() {
        var el = document.getElementById('msgrMessages');
        if (!state.messages.length) {
            el.innerHTML = emptyStateHtml('far fa-comment-dots', 'No messages yet', 'Send a message to start the conversation.');
            return;
        }
        el.innerHTML = state.messages.map(function(m) {
            var mine = m.is_mine ? ' is-mine' : '';
            var deleted = m.is_deleted ? ' is-deleted' : '';
            var readTick = m.is_mine ? (m.read_by_other ? '<i class="fas fa-check-double" title="Read"></i>' : '<i class="far fa-check" title="Sent"></i>') : '';
            var delBtn = '';
            if (m.is_mine && (canDeleteOwn || canManage) && !m.is_deleted) {
                delBtn = '<button type="button" class="btn btn-link btn-sm p-0 text-muted msgr-del-msg" data-id="' + m.id + '" title="Delete message" aria-label="Delete message"><i class="far fa-trash-alt"></i></button>';
            }
            var avatarHtml = '';
            if (!m.is_mine && m.sender) {
                avatarHtml = '<div class="msgr-bubble-row__avatar flex-shrink-0">' +
                    window.msgrRenderAvatar(normalizeAvatarUser(m.sender), { size: 'xs' }) + '</div>';
            }
            var bodyHtml = (!m.is_deleted && m.body) ? window.msgrFormatMessageBodyHtml(m.body, false) : (m.is_deleted ? '' : '');
            var attachHtml = (!m.is_deleted && m.attachments) ? window.msgrRenderMessageAttachments(m.attachments, m.is_mine) : '';
            var bubbleInner = bodyHtml + attachHtml;
            if (!bubbleInner && !m.is_deleted) {
                bubbleInner = '<div class="msgr-bubble__text text-muted"><em>Empty message</em></div>';
            }
            var reactionsHtml = window.msgrRenderReactionsHtml(m.reactions);
            var actionsHtml = window.msgrRenderBubbleActionsHtml(m.id, canReact, m.is_deleted);
            return '<div class="msgr-bubble-row' + mine + '" data-id="' + m.id + '">' + avatarHtml +
                '<div class="msgr-bubble-stack">' + actionsHtml +
                '<div class="msgr-bubble' + deleted + '">' + bubbleInner + '</div>' +
                reactionsHtml +
                '<div class="msgr-bubble-meta"><span>' + escapeHtml(m.created_at_formatted || '') + '</span> ' + readTick + delBtn + '</div></div></div>';
        }).join('');
        state.reactionsFingerprint = window.msgrReactionsFingerprint(state.messages);
        window.msgrBindAttachmentLightbox(el);
        window.msgrBindReactionUi(el);
        el.querySelectorAll('.msgr-del-msg').forEach(function(btn) {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                if (!confirm('Delete this message?')) return;
                fetchJson(routes.deleteMessage(btn.dataset.id), { method: 'DELETE' })
                    .then(function() { refreshActiveMessages(); loadConversations(); });
            });
        });
    }

    function scrollMessagesToEnd() {
        var el = document.getElementById('msgrMessages');
        el.scrollTop = el.scrollHeight;
    }

    function refreshActiveMessages() {
        if (!state.activeId) return;
        loadMessages(state.activeId, 1, true);
    }

    function applyReactionToState(messageId, reactions) {
        var msg = state.messages.find(function(m) { return m.id === messageId; });
        if (msg) msg.reactions = reactions;
        window.msgrUpdateMessageReactions(messageId, reactions);
        state.reactionsFingerprint = window.msgrReactionsFingerprint(state.messages);
    }

    window.msgrOnReactionToggle = function(messageId, emoji) {
        if (!canReact || !messageId || !emoji) return;
        fetchJson(routes.toggleReaction(messageId), {
            method: 'POST',
            body: new URLSearchParams({ emoji: emoji, _token: csrf })
        }).then(function(data) {
            applyReactionToState(data.message_id, data.reactions || []);
        }).catch(function() {});
    };

    function markRead(convId) {
        fetchJson(routes.markRead(convId), { method: 'POST', body: new URLSearchParams({ _token: csrf }) })
            .then(function(data) {
                if (typeof window.pmsUpdateMessengerBadge === 'function') {
                    window.pmsUpdateMessengerBadge(data.unread_total || 0);
                }
                loadConversations();
            });
    }

    function loadConversations(search) {
        var url = routes.conversations;
        if (search) url += '?search=' + encodeURIComponent(search);
        return fetchJson(url).then(function(data) {
            state.conversations = data.conversations || [];
            renderConversations();
            if (typeof window.pmsUpdateMessengerBadge === 'function') {
                window.pmsUpdateMessengerBadge(data.unread_total || 0);
            }
        });
    }

    function pollActive() {
        if (!state.activeId) return;
        var url = routes.messages(state.activeId) + '?page=1';
        fetchJson(url).then(function(data) {
            if (!state.activeId) return;
            var incoming = data.messages || [];
            var prevLast = state.lastMessageId;
            var newLast = incoming.length ? incoming[incoming.length - 1].id : null;
            var fp = window.msgrReactionsFingerprint(incoming);
            if (newLast !== prevLast || fp !== state.reactionsFingerprint) {
                var wasAtBottom = isNearBottom();
                state.messages = incoming;
                state.lastMessageId = newLast;
                state.reactionsFingerprint = fp;
                renderMessages();
                if (wasAtBottom) scrollMessagesToEnd();
                if (newLast !== prevLast) markRead(state.activeId);
            }
            var peer = normalizeAvatarUser(data.other_user);
            var subtitle = document.getElementById('msgrHeadSubtitle');
            if (subtitle) {
                var des = (data.other_user && data.other_user.designation) ? data.other_user.designation + ' · ' : '';
                subtitle.textContent = des + (peer.is_online ? 'Online' : 'Offline');
            }
            window.msgrApplyAvatarToHead(peer);
        });
        loadConversations();
    }

    function isNearBottom() {
        var el = document.getElementById('msgrMessages');
        return el.scrollHeight - el.scrollTop - el.clientHeight < 80;
    }

    function startPolling() {
        stopPolling();
        state.pollTimer = setInterval(pollActive, pollMs);
    }
    function stopPolling() {
        if (state.pollTimer) clearInterval(state.pollTimer);
        state.pollTimer = null;
    }

    function touchPresence() {
        fetchJson(routes.presence, { method: 'POST', body: new URLSearchParams({ _token: csrf }) }).catch(function() {});
    }

    function openProfilePanel(userId) {
        userId = parseInt(userId, 10);
        if (!userId) return;
        var shell = document.getElementById('msgrShell');
        var panel = document.getElementById('msgrProfilePanel');
        var body = document.getElementById('msgrProfileBody');
        if (!shell || !panel || !body) return;
        state.profileUserId = userId;
        shell.classList.add('profile-open');
        panel.classList.add('is-open');
        panel.setAttribute('aria-hidden', 'false');
        body.innerHTML = '<div class="msgr-profile-loading"><i class="fas fa-spinner fa-spin mr-1"></i> Loading profile…</div>';
        fetchJson(window.msgrProfilePanelUrl(userId)).then(function(data) {
            if (state.profileUserId !== userId) return;
            body.innerHTML = window.msgrRenderProfilePanel(data.profile || {});
        }).catch(function() {
            if (state.profileUserId !== userId) return;
            body.innerHTML = '<div class="msgr-profile-error">Could not load profile. Please try again.</div>';
        });
    }

    function closeProfilePanel() {
        var shell = document.getElementById('msgrShell');
        var panel = document.getElementById('msgrProfilePanel');
        if (shell) shell.classList.remove('profile-open');
        if (panel) {
            panel.classList.remove('is-open');
            panel.setAttribute('aria-hidden', 'true');
        }
        state.profileUserId = null;
    }

    document.querySelectorAll('[data-msgr-profile-close]').forEach(function(el) {
        el.addEventListener('click', closeProfilePanel);
    });
    var chatHead = document.getElementById('msgrChatHead');
    if (chatHead) {
        chatHead.addEventListener('click', function(e) {
            var trigger = e.target.closest('.msgr-profile-trigger');
            if (!trigger) return;
            e.preventDefault();
            var uid = trigger.getAttribute('data-user-id') || state.activePeerUserId;
            if (uid) openProfilePanel(uid);
        });
    }
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && document.getElementById('msgrProfilePanel') &&
            document.getElementById('msgrProfilePanel').classList.contains('is-open')) {
            closeProfilePanel();
        }
    });

    var searchTimer;
    var convSearch = document.getElementById('msgrConvSearch');
    if (!convSearch) {
        return;
    }
    convSearch.addEventListener('input', function(e) {
        var q = e.target.value.trim();
        clearTimeout(searchTimer);
        searchTimer = setTimeout(function() {
            loadConversations(q.length >= 2 ? q : '');
            if (q.length >= 2) searchUsers(q);
            else document.getElementById('msgrUserResults').classList.remove('is-open');
        }, 300);
    });

    function searchUsers(q) {
        fetchJson(routes.searchUsers + '?q=' + encodeURIComponent(q)).then(function(data) {
            var box = document.getElementById('msgrUserResults');
            var users = data.users || [];
            if (!users.length) {
                box.classList.remove('is-open');
                return;
            }
            box.innerHTML = users.map(function(u) {
                var av = normalizeAvatarUser(u);
                return '<button type="button" class="msgr-user-result" data-user-id="' + u.id + '">' +
                    window.msgrRenderAvatar(av, { size: 'sm', showStatus: true }) +
                    '<span class="min-w-0"><strong class="d-block text-truncate">' + escapeHtml(av.name) + '</strong>' +
                    (u.designation ? '<small class="text-muted d-block text-truncate">' + escapeHtml(u.designation) + '</small>' : '') +
                    '</span></button>';
            }).join('');
            box.classList.add('is-open');
            box.querySelectorAll('.msgr-user-result').forEach(function(btn) {
                btn.addEventListener('click', function() {
                    startConversation(parseInt(btn.dataset.userId, 10));
                    box.classList.remove('is-open');
                    document.getElementById('msgrConvSearch').value = '';
                });
            });
        });
    }

    function startConversation(userId) {
        fetchJson(routes.storeConversationPost, {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: new URLSearchParams({ _token: csrf, user_id: userId })
        }).then(function(data) {
            return loadConversations().then(function() {
                var id = data.conversation && data.conversation.id;
                if (id) openConversation(id);
            });
        });
    }

    var pendingAttachments = [];
    var attachInput = document.getElementById('msgrAttachInput');
    var attachBtn = document.getElementById('msgrAttachBtn');
    var attachPending = document.getElementById('msgrAttachPending');
    var attachErrors = document.getElementById('msgrAttachErrors');

    function showAttachErrors(messages) {
        if (!attachErrors) return;
        if (!messages || !messages.length) {
            attachErrors.innerHTML = '';
            return;
        }
        attachErrors.innerHTML = messages.map(function(m) {
            return '<div>' + escapeHtml(m) + '</div>';
        }).join('');
    }

    function renderPendingAttachments() {
        if (!attachPending) return;
        if (!pendingAttachments.length) {
            attachPending.classList.add('d-none');
            attachPending.innerHTML = '';
            return;
        }
        attachPending.classList.remove('d-none');
        attachPending.innerHTML = pendingAttachments.map(function(file, idx) {
            var ext = (file.name || '').split('.').pop().toLowerCase();
            var kind = window.msgrAttachmentConfig.allowedExt.indexOf(ext) >= 0 && ['jpg','jpeg','png','webp','gif'].indexOf(ext) >= 0 ? 'image' : 'document';
            return '<span class="msgr-attach-chip">' +
                '<i class="msgr-attach-chip__icon ' + window.msgrFileIcon(file.name, kind) + '"></i>' +
                '<span class="msgr-attach-chip__meta">' +
                '<span class="msgr-attach-chip__name">' + escapeHtml(file.name) + '</span>' +
                '<span class="msgr-attach-chip__size">' + window.msgrFormatFileSize(file.size) + '</span></span>' +
                '<button type="button" class="msgr-attach-chip__remove" data-idx="' + idx + '" aria-label="Remove">&times;</button></span>';
        }).join('');
        attachPending.querySelectorAll('.msgr-attach-chip__remove').forEach(function(btn) {
            btn.addEventListener('click', function() {
                var i = parseInt(btn.getAttribute('data-idx'), 10);
                pendingAttachments.splice(i, 1);
                renderPendingAttachments();
            });
        });
    }

    function addPendingFiles(fileList) {
        var cfg = window.msgrAttachmentConfig;
        var errors = [];
        Array.prototype.forEach.call(fileList || [], function(file) {
            if (pendingAttachments.length >= cfg.maxFiles) {
                errors.push('Maximum ' + cfg.maxFiles + ' files per message.');
                return;
            }
            var err = window.msgrValidatePendingFile(file);
            if (err) {
                errors.push(err);
                return;
            }
            var duplicate = pendingAttachments.some(function(f) {
                return f.name === file.name && f.size === file.size && f.lastModified === file.lastModified;
            });
            if (!duplicate) pendingAttachments.push(file);
        });
        showAttachErrors(errors);
        renderPendingAttachments();
    }

    if (attachBtn && attachInput) {
        attachBtn.addEventListener('click', function() { attachInput.click(); });
        attachInput.addEventListener('change', function() {
            addPendingFiles(attachInput.files);
            attachInput.value = '';
        });
    }

    document.querySelectorAll('[data-msgr-lightbox-close]').forEach(function(el) {
        el.addEventListener('click', window.msgrCloseLightbox);
    });
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') window.msgrCloseLightbox();
    });

    function resizeComposerInput(textarea) {
        if (!textarea) return;
        requestAnimationFrame(function() {
            var style = window.getComputedStyle(textarea);
            var minH = parseFloat(style.minHeight) || 44;
            var maxH = parseFloat(style.maxHeight) || 148;
            textarea.style.height = 'auto';
            var scrollH = textarea.scrollHeight;
            var nextH = Math.min(Math.max(scrollH, minH), maxH);
            textarea.style.height = nextH + 'px';
            textarea.classList.toggle('is-overflow', scrollH > maxH + 1);
        });
    }

    var emojiBtn = document.getElementById('msgrEmojiBtn');
    var composerInput = document.getElementById('msgrComposerInput');
    if (composerInput) {
        composerInput.addEventListener('input', function() {
            resizeComposerInput(composerInput);
        });
        resizeComposerInput(composerInput);
    }
    if (emojiBtn && composerInput) {
        emojiBtn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            if (window.msgrOpenEmojiPicker) {
                window.msgrOpenEmojiPicker(emojiBtn, {
                    onSelect: function(emoji) {
                        window.msgrInsertAtCursor(composerInput, emoji);
                    }
                });
            }
        });
    }

    var composer = document.getElementById('msgrComposerForm');
    if (composer) {
        composer.addEventListener('submit', function(e) {
            e.preventDefault();
            if (!state.activeId || !canSend) return;
            var input = document.getElementById('msgrComposerInput');
            var body = input.value.trim();
            if (!body && !pendingAttachments.length) {
                showAttachErrors(['Enter a message or attach at least one file.']);
                return;
            }
            showAttachErrors([]);
            input.disabled = true;
            var formData = new FormData();
            formData.append('_token', csrf);
            formData.append('body', body);
            pendingAttachments.forEach(function(file) {
                formData.append('attachments[]', file);
            });
            fetch(routes.sendMessage(state.activeId), {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': csrf
                },
                body: formData
            }).then(function(r) {
                return r.json().then(function(data) {
                    if (!r.ok) {
                        var msgs = [];
                        if (data && data.errors) {
                            Object.keys(data.errors).forEach(function(k) {
                                (data.errors[k] || []).forEach(function(m) { msgs.push(m); });
                            });
                        }
                        if (!msgs.length && data && data.message) msgs.push(data.message);
                        showAttachErrors(msgs.length ? msgs : ['Could not send message.']);
                        throw new Error('validation');
                    }
                    return data;
                });
            }).then(function() {
                input.value = '';
                resizeComposerInput(input);
                pendingAttachments = [];
                renderPendingAttachments();
                refreshActiveMessages();
                loadConversations();
            }).catch(function(err) {
                if (err && err.message !== 'validation') showAttachErrors(['Could not send message. Please try again.']);
            }).finally(function() {
                input.disabled = false;
                resizeComposerInput(input);
                input.focus();
            });
        });
        document.getElementById('msgrComposerInput').addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                composer.dispatchEvent(new Event('submit'));
            }
        });
    }

    var loadMoreBtn = document.getElementById('msgrLoadMore');
    if (loadMoreBtn) {
        loadMoreBtn.addEventListener('click', function() {
            if (!state.activeId || !state.pagination || !state.pagination.has_more) return;
            loadMessages(state.activeId, state.pagination.current_page + 1, false);
        });
    }

    var backBtn = document.getElementById('msgrBackBtn');
    if (backBtn) {
        backBtn.addEventListener('click', function() {
            state.activeId = null;
            stopPolling();
            showChatPanel(false);
            renderConversations();
            var shell = document.getElementById('msgrShell');
            if (shell) shell.classList.remove('chat-open');
        });
    }

    document.addEventListener('click', function(e) {
        if (!e.target.closest('.msgr-search-wrap')) {
            document.getElementById('msgrUserResults').classList.remove('is-open');
        }
    });

    touchPresence();
    state.presenceTimer = setInterval(touchPresence, 60000);

    loadConversations().then(function() {
        if (initialConversationId) {
            openConversation(parseInt(initialConversationId, 10));
        } else if (initialUserId) {
            startConversation(parseInt(initialUserId, 10));
        }
    });

    window.addEventListener('beforeunload', stopPolling);
});
</script>
@endpush