@php
    /** @var \App\Models\User $chatUser */
    $chatUser = Auth::user();
    $chatUserAvatar = $chatUser?->avatar
        ? asset('storage/' . ltrim($chatUser->avatar, '/'))
        : ('https://ui-avatars.com/api/?name=' . urlencode(trim(($chatUser->first_name ?? 'Me') . ' ' . ($chatUser->last_name ?? ''))) . '&background=6366f1&color=fff&size=96');
@endphp

<style>
    /* JS narrows this to the exact leftover viewport height; the vh value is the
       no-JS fallback. Both panes are fixed-height shells so their inner lists
       scroll instead of the page, which keeps the composer on screen. */
    .chat-app { --chat-pane-h: 70vh; }
    .chat-app .conversations-pane,
    .chat-app .messages-pane {
        background: #fff;
        border: 1px solid var(--ar-border-color);
        border-radius: 1rem;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: var(--chat-pane-h);
        /* Deliberately low: a min-height above the computed value would win and
           reintroduce document scrolling on short windows. */
        min-height: 14rem;
        max-height: calc(100vh - 1rem);
    }
    .chat-app .conversations-list {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }
    .chat-app .search-results {
        max-height: 50vh;
        overflow-y: auto;
    }
    .chat-app .conversation-item {
        cursor: pointer;
        border: 0;
        background: transparent;
        text-align: start;
        width: 100%;
        padding: 0.75rem 1rem;
        display: flex;
        gap: 0.75rem;
        align-items: center;
        border-bottom: 1px solid var(--ar-border-color);
        transition: background-color 120ms ease-in-out;
    }
    .chat-app .conversation-item:last-child { border-bottom: 0; }
    .chat-app .conversation-item:hover { background: rgba(99, 102, 241, 0.06); }
    .chat-app .conversation-item.active { background: rgba(99, 102, 241, 0.12); }
    .chat-app .messages-scroll {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 1rem 1.25rem;
        background: linear-gradient(180deg, #fafafd 0%, #f5f6fb 100%);
    }
    .chat-app .message-stack {
        min-width: 0;
        max-width: 82%;
    }
    .chat-app .message-bubble {
        display: inline-block;
        max-width: 100%;
        padding: 0.55rem 0.85rem;
        border-radius: 0.85rem;
        line-height: 1.35;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        word-break: normal;
    }
    .chat-app .message-row { display: flex; gap: 0.5rem; align-items: flex-end; margin-bottom: 0.6rem; min-width: 0; }
    .chat-app .message-row.is-own { justify-content: flex-end; }
    .chat-app .message-row.is-own .message-bubble { background: var(--ar-primary); color: #fff; }
    .chat-app .message-row .message-bubble { background: #fff; color: var(--ar-body-color); border: 1px solid var(--ar-border-color); }
    .chat-app .message-meta { font-size: 0.7rem; color: var(--ar-secondary-color); margin-top: 0.15rem; }
    .chat-app .composer-form { border-top: 1px solid var(--ar-border-color); padding: 0.75rem 1rem; background: #fff; }
    .chat-app .composer-form textarea { resize: none; }
    .chat-app .empty-state { padding: 2.5rem 1rem; text-align: center; color: var(--ar-secondary-color); }
    .chat-app .badge-group { background: #2e7d32; color: #fff; }
    .chat-app .conversation-item .avatar { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; object-fit: cover; }
    .chat-app .conversation-meta { min-width: 0; flex: 1; }
    .chat-app .conversation-meta .title { font-weight: 600; line-height: 1.2; margin-bottom: 0.1rem; }
    .chat-app .conversation-meta .preview { color: var(--ar-secondary-color); font-size: 0.85rem; }
    .chat-app .search-result-item {
        display: flex;
        gap: 0.6rem;
        align-items: center;
        padding: 0.55rem 1rem;
        cursor: pointer;
        border-bottom: 1px solid var(--ar-border-color);
    }
    .chat-app .search-result-item:hover { background: rgba(99, 102, 241, 0.06); }
    .chat-app .search-result-item:last-child { border-bottom: 0; }
    .chat-app .header-bar {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.85rem 1rem;
        border-bottom: 1px solid var(--ar-border-color);
        background: #fff;
    }
    .chat-app .header-bar .avatar { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; object-fit: cover; }

    /* Messenger-style single pane on mobile: list OR thread, never both. */
    @media (max-width: 991.98px) {
        .chat-app.is-thread-open .chat-col-list { display: none; }
        .chat-app:not(.is-thread-open) .chat-col-thread { display: none; }
    }
    /* Hide the portal menu FAB while the thread composer is open. */
    body.chat-thread-open .portal-menu-fab { display: none !important; }
</style>

<div class="chat-app row g-3" data-chat-app
     data-current-user-id="{{ (int) $chatUser->id }}"
     data-current-user-name="{{ trim(($chatUser->first_name ?? '') . ' ' . ($chatUser->last_name ?? '')) ?: __('public.chat_app.me') }}"
     data-current-user-avatar="{{ $chatUserAvatar }}">
    <div class="col-12 col-lg-4 chat-col-list">
        <div class="conversations-pane">
            <div class="p-3 border-bottom">
                <div class="position-relative">
                    <input type="search" class="form-control pe-5" placeholder="{{ __('public.chat_app.search_placeholder') }}" data-user-search>
                    <i class="fas fa-search position-absolute top-50 end-0 translate-middle-y me-3 text-body-secondary"></i>
                </div>
                <div class="search-results border rounded mt-2 d-none" data-search-results></div>
            </div>
            <div class="conversations-list" data-conversation-list>
                <div class="empty-state" data-conversation-empty>{{ __('public.chat_app.loading_conversations') }}</div>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-8 chat-col-thread">
        <div class="messages-pane">
            <div class="header-bar" data-thread-header hidden>
                <button type="button" class="btn btn-sm btn-link text-body px-1 d-lg-none flex-shrink-0"
                        data-thread-back aria-label="{{ __('public.chat_app.back') }}">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <img class="avatar" src="" alt="" data-thread-avatar>
                <div class="min-w-0 flex-grow-1">
                    <div class="fw-semibold text-truncate" data-thread-title>—</div>
                    <div class="text-body-secondary fs-xs text-truncate" data-thread-subtitle></div>
                </div>
            </div>
            <div class="messages-scroll" data-messages-scroll>
                <div class="empty-state" data-messages-empty>{{ __('public.chat_app.choose_conversation') }}</div>
            </div>
            <form class="composer-form" data-composer hidden>
                <div class="d-flex align-items-end gap-2">
                    <textarea class="form-control border-0 shadow-none" rows="2" placeholder="{{ __('public.chat_app.composer_placeholder') }}" data-composer-input></textarea>
                    <button type="submit" class="btn btn-primary flex-shrink-0">
                        <i class="fas fa-paper-plane me-1"></i> {{ __('public.chat_app.send') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
(function () {
    var root = document.querySelector('[data-chat-app]');
    if (!root) return;

    var meId = parseInt(root.dataset.currentUserId, 10);
    var meAvatar = root.dataset.currentUserAvatar || '';
    var csrfMeta = document.querySelector('meta[name="csrf-token"]');
    var csrfToken = csrfMeta ? csrfMeta.getAttribute('content') : @json(csrf_token());
    var tChat = @json(trans('public.chat_app'));
    function tc(key, params) {
        var s = (tChat && tChat[key]) ? String(tChat[key]) : key;
        if (params) {
            Object.keys(params).forEach(function (k) {
                s = s.split(':' + k).join(String(params[k]));
            });
        }
        return s;
    }
    function roleLabel(role) {
        if (!role) return '';
        var key = 'role_' + String(role).toLowerCase();
        if (tChat && tChat[key]) return String(tChat[key]);
        return String(role).charAt(0).toUpperCase() + String(role).slice(1);
    }

    var state = {
        conversations: [],
        activeId: null,
        lastMessageId: 0,
        messageBuffer: {},
        searchTimer: null,
    };

    var $list = root.querySelector('[data-conversation-list]');
    var $emptyConv = root.querySelector('[data-conversation-empty]');
    var $messages = root.querySelector('[data-messages-scroll]');
    var $messagesEmpty = root.querySelector('[data-messages-empty]');
    var $threadHeader = root.querySelector('[data-thread-header]');
    var $threadBack = root.querySelector('[data-thread-back]');
    var $threadAvatar = root.querySelector('[data-thread-avatar]');
    var $threadTitle = root.querySelector('[data-thread-title]');
    var $threadSubtitle = root.querySelector('[data-thread-subtitle]');
    var $composer = root.querySelector('[data-composer]');
    var $composerInput = root.querySelector('[data-composer-input]');
    var $userSearch = root.querySelector('[data-user-search]');
    var $searchResults = root.querySelector('[data-search-results]');
    var mobileQuery = window.matchMedia('(max-width: 991.98px)');
    var $messagesPane = root.querySelector('.messages-pane');
    var $conversationsPane = root.querySelector('.conversations-pane');

    /* Pin the panes to the space left below them in the viewport, so the message
       list scrolls internally and the composer never leaves the screen. */
    function sizeChatPanes() {
        // A hidden pane reports a zero rect, so measure the one on screen.
        var pane = ($messagesPane && $messagesPane.offsetParent) ? $messagesPane : $conversationsPane;
        if (!pane || !pane.offsetParent) pane = root;
        var docTop = pane.getBoundingClientRect().top + (window.pageYOffset || 0);
        var reserve = 16;
        if (mobileQuery.matches) {
            // In list view the fixed-bottom portal menu button covers the pane.
            reserve = root.classList.contains('is-thread-open') ? 8 : 56;
        }
        var available = window.innerHeight - docTop - reserve;
        // A floor keeps short viewports usable, but it must never exceed the
        // viewport itself: a pane taller than the space below it makes the
        // document scroll, which is what pushes the composer off screen.
        var floor = Math.min(280, window.innerHeight - reserve);
        if (available < floor) available = floor;
        root.style.setProperty('--chat-pane-h', Math.round(available) + 'px');
    }

    function scrollMessagesToBottom() {
        $messages.scrollTop = $messages.scrollHeight;
    }

    function showThreadView() {
        if (!mobileQuery.matches) return;
        root.classList.add('is-thread-open');
        document.body.classList.add('chat-thread-open');
        sizeChatPanes();
        scrollMessagesToBottom();
        if (!history.state || !history.state.chatThread) {
            history.pushState({ chatThread: true }, '');
        }
    }

    function showListView(fromPopstate) {
        root.classList.remove('is-thread-open');
        document.body.classList.remove('chat-thread-open');
        sizeChatPanes();
        if (!fromPopstate && history.state && history.state.chatThread) {
            history.back();
        }
    }

    function escapeHtml(s) {
        return String(s == null ? '' : s)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
    }

    function formatTime(value) {
        if (!value) return '';
        try {
            var d = new Date(value);
            if (Number.isNaN(d.getTime())) return '';
            return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        } catch (_e) {
            return '';
        }
    }

    function defaultAvatar(name) {
        var n = encodeURIComponent(name || '?');
        return 'https://ui-avatars.com/api/?name=' + n + '&background=6366f1&color=fff&size=96';
    }

    async function apiRequest(url, options) {
        options = options || {};
        var headers = Object.assign({
            'Accept': 'application/json',
            'X-CSRF-TOKEN': csrfToken,
            'X-Requested-With': 'XMLHttpRequest',
        }, options.headers || {});
        var init = Object.assign({}, options, {
            credentials: 'same-origin',
            headers: headers,
        });
        if (init.body && typeof init.body === 'object' && !(init.body instanceof FormData)) {
            init.body = JSON.stringify(init.body);
            headers['Content-Type'] = 'application/json';
        }
        var res = await fetch(url, init);
        if (!res.ok) {
            var msg = tc('request_failed');
            try { var json = await res.json(); msg = json.message || msg; } catch (_e) {}
            throw new Error(msg);
        }
        if (res.status === 204) return null;
        return res.json();
    }

    function renderConversations() {
        if (!state.conversations.length) {
            $list.innerHTML = '<div class="empty-state">' + escapeHtml(tc('no_conversations')) + '</div>';
            return;
        }
        var youPrefix = tc('you_prefix');
        var noMessagesShort = tc('no_messages_short');
        var groupBadge = tc('group_badge');
        var html = state.conversations.map(function (c) {
            var preview = c.last_message
                ? ((c.last_message.user_id === meId ? escapeHtml(youPrefix) : '') + escapeHtml(String(c.last_message.body || '').slice(0, 80)))
                : '<span class="text-body-secondary">' + escapeHtml(noMessagesShort) + '</span>';
            var unread = c.unread_count
                ? '<span class="badge rounded-pill bg-danger ms-2">' + c.unread_count + '</span>'
                : '';
            var time = c.last_message ? formatTime(c.last_message.created_at) : '';
            var avatar = c.avatar_url || defaultAvatar(c.title);
            return ''
                + '<button type="button" class="conversation-item ' + (state.activeId === c.id ? 'active' : '') + '" data-open-conversation="' + c.id + '">'
                + '  <img class="avatar" src="' + escapeHtml(avatar) + '" alt="" onerror="this.src=\'' + escapeHtml(defaultAvatar(c.title)) + '\'">'
                + '  <div class="conversation-meta">'
                + '    <div class="d-flex align-items-center justify-content-between gap-2">'
                + '      <div class="title text-truncate">' + escapeHtml(c.title) + (c.type === 'group' ? ' <span class="badge badge-group ms-1">' + escapeHtml(groupBadge) + '</span>' : '') + '</div>'
                + '      <span class="text-body-secondary fs-xs flex-shrink-0">' + escapeHtml(time) + '</span>'
                + '    </div>'
                + '    <div class="d-flex align-items-center justify-content-between gap-2">'
                + '      <div class="preview text-truncate">' + preview + '</div>'
                + '      ' + unread
                + '    </div>'
                + '  </div>'
                + '</button>';
        }).join('');
        $list.innerHTML = html;
    }

    function renderThreadHeader(conversation) {
        if (!conversation) {
            $threadHeader.hidden = true;
            return;
        }
        $threadHeader.hidden = false;
        $threadAvatar.src = conversation.avatar_url || defaultAvatar(conversation.title);
        $threadTitle.textContent = conversation.title || '';
        if (conversation.type === 'group') {
            $threadSubtitle.textContent = (conversation.classroom_name ? conversation.classroom_name + ' · ' : '') + (conversation.participants_count || 0) + ' ' + tc('members');
        } else if (conversation.other_user) {
            $threadSubtitle.textContent = roleLabel(conversation.other_user.role);
        } else {
            $threadSubtitle.textContent = '';
        }
    }

    function renderMessages(messages, opts) {
        opts = opts || {};
        if (!opts.append) {
            $messages.innerHTML = '';
        }
        if (!messages.length && !opts.append) {
            $messages.innerHTML = '<div class="empty-state">' + escapeHtml(tc('no_messages_long')) + '</div>';
            return;
        }
        if ($messagesEmpty && $messages.contains($messagesEmpty)) {
            $messagesEmpty.remove();
        }
        var html = messages.map(function (m) {
            var isOwn = m.user_id === meId;
            var name = m.user ? m.user.name : tc('user_fallback', { id: m.user_id });
            var time = formatTime(m.created_at);
            var avatar = m.user && m.user.avatar_url ? m.user.avatar_url : defaultAvatar(name);
            return ''
                + '<div class="message-row ' + (isOwn ? 'is-own' : '') + '">'
                + (isOwn ? '' : '<img class="rounded-circle flex-shrink-0" src="' + escapeHtml(avatar) + '" width="32" height="32" alt="" style="object-fit: cover;">')
                + '  <div class="message-stack d-flex flex-column ' + (isOwn ? 'align-items-end' : 'align-items-start') + '">'
                + (isOwn ? '' : '<div class="message-meta">' + escapeHtml(name) + '</div>')
                + '    <div class="message-bubble">' + escapeHtml(m.body) + '</div>'
                + '    <div class="message-meta">' + escapeHtml(time) + '</div>'
                + '  </div>'
                + '</div>';
        }).join('');
        if (opts.append) {
            $messages.insertAdjacentHTML('beforeend', html);
        } else {
            $messages.innerHTML = html;
        }
        scrollMessagesToBottom();
    }

    function setActiveConversation(id) {
        state.activeId = id;
        state.lastMessageId = 0;
        var conversation = state.conversations.find(function (c) { return c.id === id; });
        renderThreadHeader(conversation);
        renderConversations();
        $composer.hidden = !conversation;
        if (!conversation) {
            $messages.innerHTML = '<div class="empty-state">' + escapeHtml(tc('choose_conversation')) + '</div>';
            return;
        }
        loadMessages(true);
        markRead();
        showThreadView();
    }

    async function loadConversations() {
        try {
            var res = await apiRequest('/chat-api/conversations');
            state.conversations = res && res.data ? res.data : [];
            renderConversations();
        } catch (e) {
            $list.innerHTML = '<div class="empty-state text-danger">' + escapeHtml(e.message) + '</div>';
        }
    }

    async function loadMessages(initial) {
        if (!state.activeId) return;
        try {
            var url = '/chat-api/conversations/' + state.activeId + '/messages';
            if (state.lastMessageId) url += '?since_id=' + state.lastMessageId;
            var res = await apiRequest(url);
            var messages = res && res.data ? res.data : [];
            if (!messages.length) {
                if (initial) {
                    $messages.innerHTML = '<div class="empty-state">' + escapeHtml(tc('no_messages_long')) + '</div>';
                }
                return;
            }
            renderMessages(messages, { append: !initial });
            state.lastMessageId = messages[messages.length - 1].id;
            if (!initial) {
                markRead();
            }
        } catch (e) {
            console.error('Chat poll failed:', e);
        }
    }

    async function markRead() {
        if (!state.activeId) return;
        try {
            await apiRequest('/chat-api/conversations/' + state.activeId + '/read', { method: 'POST' });
            var conversation = state.conversations.find(function (c) { return c.id === state.activeId; });
            if (conversation) conversation.unread_count = 0;
            renderConversations();
        } catch (_e) {}
    }

    async function sendMessage(body) {
        if (!state.activeId || !body) return;
        try {
            var res = await apiRequest('/chat-api/conversations/' + state.activeId + '/messages', {
                method: 'POST',
                body: { message: body },
            });
            var message = res && res.data;
            if (message) {
                renderMessages([message], { append: true });
                state.lastMessageId = message.id;
            }
            await loadConversations();
        } catch (e) {
            alert(e.message || tc('send_failed'));
        }
    }

    async function searchUsers(query) {
        try {
            var url = '/chat-api/users' + (query ? ('?q=' + encodeURIComponent(query)) : '');
            var res = await apiRequest(url);
            var users = res && res.data ? res.data : [];
            renderSearchResults(users);
        } catch (e) {
            $searchResults.innerHTML = '<div class="search-result-item text-danger">' + escapeHtml(e.message) + '</div>';
            $searchResults.classList.remove('d-none');
        }
    }

    function renderSearchResults(users) {
        if (!users.length) {
            $searchResults.innerHTML = '<div class="search-result-item text-body-secondary">' + escapeHtml(tc('no_matching_users')) + '</div>';
            $searchResults.classList.remove('d-none');
            return;
        }
        $searchResults.innerHTML = users.map(function (u) {
            var avatar = u.avatar_url || defaultAvatar(u.name);
            var role = roleLabel(u.role);
            return ''
                + '<div class="search-result-item" data-open-direct="' + u.id + '">'
                + '  <img class="rounded-circle" src="' + escapeHtml(avatar) + '" width="36" height="36" alt="" style="object-fit: cover;">'
                + '  <div class="min-w-0 flex-grow-1">'
                + '    <div class="fw-medium text-truncate">' + escapeHtml(u.name) + '</div>'
                + '    <div class="text-body-secondary fs-xs text-truncate">' + escapeHtml(role) + (u.email ? ' · ' + escapeHtml(u.email) : '') + '</div>'
                + '  </div>'
                + '</div>';
        }).join('');
        $searchResults.classList.remove('d-none');
    }

    async function openDirect(userId) {
        try {
            var res = await apiRequest('/chat-api/conversations/direct', {
                method: 'POST',
                body: { user_id: Number(userId) },
            });
            var conversation = res && res.data;
            if (!conversation) return;
            $userSearch.value = '';
            $searchResults.classList.add('d-none');
            $searchResults.innerHTML = '';
            await loadConversations();
            setActiveConversation(conversation.id);
        } catch (e) {
            alert(e.message || tc('open_chat_failed'));
        }
    }

    $list.addEventListener('click', function (event) {
        var btn = event.target.closest('[data-open-conversation]');
        if (!btn) return;
        setActiveConversation(parseInt(btn.dataset.openConversation, 10));
    });

    if ($threadBack) {
        $threadBack.addEventListener('click', function () {
            showListView(false);
        });
    }

    window.addEventListener('popstate', function () {
        if (root.classList.contains('is-thread-open')) {
            showListView(true);
        }
    });

    function onMobileQueryChange() {
        if (!mobileQuery.matches) {
            root.classList.remove('is-thread-open');
            document.body.classList.remove('chat-thread-open');
        }
        sizeChatPanes();
    }
    if (typeof mobileQuery.addEventListener === 'function') {
        mobileQuery.addEventListener('change', onMobileQueryChange);
    } else if (typeof mobileQuery.addListener === 'function') {
        mobileQuery.addListener(onMobileQueryChange);
    }

    $searchResults.addEventListener('click', function (event) {
        var item = event.target.closest('[data-open-direct]');
        if (!item) return;
        openDirect(item.dataset.openDirect);
    });

    $userSearch.addEventListener('input', function () {
        var value = $userSearch.value.trim();
        if (state.searchTimer) clearTimeout(state.searchTimer);
        if (!value) {
            $searchResults.classList.add('d-none');
            $searchResults.innerHTML = '';
            return;
        }
        state.searchTimer = setTimeout(function () { searchUsers(value); }, 250);
    });

    document.addEventListener('click', function (event) {
        if (!event.target.closest('[data-search-results]') && event.target !== $userSearch) {
            $searchResults.classList.add('d-none');
        }
    });

    $composer.addEventListener('submit', function (event) {
        event.preventDefault();
        var value = ($composerInput.value || '').trim();
        if (!value) return;
        $composerInput.value = '';
        sendMessage(value);
    });

    $composerInput.addEventListener('keydown', function (event) {
        if (event.key === 'Enter' && !event.shiftKey) {
            event.preventDefault();
            $composer.dispatchEvent(new Event('submit'));
        }
    });

    function pollChat() {
        loadConversations();
        if (state.activeId) loadMessages(false);
    }

    var resizeTimer = null;
    window.addEventListener('resize', function () {
        if (resizeTimer) clearTimeout(resizeTimer);
        resizeTimer = setTimeout(sizeChatPanes, 120);
    });
    window.addEventListener('orientationchange', sizeChatPanes);
    // Late webfonts and the sidebar can shift the pane's offset after first paint.
    window.addEventListener('load', sizeChatPanes);
    if (document.fonts && document.fonts.ready && typeof document.fonts.ready.then === 'function') {
        document.fonts.ready.then(sizeChatPanes).catch(function () {});
    }

    sizeChatPanes();
    loadConversations().then(sizeChatPanes, sizeChatPanes);
    setInterval(pollChat, 10000);
})();
</script>