{{-- resources/views/admin/clubs/_chat.blade.php --}}
@php
    $standaloneChat = $standaloneChat ?? false;
@endphp

<style>
    .azp-chat-shell{
        display:grid;
        grid-template-columns:360px minmax(0,1fr);
        min-height:calc(100dvh - 190px);
        border:1px solid rgba(17,24,39,.10);
        border-radius:10px;
        background:#fff;
        box-shadow:0 22px 70px rgba(17,24,39,.10);
        overflow:hidden;
    }
    .azp-chat-sidebar{
        border-right:1px solid rgba(17,24,39,.10);
        background:#f8fafc;
        display:flex;
        flex-direction:column;
        min-width:0;
    }
    .azp-chat-side-head{
        padding:18px 18px 16px;
        border-bottom:1px solid rgba(17,24,39,.10);
        background:#111827;
        color:#fff;
    }
    .azp-chat-title-row{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
    }
    .azp-chat-eyebrow{
        font-size:11px;
        font-weight:800;
        color:rgba(255,255,255,.62);
        text-transform:uppercase;
        letter-spacing:.08em;
    }
    .azp-chat-title{
        margin-top:4px;
        font-size:18px;
        font-weight:900;
        color:#fff;
    }
    .azp-chat-context{
        margin-top:8px;
        color:rgba(255,255,255,.72);
        font-size:12px;
        font-weight:650;
        line-height:1.35;
    }
    .azp-chat-thread-list{
        overflow:auto;
        padding:12px;
        flex:1;
    }
    .azp-chat-thread{
        width:100%;
        border:1px solid transparent;
        background:transparent;
        color:#111827;
        text-align:left;
        padding:13px;
        border-radius:10px;
        cursor:pointer;
        display:grid;
        grid-template-columns:38px minmax(0,1fr);
        gap:10px;
        transition:background .12s ease,border-color .12s ease,transform .12s ease,box-shadow .12s ease;
    }
    .azp-chat-thread:hover{
        background:#fff;
        border-color:rgba(17,24,39,.10);
        transform:translateY(-1px);
        box-shadow:0 10px 28px rgba(17,24,39,.06);
    }
    .azp-chat-thread.is-active{
        background:#fff;
        color:#111827;
        border-color:rgba(17,24,39,.18);
        box-shadow:0 12px 34px rgba(17,24,39,.10);
    }
    .azp-chat-avatar{
        width:38px;
        height:38px;
        border-radius:10px;
        display:flex;
        align-items:center;
        justify-content:center;
        font-weight:900;
        color:#fff;
        background:#111827;
        flex:0 0 auto;
    }
    .azp-chat-thread.is-active .azp-chat-avatar{ background:#111827; color:#fff; }
    .azp-chat-thread-main{ min-width:0; }
    .azp-chat-thread-name{
        font-size:13px;
        font-weight:850;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .azp-chat-thread-meta{
        margin-top:3px;
        color:#6b7280;
        font-size:11px;
        font-weight:700;
    }
    .azp-chat-thread.is-active .azp-chat-thread-meta{ color:#6b7280; }
    .azp-chat-panel{
        min-width:0;
        display:flex;
        flex-direction:column;
        background:#fff;
    }
    .azp-chat-header{
        min-height:104px;
        padding:20px 22px;
        border-bottom:1px solid rgba(17,24,39,.10);
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:14px;
        background:#fff;
    }
    .azp-chat-current{
        display:flex;
        gap:12px;
        min-width:0;
    }
    .azp-chat-current .azp-chat-avatar{
        width:44px;
        height:44px;
    }
    .azp-chat-current-title{
        font-size:16px;
        font-weight:900;
        color:#111827;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .azp-chat-current-meta{
        margin-top:4px;
        font-size:12px;
        font-weight:700;
        color:#6b7280;
    }
    .azp-chat-participants-wrap{ margin-top:10px; display:none; }
    .azp-chat-participants-label{
        font-size:11px;
        font-weight:800;
        color:#6b7280;
        margin-bottom:6px;
    }
    .azp-chat-participants{
        display:flex;
        flex-wrap:wrap;
        gap:6px;
    }
    .azp-chat-pill{
        border:1px solid rgba(0,0,0,.08);
        background:#f3f4f6;
        color:#374151;
        border-radius:999px;
        padding:6px 9px;
        font-size:11px;
        font-weight:800;
        line-height:1;
    }
    .azp-chat-messages{
        flex:1;
        min-height:420px;
        max-height:none;
        overflow:auto;
        padding:26px;
        background:
            linear-gradient(180deg,rgba(248,250,252,.96) 0%,rgba(241,245,249,.96) 100%),
            linear-gradient(to right, rgba(17,24,39,.04) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(17,24,39,.04) 1px, transparent 1px);
        background-size:auto,32px 32px,32px 32px;
    }
    .azp-chat-empty{
        height:100%;
        min-height:260px;
        display:flex;
        align-items:center;
        justify-content:center;
        color:#6b7280;
        font-weight:750;
        text-align:center;
    }
    .azp-chat-message{
        display:grid;
        grid-template-columns:34px minmax(0,1fr);
        gap:10px;
        margin-bottom:14px;
        max-width:820px;
    }
    .azp-chat-message-avatar{
        width:34px;
        height:34px;
        border-radius:10px;
        display:flex;
        align-items:center;
        justify-content:center;
        background:#e5e7eb;
        color:#111827;
        font-size:12px;
        font-weight:900;
    }
    .azp-chat-bubble{
        background:#fff;
        border:1px solid rgba(17,24,39,.08);
        border-radius:12px;
        padding:11px 13px;
        box-shadow:0 10px 28px rgba(17,24,39,.06);
    }
    .azp-chat-message-head{
        display:flex;
        gap:8px;
        align-items:baseline;
        margin-bottom:5px;
    }
    .azp-chat-message-name{
        font-size:12px;
        font-weight:900;
        color:#111827;
    }
    .azp-chat-message-time{
        font-size:11px;
        font-weight:700;
        color:#9ca3af;
    }
    .azp-chat-message-body{
        color:#111827;
        font-size:13px;
        line-height:1.45;
        white-space:pre-wrap;
        word-break:break-word;
    }
    .azp-chat-attachments{
        display:grid;
        gap:8px;
        margin-top:8px;
    }
    .azp-chat-attachment{
        display:block;
        max-width:420px;
        overflow:hidden;
        border-radius:10px;
        border:1px solid rgba(17,24,39,.08);
        background:#f8fafc;
    }
    .azp-chat-attachment img,
    .azp-chat-attachment video{
        display:block;
        width:100%;
        max-height:320px;
        object-fit:contain;
        background:#0b0f19;
    }
    .azp-chat-composer{
        border-top:1px solid rgba(17,24,39,.10);
        padding:16px;
        background:#fff;
        position:relative;
    }
    .azp-chat-compose-row{
        display:grid;
        grid-template-columns:auto auto minmax(0,1fr) auto;
        gap:8px;
        align-items:center;
    }
    .azp-chat-tool-btn{
        width:42px;
        height:42px;
        border-radius:10px;
        border:1px solid rgba(17,24,39,.12);
        background:#f8fafc;
        color:#111827;
        display:flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
        font-size:18px;
        font-weight:900;
    }
    .azp-chat-tool-btn:hover{ background:#eef2f7; }
    .azp-chat-composer input[type="text"]{
        height:46px;
        border-radius:10px;
        border:1px solid rgba(17,24,39,.14);
        padding:10px 14px;
        font-size:13px;
        outline:none;
    }
    .azp-chat-composer input:focus{
        border-color:#111827;
        box-shadow:0 0 0 4px rgba(17,24,39,.10);
    }
    .azp-chat-emoji-panel{
        display:none;
        position:absolute;
        left:16px;
        bottom:76px;
        width:300px;
        max-width:calc(100vw - 32px);
        padding:10px;
        border-radius:10px;
        border:1px solid rgba(17,24,39,.12);
        background:#fff;
        box-shadow:0 20px 60px rgba(17,24,39,.18);
        grid-template-columns:repeat(8,1fr);
        gap:4px;
        z-index:10;
    }
    .azp-chat-emoji-panel.open{ display:grid; }
    .azp-chat-emoji{
        border:0;
        background:transparent;
        border-radius:8px;
        padding:7px 0;
        cursor:pointer;
        font-size:20px;
        line-height:1;
    }
    .azp-chat-emoji:hover{ background:#f3f4f6; }
    .azp-chat-selected-files{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
        margin-bottom:10px;
    }
    .azp-chat-file-chip{
        display:flex;
        align-items:center;
        gap:8px;
        max-width:240px;
        border:1px solid rgba(17,24,39,.10);
        background:#f8fafc;
        color:#111827;
        border-radius:999px;
        padding:6px 8px;
        font-size:12px;
        font-weight:800;
    }
    .azp-chat-file-chip span{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    .azp-chat-file-chip button{
        border:0;
        background:#111827;
        color:#fff;
        border-radius:999px;
        width:18px;
        height:18px;
        line-height:18px;
        padding:0;
        cursor:pointer;
        flex:0 0 auto;
    }
    .azp-chat-side-head .btn{
        background:#fff;
        color:#111827;
        border:0;
        box-shadow:none;
    }
    .azp-chat-side-head .btn:hover{
        background:#f3f4f6;
    }
    .azp-chat-modal{
        display:none;
        position:fixed;
        inset:0;
        z-index:99999;
        background:rgba(17,24,39,.56);
        padding:18px;
        overflow:auto;
    }
    .azp-chat-modal-card{
        max-width:720px;
        margin:24px auto;
        background:#fff;
        border-radius:8px;
        border:1px solid rgba(0,0,0,.10);
        box-shadow:0 30px 90px rgba(0,0,0,.24);
        padding:18px;
    }
    .azp-chat-modal-head{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:12px;
        margin-bottom:14px;
    }
    .azp-chat-modal-title{ font-size:16px; font-weight:900; color:#111827; }
    .azp-chat-search{
        width:100%;
        height:40px;
        border-radius:8px;
        border:1px solid rgba(0,0,0,.14);
        padding:9px 11px;
        font-size:13px;
    }
    .azp-chat-results{
        border:1px solid rgba(0,0,0,.08);
        border-radius:8px;
        max-height:260px;
        overflow:auto;
        background:#fff;
    }
    .azp-chat-result{
        width:100%;
        text-align:left;
        border:0;
        border-bottom:1px solid rgba(0,0,0,.06);
        background:#fff;
        padding:10px;
        cursor:pointer;
    }
    .azp-chat-result:hover{ background:#f7f8fa; }
    .azp-chat-form-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:12px;
    }
    .azp-chat-actions{
        display:flex;
        align-items:center;
        justify-content:flex-end;
        gap:8px;
    }
    @media (max-width:900px){
        .azp-chat-shell{
            grid-template-columns:1fr;
            min-height:0;
        }
        .azp-chat-sidebar{ border-right:0; border-bottom:1px solid rgba(0,0,0,.08); }
        .azp-chat-thread-list{
            display:flex;
            gap:8px;
            overflow:auto;
            padding:10px;
        }
        .azp-chat-thread{
            min-width:230px;
        }
        .azp-chat-messages{ max-height:520px; }
        .azp-chat-header{ flex-direction:column; }
        .azp-chat-compose-row{ grid-template-columns:auto auto minmax(0,1fr); }
        .azp-chat-compose-row #chatSend{ grid-column:1 / -1; }
    }
</style>

<div class="azp-chat-shell" data-standalone="{{ $standaloneChat ? '1' : '0' }}">
    <aside class="azp-chat-sidebar">
        <div class="azp-chat-side-head">
            <div class="azp-chat-title-row">
                <div>
                    <div class="azp-chat-eyebrow">Conversas</div>
                    <div class="azp-chat-title">Chat</div>
                </div>
                <button type="button" class="btn outline xs" id="btnCreateGroup">Novo grupo</button>
            </div>
            <div class="azp-chat-context">
                Chat interno de admins e conversas de {{ $club->name ?? 'clube' }}.
            </div>
        </div>

        <div id="chatThreadList" class="azp-chat-thread-list">
            <div class="azp-chat-empty">A carregar conversas...</div>
        </div>
    </aside>

    <section class="azp-chat-panel">
        <div id="chatThreadHeader" class="azp-chat-header">
            <div class="azp-chat-current">
                <div class="azp-chat-avatar" id="chatThreadIcon">C</div>
                <div style="min-width:0;">
                    <div id="chatThreadTitle" class="azp-chat-current-title">Seleciona uma conversa</div>
                    <div id="chatThreadMeta" class="azp-chat-current-meta">Escolhe uma conversa para começar.</div>

                    <div id="chatParticipantsWrap" class="azp-chat-participants-wrap">
                        <div class="azp-chat-participants-label">
                            Participantes: <span id="chatParticipantsCount">0</span>
                        </div>
                        <div id="chatParticipants" class="azp-chat-participants"></div>
                    </div>
                </div>
            </div>

            <div id="chatHeaderActions" class="azp-chat-actions" style="display:none;">
                <button type="button" class="btn outline xs" id="btnInviteToGroup">Convidar</button>
            </div>
        </div>

        <div id="chatMessages" class="azp-chat-messages">
            <div class="azp-chat-empty">Seleciona uma conversa.</div>
        </div>

        <div class="azp-chat-composer">
            <div id="chatSelectedFiles" class="azp-chat-selected-files"></div>
            <div id="chatEmojiPanel" class="azp-chat-emoji-panel" aria-hidden="true"></div>
            <input id="chatAttachments" type="file" accept="image/*,video/*" multiple style="display:none;">

            <div class="azp-chat-compose-row">
                <button id="chatEmojiBtn" class="azp-chat-tool-btn" type="button" title="Emojis" disabled>☺</button>
                <button id="chatAttachBtn" class="azp-chat-tool-btn" type="button" title="Anexar imagem ou video" disabled>+</button>
                <input id="chatBody" type="text" placeholder="Escreve uma mensagem..." disabled>
                <button id="chatSend" class="btn primary xs" type="button" disabled>Enviar</button>
            </div>
        </div>
    </section>
</div>

<div id="inviteModal" class="azp-chat-modal">
    <div class="azp-chat-modal-card">
        <div class="azp-chat-modal-head">
            <div class="azp-chat-modal-title">Convidar utilizadores</div>
            <button type="button" class="btn outline xs" id="inviteClose">Fechar</button>
        </div>

        <div class="azp-chat-form-grid">
            <div>
                <label class="label" for="inviteSearch">Pesquisar utilizadores do clube</label>
                <input type="text" id="inviteSearch" class="azp-chat-search" placeholder="Nome, email ou ID">
                <div class="hint">Mostra ate 20 resultados.</div>
            </div>

            <div>
                <div class="label" style="margin-bottom:6px;">Resultados</div>
                <div id="inviteResults" class="azp-chat-results">
                    <div class="azp-chat-empty" style="min-height:120px;">Pesquisa para ver resultados.</div>
                </div>
            </div>

            <div>
                <div class="label" style="margin-bottom:6px;">Selecionados</div>
                <div id="inviteSelected" class="azp-chat-participants"></div>
            </div>

            <div class="azp-chat-actions">
                <button type="button" class="btn outline xs" id="inviteClear">Limpar</button>
                <button type="button" class="btn primary xs" id="inviteSubmit">Adicionar ao grupo</button>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var threadsUrl = "{{ route('admin.clubs.chat.threads', $club) }}";
        var threadUrlBase = "{{ url('/admin/clubs/' . (int)$club->id . '/chat/thread') }}";
        var sendUrlBase = "{{ url('/admin/clubs/' . (int)$club->id . '/chat/thread') }}";
        var createGroupUrl = "{{ route('admin.clubs.chat.group.create', $club) }}";
        var usersSearchUrl = "{{ route('admin.clubs.chat.users.search', $club) }}";
        var inviteUrlBase = "{{ url('/admin/clubs/' . (int)$club->id . '/chat/group') }}";

        var $list = document.getElementById('chatThreadList');
        var $msgs = document.getElementById('chatMessages');
        var $title = document.getElementById('chatThreadTitle');
        var $meta = document.getElementById('chatThreadMeta');
        var $icon = document.getElementById('chatThreadIcon');
        var $body = document.getElementById('chatBody');
        var $send = document.getElementById('chatSend');
        var $emojiBtn = document.getElementById('chatEmojiBtn');
        var $emojiPanel = document.getElementById('chatEmojiPanel');
        var $attachBtn = document.getElementById('chatAttachBtn');
        var $attachments = document.getElementById('chatAttachments');
        var $selectedFiles = document.getElementById('chatSelectedFiles');
        var $btnCreateGroup = document.getElementById('btnCreateGroup');
        var $actions = document.getElementById('chatHeaderActions');
        var $btnInvite = document.getElementById('btnInviteToGroup');
        var $pWrap = document.getElementById('chatParticipantsWrap');
        var $pCount = document.getElementById('chatParticipantsCount');
        var $pList = document.getElementById('chatParticipants');
        var $inviteModal = document.getElementById('inviteModal');
        var $inviteClose = document.getElementById('inviteClose');
        var $inviteSearch = document.getElementById('inviteSearch');
        var $inviteResults = document.getElementById('inviteResults');
        var $inviteSelected = document.getElementById('inviteSelected');
        var $inviteClear = document.getElementById('inviteClear');
        var $inviteSubmit = document.getElementById('inviteSubmit');

        if ($inviteModal && $inviteModal.parentElement !== document.body) {
            document.body.appendChild($inviteModal);
        }

        var activeThreadId = null;
        var activeThreadType = null;
        var pollTimer = null;
        var selectedInvite = new Map();
        var debounceTimer = null;
        var selectedFiles = [];
        var emojis = ['😀','😁','😂','🤣','😊','😍','😘','😎','🤔','😅','🙌','👏','👍','👎','🙏','💪','🔥','🎾','🏆','⭐','✅','❌','⚠️','📌','📸','🎥','❤️','💙','💚','🖤','💬','🚀'];

        function esc(s){
            return String(s || '').replace(/[&<>"']/g, function(m){
                return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'}[m]);
            });
        }

        function initials(s){
            var value = String(s || 'C').trim();
            return value ? value.charAt(0).toUpperCase() : 'C';
        }

        function typeMeta(type){
            if (type === 'admin_internal') return {label:'Interno', icon:'A', text:'Admins de todos os clubes'};
            if (type === 'club_public') return {label:'Geral', icon:'C', text:'Chat geral do clube'};
            return {label:'Grupo', icon:'G', text:'Chat de grupo'};
        }

        function setComposerEnabled(enabled){
            $body.disabled = !enabled;
            $send.disabled = !enabled;
            $emojiBtn.disabled = !enabled;
            $attachBtn.disabled = !enabled;
        }

        function fetchJson(url, opts){
            opts = opts || {};
            opts.headers = Object.assign({
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            }, (opts.headers || {}));
            opts.credentials = 'same-origin';
            return fetch(url, opts).then(function(r){
                if(!r.ok) throw new Error('HTTP ' + r.status);
                return r.json();
            });
        }

        function renderThreads(threads){
            $list.innerHTML = '';
            if(!threads || !threads.length){
                $list.innerHTML = '<div class="azp-chat-empty">Sem conversas.</div>';
                return;
            }

            threads.forEach(function(t){
                var meta = typeMeta(t.type);
                var isActive = (String(t.id) === String(activeThreadId));
                var label = t.title || (t.type === 'club_public' ? 'Chat geral' : 'Grupo');

                var row = document.createElement('button');
                row.type = 'button';
                row.className = 'azp-chat-thread' + (isActive ? ' is-active' : '');
                row.innerHTML =
                    '<div class="azp-chat-avatar">'+esc(meta.icon)+'</div>' +
                    '<div class="azp-chat-thread-main">' +
                    '  <div class="azp-chat-thread-name">'+esc(label)+'</div>' +
                    '  <div class="azp-chat-thread-meta">'+esc(meta.label)+'</div>' +
                    '</div>';

                row.addEventListener('click', function(){ openThread(t.id); });
                $list.appendChild(row);
            });
        }

        function renderMessages(messages){
            $msgs.innerHTML = '';
            if(!messages || !messages.length){
                $msgs.innerHTML = '<div class="azp-chat-empty">Ainda nao ha mensagens nesta conversa.</div>';
                return;
            }

            messages.forEach(function(m){
                var attachments = renderAttachments(m.attachments || []);
                var bodyHtml = m.body ? '<div class="azp-chat-message-body">'+esc(m.body)+'</div>' : '';
                var wrap = document.createElement('div');
                wrap.className = 'azp-chat-message';
                wrap.innerHTML =
                    '<div class="azp-chat-message-avatar">'+esc(initials(m.user_name))+'</div>' +
                    '<div class="azp-chat-bubble">' +
                    '  <div class="azp-chat-message-head">' +
                    '    <span class="azp-chat-message-name">'+esc(m.user_name)+'</span>' +
                    '    <span class="azp-chat-message-time">'+esc(m.created_at)+'</span>' +
                    '  </div>' +
                    bodyHtml +
                    attachments +
                    '</div>';
                $msgs.appendChild(wrap);
            });

            $msgs.scrollTop = $msgs.scrollHeight;
        }

        function renderAttachments(items){
            if (!items || !items.length) return '';

            var html = '<div class="azp-chat-attachments">';
            items.forEach(function(a){
                if (a.type === 'video') {
                    html += '<a class="azp-chat-attachment" href="'+esc(a.url)+'" target="_blank" rel="noopener">' +
                        '<video controls preload="metadata" src="'+esc(a.url)+'"></video>' +
                        '</a>';
                } else {
                    html += '<a class="azp-chat-attachment" href="'+esc(a.url)+'" target="_blank" rel="noopener">' +
                        '<img src="'+esc(a.url)+'" alt="'+esc(a.name || 'Imagem')+'">' +
                        '</a>';
                }
            });
            html += '</div>';
            return html;
        }

        function renderSelectedFiles(){
            $selectedFiles.innerHTML = '';
            if (!selectedFiles.length) return;

            selectedFiles.forEach(function(file, index){
                var chip = document.createElement('div');
                chip.className = 'azp-chat-file-chip';
                chip.innerHTML = '<span>'+esc(file.name)+'</span><button type="button" title="Remover">x</button>';
                chip.querySelector('button').addEventListener('click', function(){
                    selectedFiles.splice(index, 1);
                    renderSelectedFiles();
                });
                $selectedFiles.appendChild(chip);
            });
        }

        function buildEmojiPanel(){
            $emojiPanel.innerHTML = '';
            emojis.forEach(function(emoji){
                var btn = document.createElement('button');
                btn.type = 'button';
                btn.className = 'azp-chat-emoji';
                btn.textContent = emoji;
                btn.addEventListener('click', function(){
                    var start = $body.selectionStart || $body.value.length;
                    var end = $body.selectionEnd || $body.value.length;
                    $body.value = $body.value.slice(0, start) + emoji + $body.value.slice(end);
                    $body.focus();
                    var pos = start + emoji.length;
                    try { $body.setSelectionRange(pos, pos); } catch(e) {}
                });
                $emojiPanel.appendChild(btn);
            });
        }

        function renderParticipants(items){
            $pList.innerHTML = '';
            if (!items || !items.length){
                $pCount.textContent = '0';
                $pWrap.style.display = 'none';
                return;
            }

            $pCount.textContent = String(items.length);
            $pWrap.style.display = 'block';
            items.forEach(function(u){
                var pill = document.createElement('span');
                pill.className = 'azp-chat-pill';
                pill.title = u.email || '';
                pill.textContent = (u.name || ('#' + u.id));
                $pList.appendChild(pill);
            });
        }

        function loadThreads(){
            fetchJson(threadsUrl).then(function(data){
                renderThreads(data.threads || []);
                if(!activeThreadId && data.threads && data.threads.length){
                    openThread(data.threads[0].id);
                }
            }).catch(function(){
                $list.innerHTML = '<div class="azp-chat-empty">Erro ao carregar conversas.</div>';
            });
        }

        function openThread(threadId){
            activeThreadId = threadId;
            setComposerEnabled(true);
            renderParticipants([]);
            loadThreads();

            fetchJson(threadUrlBase + '/' + threadId).then(function(data){
                var t = data.thread || {};
                var meta = typeMeta(t.type);
                activeThreadType = t.type || null;
                $title.textContent = t.title || meta.label;
                $meta.textContent = meta.text;
                $icon.textContent = meta.icon;

                if (activeThreadType === 'group') {
                    $actions.style.display = 'flex';
                    renderParticipants(data.participants || []);
                } else {
                    $actions.style.display = 'none';
                    renderParticipants(activeThreadType === 'admin_internal' ? (data.participants || []) : []);
                }

                renderMessages(data.messages || []);
            }).catch(function(){
                $msgs.innerHTML = '<div class="azp-chat-empty">Erro ao carregar mensagens.</div>';
            });

            if(pollTimer) clearInterval(pollTimer);
            pollTimer = setInterval(function(){
                if(!activeThreadId) return;
                fetchJson(threadUrlBase + '/' + activeThreadId).then(function(data){
                    renderMessages(data.messages || []);
                    if (activeThreadType === 'group' || activeThreadType === 'admin_internal') {
                        renderParticipants(data.participants || []);
                    }
                }).catch(function(){});
            }, 3500);
        }

        function sendMessage(){
            var text = ($body.value || '').trim();
            if((!text && !selectedFiles.length) || !activeThreadId) return;
            $send.disabled = true;
            $emojiPanel.classList.remove('open');

            var payload = new FormData();
            payload.append('body', text);
            selectedFiles.forEach(function(file){
                payload.append('attachments[]', file);
            });

            fetchJson(sendUrlBase + '/' + activeThreadId + '/send', {
                method: 'POST',
                body: payload
            }).then(function(){
                $body.value = '';
                selectedFiles = [];
                renderSelectedFiles();
                $send.disabled = false;
                return fetchJson(threadUrlBase + '/' + activeThreadId);
            }).then(function(data){
                renderMessages(data.messages || []);
                if (activeThreadType === 'group' || activeThreadType === 'admin_internal') {
                    renderParticipants(data.participants || []);
                }
            }).catch(function(){
                $send.disabled = false;
            });
        }

        buildEmojiPanel();

        $emojiBtn.addEventListener('click', function(){
            if ($emojiBtn.disabled) return;
            $emojiPanel.classList.toggle('open');
        });

        $attachBtn.addEventListener('click', function(){
            if ($attachBtn.disabled) return;
            $attachments.click();
        });

        $attachments.addEventListener('change', function(){
            var incoming = Array.prototype.slice.call($attachments.files || []);
            selectedFiles = selectedFiles.concat(incoming).slice(0, 6);
            $attachments.value = '';
            renderSelectedFiles();
        });

        document.addEventListener('click', function(e){
            if (!$emojiPanel.contains(e.target) && !$emojiBtn.contains(e.target)) {
                $emojiPanel.classList.remove('open');
            }
        });

        $send.addEventListener('click', sendMessage);
        $body.addEventListener('keydown', function(e){
            if(e.key === 'Enter'){
                e.preventDefault();
                sendMessage();
            }
        });

        $btnCreateGroup.addEventListener('click', function(){
            var title = prompt('Nome do grupo?');
            if(!title) return;

            fetchJson(createGroupUrl, {
                method: 'POST',
                body: new URLSearchParams({ title: title })
            }).then(function(res){
                loadThreads();
                if(res.thread_id) openThread(res.thread_id);
            }).catch(function(){});
        });

        function openInviteModal(){
            document.body.style.overflow = 'hidden';
            selectedInvite = new Map();
            $inviteResults.innerHTML = '<div class="azp-chat-empty" style="min-height:120px;">Pesquisa para ver resultados.</div>';
            $inviteSearch.value = '';
            $inviteModal.style.display = 'block';
            renderSelected();
            setTimeout(function(){ $inviteSearch.focus(); }, 50);
        }

        function closeInviteModal(){
            $inviteModal.style.display = 'none';
            document.body.style.overflow = '';
        }

        function renderSelected(){
            $inviteSelected.innerHTML = '';
            if (selectedInvite.size === 0) {
                $inviteSelected.innerHTML = '<span class="azp-chat-pill">Sem selecionados</span>';
                return;
            }

            Array.from(selectedInvite.values()).forEach(function(u){
                var pill = document.createElement('button');
                pill.type = 'button';
                pill.className = 'azp-chat-pill';
                pill.style.cursor = 'pointer';
                pill.textContent = (u.name || ('#' + u.id)) + ' x';
                pill.title = 'Remover';
                pill.addEventListener('click', function(){
                    selectedInvite.delete(String(u.id));
                    renderSelected();
                });
                $inviteSelected.appendChild(pill);
            });
        }

        function renderResults(users){
            $inviteResults.innerHTML = '';
            if(!users || !users.length){
                $inviteResults.innerHTML = '<div class="azp-chat-empty" style="min-height:120px;">Sem resultados.</div>';
                return;
            }

            users.forEach(function(u){
                var row = document.createElement('button');
                row.type = 'button';
                row.className = 'azp-chat-result';
                row.innerHTML =
                    '<div style="font-weight:850;font-size:13px;color:#111827;">'+esc(u.name)+' <span style="color:#9ca3af;">#'+esc(u.id)+'</span></div>' +
                    '<div style="font-weight:700;font-size:11px;color:#6b7280;margin-top:3px;">'+esc(u.email || '-')+'</div>';
                row.addEventListener('click', function(){
                    selectedInvite.set(String(u.id), u);
                    renderSelected();
                });
                $inviteResults.appendChild(row);
            });
        }

        function searchUsers(q){
            fetchJson(usersSearchUrl + '?q=' + encodeURIComponent(q || '')).then(function(data){
                renderResults(data.users || []);
            }).catch(function(){});
        }

        $btnInvite && $btnInvite.addEventListener('click', function(){
            if (!activeThreadId || activeThreadType !== 'group') return;
            openInviteModal();
        });
        $inviteClose && $inviteClose.addEventListener('click', closeInviteModal);
        $inviteModal && $inviteModal.addEventListener('click', function(e){
            if (e.target === $inviteModal) closeInviteModal();
        });
        $inviteSearch && $inviteSearch.addEventListener('input', function(){
            var q = $inviteSearch.value.trim();
            if (debounceTimer) clearTimeout(debounceTimer);
            debounceTimer = setTimeout(function(){ searchUsers(q); }, 250);
        });
        $inviteClear && $inviteClear.addEventListener('click', function(){
            selectedInvite = new Map();
            renderSelected();
        });
        $inviteSubmit && $inviteSubmit.addEventListener('click', function(){
            if (!activeThreadId || activeThreadType !== 'group') return;
            var ids = Array.from(selectedInvite.keys());
            if (!ids.length) return;

            $inviteSubmit.disabled = true;
            var params = new URLSearchParams();
            ids.forEach(function(id){ params.append('user_ids[]', id); });

            fetchJson(inviteUrlBase + '/' + activeThreadId + '/invite', {
                method: 'POST',
                body: params
            }).then(function(){
                $inviteSubmit.disabled = false;
                closeInviteModal();
                return fetchJson(threadUrlBase + '/' + activeThreadId);
            }).then(function(data){
                renderMessages(data.messages || []);
                if (activeThreadType === 'group') renderParticipants(data.participants || []);
            }).catch(function(){
                $inviteSubmit.disabled = false;
            });
        });

        document.addEventListener('keydown', function(e){
            if (e.key === 'Escape' && $inviteModal && $inviteModal.style.display === 'block') {
                closeInviteModal();
            }
        });

        loadThreads();
    });
</script>