@include('includes.tailwind')

<style>
    .fw-chat-skeleton {
        position: relative;
        overflow: hidden;
        background: #e2e8f0;
        border-radius: 0.75rem;
    }

    .fw-chat-exit {
        animation: fw-chat-exit 220ms cubic-bezier(.4,0,.2,1);
    }
    @keyframes fw-chat-exit {
        0% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        100% {
            opacity: 0;
            transform: translateY(32px) scale(0.98);
        }
    }

    .fw-chat-skeleton::after {
        content: '';
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
        animation: fw-skeleton 1.2s ease-in-out infinite;
    }

    @keyframes fw-skeleton {
        100% {
            transform: translateX(100%);
        }
    }

    @keyframes fw-bounce-in {
        0% {
            opacity: 0;
            transform: translateY(8px) scale(0.96);
        }

        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .fw-bounce-in {
        animation: fw-bounce-in 180ms ease-out;
    }

    .fw-chat-pulse-flash {
        box-shadow: 0 0 0 5px #06b6d466;
        transition: box-shadow 0.25s;
    }

    .fw-chat-incoming-flash {
        animation: fw-chat-incoming-flash 1s cubic-bezier(.4,0,.2,1);
    }

    .fw-typing-dots {
        display: inline-flex;
        align-items: center;
        gap: 0.2rem;
    }

    .fw-typing-dot {
        width: 0.32rem;
        height: 0.32rem;
        border-radius: 999px;
        background: #64748b;
        opacity: 0.4;
        animation: fw-typing-blink 1s infinite ease-in-out;
    }

    .fw-typing-dot:nth-child(2) {
        animation-delay: 0.15s;
    }

    .fw-typing-dot:nth-child(3) {
        animation-delay: 0.3s;
    }

    @keyframes fw-typing-blink {
        0%, 80%, 100% {
            transform: translateY(0);
            opacity: 0.35;
        }

        40% {
            transform: translateY(-2px);
            opacity: 1;
        }
    }

    @keyframes fw-chat-incoming-flash {
        0% { background-color: #e0f2fe; }
        60% { background-color: #bae6fd; }
        100% { background-color: transparent; }
    }

    @keyframes fw-chat-spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    .fw-chat-spinner {
        animation: fw-chat-spin 0.9s linear infinite;
    }
</style>

<audio id="fwChatNotifySound" preload="auto" src="https://cdn.jsdelivr.net/gh/robcarrillo/ghp-assets/notify.mp3" style="display:none"></audio>

<div id="fwChatWidget"
    class="fixed bottom-6 right-6 z-[9999] font-sans"
    data-session-url="{{ route('erp.chat.session') }}"
    data-message-url="{{ route('erp.chat.messages') }}"
    data-typing-template="{{ route('erp.chat.typing', ['conversationId' => '__CONVERSATION_ID__']) }}"
    data-open-conversations-url="{{ route('erp.chat.conversations.open') }}"
    data-current-url="{{ route('erp.chat.current') }}"
    data-close-template="{{ route('erp.chat.conversations.close', ['conversationId' => '__CONVERSATION_ID__']) }}"
    data-me="{{ (int) auth()->id() }}">

    <button id="fwChatToggle"
        type="button"
        class="group relative flex h-14 w-14 items-center justify-center rounded-full bg-cyan-700 text-white shadow-lg shadow-cyan-900/20 transition-all duration-300 hover:scale-110 hover:bg-cyan-800 active:scale-95 focus:outline-none">

        <span class="material-icons text-2xl transition-transform group-hover:rotate-12">chat</span>

        <span id="fwChatPulse"
            class="absolute -right-0.5 -top-0.5 h-4 w-4 rounded-full border-2 border-white bg-emerald-500 shadow-sm">
        </span>
    </button>

    <div id="fwChatPanel"
        class="hidden absolute bottom-0 right-0 w-[380px] max-w-[calc(100vw-2rem)] overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-2xl shadow-slate-300/50 transition-all">

        <div class="flex items-center justify-between border-b border-slate-100 bg-white p-3">
            <div class="flex items-center gap-3">
                <div class="relative">
                    <div class="flex h-10 w-10 items-center justify-center rounded-full bg-cyan-100 text-cyan-700 font-bold text-sm">
                        GHP
                    </div>
                    <div class="absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-white bg-emerald-500"></div>
                </div>
                <div>
                    <h3 class="text-[15px] font-bold leading-none text-slate-800">Centro de ayuda</h3>
                    <p id="fwChatStatus" class="mt-1 text-[9px] font-medium text-emerald-500 uppercase tracking-wider italic">
                        En línea ahora
                    </p>
                </div>
            </div>

            <button id="fwChatClose"
                type="button"
                class="rounded-full p-1.5 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600">
                <span class="material-icons text-xl">close</span>
            </button>
        </div>

        <div id="fwChatMessages"
            class="h-96 space-y-4 overflow-y-auto bg-slate-50/30 px-2 py-6 text-sm">

            <div id="fwChatSkeleton" class="space-y-6">
                <div class="flex gap-3">
                    <div class="h-8 w-8 rounded-full bg-slate-200 animate-pulse"></div>
                    <div class="flex-1 space-y-2">
                        <div class="h-10 w-3/4 rounded-2xl rounded-tl-none bg-slate-200 animate-pulse"></div>
                    </div>
                </div>
                <div class="flex justify-end">
                    <div class="w-2/3 space-y-2">
                        <div class="h-10 w-full rounded-2xl rounded-tr-none bg-cyan-100/50 animate-pulse"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="border-t border-slate-100 bg-white p-3">
            <div class="flex items-end gap-2">
                <button id="fwChatFilesTrigger"
                    type="button"
                    title="Adjuntar archivos"
                    class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-slate-50 text-slate-400 transition-all hover:bg-slate-100 hover:text-cyan-600">
                    <span class="material-icons text-[20px]">add</span>
                </button>

                <div class="relative flex-1">
                    <input id="fwChatInput"
                        type="text"
                        maxlength="4000"
                        placeholder="Escribe un mensaje..."
                        class="w-full rounded-2xl border-none bg-slate-100 px-4 py-2.5 text-[14px] text-slate-700 placeholder:text-slate-400 transition-all focus:bg-white focus:ring-2 focus:ring-cyan-600/20" />
                </div>

                <button id="fwChatSend"
                    type="button"
                    class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-cyan-700 text-white shadow-md shadow-cyan-900/10 transition-all hover:bg-cyan-800 active:scale-90">
                    <span class="material-icons text-[18px]">send</span>
                </button>
            </div>

            <div class="mt-3 flex items-center justify-between border-t border-slate-50 pt-2 px-1">
                <span id="fwChatFilesInfo" class="text-[10px] font-bold uppercase tracking-tight text-cyan-600/60">
                    Sin archivos
                </span>

                <button id="fwChatCloseConversation"
                    type="button"
                    class="text-[10px] font-bold uppercase tracking-widest text-slate-400 transition hover:text-red-500"
                    style="display: none;">
                    Finalizar Chat
                </button>
            </div>

            <div id="fwChatFilesPreview" class="mt-2 hidden max-h-28 overflow-y-auto rounded-xl border border-slate-100 bg-slate-50/70 p-2"></div>

            <input id="fwChatFiles" type="file" multiple class="hidden" />
        </div>
    </div>
</div>


@push('js')
<script src="https://cdn.jsdelivr.net/npm/pusher-js@8.4.0/dist/web/pusher.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/laravel-echo@1.16.1/dist/echo.iife.js"></script>
<script>
    (function() {
        var root = document.getElementById('fwChatWidget');
        if (!root) {
            return;
        }

        var state = {
            me: Number(root.dataset.me || 0),
            chatUserId: 0,
            sessionUrl: String(root.dataset.sessionUrl || ''),
            messageUrl: String(root.dataset.messageUrl || ''),
            typingTemplate: String(root.dataset.typingTemplate || ''),
            openConversationsUrl: String(root.dataset.openConversationsUrl || ''),
            currentUrl: String(root.dataset.currentUrl || ''),
            closeTemplate: String(root.dataset.closeTemplate || ''),
            accessToken: null,
            conversationId: null,
            chatApiUrl: null,
            reverbConfig: null,
            echo: null,
            channel: null,
            statusChannel: null,
            typingChannel: null,
            ready: false,
            firstMessageSent: false,
            messageIds: {},
            historyLoadedConversationId: null,
            opening: false,
            hydratingMessageIds: {},
            pendingFiles: [],
            previewObjectUrls: [],
            lastClosedConversationId: null,
            isTypingSent: false,
            remoteTyping: false,
            typingStopTimer: null,
            typingFalseDebounceTimer: null,
        };

        var firstMessageSuggestions = [{
                label: 'Facturación',
                message: 'Necesito ayuda con el módulo de facturación',
                style: 'border-slate-300 bg-slate-50 text-slate-700 hover:bg-slate-100 focus:ring-slate-400'
            },
            {
                label: 'Bancos',
                message: 'Necesito ayuda con el módulo de bancos',
                style: 'border-slate-300 bg-slate-50 text-slate-700 hover:bg-slate-100 focus:ring-slate-400'

            },
            {
                label: 'Error detectado',
                message: 'He detectado un error en el sistema que me gustaría reportar',
                style: 'border-red-200 bg-red-50 text-red-700 hover:bg-red-100 focus:ring-red-400'
            },
            {
                label: 'Otro',
                message: 'Tengo una pregunta que no está en las opciones anteriores',
                style: 'border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-100 focus:ring-blue-400'
            },
        ];

        var toggle = document.getElementById('fwChatToggle');
        var panel = document.getElementById('fwChatPanel');
        var closeBtn = document.getElementById('fwChatClose');
        var statusEl = document.getElementById('fwChatStatus');
        var messagesEl = document.getElementById('fwChatMessages');
        var inputEl = document.getElementById('fwChatInput');
        var filesTriggerEl = document.getElementById('fwChatFilesTrigger');
        var filesEl = document.getElementById('fwChatFiles');
        var filesInfoEl = document.getElementById('fwChatFilesInfo');
        var filesPreviewEl = document.getElementById('fwChatFilesPreview');
        var sendEl = document.getElementById('fwChatSend');
        var closeConversationEl = document.getElementById('fwChatCloseConversation');
        var pulseEl = document.getElementById('fwChatPulse');
        var notifySoundEl = document.getElementById('fwChatNotifySound');

        function setComposerEnabled(enabled) {
            var canWrite = !!enabled;

            if (inputEl) {
                inputEl.disabled = !canWrite;
            }

            if (sendEl) {
                sendEl.disabled = !canWrite;
                sendEl.classList.toggle('opacity-50', !canWrite);
            }

            if (filesTriggerEl) {
                filesTriggerEl.disabled = !canWrite;
                filesTriggerEl.classList.toggle('opacity-50', !canWrite);
            }
        }

        function showToggle() {
            if (!toggle) {
                return;
            }

            toggle.classList.remove('hidden');
        }

        function hideToggle() {
            if (!toggle) {
                return;
            }

            toggle.classList.add('hidden');
        }

        function scrollMessagesToBottom() {
            if (!messagesEl) {
                return;
            }

            messagesEl.scrollTop = messagesEl.scrollHeight;
        }

        function clearSystemLoadingIndicators() {
            if (!messagesEl) {
                return;
            }

            var loadingNodes = messagesEl.querySelectorAll('[data-fw-chat-loading="1"]');
            loadingNodes.forEach(function(node) {
                node.remove();
            });
        }

        function appendSystemNotice(text, options) {
            if (!messagesEl) {
                return;
            }

            var config = options || {};
            var notice = escapeHtml(text || 'La conversación fue terminada por soporte.');
            var icon = escapeHtml(String(config.icon || 'info'));
            var showLoading = !!config.loading;

            if (!showLoading) {
                clearSystemLoadingIndicators();
            }

            var loadingHtml = showLoading ?
                '<span class="inline-flex items-center gap-1.5 text-[10px] font-semibold text-amber-700/80" data-fw-chat-loading="1">' +
                '<span class="material-icons text-[14px] leading-none fw-chat-spinner">autorenew</span>' +
                '<span>Conectando con un agente...</span>' +
                '</span>' :
                '';

            var html =
                '<div class="px-3 py-2" data-fw-chat-system="1">' +
                '<div class="rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-[12px] text-amber-800">' +
                '<div class="flex items-start gap-2">' +
                '<span class="material-icons text-[16px] leading-none text-amber-600 mt-0.5">' + icon + '</span>' +
                '<div class="min-w-0 flex-1">' +
                '<div>' + notice + '</div>' +
                (loadingHtml ? '<div class="mt-1.5">' + loadingHtml + '</div>' : '') +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>';

            messagesEl.insertAdjacentHTML('beforeend', html);
            scrollMessagesToBottom();
        }

        function resolvePayloadReason(payload) {
            var metadata = payload && payload.metadata ? payload.metadata : (payload && payload.metada ? payload.metada : {});
            var reason = metadata && metadata.reason ? metadata.reason : '';

            return String(reason || '').trim().toLowerCase();
        }

        function isFirstContactReason(payload) {
            var reason = resolvePayloadReason(payload);

            return reason === 'first_contact_in_business_hours' ||
                reason === 'first_contact_out_of_business_hours' ||
                reason === 'first_contact_business_hours' ||
                reason === 'first_contact_out_business_hours';
        }

        function resolveFirstContactNoticeOptions(payload) {
            var reason = resolvePayloadReason(payload);

            if (reason === 'first_contact_in_business_hours' || reason === 'first_contact_business_hours') {
                return {
                    icon: 'support_agent',
                    loading: true
                };
            }

            if (reason === 'first_contact_out_of_business_hours' || reason === 'first_contact_out_business_hours') {
                return {
                    icon: 'schedule'
                };
            }

            return {
                icon: 'info'
            };
        }

        function clearSuggestions() {
            var suggestionsEl = document.getElementById('fwChatSuggestions');
            if (suggestionsEl) {
                suggestionsEl.remove();
            }
        }

        function renderSuggestions() {
            if (!messagesEl || state.firstMessageSent || !Array.isArray(firstMessageSuggestions) || firstMessageSuggestions.length === 0) {
                clearSuggestions();
                return;
            }

            if (document.getElementById('fwChatSuggestions')) {
                return;
            }

            var html =
                '<div id="fwChatSuggestions" class="mx-4 mb-4 overflow-hidden rounded-2xl border border-cyan-100 bg-white-50/30 p-4 shadow-sm">' +
                '<div class="mb-3 text-[13px] leading-relaxed text-slate-600 font-medium">👋 Hola, estás contactando al soporte de <span class="font-bold text-cyan-700">GHP</span>. ¿Cómo podemos ayudarte?</div>' +
                '<div class="mb-3 text-[10px] font-bold uppercase tracking-[0.1em] text-cyan-700/50">Consultas frecuentes:</div>' +
                '<div class="flex flex-wrap gap-2">';

            firstMessageSuggestions.forEach(function(suggestion, index) {
                var label = escapeHtml(suggestion && suggestion.label ? suggestion.label : 'Sugerencia');
                var message = escapeHtml(suggestion && suggestion.message ? suggestion.message : '');

                html +=
                    '<button type="button" data-fw-suggestion-index="' + index + '" data-fw-suggestion-message="' + message + '" ' +
                    'class="rounded-lg border border-white bg-white px-3 py-1.5 text-[12px] font-semibold text-cyan-800 shadow-sm transition-all hover:border-cyan-200 hover:bg-cyan-50 hover:shadow active:scale-95 focus:outline-none ' + (suggestion.style || '') + '">' +
                    label +
                    '</button>';
            });

            html += '</div></div>';
            messagesEl.insertAdjacentHTML('beforeend', html);
            scrollMessagesToBottom();
        }

        function closeWidget() {
            if (panel.classList.contains('hidden')) return;

            panel.classList.remove('fw-bounce-in');
            panel.classList.add('fw-chat-exit');

            setTimeout(function() {
                panel.classList.add('hidden');
                panel.classList.remove('fw-chat-exit');
                showToggle();
            }, 210);
        }

        function updateFilesInfo() {
            if (!filesInfoEl) {
                return;
            }

            var count = Array.isArray(state.pendingFiles) ? state.pendingFiles.length : 0;
            if (count <= 0) {
                filesInfoEl.textContent = 'Sin archivos';
                return;
            }

            if (count === 1) {
                filesInfoEl.textContent = state.pendingFiles[0].name;
                return;
            }

            filesInfoEl.textContent = state.pendingFiles[0].name + ' +' + (count - 1) + ' más';
        }

        function isImageFile(file) {
            return !!(file && typeof file.type === 'string' && file.type.toLowerCase().indexOf('image/') === 0);
        }

        function fileKey(file) {
            return [
                file && file.name ? file.name : '',
                file && file.size ? String(file.size) : '0',
                file && file.lastModified ? String(file.lastModified) : '0',
                file && file.type ? file.type : ''
            ].join('|');
        }

        function syncNativeFileInput() {
            if (!filesEl) {
                return;
            }

            var dataTransfer = new DataTransfer();
            (state.pendingFiles || []).forEach(function(file) {
                dataTransfer.items.add(file);
            });

            filesEl.files = dataTransfer.files;
        }

        function renderFilesPreview() {
            if (!filesPreviewEl) {
                return;
            }

            if (Array.isArray(state.previewObjectUrls) && state.previewObjectUrls.length > 0) {
                state.previewObjectUrls.forEach(function(url) {
                    URL.revokeObjectURL(url);
                });
                state.previewObjectUrls = [];
            }

            var files = Array.isArray(state.pendingFiles) ? state.pendingFiles : [];
            if (files.length === 0) {
                filesPreviewEl.innerHTML = '';
                filesPreviewEl.classList.add('hidden');
                return;
            }

            var html = '<div class="grid grid-cols-4 gap-2">';

            files.forEach(function(file, index) {
                var fileName = escapeHtml(file && file.name ? file.name : 'Archivo');
                var fileSize = escapeHtml(formatFileSize(file && file.size ? file.size : 0));
                var removeBtn =
                    '<button type="button" data-fw-remove-file-index="' + index + '" title="Quitar archivo" ' +
                    'class="absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-black/55 text-white transition hover:bg-black/70">' +
                    '<span class="material-icons text-[14px] leading-none">close</span>' +
                    '</button>';

                if (isImageFile(file)) {
                    var previewUrl = URL.createObjectURL(file);
                    state.previewObjectUrls.push(previewUrl);
                    html +=
                        '<div class="relative overflow-hidden rounded-lg border border-slate-200 bg-white">' +
                        removeBtn +
                        '<img src="' + escapeHtml(previewUrl) + '" alt="' + fileName + '" class="h-16 w-full object-cover" loading="lazy" />' +
                        '<div class="px-1.5 py-1 text-[9px] text-slate-600">' +
                        '<div class="truncate font-semibold">' + fileName + '</div>' +
                        '<div class="truncate text-slate-400">' + fileSize + '</div>' +
                        '</div>' +
                        '</div>';
                    return;
                }

                html +=
                    '<div class="relative rounded-lg border border-slate-200 bg-white p-1.5">' +
                    removeBtn +
                    '<div class="flex h-16 items-center justify-center rounded bg-slate-50">' +
                    '<span class="material-icons text-[18px] text-cyan-600">description</span>' +
                    '</div>' +
                    '<div class="mt-1 text-[9px] text-slate-600">' +
                    '<div class="truncate font-semibold">' + fileName + '</div>' +
                    '<div class="truncate text-slate-400">' + fileSize + '</div>' +
                    '</div>' +
                    '</div>';
            });

            html += '</div>';
            filesPreviewEl.innerHTML = html;
            filesPreviewEl.classList.remove('hidden');
        }

        function refreshFilesUI() {
            updateFilesInfo();
            renderFilesPreview();
        }

        function addPendingFiles(newFiles) {
            var incoming = Array.isArray(newFiles) ? newFiles : Array.from(newFiles || []);
            if (incoming.length === 0) {
                return;
            }

            var existingKeys = {};
            (state.pendingFiles || []).forEach(function(file) {
                existingKeys[fileKey(file)] = true;
            });

            incoming.forEach(function(file) {
                if (!file) {
                    return;
                }

                var key = fileKey(file);
                if (existingKeys[key]) {
                    return;
                }

                existingKeys[key] = true;
                state.pendingFiles.push(file);
            });

            syncNativeFileInput();
            refreshFilesUI();
        }

        function removePendingFile(index) {
            var fileIndex = Number(index);
            if (!isFinite(fileIndex) || fileIndex < 0) {
                return;
            }

            if (!Array.isArray(state.pendingFiles) || fileIndex >= state.pendingFiles.length) {
                return;
            }

            state.pendingFiles.splice(fileIndex, 1);
            syncNativeFileInput();
            refreshFilesUI();
        }

        function clearPendingFiles() {
            state.pendingFiles = [];
            syncNativeFileInput();
            refreshFilesUI();
        }

        function resetChatViewportForNewConversation() {
            if (messagesEl) {
                messagesEl.innerHTML = '';
            }

            state.messageIds = {};
            state.historyLoadedConversationId = null;
            clearSuggestions();
        }

        function extractImageFilesFromClipboard(event) {
            var clipboardItems = event && event.clipboardData && event.clipboardData.items ? event.clipboardData.items : [];
            var files = [];

            for (var i = 0; i < clipboardItems.length; i++) {
                var item = clipboardItems[i];
                if (!item || item.kind !== 'file') {
                    continue;
                }

                var file = item.getAsFile();
                if (isImageFile(file)) {
                    files.push(file);
                }
            }

            return files;
        }

        function setConnectedVisual(isConnected) {
            if (!pulseEl) return;

            pulseEl.classList.remove('bg-emerald-500', 'bg-red-500');
            pulseEl.classList.add(isConnected ? 'bg-emerald-500' : 'bg-red-500');
        }

        function setStatus(text) {
            statusEl.textContent = text;
        }

        function removeTypingIndicatorBubble() {
            var typingEl = document.getElementById('fwChatTypingIndicator');
            if (typingEl) {
                typingEl.remove();
            }
        }

        function renderTypingIndicatorBubble(senderName) {
            if (!messagesEl || panel.classList.contains('hidden')) {
                return;
            }

            removeTypingIndicatorBubble();

            var name = escapeHtml(String(senderName || 'Soporte').trim());
            var html =
                '<div id="fwChatTypingIndicator" class="flex justify-start px-3 mb-3">' +
                '<div class="max-w-[85%] rounded-2xl rounded-tl-none border border-slate-200 bg-white px-3 py-2 shadow-sm">' +
                '<div class="mb-1 text-[11px] font-bold text-cyan-700/70 capitalize">' + name + '</div>' +
                '<div class="flex items-center gap-2 text-[11px] text-slate-500">' +
                '<span>está escribiendo</span>' +
                '<span class="fw-typing-dots" aria-hidden="true">' +
                '<span class="fw-typing-dot"></span>' +
                '<span class="fw-typing-dot"></span>' +
                '<span class="fw-typing-dot"></span>' +
                '</span>' +
                '</div>' +
                '</div>' +
                '</div>';

            messagesEl.insertAdjacentHTML('beforeend', html);
            scrollMessagesToBottom();
        }

        function typingEndpointUrl(conversationId) {
            if (!conversationId) {
                return '';
            }

            if (!state.typingTemplate) {
                return '';
            }

            return state.typingTemplate.replace('__CONVERSATION_ID__', encodeURIComponent(String(conversationId)));
        }

        function isTypingPayloadOwn(payload) {
            var senderChatUserId = Number(payload && payload.sender && payload.sender.chat_user_id ? payload.sender.chat_user_id : 0);
            var currentUserId = Number(state.chatUserId || 0);

            return currentUserId > 0 && senderChatUserId > 0 && senderChatUserId === currentUserId;
        }

        function setRemoteTypingState(isTyping, senderName) {
            state.remoteTyping = !!isTyping;
            if (state.remoteTyping) {
                var name = String(senderName || 'Soporte').trim();
                renderTypingIndicatorBubble(name);
                return;
            }

            removeTypingIndicatorBubble();

            if (state.ready && String(statusEl.textContent || '').toLowerCase().indexOf('escribiendo') !== -1) {
                setStatus('En linea');
            }
        }

        function emitTyping(isTyping) {
            if (!state.ready || !state.conversationId) {
                return;
            }

            var typing = !!isTyping;
            if (state.isTypingSent === typing) {
                return;
            }

            state.isTypingSent = typing;

            var url = typingEndpointUrl(state.conversationId);
            if (!url) {
                return;
            }

            var headers = {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            };

            fetch(url, {
                    method: 'POST',
                    headers: headers,
                    body: JSON.stringify({
                        is_typing: typing
                    })
                })
                .catch(function() {
                    state.isTypingSent = !typing;
                });
        }

        function emitTypingFalseDebounced() {
            if (state.typingFalseDebounceTimer) {
                clearTimeout(state.typingFalseDebounceTimer);
            }

            state.typingFalseDebounceTimer = setTimeout(function() {
                emitTyping(false);
            }, 400);
        }

        function scheduleTypingStop() {
            if (state.typingStopTimer) {
                clearTimeout(state.typingStopTimer);
            }

            state.typingStopTimer = setTimeout(function() {
                emitTypingFalseDebounced();
            }, 1500);
        }

        function handleTypingInput() {
            if (!state.ready || !state.conversationId || panel.classList.contains('hidden')) {
                return;
            }

            var hasText = String(inputEl && inputEl.value ? inputEl.value : '').trim() !== '';
            if (!hasText) {
                emitTypingFalseDebounced();
                return;
            }

            if (state.typingFalseDebounceTimer) {
                clearTimeout(state.typingFalseDebounceTimer);
                state.typingFalseDebounceTimer = null;
            }

            emitTyping(true);
            scheduleTypingStop();
        }

        function handleConversationTyping(payload) {
            if (!payload || isTypingPayloadOwn(payload)) {
                return;
            }

            var isTyping = !!(payload.is_typing || payload.typing);
            var senderName = String(payload && payload.sender && payload.sender.name ? payload.sender.name : 'Soporte');
            setRemoteTypingState(isTyping, senderName);
        }

        function escapeHtml(value) {
            return (value || '')
                .replaceAll('&', '&amp;')
                .replaceAll('<', '&lt;')
                .replaceAll('>', '&gt;')
                .replaceAll('"', '&quot;')
                .replaceAll("'", '&#039;');
        }

        function formatDate(value) {
            if (!value) {
                return '';
            }

            var parsedDate = new Date(value);
            if (isNaN(parsedDate.getTime())) {
                return String(value);
            }

            return new Intl.DateTimeFormat('es-ES', {
                day: '2-digit',
                month: '2-digit',
                year: 'numeric',
                hour: '2-digit',
                minute: '2-digit'
            }).format(parsedDate);
        }

        function resolveSenderName(payload, own) {
            if (payload && payload.sender && payload.sender.name) {
                return String(payload.sender.name);
            }

            if (payload && payload.sender_name) {
                return String(payload.sender_name);
            }

            return own ? 'Tú' : 'Soporte';
        }

        function resolveSenderDisplayName(payload, own) {
            var name = resolveSenderName(payload, own);
            var suffix = own ? '(Tú)' : '(Soporte)';

            if (name.indexOf('(Tú)') !== -1 || name.indexOf('(Soporte)') !== -1) {
                return name;
            }

            return name + ' ' + suffix;
        }

        function formatFileSize(bytes) {
            var value = Number(bytes || 0);
            if (!isFinite(value) || value <= 0) {
                return '';
            }

            var units = ['B', 'KB', 'MB', 'GB'];
            var index = 0;

            while (value >= 1024 && index < units.length - 1) {
                value = value / 1024;
                index++;
            }

            return (index === 0 ? Math.round(value) : value.toFixed(1)) + ' ' + units[index];
        }

        function renderAttachments(payload, own) {
            var attachments = payload && Array.isArray(payload.attachments) ? payload.attachments : [];
            if (!attachments.length) {
                return '';
            }

            var wrapperClass = own ? 'mt-2 space-y-2' : 'mt-2 space-y-2';
            var attachmentHtml = '<div class="' + wrapperClass + '">';

            attachments.forEach(function(file) {
                var fileName = escapeHtml(file && file.file_name ? file.file_name : 'Archivo');
                var fileUrl = escapeHtml(file && file.url ? file.url : '#');
                var mimeType = String(file && file.mime_type ? file.mime_type : '').toLowerCase();
                var isImage = mimeType.indexOf('image/') === 0;
                var sizeLabel = escapeHtml(formatFileSize(file && file.size ? file.size : 0));

                if (isImage) {
                    attachmentHtml +=
                        '<a href="' + fileUrl + '" target="_blank" rel="noopener noreferrer" ' +
                        'class="mt-2 block overflow-hidden rounded-xl border transition-all hover:ring-2 ' +
                        (own ? 'border-white/20 bg-black/10 hover:ring-white/30' : 'border-slate-200 bg-slate-100 hover:ring-cyan-500/20') + '">' +

                        '<img src="' + fileUrl + '" alt="' + fileName + '" class="max-h-52 w-full object-cover transition-transform hover:scale-[1.02]" loading="lazy" />' +

                        '<div class="flex items-center justify-between px-2.5 py-1.5 text-[10px] tracking-tight font-medium ' +
                        (own ? 'text-white/80' : 'text-slate-500') + '">' +
                        '<span class="truncate pr-4">' + fileName + '</span>' +
                        '<span class="shrink-0 opacity-70">' + (sizeLabel || '') + '</span>' +
                        '</div>' +
                        '</a>';
                    return;
                }

                attachmentHtml +=
                    '<a href="' + fileUrl + '" download="' + fileName + '" target="_blank" rel="noopener noreferrer" ' +
                    'class="mt-2 flex items-center gap-3 rounded-xl border px-3 py-2.5 text-[12px] font-medium transition-all ' +
                    (own ?
                        'border-white/20 bg-white/10 text-white hover:bg-white/20' :
                        'border-slate-200 bg-slate-50 text-slate-700 hover:bg-white hover:border-cyan-200 hover:shadow-sm'
                    ) + '">' +
                    // Icono más moderno
                    '<span class="material-icons text-[18px] shrink-0 ' + (own ? 'text-white/70' : 'text-cyan-600') + '">description</span>' +

                    '<div class="flex flex-1 flex-col truncate">' +
                    '<span class="truncate">' + fileName + '</span>' +
                    '<span class="text-[9px] uppercase tracking-wider opacity-60">' + (sizeLabel || 'Documento') + '</span>' +
                    '</div>' +

                    '<span class="material-icons text-[16px] opacity-40">download</span>' +
                    '</a>';
            });

            attachmentHtml += '</div>';

            return attachmentHtml;
        }

        function isOwnMessage(payload) {
            if (payload && payload.sender && typeof payload.sender.is_me !== 'undefined') {
                return !!payload.sender.is_me;
            }

            var payloadSenderChatUserId = Number(payload && payload.sender && payload.sender.chat_user_id ? payload.sender.chat_user_id : 0);
            var payloadSenderId = Number(payload && payload.sender_id ? payload.sender_id : 0);

            return (
                (state.chatUserId > 0 && payloadSenderChatUserId > 0 && payloadSenderChatUserId === state.chatUserId) ||
                (state.chatUserId > 0 && payloadSenderId > 0 && payloadSenderId === state.chatUserId) ||
                (payloadSenderId > 0 && payloadSenderId === state.me)
            );
        }

        function appendMessage(payload) {
            clearSystemLoadingIndicators();
            removeTypingIndicatorBubble();
            var id = payload && payload.id ? String(payload.id) : '';
            if (id && state.messageIds[id]) return;
            if (id) state.messageIds[id] = true;

            var own = isOwnMessage(payload);
            var align = own ? 'justify-end' : 'justify-start';
            var bubbleClass = own ?
                'bg-cyan-700 text-white shadow-md shadow-cyan-900/5' :
                'bg-slate-100 text-slate-700 border border-slate-100 shadow-sm';
            var senderName = escapeHtml(resolveSenderDisplayName(payload, own));
            var body = escapeHtml(payload && payload.body ? payload.body : '');
            var createdAt = escapeHtml(formatDate(payload && payload.created_at ? payload.created_at : ''));
            var attachmentsHtml = renderAttachments(payload, own);
            var hasBody = body.trim() !== '';

            var highlightClass = payload && payload.__highlightIncoming ? 'fw-chat-incoming-flash' : '';

            var html =
                '<div class="flex ' + align + ' fw-bounce-in px-2 mb-4" data-fw-chat-message="1">' +
                '<div class="relative max-w-[85%] rounded-2xl px-3 py-2 ' + bubbleClass + ' ' + (own ? 'rounded-tr-none' : 'rounded-tl-none') + ' ' + highlightClass + '">' +
                (!own ?
                    '<div class="mb-1 text-[11px] font-bold text-cyan-700/70 capitalize">' + senderName + '</div>' :
                    '<div class="mb-1 text-[11px] font-medium text-white/70 capitalize text-right">Tú</div>'
                ) +
                (hasBody ? '<div class="text-[14px] whitespace-pre-wrap break-words leading-snug">' + body + '</div>' : '') +
                attachmentsHtml +
                '<div class="mt-1.5 flex items-center justify-end gap-1 text-[10px] ' + (own ? 'text-white/60' : 'text-slate-400') + '">' +
                createdAt +
                '</div>' +
                '</div>' +
                '</div>';
            messagesEl.insertAdjacentHTML('beforeend', html);
            scrollMessagesToBottom();
        }

        function shouldHydrateMessageAttachments(payload) {
            if (!payload || String(payload.message_type || '') !== 'file') {
                return false;
            }

            return !Array.isArray(payload.attachments) || payload.attachments.length === 0;
        }

        function shouldHydrateMessageSender(payload) {
            if (!payload || isOwnMessage(payload)) {
                return false;
            }

            var hasSenderName = !!(payload.sender && payload.sender.name) || !!payload.sender_name;
            return !hasSenderName;
        }

        function hasSenderName(payload) {
            return !!(payload && payload.sender && payload.sender.name) || !!(payload && payload.sender_name);
        }

        function hasFileAttachments(payload) {
            if (!payload || String(payload.message_type || '') !== 'file') {
                return true;
            }

            return Array.isArray(payload.attachments) && payload.attachments.length > 0;
        }

        function extractMessagesFromCurrentResponse(currentResp) {
            var conversation = currentResp && currentResp.data ? currentResp.data : {};
            if (Array.isArray(currentResp && currentResp.messages)) {
                return currentResp.messages;
            }

            if (Array.isArray(conversation.messages)) {
                return conversation.messages;
            }

            return [];
        }

        function resolveConversationIdFromSendResponse(sendResp, createdMessage) {
            var data = sendResp && sendResp.data ? sendResp.data : {};
            var conversation = data && data.conversation ? data.conversation : {};

            var candidates = [
                sendResp && sendResp.conversation_id ? sendResp.conversation_id : '',
                data && data.conversation_id ? data.conversation_id : '',
                conversation && conversation.conversation_id ? conversation.conversation_id : '',
                conversation && conversation.id ? conversation.id : '',
                createdMessage && createdMessage.conversation_id ? createdMessage.conversation_id : ''
            ];

            for (var i = 0; i < candidates.length; i++) {
                var candidate = String(candidates[i] || '').trim();
                if (candidate !== '') {
                    return candidate;
                }
            }

            return '';
        }

        function fetchMessageFromCurrent(messageId) {
            if (!state.conversationId || !messageId) {
                return Promise.resolve(null);
            }

            return fetch(state.currentUrl + '?conversation_id=' + encodeURIComponent(state.conversationId) + '&messages_per_page=100', {
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Accept': 'application/json'
                    }
                })
                .then(function(response) {
                    return response.json();
                })
                .then(function(currentResp) {
                    var messages = extractMessagesFromCurrentResponse(currentResp);
                    for (var i = 0; i < messages.length; i++) {
                        if (String(messages[i] && messages[i].id ? messages[i].id : '') === String(messageId)) {
                            return messages[i];
                        }
                    }

                    return null;
                })
                .catch(function() {
                    return null;
                });
        }

        function appendRealtimeMessage(payload) {
            console.log('[ERP-chat] 📩 appendRealtimeMessage', JSON.stringify(payload));

            if (isFirstContactReason(payload)) {
                var systemMessageId = payload && payload.id ? String(payload.id) : '';
                if (systemMessageId && state.messageIds[systemMessageId]) {
                    return;
                }

                if (systemMessageId) {
                    state.messageIds[systemMessageId] = true;
                }

                appendSystemNotice(
                    payload && payload.body ? payload.body : 'Tu conversación fue registrada por soporte.',
                    resolveFirstContactNoticeOptions(payload)
                );
                return;
            }

            var messageId = payload && payload.id ? String(payload.id) : '';
            var shouldHydrate = shouldHydrateMessageAttachments(payload) || shouldHydrateMessageSender(payload);
            var own = isOwnMessage(payload);
            var shouldHighlightIncomingMessage = !own && panel && !panel.classList.contains('hidden');
            if (!own) {
                playNotifySound();
                if (panel.classList.contains('hidden')) {
                    flashToggleVisual();
                }
            }
            if (!shouldHydrate) {
                var incomingPayload = payload || {};
                incomingPayload.__highlightIncoming = shouldHighlightIncomingMessage;
                appendMessage(incomingPayload);
                return;
            }

            if (messageId && state.hydratingMessageIds[messageId]) {
                return;
            }

            if (messageId) {
                state.hydratingMessageIds[messageId] = true;
            }

            function hydrateWithRetry(attempt) {
                console.log('[ERP-chat] 🔄 Hydrate intento', attempt, 'messageId:', messageId);
                fetchMessageFromCurrent(messageId)
                    .then(function(fullMessage) {
                        var candidate = fullMessage || payload || {};
                        candidate.__highlightIncoming = shouldHighlightIncomingMessage;
                        var isComplete = hasSenderName(candidate) && hasFileAttachments(candidate);

                        if (!isComplete && attempt < 2) {
                            setTimeout(function() {
                                hydrateWithRetry(attempt + 1);
                            }, 450 * (attempt + 1));
                            return;
                        }

                        appendMessage(candidate);

                        if (messageId) {
                            delete state.hydratingMessageIds[messageId];
                        }
                    })
                    .catch(function() {
                        var fallbackCandidate = payload || {};
                        fallbackCandidate.__highlightIncoming = shouldHighlightIncomingMessage;
                        appendMessage(fallbackCandidate);

                        if (messageId) {
                            delete state.hydratingMessageIds[messageId];
                        }
                    });
            }

            hydrateWithRetry(0);
        }

        function playNotifySound() {
            if (notifySoundEl) {
                notifySoundEl.currentTime = 0;
                notifySoundEl.play().catch(function(){});
            }
        }

        function flashToggleVisual() {
            if (!pulseEl) return;
            pulseEl.classList.add('fw-chat-pulse-flash');
            setTimeout(function(){
                pulseEl.classList.remove('fw-chat-pulse-flash');
            }, 520);
        }

        function renderHistory(messages) {
            var list = Array.isArray(messages) ? messages : [];
            var skeleton = document.getElementById('fwChatSkeleton');
            var skeletonHtml = skeleton ? skeleton.outerHTML : '';

            state.messageIds = {};
            messagesEl.innerHTML = skeletonHtml;
            hideSkeleton();

            if (list.length > 0) {
                state.firstMessageSent = true;
                clearSuggestions();
            }

            list.forEach(function(message) {
                var currentMessage = message || {};

                if (isFirstContactReason(currentMessage)) {
                    var systemMessageId = currentMessage && currentMessage.id ? String(currentMessage.id) : '';
                    if (systemMessageId && state.messageIds[systemMessageId]) {
                        return;
                    }

                    if (systemMessageId) {
                        state.messageIds[systemMessageId] = true;
                    }

                    appendSystemNotice(
                        currentMessage && currentMessage.body ? currentMessage.body : 'Tu conversación fue registrada por soporte.',
                        resolveFirstContactNoticeOptions(currentMessage)
                    );
                    return;
                }

                appendMessage(currentMessage);
            });

            if (list.length === 0) {
                renderSuggestions();
            }

            scrollMessagesToBottom();
        }

        function showSkeleton() {
            var skeleton = document.getElementById('fwChatSkeleton');
            if (!skeleton) {
                return;
            }

            skeleton.classList.remove('hidden');
        }

        function hideSkeleton() {
            var skeleton = document.getElementById('fwChatSkeleton');
            if (!skeleton) {
                return;
            }

            skeleton.classList.add('hidden');
        }

        function isClosedStatus(value) {
            return String(value || '').toLowerCase() === 'closed';
        }

        function isClosedConversationPayload(payload) {
            if (!payload) {
                return false;
            }

            if (isClosedStatus(payload.status)) {
                return true;
            }

            if (payload.data && isClosedStatus(payload.data.status)) {
                return true;
            }

            if (payload.data && payload.data.conversation && isClosedStatus(payload.data.conversation.status)) {
                return true;
            }

            return false;
        }

        function resetConversationContext(statusText) {
            var previousConversationId = state.conversationId;

            emitTyping(false);
            if (state.typingStopTimer) {
                clearTimeout(state.typingStopTimer);
                state.typingStopTimer = null;
            }
            if (state.typingFalseDebounceTimer) {
                clearTimeout(state.typingFalseDebounceTimer);
                state.typingFalseDebounceTimer = null;
            }
            setRemoteTypingState(false);

            if (state.echo && state.conversationId) {
                state.echo.leave('private-conversation.' + state.conversationId);
            }

            if (state.echo && state.conversationId) {
                state.echo.leave('private-conversation-status.' + state.conversationId);
            }

            if (state.echo && state.conversationId) {
                state.echo.leave('private-conversation-typing.' + state.conversationId);
            }

            localStorage.removeItem('erp_chat_conversation_id');
            state.channel = null;
            state.statusChannel = null;
            state.typingChannel = null;
            state.conversationId = null;
            state.firstMessageSent = false;
            state.ready = true;

            if (previousConversationId) {
                state.lastClosedConversationId = String(previousConversationId);
            }

            clearPendingFiles();
            setComposerEnabled(true);
            setStatus(statusText || 'Conversación cerrada por soporte');
            appendSystemNotice('La conversación fue terminada por soporte. Para conectar de nuevo, envía un nuevo mensaje.');
            renderSuggestions();
        }

        function handleConversationClosed(payload) {
            console.log('Conversación cerrada:', payload || {});
            resetConversationContext('Conversación cerrada por soporte');
        }

        function connectToConversation(resp) {
            resp = resp || {};

            var previousConversationId = state.conversationId;
            var newConversationId = String(resp.conversation_id || '').trim();

            if (resp.access_token) {
                state.accessToken = resp.access_token;
            }

            if (resp.chat_api_url) {
                state.chatApiUrl = resp.chat_api_url;
            }

            if (resp.reverb) {
                state.reverbConfig = resp.reverb;
            }

            state.chatUserId = Number(resp && resp.chat_user_id ? resp.chat_user_id : state.chatUserId || 0);

            if (!window.Echo || !window.Pusher) {
                setStatus('Librerías realtime no disponibles');
                setConnectedVisual(false);
                return false;
            }

            window.Pusher = window.Pusher || Pusher;
            var reverb = state.reverbConfig || {};

            if (!state.echo) {
                if (!reverb.app_key) {
                    setStatus('Configuración realtime incompleta');
                    setConnectedVisual(false);
                    return false;
                }

                state.echo = new window.Echo({
                    broadcaster: 'reverb',
                    key: reverb.app_key,
                    wsHost: reverb.ws_host,
                    wsPort: reverb.ws_port,
                    wssPort: reverb.ws_port,
                    forceTLS: !!reverb.force_tls,
                    enabledTransports: ['ws', 'wss'],
                    authEndpoint: state.chatApiUrl + '/broadcasting/auth',
                    auth: {
                        headers: {
                            Authorization: 'Bearer ' + state.accessToken,
                            Accept: 'application/json'
                        }
                    }

                });
                // ── Agrega esto justo después ──
                state.echo.connector.pusher.connection.bind('state_change', function(states) {
                    console.log('[ERP-chat] WebSocket estado:', states.previous, '→', states.current);
                });

                state.echo.connector.pusher.connection.bind('error', function(err) {
                    console.error('[ERP-chat] WebSocket error:', err);
                });

                if (state.echo.connector && state.echo.connector.pusher && state.echo.connector.pusher.connection) {
                    state.echo.connector.pusher.connection.bind('disconnected', function() {
                        console.warn('🔌 Canal desconectado');
                        setStatus('Canal cerrado');
                        state.ready = false;
                        setConnectedVisual(false);
                        closeWidget();
                    });

                    state.echo.connector.pusher.connection.bind('connected', function() {
                        setConnectedVisual(true);
                    });
                }

                // ── Reconectar al volver a la pestaña ──────────────────────────
                document.addEventListener('visibilitychange', function() {
                    if (document.visibilityState === 'visible') {
                        if (
                            state.echo &&
                            state.echo.connector &&
                            state.echo.connector.pusher &&
                            state.echo.connector.pusher.connection.state !== 'connected'
                        ) {
                            console.log('🔄 Reconectando canal por visibilidad...');
                            state.echo.connector.pusher.connect();
                        }
                    }
                });
                // ───────────────────────────────────────────────────────────────

            } else {
                if (state.echo.connector && state.echo.connector.options && state.echo.connector.options.auth && state.echo.connector.options.auth.headers) {
                    state.echo.connector.options.auth.headers.Authorization = 'Bearer ' + state.accessToken;
                }
            }

            if (!newConversationId) {
                state.ready = true;
                state.isTypingSent = false;
                setRemoteTypingState(false);
                setStatus('Listo para iniciar');
                setConnectedVisual(true);
                setComposerEnabled(true);
                return false;
            }

            if (state.lastClosedConversationId && newConversationId === state.lastClosedConversationId) {
                state.conversationId = null;
                state.ready = true;
                state.isTypingSent = false;
                setRemoteTypingState(false);
                setStatus('Listo para iniciar');
                setConnectedVisual(true);
                setComposerEnabled(true);
                return false;
            }

            if (state.lastClosedConversationId && newConversationId !== state.lastClosedConversationId) {
                resetChatViewportForNewConversation();
            }

            state.conversationId = newConversationId;
            localStorage.setItem('erp_chat_conversation_id', state.conversationId);

            if (state.channel && previousConversationId && previousConversationId !== newConversationId) {
                state.echo.leave('private-conversation.' + previousConversationId);
                state.channel = null;
            }

            if (state.statusChannel && previousConversationId && previousConversationId !== newConversationId) {
                state.echo.leave('private-conversation-status.' + previousConversationId);
                state.statusChannel = null;
            }

            if (state.typingChannel && previousConversationId && previousConversationId !== newConversationId) {
                state.echo.leave('private-conversation-typing.' + previousConversationId);
                state.typingChannel = null;
            }

            if (!state.channel || previousConversationId !== newConversationId) {
                state.channel = state.echo.private('conversation.' + state.conversationId);

                state.channel.subscribed(function() {
                    console.log('✅ Suscrito al canal', 'conversation.' + state.conversationId);
                    setStatus('En linea');
                    setConnectedVisual(true);
                });

                state.channel.error(function(err) {
                    console.error('❌ Error de suscripción', err); // ya existe
                    console.error('❌ Detalle:', JSON.stringify(err)); // agre
                    setStatus('Desconectado');
                    setConnectedVisual(false);
                });

                state.channel.listen('.message.sent', function(payload) {
                    console.log('📩 Nuevo mensaje recibido', payload);
                    appendRealtimeMessage(payload || {});
                });

                state.channel.listen('.conversation.closed', function(payload) {
                    handleConversationClosed(payload);
                });
            }

            if (!state.statusChannel || previousConversationId !== newConversationId) {
                state.statusChannel = state.echo.private('conversation-status.' + state.conversationId);

                state.statusChannel.listen('.conversation.closed', function(payload) {
                    console.log('Estado de conversación actualizado:', payload || {});
                    handleConversationClosed(payload);
                });
            }

            if (!state.typingChannel || previousConversationId !== newConversationId) {
                state.typingChannel = state.echo.private('conversation-typing.' + state.conversationId);

                state.typingChannel.listen('.conversation.typing', function(payload) {
                    handleConversationTyping(payload || {});
                });
            }

            state.ready = true;
            state.isTypingSent = false;
            setRemoteTypingState(false);
            setComposerEnabled(true);

            return previousConversationId !== newConversationId;
        }

        function shouldOpenChat() {
            if (state.opening) {
                return false;
            }

            if (!state.ready) {
                return true;
            }

            if (!state.conversationId) {
                return false;
            }

            return messagesEl.childElementCount === 0;
        }

        function openChat() {
            if (!shouldOpenChat()) {
                setStatus('En linea');
                return;
            }

            state.opening = true;
            setStatus('Conectando...');
            showSkeleton();

            fetch(state.sessionUrl, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({})
                })
                .then(function(response) {
                    return response.json();
                })
                .then(function(resp) {
                    if (!resp || !resp.access_token) {
                        setStatus('Error al iniciar sesión de chat');
                        setConnectedVisual(false);
                        return;
                    }

                    var conversationChanged = connectToConversation(resp);

                    fetch(state.openConversationsUrl, {
                            method: 'GET',
                            headers: {
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                                'Accept': 'application/json'
                            }
                        })
                        .then(function(response) {
                            return response.json();
                        })
                        .then(function(listResp) {
                            var conversations = Array.isArray(listResp.data) ? listResp.data : [];
                            console.log('📚 Conversaciones open del usuario', conversations);
                        })
                        .catch(function(err) {
                            console.warn('⚠️ No se pudieron listar conversaciones open', err);
                        });

                    if (state.conversationId) {
                        var hasHistoryLoaded = state.historyLoadedConversationId === state.conversationId && messagesEl.childElementCount > 0;
                        if (!conversationChanged && hasHistoryLoaded) {
                            hideSkeleton();
                            return;
                        }

                        fetch(state.currentUrl + '?conversation_id=' + encodeURIComponent(state.conversationId) + '&messages_per_page=50', {
                                method: 'GET',
                                headers: {
                                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                                    'Accept': 'application/json'
                                }
                            })
                            .then(function(response) {
                                return response.json();
                            })
                            .then(function(currentResp) {
                                var conversation = currentResp.data || {};
                                if (isClosedConversationPayload(currentResp) || isClosedConversationPayload(conversation)) {
                                    hideSkeleton();
                                    resetConversationContext('Conversación cerrada por soporte');
                                    return;
                                }

                                var history = Array.isArray(currentResp.messages) ? currentResp.messages : (Array.isArray(conversation.messages) ? conversation.messages : []);

                                renderHistory(history);
                                hideSkeleton();
                                state.historyLoadedConversationId = state.conversationId;
                                console.log('🧭 Conversación actual', conversation);
                                console.log('🧾 messages_meta', currentResp.messages_meta || conversation.messages_meta || null);
                            })
                            .catch(function(err) {
                                console.warn('⚠️ No se pudo obtener conversación actual', err);
                                hideSkeleton();
                                renderSuggestions();
                            });
                    } else {
                        messagesEl.innerHTML = '';
                        hideSkeleton();
                        state.historyLoadedConversationId = null;
                        renderSuggestions();
                    }
                })
                .catch(function() {
                    setStatus('No fue posible conectar el chat');
                    setConnectedVisual(false);
                    hideSkeleton();
                    renderSuggestions();
                })
                .finally(function() {
                    state.opening = false;
                });
        }

        function sendMessage() {
            var body = (inputEl.value || '').trim();
            var selectedFiles = Array.isArray(state.pendingFiles) ? state.pendingFiles : [];
            var hasFiles = selectedFiles.length > 0;

            emitTyping(false);
            if (state.typingStopTimer) {
                clearTimeout(state.typingStopTimer);
                state.typingStopTimer = null;
            }
            if (state.typingFalseDebounceTimer) {
                clearTimeout(state.typingFalseDebounceTimer);
                state.typingFalseDebounceTimer = null;
            }

            if (!body && !hasFiles) {
                return;
            }

            if (!state.ready) {
                setStatus('Conectando...');
                openChat();
                return;
            }

            if (!state.firstMessageSent) {
                state.firstMessageSent = true;
                clearSuggestions();
            }

            sendEl.disabled = true;
            sendEl.classList.add('opacity-50');

            var formData = new FormData();

            if (state.conversationId) {
                formData.append('conversation_id', state.conversationId);
            }

            formData.append('message_type', hasFiles ? 'file' : 'text');
            formData.append('origin', 'erp');

            if (body) {
                formData.append('body', body);
            }

            if (hasFiles) {
                for (var i = 0; i < selectedFiles.length; i++) {
                    formData.append('files[]', selectedFiles[i]);
                }
            }

            fetch(state.messageUrl, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Accept': 'application/json'
                    },
                    body: formData
                })
                .then(function(response) {
                    return response.json().then(function(sendResp) {
                        return {
                            ok: response.ok,
                            status: response.status,
                            payload: sendResp
                        };
                    });
                })
                .then(function(response) {
                    var sendResp = response.payload || {};

                    if (!response.ok) {
                        var backendMessage = String(sendResp.message || '').toLowerCase();
                        var closedByStatus = isClosedConversationPayload(sendResp);
                        var closedByText = backendMessage.indexOf('closed') !== -1 || backendMessage.indexOf('cerrad') !== -1;

                        if (closedByStatus || closedByText) {
                            resetConversationContext('Conversación cerrada por soporte');
                        }

                        throw new Error(sendResp.message || 'No fue posible enviar el mensaje');
                    }

                    if (isClosedConversationPayload(sendResp)) {
                        resetConversationContext('Conversación cerrada por soporte');
                        return;
                    }

                    var createdMessage = sendResp && sendResp.data ? sendResp.data : sendResp;
                    var conversationIdFromSend = resolveConversationIdFromSendResponse(sendResp, createdMessage);

                    if (!state.conversationId && conversationIdFromSend) {
                        if (state.lastClosedConversationId) {
                            resetChatViewportForNewConversation();
                        }

                        state.lastClosedConversationId = null;
                        state.conversationId = conversationIdFromSend;
                        connectToConversation({
                            conversation_id: conversationIdFromSend
                        });
                    }

                    if (createdMessage && createdMessage.id) {
                        appendRealtimeMessage(createdMessage);
                    }

                    inputEl.value = '';
                    clearPendingFiles();
                })
                .catch(function(err) {
                    console.warn('⚠️ Error al enviar mensaje', err);
                    if (state.conversationId) {
                        setStatus('No fue posible enviar el mensaje');
                    }
                })
                .finally(function() {
                    sendEl.disabled = false;
                    sendEl.classList.remove('opacity-50');
                });
        }

        function closeConversation() {
            if (!state.conversationId) {
                setStatus('No hay conversación activa para cerrar');
                return;
            }

            var closeUrl = state.closeTemplate.replace('__CONVERSATION_ID__', encodeURIComponent(state.conversationId));
            closeConversationEl.disabled = true;

            fetch(closeUrl, {
                    method: 'PATCH',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({})
                })
                .then(function(response) {
                    return response.json();
                })
                .then(function(resp) {
                    console.log('🛑 Conversación cerrada', resp);

                    if (state.echo && state.conversationId) {
                        state.echo.leave('private-conversation.' + state.conversationId);
                    }

                    localStorage.removeItem('erp_chat_conversation_id');
                    state.channel = null;
                    state.statusChannel = null;
                    state.typingChannel = null;
                    state.conversationId = null;
                    state.ready = false;
                    state.isTypingSent = false;
                    setRemoteTypingState(false);
                    state.firstMessageSent = false;
                    state.messageIds = {};
                    state.historyLoadedConversationId = null;
                    clearPendingFiles();
                    setComposerEnabled(false);
                    messagesEl.innerHTML = '';
                    setStatus('Conversación cerrada');
                    setConnectedVisual(false);
                    closeWidget();
                })
                .catch(function(err) {
                    console.warn('⚠️ No se pudo cerrar conversación', err);
                    setStatus('No se pudo cerrar la conversación');
                })
                .finally(function() {
                    closeConversationEl.disabled = false;
                });
        }

        toggle.addEventListener('click', function() {
            var isHidden = panel.classList.contains('hidden');

            if (isHidden) {
                panel.classList.remove('hidden');
                panel.classList.remove('fw-bounce-in');
                void panel.offsetWidth;
                panel.classList.add('fw-bounce-in');
                hideToggle();
                requestAnimationFrame(scrollMessagesToBottom);
                openChat();
            } else {
                closeWidget();
            }
        });

        closeBtn.addEventListener('click', function() {
            closeWidget();
        });

        // Minimizar chat al hacer clic fuera
        document.addEventListener('mousedown', function(event) {
            var isPanelOpen = !panel.classList.contains('hidden');
            if (!isPanelOpen) return;

            var target = event.target;
            // Si el clic fue dentro del widget, ignorar
            if (root.contains(target)) return;

            closeWidget();
        });

        // Minimizar chat al presionar Escape
        document.addEventListener('keydown', function(event) {
            var isPanelOpen = !panel.classList.contains('hidden');
            if (!isPanelOpen) return;
            if (event.key === 'Escape') {
                closeWidget();
            }
        });

        sendEl.addEventListener('click', sendMessage);
        closeConversationEl.addEventListener('click', closeConversation);

        if (filesTriggerEl && filesEl) {
            filesTriggerEl.addEventListener('click', function() {
                filesEl.click();
            });
        }

        if (filesEl) {
            filesEl.addEventListener('change', function() {
                addPendingFiles(filesEl.files ? Array.from(filesEl.files) : []);
            });
        }

        if (filesPreviewEl) {
            filesPreviewEl.addEventListener('click', function(event) {
                var removeButton = event.target.closest('[data-fw-remove-file-index]');
                if (!removeButton) {
                    return;
                }

                var index = removeButton.getAttribute('data-fw-remove-file-index');
                removePendingFile(index);
            });
        }

        inputEl.addEventListener('keypress', function(event) {
            if (event.key === 'Enter') {
                event.preventDefault();
                sendMessage();
            }
        });

        inputEl.addEventListener('input', function() {
            handleTypingInput();
        });

        inputEl.addEventListener('blur', function() {
            emitTypingFalseDebounced();
        });

        inputEl.addEventListener('paste', function(event) {
            var pastedImageFiles = extractImageFilesFromClipboard(event);
            if (!pastedImageFiles.length) {
                return;
            }

            event.preventDefault();
            addPendingFiles(pastedImageFiles);
        });

        messagesEl.addEventListener('click', function(event) {
            var suggestionButton = event.target.closest('[data-fw-suggestion-index]');
            if (!suggestionButton || state.firstMessageSent) {
                return;
            }

            var suggestionMessage = String(suggestionButton.getAttribute('data-fw-suggestion-message') || '').trim();
            if (suggestionMessage === '') {
                return;
            }

            inputEl.value = suggestionMessage;
            state.firstMessageSent = true;
            clearSuggestions();
            sendMessage();
        });

        refreshFilesUI();
        setComposerEnabled(false);
    })();
</script>
@endpush