{{-- Floating chat: assigned agent plus any groups the client was added to --}}
<div id="portalChat" class="portal-chat">
    <button type="button" class="portal-chat__fab" id="portalChatFab" aria-label="Messages">
        <i class="fas fa-comment-dots" aria-hidden="true"></i>
        <span class="portal-chat__badge" id="portalChatBadge" hidden>0</span>
    </button>

    <div class="portal-chat__panel" id="portalChatPanel" hidden>
        <div class="portal-chat__head">
            <button type="button" class="portal-chat__close" id="portalChatBack" hidden aria-label="Back">&lsaquo;</button>
            <div>
                <div class="portal-chat__kicker" id="portalChatKicker">Messages</div>
                <div class="portal-chat__title" id="portalChatTitle">Inbox</div>
            </div>
            <button type="button" class="portal-chat__close" id="portalChatClose" aria-label="Close chat">&times;</button>
        </div>
        <div class="portal-chat__inbox" id="portalChatInbox"></div>
        <div class="portal-chat__thread" id="portalChatThread" hidden>
            <div class="portal-chat__body" id="portalChatBody"></div>
            <form class="portal-chat__form" id="portalChatForm" autocomplete="off">
                <input type="text" class="portal-chat__input" id="portalChatInput" maxlength="2000" placeholder="Type a message…">
                <button type="submit" class="portal-chat__send" id="portalChatSend" aria-label="Send">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </form>
        </div>
    </div>
</div>

<script>
(function () {
    var fab = document.getElementById('portalChatFab');
    var panel = document.getElementById('portalChatPanel');
    var closeBtn = document.getElementById('portalChatClose');
    var backBtn = document.getElementById('portalChatBack');
    var inboxEl = document.getElementById('portalChatInbox');
    var threadEl = document.getElementById('portalChatThread');
    var bodyEl = document.getElementById('portalChatBody');
    var form = document.getElementById('portalChatForm');
    var input = document.getElementById('portalChatInput');
    var titleEl = document.getElementById('portalChatTitle');
    var kickerEl = document.getElementById('portalChatKicker');
    var badge = document.getElementById('portalChatBadge');
    if (!fab || !panel) return;

    var csrf = document.querySelector('meta[name="csrf-token"]');
    var inboxUrl = @json(route('portal.chat.inbox'));
    var base = @json(url('/portal/chat'));
    var lastId = 0;
    var open = false;
    var activeId = null;
    var conversations = [];
    var sending = false;

    function headers(json) {
        var h = { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' };
        if (csrf) h['X-CSRF-TOKEN'] = csrf.getAttribute('content');
        if (json) h['Content-Type'] = 'application/json';
        return h;
    }
    function escapeHtml(s) {
        return String(s).replace(/[&<>"']/g, function (c) {
            return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c];
        });
    }
    function formatTime(iso) {
        if (!iso) return '';
        var d = new Date(iso);
        if (isNaN(d.getTime())) return '';
        return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    }
    function setBadge(n) {
        n = parseInt(n, 10) || 0;
        if (!open && n > 0) { badge.hidden = false; badge.textContent = n > 9 ? '9+' : String(n); }
        else badge.hidden = true;
    }
    function renderInbox() {
        if (!conversations.length) {
            inboxEl.innerHTML = '<div class="portal-chat__empty">Your account manager and any group chats will appear here.</div>';
            return;
        }
        inboxEl.innerHTML = conversations.map(function (c) {
            return '<button type="button" class="portal-chat__row' + (c.unread ? ' is-unread' : '') + '" data-cid="' + c.id + '">'
                + '<div class="portal-chat__row-top"><strong>' + escapeHtml(c.name) + '</strong>'
                + (c.unread ? '<span class="portal-chat__row-unread">' + c.unread + '</span>' : '')
                + '</div>'
                + '<div class="portal-chat__row-preview">' + escapeHtml((c.type === 'group' ? 'Group · ' : '') + (c.last_message || 'No messages yet')) + '</div>'
                + '</button>';
        }).join('');
    }
    function appendMessage(msg) {
        var empty = bodyEl.querySelector('.portal-chat__empty');
        if (empty) empty.remove();
        if (bodyEl.querySelector('[data-id="' + msg.id + '"]')) return;
        var el = document.createElement('div');
        el.className = 'portal-chat__msg' + (msg.mine ? ' is-mine' : '');
        el.dataset.id = msg.id;
        el.innerHTML = '<div class="portal-chat__bubble">' + escapeHtml(msg.body) + '</div>'
            + '<div class="portal-chat__meta">' + escapeHtml(msg.from || '') + ' · ' + escapeHtml(formatTime(msg.created_at)) + '</div>';
        bodyEl.appendChild(el);
        bodyEl.scrollTop = bodyEl.scrollHeight;
        lastId = Math.max(lastId, parseInt(msg.id, 10) || 0);
    }
    function showInbox() {
        activeId = null;
        lastId = 0;
        threadEl.hidden = true;
        inboxEl.hidden = false;
        backBtn.hidden = true;
        kickerEl.textContent = 'Messages';
        titleEl.textContent = 'Inbox';
        renderInbox();
    }
    async function openThread(id) {
        activeId = parseInt(id, 10);
        lastId = 0;
        inboxEl.hidden = true;
        threadEl.hidden = false;
        backBtn.hidden = conversations.length < 2;
        var conv = conversations.find(function (c) { return parseInt(c.id, 10) === activeId; });
        titleEl.textContent = conv ? conv.name : 'Chat';
        kickerEl.textContent = conv && conv.type === 'group' ? 'Group' : 'Account manager';
        bodyEl.innerHTML = '<div class="portal-chat__empty">Loading…</div>';
        await loadThread(true);
        try {
            await fetch(base + '/' + activeId + '/read', { method: 'POST', headers: headers(true), credentials: 'same-origin', body: '{}' });
            setBadge(0);
        } catch (e) {}
        input.focus();
    }
    async function loadThread(initial) {
        if (!activeId) return;
        var res = await fetch(base + '/' + activeId + '/messages' + (lastId ? ('?after_id=' + lastId) : ''), { headers: headers(false), credentials: 'same-origin' });
        if (!res.ok) return;
        var data = await res.json();
        if (data.conversation) {
            titleEl.textContent = data.conversation.name;
            kickerEl.textContent = data.conversation.type === 'group' ? 'Group' : 'Chat';
        }
        if (initial) bodyEl.innerHTML = '';
        (data.messages || []).forEach(appendMessage);
        if (initial && lastId === 0) bodyEl.innerHTML = '<div class="portal-chat__empty">No messages yet. Say hello.</div>';
    }
    async function loadInbox() {
        var res = await fetch(inboxUrl, { headers: headers(false), credentials: 'same-origin' });
        if (!res.ok) return;
        var data = await res.json();
        conversations = data.conversations || [];
        setBadge(data.unread);
        if (!activeId) renderInbox();
    }

    fab.addEventListener('click', function () {
        open = !open;
        panel.hidden = !open;
        if (open) {
            if (!activeId) {
                if (conversations.length === 1) openThread(conversations[0].id);
                else showInbox();
            }
            setBadge(0);
        }
    });
    closeBtn.addEventListener('click', function () { open = false; panel.hidden = true; });
    backBtn.addEventListener('click', showInbox);
    inboxEl.addEventListener('click', function (e) {
        var row = e.target.closest('[data-cid]');
        if (row) openThread(row.getAttribute('data-cid'));
    });
    form.addEventListener('submit', async function (e) {
        e.preventDefault();
        if (!activeId || sending) return;
        var text = (input.value || '').trim();
        if (!text) return;
        sending = true;
        try {
            var res = await fetch(base + '/' + activeId + '/messages', {
                method: 'POST', headers: headers(true), credentials: 'same-origin',
                body: JSON.stringify({ body: text })
            });
            var data = await res.json().catch(function () { return {}; });
            if (res.ok && data.message) { input.value = ''; appendMessage(data.message); }
            else input.placeholder = data.error || 'Unable to send.';
        } finally {
            sending = false;
            input.focus();
        }
    });

    loadInbox().catch(function () {});
    setInterval(function () {
        loadInbox().catch(function () {});
        if (activeId) loadThread(false).catch(function () {});
    }, 4000);
})();
</script>