@extends('comunidad.layout.master')

@section('title', 'Chat de la Comunidad | Educa Auge')
@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/comunidad/index.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/css/comunidad/chat.css') }}" />
@endsection

@section('content')
    <main class="page-main">
        <div class="uk-container principal">
            <!-- Botón para mostrar sidebar en móvil -->
            {{-- <button class="mobile-sidebar-toggle" id="mobile-sidebar-toggle" title="Ver conversaciones">
                <i class="fas fa-comments"></i>
            </button> --}}
            
            <!-- Overlay para cerrar sidebar en móvil -->
            <div class="chat-sidebar-overlay" id="sidebar-overlay"></div>
            
            <div class="chat-container">
                <!-- Sidebar con lista de miembros -->
                <div class="chat-sidebar" id="chat-sidebar">
                    <div class="chat-sidebar-header">
                        <h4>Conversaciones</h4>
                        <div class="chat-tabs">
                            <button class="chat-tab active" id="tab-global">
                                Global
                            </button>
                            <button class="chat-tab" id="tab-privado">
                                Privado
                            </button>
                        </div>
                    </div>
                    <div class="members-list" id="members-list">
                        <!-- Chat Global -->
                        <div class="member-item active" id="chat-global-item">
                            <div class="chat-header-avatar" style="background: #DA291C; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-users" style="color: #fff; font-size: 18px;"></i>
                            </div>
                            <div class="member-info">
                                <div class="member-name">Chat Global</div>
                                <div class="member-status">Todos los miembros</div>
                            </div>
                        </div>

                        <!-- Lista de miembros para chat privado -->
                        <div id="members-list-content">
                            @if(isset($miembros) && $miembros->count() > 0)
                                @foreach($miembros as $miembro)
                                    @if($miembro->suscrito)
                                        <div class="member-item member-item-clickable" 
                                             id="member-{{ $miembro->suscrito->id_suscrito }}"
                                             data-id="{{ $miembro->suscrito->id_suscrito }}"
                                             data-nombre="{{ htmlspecialchars($miembro->suscrito->nombre_completo, ENT_QUOTES, 'UTF-8') }}"
                                             data-imagen="{{ htmlspecialchars($miembro->suscrito->imagen_url, ENT_QUOTES, 'UTF-8') }}"
                                             style="display: none;">
                                            <img src="{{ $miembro->suscrito->imagen_url }}" 
                                                 alt="{{ $miembro->suscrito->nombre_completo }}" 
                                                 class="member-avatar"
                                                 onerror="this.src='{{ asset('assets/img/aulavirtual/elipse1.png') }}'">
                                            <div class="member-info">
                                                <div class="member-name">{{ $miembro->suscrito->nombre_completo }}</div>
                                                <div class="member-status">Miembro activo</div>
                                            </div>
                                            <span class="unread-badge" id="unread-badge-{{ $miembro->suscrito->id_suscrito }}" style="display: none;">0</span>
                                        </div>
                                    @endif
                                @endforeach
                            @else
                                <div class="uk-text-center uk-padding" id="no-members" style="display: none;">
                                    <p class="uk-text-muted">No hay otros miembros disponibles</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Área principal del chat -->
                <div class="chat-messages-container">
                    <div class="chat-header" id="chat-header">
                        @if($tipoChat === 'global')
                            <button class="mobile-back-btn" id="mobile-back-to-list">
                                <i class="fas fa-arrow-left"></i>
                            </button>
                            <div class="chat-header-avatar" style="background: #DA291C; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-users" style="color: #fff; font-size: 20px;"></i>
                            </div>
                            <div class="chat-header-info">
                                <h5>Chat Global <span class="global-chat-badge">Todos</span></h5>
                                <small>Conversación con todos los miembros</small>
                            </div>
                        @elseif($destinatario)
                            <button class="mobile-back-btn" id="mobile-back-to-list">
                                <i class="fas fa-arrow-left"></i>
                            </button>
                            <img src="{{ $destinatario->imagen_url }}" 
                                 alt="{{ $destinatario->nombre_completo }}" 
                                 class="chat-header-avatar"
                                 onerror="this.src='{{ asset('assets/img/aulavirtual/elipse1.png') }}'">
                            <div class="chat-header-info">
                                <h5>{{ $destinatario->nombre_completo }}</h5>
                                <small>Conversación privada</small>
                            </div>
                            <button class="back-to-global-btn" id="back-to-global-btn" title="Volver al chat general">
                                <i class="fas fa-arrow-left"></i>
                                <span>General</span>
                            </button>
                        @endif
                    </div>

                    <div class="chat-messages" id="chat-messages">
                        <!-- Sentinel superior para cargar mensajes anteriores -->
                        <div id="messages-sentinel-top"></div>
                        <div id="messages-loading" class="messages-loading" style="display:none; text-align:center; padding:6px 0; font-size:12px; color:#666;">
                            <i class="fas fa-spinner fa-spin"></i> Cargando mensajes...
                        </div>
                        <div class="empty-chat">
                            <div class="empty-chat-icon">
                                <i class="fas fa-comments"></i>
                            </div>
                            <p>Cargando mensajes...</p>
                        </div>
                    </div>

                    <div class="typing-indicator" id="typing-indicator">
                        Alguien está escribiendo...
                    </div>

                    <div class="chat-input-container">
                        <form class="chat-input-form" id="chat-form" onsubmit="return false;">
                            @csrf
                            <textarea 
                                class="chat-input" 
                                id="chat-input" 
                                placeholder="Escribe un mensaje..."
                                rows="1"
                            ></textarea>
                            <button type="button" class="chat-send-btn" id="chat-send-btn">
                                <i class="fas fa-paper-plane"></i> Enviar
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const chatMessages = document.getElementById('chat-messages');
            const chatForm = document.getElementById('chat-form');
            const chatInput = document.getElementById('chat-input');
            const chatSendBtn = document.getElementById('chat-send-btn');
            const typingIndicator = document.getElementById('typing-indicator');
            const messagesLoading = document.getElementById('messages-loading');
            
            const idSuscrito = {{ $idSuscrito ?? 'null' }};
            const tipoChat = '{{ $tipoChat ?? 'global' }}';
            const idDestinatario = {{ $idDestinatario ?? 'null' }};
            
            let escribiendoInterval = null;
            let escribiendoTimeout = null;
            let ultimaEscritura = 0;
            let currentChannel = null;
            let currentTipo = tipoChat;
            let currentDestinatario = idDestinatario;
            let currentChannelListeners = {
                mensaje: null,
                escribiendo: null
            };
            
            // Variables para paginado / infinite scroll de mensajes
            let currentPageMensajes = 1;
            let perPageMensajes = 15;
            let isLoadingMensajes = false;
            let noMoreMensajes = false;
            let observerMensajes = null;
            let scrollListenerMensajesAttached = false;

            // Funciones para manejar el sidebar en móvil
            const sidebar = document.getElementById('chat-sidebar');
            const sidebarToggle = document.getElementById('mobile-sidebar-toggle');
            const sidebarOverlay = document.getElementById('sidebar-overlay');
            const mobileBackBtn = document.getElementById('mobile-back-to-list');

            function abrirSidebar() {
                if (sidebar) {
                    sidebar.classList.add('active');
                    if (sidebarOverlay) {
                        sidebarOverlay.classList.add('active');
                    }
                    document.body.style.overflow = 'hidden';
                }
            }

            function cerrarSidebar() {
                if (sidebar) {
                    sidebar.classList.remove('active');
                    if (sidebarOverlay) {
                        sidebarOverlay.classList.remove('active');
                    }
                    document.body.style.overflow = '';
                }
            }

            // Event listeners para el sidebar móvil
            if (sidebarToggle) {
                sidebarToggle.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    abrirSidebar();
                });
            }

            if (sidebarOverlay) {
                sidebarOverlay.addEventListener('click', function(e) {
                    e.preventDefault();
                    cerrarSidebar();
                });
            }

            if (mobileBackBtn) {
                mobileBackBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    abrirSidebar();
                });
            }

            // Cerrar sidebar cuando se selecciona un chat en móvil
            function cerrarSidebarEnMovil() {
                if (window.innerWidth <= 768) {
                    cerrarSidebar();
                }
            }

            // Verificar que Pusher y Echo estén disponibles
            if (typeof Pusher === 'undefined') {
                console.error('❌ Pusher no está cargado. Verifica que el script esté incluido.');
                alert('Error: Pusher no está cargado. El chat no funcionará correctamente.');
            }
            
            if (typeof Echo === 'undefined') {
                console.error('❌ Laravel Echo no está cargado. Verifica que el script esté incluido.');
                alert('Error: Laravel Echo no está cargado. El chat no funcionará correctamente.');
            }

            // Configurar Laravel Echo con Laravel WebSockets
            try {
                console.log('🔧 Inicializando Laravel Echo...');
                
                // FRONTEND: Variables para la conexión desde el navegador (JS)
                // Si WEBSOCKET_FRONTEND_HOST está vacío, usa el hostname del navegador
                const frontendHost = '{{ env('WEBSOCKET_FRONTEND_HOST', '') }}' || window.location.hostname;
                // Si WEBSOCKET_FRONTEND_PORT es 0 o no existe, usa PUSHER_PORT o 6001 por defecto
                const frontendPort = {{ env('WEBSOCKET_FRONTEND_PORT', 0) }} || {{ env('PUSHER_PORT', 6001) }};
                
                console.log('🌐 FRONTEND - Host:', frontendHost);
                console.log('🌐 FRONTEND - Puerto:', frontendPort);
                console.log('🔑 PUSHER_APP_KEY:', '{{ env('PUSHER_APP_KEY', 'localkey') }}');
                
                let echoConfig = {
                    broadcaster: 'pusher',
                    key: '{{ env('PUSHER_APP_KEY', 'localkey') }}',
                    authEndpoint: '/broadcasting/auth',
                    auth: {
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        }
                    },
                    // Configuración para Laravel WebSockets (servidor local)
                    wsHost: frontendHost,
                    wsPort: frontendPort,
                    wssPort: frontendPort,
                    forceTLS: false,
                    encrypted: false,
                    disableStats: true,
                    enabledTransports: ['ws', 'wss'],
                    cluster: '{{ env('PUSHER_APP_CLUSTER', 'mt1') }}'
                };
                
                console.log('🔌 Usando Laravel WebSockets');
                console.log('🔌 Configuración completa:', echoConfig);
                
                window.Echo = new Echo(echoConfig);

                console.log('✅ Laravel Echo inicializado:', window.Echo);

                // Verificar conexión
                if (window.Echo && window.Echo.connector && window.Echo.connector.pusher) {
                    window.Echo.connector.pusher.connection.bind('connected', function() {
                        console.log('✅ WebSocket conectado correctamente');
                    });

                    window.Echo.connector.pusher.connection.bind('error', function(err) {
                        console.error('❌ Error en WebSocket:', err);
                    });
                    
                    window.Echo.connector.pusher.connection.bind('disconnected', function() {
                        console.warn('⚠️ WebSocket desconectado');
                    });
                } else {
                    console.error('❌ Echo no tiene connector.pusher disponible');
                }
            } catch (error) {
                console.error('❌ Error al inicializar Echo:', error);
                alert('Error al inicializar WebSocket: ' + error.message);
            }

            // Cargar mensajes iniciales y activar infinite scroll
            resetMensajesView();
            cargarMensajes();
            initInfiniteScrollMensajes();
            initScrollFallbackMensajes();
            
            // Suscribirse al canal correspondiente
            suscribirCanal();
            
            // Sincronizar el contador de mensajes sin leer (se recarga automáticamente cada 30 segundos en master.blade.php)
            if (typeof window.resetearMensajesSinLeer === 'function') {
                // Marcar como leído todos los mensajes de la conversación actual
                if (currentTipo === 'privado' && currentDestinatario) {
                    marcarMensajesComoLeidos(currentDestinatario);
                }
            }

            // Ya no usamos polling, ahora usamos WebSocket
            // iniciarPollingEscribiendo(); // Comentado - ahora usamos WebSocket

            // Enviar mensaje - Prevenir recarga de página IMPORTANTE
            chatForm.addEventListener('submit', function(e) {
                console.log('📤 Formulario submit interceptado');
                e.preventDefault();
                e.stopPropagation();
                e.stopImmediatePropagation();
                detenerEscribiendo();
                enviarMensaje();
                return false;
            }, true); // true = captura en fase de captura
            
            // Event listener directo en el botón
            chatSendBtn.addEventListener('click', function(e) {
                console.log('🖱️ Botón enviar clickeado');
                e.preventDefault();
                e.stopPropagation();
                detenerEscribiendo();
                enviarMensaje();
            });

            // También prevenir Enter en el textarea
            chatInput.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    e.stopPropagation();
                    console.log('⌨️ Enter presionado, enviando mensaje...');
                    enviarMensaje(); // Llamar directamente en lugar de dispatch
                }
            });

            // Auto-resize textarea
            chatInput.addEventListener('input', function() {
                this.style.height = 'auto';
                this.style.height = Math.min(this.scrollHeight, 100) + 'px';
                indicarEscribiendo();
            });

            // Detectar cuando deja de escribir
            chatInput.addEventListener('keyup', function() {
                clearTimeout(escribiendoTimeout);
                escribiendoTimeout = setTimeout(function() {
                    detenerEscribiendo();
                }, 2000);
            });

            // Función para cambiar de tab
            function cambiarTab(tipo) {
                console.log('🔄 Cambiando tab a:', tipo);
                
                // IMPORTANTE: Actualizar currentTipo PRIMERO
                currentTipo = tipo;
                console.log('📌 currentTipo actualizado a:', currentTipo);
                
                // Actualizar clases de los tabs
                const tabGlobal = document.getElementById('tab-global');
                const tabPrivado = document.getElementById('tab-privado');
                
                if (tipo === 'global') {
                    tabGlobal.classList.add('active');
                    tabPrivado.classList.remove('active');
                } else {
                    tabGlobal.classList.remove('active');
                    tabPrivado.classList.add('active');
                }
                
                // Mostrar/ocultar el item de Chat Global
                const globalItem = document.getElementById('chat-global-item');
                if (globalItem) {
                    if (tipo === 'global') {
                        globalItem.style.display = 'flex';
                        // Asegurar que el item global esté visible y activo
                        if (!globalItem.classList.contains('active')) {
                            globalItem.classList.add('active');
                        }
                    } else {
                        // No ocultar el item global, solo ocultarlo si estamos en tab privado
                        // pero mantenerlo disponible para hacer clic
                        globalItem.style.display = 'flex';
                    }
                }
                
                // Mostrar/ocultar miembros según el tab
                const members = document.querySelectorAll('.member-item-clickable');
                const noMembers = document.getElementById('no-members');
                
                console.log('📋 Miembros encontrados:', members.length);
                
                if (tipo === 'privado') {
                    // Mostrar miembros para chat privado
                    let miembrosVisibles = 0;
                    members.forEach(m => {
                        m.style.display = 'flex';
                        miembrosVisibles++;
                        console.log('👤 Mostrando miembro:', m.getAttribute('data-nombre'));
                    });
                    
                    console.log(`✅ ${miembrosVisibles} miembros mostrados`);
                    
                    if (noMembers) {
                        noMembers.style.display = members.length === 0 ? 'block' : 'none';
                    }
                    console.log('✅ Tab privado activado - miembros visibles');
                } else {
                    // Ocultar miembros en chat global
                    members.forEach(m => {
                        m.style.display = 'none';
                    });
                    if (noMembers) {
                        noMembers.style.display = 'none';
                    }
                    console.log('✅ Tab global activado - miembros ocultos');
                }
                
                // Re-inicializar miembros después de cambiar tab
                setTimeout(() => {
                    inicializarMiembros();
                }, 100);
            }
            
            // Hacer función disponible globalmente
            window.cambiarTab = cambiarTab;

            // Función para abrir chat global
            function abrirChatGlobal() {
                console.log('🌐 ===== ABRIENDO CHAT GLOBAL =====');
                console.log('📊 Estado ANTES:', { tipo: currentTipo, destinatario: currentDestinatario, canal: currentChannel });
                
                // Guardar tipo anterior
                const tipoAnterior = currentTipo;
                const canalAnterior = currentChannel;
                
                // PASO 1: Cambiar estado PRIMERO
                currentTipo = 'global';
                currentDestinatario = null;
                noMoreMensajes = false;
                currentPageMensajes = 1;
                isLoadingMensajes = false;
                resetMensajesView();
                console.log('✅ Paso 1: Estado actualizado a global');
                
                // PASO 2: Actualizar UI - Desactivar items de miembros
                document.querySelectorAll('.member-item-clickable').forEach(item => {
                    item.classList.remove('active');
                });
                
                // PASO 3: Activar item global
                const globalItem = document.getElementById('chat-global-item');
                if (globalItem) {
                    globalItem.classList.add('active');
                    globalItem.style.display = 'flex';
                    console.log('✅ Paso 3: Item global activado');
                }
                
                // PASO 4: Cambiar tab
                cambiarTab('global');
                console.log('✅ Paso 4: Tab cambiado a global');
                
                // PASO 5: Actualizar header
                actualizarHeader('global', null, null, null);
                console.log('✅ Paso 5: Header actualizado');
                
                // PASO 6: Desconectar del canal anterior
                if (canalAnterior && tipoAnterior !== 'global') {
                    console.log('🔌 Paso 6: Desconectando del canal anterior:', canalAnterior);
                    try {
                        if (window.Echo && window.Echo.leave) {
                            window.Echo.leave(canalAnterior);
                        }
                    } catch (e) {
                        console.error('Error al dejar canal:', e);
                    }
                }
                
                // PASO 7: Limpiar listeners y resetear canal
                currentChannelListeners = {
                    mensaje: null,
                    escribiendo: null
                };
                currentChannel = null;
                console.log('✅ Paso 7: Listeners limpiados');
                
                // PASO 8: Suscribirse al canal global y cargar mensajes
                // Usar un pequeño delay para asegurar que todo esté listo
                setTimeout(() => {
                    // Verificar que el estado siga siendo global
                    if (currentTipo !== 'global') {
                        console.error('❌ ERROR: El tipo cambió a:', currentTipo);
                        return;
                    }
                    
                    console.log('🔄 Paso 8: Suscribiéndose al canal global...');
                    suscribirCanal();
                    
                    // Cargar mensajes después de un pequeño delay
                    setTimeout(() => {
                        // Verificar nuevamente el estado
                        if (currentTipo !== 'global') {
                            console.error('❌ ERROR: El tipo cambió antes de cargar:', currentTipo);
                            return;
                        }
                        
                        console.log('📥 Paso 9: Cargando mensajes del chat global...');
                        cargarMensajes();
                        // Reinicializar infinite scroll
                        setTimeout(() => {
                            initInfiniteScrollMensajes();
                            initScrollFallbackMensajes();
                        }, 300);
                    }, 200);
                }, 150);
            };

            // Agregar event listeners a los tabs
            document.getElementById('tab-global').addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                e.stopImmediatePropagation();
                console.log('🖱️ Click en tab Global');
                abrirChatGlobal();
            });
            
            document.getElementById('tab-privado').addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                console.log('🖱️ Click en tab Privado');
                cambiarTab('privado');
                // NO abrir ningún chat específico, solo mostrar la lista de miembros
            });
            
            // Agregar event listener al chat global
            const globalItem = document.getElementById('chat-global-item');
            if (globalItem) {
                globalItem.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    e.stopImmediatePropagation();
                    console.log('🖱️ Click en item Chat Global');
                    abrirChatGlobal();
                    cerrarSidebarEnMovil();
                });
            }

            // Agregar event listener al botón "General" si existe en el HTML inicial
            const initialBackBtn = document.getElementById('back-to-global-btn');
            if (initialBackBtn) {
                initialBackBtn.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    e.stopImmediatePropagation();
                    console.log('🖱️ Click en botón General (HTML inicial)');
                    abrirChatGlobal();
                });
            }

            // Función para abrir chat privado
            function abrirChatPrivado(idDest, nombre, imagen) {
                console.log('🚀 ABRIENDO CHAT PRIVADO:', { idDest, nombre, imagen });
                
                if (!idDest || !nombre) {
                    console.error('❌ Datos inválidos para abrir chat privado');
                    alert('Error: Datos del miembro incompletos');
                    return;
                }
                
                if (currentTipo === 'privado' && currentDestinatario == idDest) {
                    console.log('⚠️ Ya estás en este chat privado');
                    return;
                }
                
                // Desactivar todos los items
                document.querySelectorAll('.member-item').forEach(item => {
                    item.classList.remove('active');
                });
                
                const memberItem = document.getElementById('member-' + idDest);
                if (memberItem) {
                    memberItem.classList.add('active');
                    memberItem.classList.remove('has-unread');
                    console.log('✅ Miembro marcado como activo');
                }
                
                // Ocultar badge de no leídos
                const unreadBadge = document.getElementById('unread-badge-' + idDest);
                if (unreadBadge) {
                    unreadBadge.style.display = 'none';
                }
                
                // Cambiar a chat privado
                currentTipo = 'privado';
                currentDestinatario = parseInt(idDest);
                noMoreMensajes = false;
                currentPageMensajes = 1;
                isLoadingMensajes = false;
                resetMensajesView();
                
                console.log('📝 Estado actualizado:', { tipo: currentTipo, destinatario: currentDestinatario });
                
                // Actualizar header
                actualizarHeader('privado', idDest, nombre, imagen);
                
                // Marcar mensajes como leídos
                marcarMensajesComoLeidos(idDest);
                
                // Desuscribirse del canal anterior y suscribirse al nuevo
                if (currentChannel) {
                    window.Echo.leave(currentChannel);
                    currentChannel = null;
                    console.log('🔌 Desconectado del canal anterior');
                }
                
                suscribirCanal();
                cargarMensajes();
                // Reinicializar infinite scroll
                setTimeout(() => {
                    initInfiniteScrollMensajes();
                    initScrollFallbackMensajes();
                }, 300);
                
                console.log('✅ Chat privado abierto con:', nombre);
            };

            function actualizarHeader(tipo, idDest, nombre, imagen) {
                const header = document.getElementById('chat-header');
                if (tipo === 'global') {
                    header.innerHTML = `
                        <button class="mobile-back-btn" id="mobile-back-to-list">
                            <i class="fas fa-arrow-left"></i>
                        </button>
                        <div class="chat-header-avatar" style="background: #DA291C; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;">
                            <i class="fas fa-users" style="color: #fff; font-size: 20px;"></i>
                        </div>
                        <div class="chat-header-info">
                            <h5>Chat Global <span class="global-chat-badge">Todos</span></h5>
                            <small>Conversación con todos los miembros</small>
                        </div>
                    `;
                    
                    // Agregar event listener al botón móvil
                    const mobileBack = document.getElementById('mobile-back-to-list');
                    if (mobileBack) {
                        mobileBack.addEventListener('click', function(e) {
                            e.preventDefault();
                            e.stopPropagation();
                            abrirSidebar();
                        });
                    }
                } else {
                    header.innerHTML = `
                        <button class="mobile-back-btn" id="mobile-back-to-list">
                            <i class="fas fa-arrow-left"></i>
                        </button>
                        <img src="${imagen}" alt="${nombre}" class="chat-header-avatar" onerror="this.src='{{ asset('assets/img/aulavirtual/elipse1.png') }}'">
                        <div class="chat-header-info">
                            <h5>${nombre}</h5>
                            <small>Conversación privada</small>
                        </div>
                        <button class="back-to-global-btn" id="back-to-global-btn" title="Volver al chat general">
                            <i class="fas fa-arrow-left"></i>
                            <span>General</span>
                        </button>
                    `;
                    
                    // Agregar event listener al botón móvil
                    const mobileBack = document.getElementById('mobile-back-to-list');
                    if (mobileBack) {
                        mobileBack.addEventListener('click', function(e) {
                            e.preventDefault();
                            e.stopPropagation();
                            abrirSidebar();
                        });
                    }
                    
                    // Agregar event listener al botón de volver
                    const backBtn = document.getElementById('back-to-global-btn');
                    if (backBtn) {
                        backBtn.addEventListener('click', function(e) {
                            e.preventDefault();
                            e.stopPropagation();
                            e.stopImmediatePropagation();
                            console.log('🖱️ ===== CLICK EN BOTÓN GENERAL =====');
                            console.log('📊 Estado actual:', { tipo: currentTipo, destinatario: currentDestinatario });
                            abrirChatGlobal();
                            cerrarSidebarEnMovil();
                        }, true); // Usar captura para asegurar que se ejecute
                    } else {
                        console.error('❌ No se encontró el botón back-to-global-btn');
                    }
                }
            }

            function suscribirCanal() {
                console.log('🔌 suscribirCanal() llamado - Estado:', { tipo: currentTipo, destinatario: currentDestinatario, canalActual: currentChannel });
                
                // Verificar que Echo esté disponible
                if (!window.Echo || typeof window.Echo.channel !== 'function') {
                    console.error('❌ Echo no está disponible o no tiene el método channel');
                    console.log('window.Echo:', window.Echo);
                    alert('Error: Laravel Echo no está configurado correctamente.');
                    return;
                }
                
                // Desuscribirse del canal anterior si existe
                if (currentChannel) {
                    try {
                        console.log('🔌 Desconectando del canal anterior:', currentChannel);
                        window.Echo.leave(currentChannel);
                        console.log('✅ Desconectado del canal anterior');
                    } catch (e) {
                        console.error('❌ Error al desuscribirse:', e);
                    }
                }

                // Resetear listeners
                currentChannelListeners = {
                    mensaje: null,
                    escribiendo: null
                };

                if (currentTipo === 'global') {
                    console.log('🌐 Suscribiéndose al canal GLOBAL');
                    currentChannel = 'comunidad-chat-global';
                    try {
                        console.log('🔵 Suscribiéndose al canal global:', currentChannel);
                        const channel = window.Echo.channel(currentChannel);
                        
                        // Verificar que el canal se suscribió correctamente
                        if (channel.subscribed) {
                            channel.subscribed(() => {
                                console.log('✅ Canal suscrito correctamente:', currentChannel);
                            });
                        }
                        
                        // Listener para capturar TODOS los eventos del canal (debugging)
                        if (window.Echo.connector && window.Echo.connector.pusher) {
                            const pusher = window.Echo.connector.pusher;
                            pusher.bind_global((eventName, data) => {
                                if (eventName.includes('MensajeChatEnviado') || eventName.includes('mensaje')) {
                                    console.log('🌐 EVENTO GLOBAL CAPTURADO:', eventName, data);
                                }
                            });
                        }
                        
                        // Escuchar mensajes usando Pusher directamente (más confiable)
                        if (window.Echo.connector && window.Echo.connector.pusher) {
                            const pusherChannel = window.Echo.connector.pusher.channel(currentChannel);
                            
                            if (pusherChannel) {
                                pusherChannel.bind('MensajeChatEnviado', (data) => {
                                    console.log('📨 ===== MENSAJE RECIBIDO POR WEBSOCKET =====');
                                    console.log('📦 Datos completos:', data);
                                    
                                    // Los datos vienen directamente, no necesitan unwrapping
                                    const e = data;
                                    
                                    if (e && e.tipo === 'global') {
                                        // Solo agregar si no existe ya en el DOM
                                        const mensajeId = e.id_mensaje;
                                        const yaExiste = document.getElementById(`mensaje-${mensajeId}`);
                                        
                                        console.log('🔍 ID mensaje:', mensajeId);
                                        console.log('🔍 Ya existe en DOM:', yaExiste ? 'SÍ' : 'NO');
                                        
                                        // Verificar si es un mensaje propio que ya está mostrado
                                        const esMensajePropio = e.id_suscrito_remitente == idSuscrito;
                                        
                                        // Si es mensaje propio, verificar si ya existe (puede tener ID temporal)
                                        if (esMensajePropio) {
                                            // Buscar si hay un mensaje temporal con el mismo contenido
                                            const mensajesExistentes = document.querySelectorAll('.message');
                                            let mensajeTemporalEncontrado = false;
                                            
                                            mensajesExistentes.forEach(msg => {
                                                const msgText = msg.querySelector('.message-text');
                                                if (msgText && msgText.textContent.trim() === e.mensaje.trim()) {
                                                    // Verificar si es un mensaje propio reciente
                                                    if (msg.classList.contains('own')) {
                                                        mensajeTemporalEncontrado = true;
                                                        // Actualizar el ID si es un mensaje temporal
                                                        if (msg.id.startsWith('mensaje-temp-')) {
                                                            msg.id = `mensaje-${mensajeId}`;
                                                            console.log('✅ ID del mensaje temporal actualizado a:', mensajeId);
                                                        }
                                                    }
                                                }
                                            });
                                            
                                            if (mensajeTemporalEncontrado || yaExiste) {
                                                console.log('⚠️ Mensaje propio ya mostrado, ignorando duplicado');
                                                return;
                                            }
                                        }
                                        
                                        if (mensajeId && !yaExiste) {
                                            // Asegurar formato correcto
                                            const mensajeData = {
                                                id_mensaje: e.id_mensaje,
                                                id_suscrito_remitente: e.id_suscrito_remitente,
                                                mensaje: e.mensaje,
                                                tiempo_transcurrido: e.tiempo_transcurrido || 'Ahora',
                                                remitente: e.remitente || {
                                                    id_suscrito: e.id_suscrito_remitente,
                                                    nombre_completo: 'Usuario',
                                                    imagen_url: '{{ asset("assets/img/aulavirtual/elipse1.png") }}'
                                                },
                                                created_at: e.created_at
                                            };
                                            console.log('✅ AGREGANDO MENSAJE A LA VISTA:', mensajeData);
                                            // Ocultar indicador de escribiendo cuando llega un mensaje
                                            typingIndicator.classList.remove('active');
                                            agregarMensaje(mensajeData);
                                            scrollToBottom();
                                            console.log('✅ Mensaje agregado y scroll realizado');
                                            
                                            // 🔔 SINCRONIZAR BADGE FLOTANTE EN TIEMPO REAL POR WEBSOCKET (Chat Global)
                                            // Si el mensaje NO es mío, incrementar el contador de no leídos
                                            if (e.id_suscrito_remitente != idSuscrito) {
                                                console.log('🌐 Mensaje global recibido (NO es mío)');
                                                console.log('🔍 Verificando si existe incrementarMensajesSinLeer:', typeof window.incrementarMensajesSinLeer);
                                                if (typeof window.incrementarMensajesSinLeer === 'function') {
                                                    console.log('✅ LLAMANDO incrementarMensajesSinLeer() para mensaje global');
                                                    window.incrementarMensajesSinLeer();
                                                    console.log('🔔 Badge flotante incrementado (mensaje global) en TIEMPO REAL');
                                                } else {
                                                    console.error('❌ incrementarMensajesSinLeer NO EXISTE');
                                                }
                                            }
                                        } else {
                                            if (yaExiste) {
                                                console.log('⚠️ Mensaje ignorado (ya existe con ID):', mensajeId);
                                            } else {
                                                console.log('⚠️ Mensaje ignorado (ID inválido)');
                                            }
                                        }
                                    } else {
                                        console.log('⚠️ Mensaje ignorado (tipo no es global):', e ? e.tipo : 'datos inválidos');
                                    }
                                });
                                
                                console.log('✅ Listener de Pusher configurado para:', currentChannel);
                            } else {
                                console.error('❌ No se pudo obtener el canal de Pusher');
                            }
                        } else {
                            console.error('❌ Pusher no está disponible');
                        }
                        
                        // Escuchar indicador de escribiendo
                        currentChannelListeners.escribiendo = channel.listen('UsuarioEscribiendo', (e) => {
                            console.log('⌨️ Usuario escribiendo (global):', e);
                            if (e.id_suscrito != idSuscrito && e.tipo === 'global') {
                                mostrarEscribiendo([{
                                    nombre_completo: e.nombre_completo
                                }]);
                            }
                        });
                        
                        console.log('✅ Suscrito al canal global:', currentChannel);
                    } catch (e) {
                        console.error('❌ Error al suscribirse al canal global:', e);
                    }
                } else if (currentDestinatario) {
                    const id1 = Math.min(idSuscrito, currentDestinatario);
                    const id2 = Math.max(idSuscrito, currentDestinatario);
                    currentChannel = 'comunidad-chat-privado-' + id1 + '-' + id2;
                    try {
                        console.log('🔵 Suscribiéndose al canal privado:', currentChannel);
                        console.log('👥 IDs ordenados:', { id1, id2, miId: idSuscrito, suId: currentDestinatario });
                        
                        // Suscribirse al canal usando Echo primero
                        const channel = window.Echo.channel(currentChannel);
                        
                        // Verificar que el canal se suscribió correctamente
                        if (channel.subscribed) {
                            channel.subscribed(() => {
                                console.log('✅ Canal privado suscrito correctamente:', currentChannel);
                            });
                        }
                        
                        // Escuchar mensajes usando Pusher directamente (más confiable)
                        if (window.Echo.connector && window.Echo.connector.pusher) {
                            const pusherChannel = window.Echo.connector.pusher.channel(currentChannel);
                            
                            if (pusherChannel) {
                                pusherChannel.bind('MensajeChatEnviado', (data) => {
                                    console.log('📨 ===== MENSAJE RECIBIDO POR WEBSOCKET (PRIVADO) =====');
                                    console.log('📦 Datos completos:', data);
                                    
                                    const e = data;
                                    
                                    // Verificar que es un mensaje privado entre los usuarios correctos
                                    if (e && e.tipo === 'privado') {
                                        const esMensajeParaNosotros = 
                                            (e.id_suscrito_remitente == idSuscrito && e.id_suscrito_destinatario == currentDestinatario) ||
                                            (e.id_suscrito_remitente == currentDestinatario && e.id_suscrito_destinatario == idSuscrito);
                                        
                                        console.log('🔍 Es mensaje para nosotros:', esMensajeParaNosotros);
                                        
                                        if (esMensajeParaNosotros) {
                                            const mensajeId = e.id_mensaje;
                                            const yaExiste = document.getElementById(`mensaje-${mensajeId}`);
                                            
                                            // Verificar si es un mensaje propio que ya está mostrado
                                            const esMensajePropio = e.id_suscrito_remitente == idSuscrito;
                                            
                                            // Si es mensaje propio, verificar si ya existe (puede tener ID temporal)
                                            if (esMensajePropio) {
                                                // Buscar si hay un mensaje temporal con el mismo contenido
                                                const mensajesExistentes = document.querySelectorAll('.message');
                                                let mensajeTemporalEncontrado = false;
                                                
                                                mensajesExistentes.forEach(msg => {
                                                    const msgText = msg.querySelector('.message-text');
                                                    if (msgText && msgText.textContent.trim() === e.mensaje.trim()) {
                                                        // Verificar si es un mensaje propio reciente
                                                        const msgAuthor = msg.querySelector('.message-author');
                                                        if (msgAuthor && msg.classList.contains('own')) {
                                                            mensajeTemporalEncontrado = true;
                                                            // Actualizar el ID si es un mensaje temporal
                                                            if (msg.id.startsWith('mensaje-temp-')) {
                                                                msg.id = `mensaje-${mensajeId}`;
                                                                console.log('✅ ID del mensaje temporal actualizado a:', mensajeId);
                                                            }
                                                        }
                                                    }
                                                });
                                                
                                                if (mensajeTemporalEncontrado || yaExiste) {
                                                    console.log('⚠️ Mensaje propio ya mostrado, ignorando duplicado');
                                                    return;
                                                }
                                            }
                                            
                                            if (mensajeId && !yaExiste) {
                                                // Asegurar formato correcto
                                                const mensajeData = {
                                                    id_mensaje: e.id_mensaje,
                                                    id_suscrito_remitente: e.id_suscrito_remitente,
                                                    mensaje: e.mensaje,
                                                    tiempo_transcurrido: e.tiempo_transcurrido || 'Ahora',
                                                    remitente: e.remitente || {
                                                        id_suscrito: e.id_suscrito_remitente,
                                                        nombre_completo: 'Usuario',
                                                        imagen_url: '{{ asset("assets/img/aulavirtual/elipse1.png") }}'
                                                    },
                                                    created_at: e.created_at
                                                };
                                                console.log('✅ AGREGANDO MENSAJE PRIVADO A LA VISTA:', mensajeData);
                                                // Ocultar indicador de escribiendo cuando llega un mensaje
                                                typingIndicator.classList.remove('active');
                                                agregarMensaje(mensajeData);
                                                scrollToBottom();
                                                
                                                // Si el mensaje es del destinatario actual, marcar como leído
                                                if (e.id_suscrito_remitente == currentDestinatario) {
                                                    marcarMensajesComoLeidos(currentDestinatario);
                                                }
                                            } else {
                                                console.log('⚠️ Mensaje ignorado (ya existe o ID inválido)');
                                            }
                                        } else {
                                            console.log('⚠️ Mensaje ignorado (no es para esta conversación)');
                                            // Si recibimos un mensaje privado de otro usuario, actualizar badge localmente
                                            if (e.id_suscrito_destinatario == idSuscrito && e.id_suscrito_remitente != idSuscrito) {
                                                console.log('📨 Mensaje privado recibido (OTRO USUARIO):', e);
                                                actualizarBadgeUsuario(e.id_suscrito_remitente, true);
                                                // 🔔 SINCRONIZAR BADGE FLOTANTE EN TIEMPO REAL POR WEBSOCKET
                                                console.log('🔍 Verificando si existe incrementarMensajesSinLeer:', typeof window.incrementarMensajesSinLeer);
                                                if (typeof window.incrementarMensajesSinLeer === 'function') {
                                                    console.log('✅ LLAMANDO incrementarMensajesSinLeer()');
                                                    window.incrementarMensajesSinLeer();
                                                    console.log('🔔 Badge flotante incrementado en TIEMPO REAL (WebSocket)');
                                                } else {
                                                    console.error('❌ incrementarMensajesSinLeer NO EXISTE');
                                                }
                                            }
                                        }
                                    } else {
                                        console.log('⚠️ Mensaje ignorado (tipo no es privado o datos inválidos)');
                                    }
                                });
                                
                                console.log('✅ Listener de Pusher configurado para canal privado:', currentChannel);
                            } else {
                                console.error('❌ No se pudo obtener el canal privado de Pusher');
                            }
                        } else {
                            console.error('❌ Pusher no está disponible para canal privado');
                        }
                        
                        // Escuchar indicador de escribiendo
                        currentChannelListeners.escribiendo = channel.listen('UsuarioEscribiendo', (e) => {
                            console.log('⌨️ Usuario escribiendo (privado):', e);
                            if (e.id_suscrito == currentDestinatario && e.id_destinatario == idSuscrito) {
                                mostrarEscribiendo([{
                                    nombre_completo: e.nombre_completo
                                }]);
                            }
                        });
                        
                        console.log('✅ Suscrito al canal privado:', currentChannel);
                    } catch (e) {
                        console.error('❌ Error al suscribirse al canal privado:', e);
                    }
                }
            }

            async function cargarMensajesPaginado(page = 1, append = false, prepend = false) {
                if (isLoadingMensajes || noMoreMensajes) return;
                isLoadingMensajes = true;
                setLoadingMensajes(true);

                const sentinelTop = document.getElementById('messages-sentinel-top');

                console.log('📥 Cargando página', page, 'de mensajes');
                console.log('📊 Estado:', { tipo: currentTipo, destinatario: currentDestinatario });
                
                // Verificar que el estado sea válido
                if (!currentTipo) {
                    console.error('❌ ERROR: currentTipo no está definido');
                    isLoadingMensajes = false;
                    setLoadingMensajes(false);
                    return;
                }
                
                if (currentTipo === 'privado' && !currentDestinatario) {
                    console.error('❌ ERROR: Chat privado sin destinatario');
                    isLoadingMensajes = false;
                    setLoadingMensajes(false);
                    return;
                }
                
                const url = currentTipo === 'global' 
                    ? `{{ url("/api/comunidad/chat/mensajes") }}?tipo=global&per_page=${perPageMensajes}&page=${page}`
                    : `{{ url("/api/comunidad/chat/mensajes") }}?tipo=privado&id_destinatario=${currentDestinatario}&per_page=${perPageMensajes}&page=${page}`;
                
                console.log('🔗 URL:', url);
                
                try {
                    const response = await fetch(url, {
                        method: 'GET',
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        credentials: 'same-origin'
                    });

                    if (!response.ok) {
                        throw new Error('Error en la respuesta del servidor: ' + response.status);
                    }

                    const data = await response.json();
                    console.log('✅ Mensajes recibidos:', data.data ? data.data.length : 0);
                    
                    if (!append) {
                        chatMessages.innerHTML = '';
                        // Reinsertar sentinel superior si se limpió
                        if (sentinelTop && !chatMessages.contains(sentinelTop)) {
                            chatMessages.prepend(sentinelTop);
                        }
                        currentPageMensajes = 1;
                        noMoreMensajes = false;
                    }

                    if (data.data && data.data.length > 0) {
                        // Los mensajes vienen con la página más reciente primero
                        // Los insertamos en orden cronológico
                        const mensajesOrdenados = [...data.data].reverse();
                        
                        if (prepend) {
                            const previousScrollHeight = chatMessages.scrollHeight;
                            mensajesOrdenados.forEach(mensaje => {
                                if (!document.getElementById('mensaje-' + mensaje.id_mensaje)) {
                                    if (mensaje && mensaje.id_mensaje && mensaje.remitente) {
                                        const msgEl = buildMessageElement({
                                            id_mensaje: mensaje.id_mensaje,
                                            id_suscrito_remitente: mensaje.id_suscrito_remitente,
                                            mensaje: mensaje.mensaje,
                                            tiempo_transcurrido: mensaje.tiempo_transcurrido || 'Ahora',
                                            remitente: {
                                                id_suscrito: mensaje.remitente.id_suscrito,
                                                nombre_completo: mensaje.remitente.nombre_completo || 'Usuario',
                                                imagen_url: mensaje.remitente.imagen_url || '{{ asset("assets/img/aulavirtual/elipse1.png") }}'
                                            },
                                            created_at: mensaje.created_at
                                        });
                                        const insertBeforeNode = sentinelTop ? sentinelTop.nextSibling : chatMessages.firstChild;
                                        chatMessages.insertBefore(msgEl, insertBeforeNode);
                                    }
                                }
                            });
                            const newScrollHeight = chatMessages.scrollHeight;
                            chatMessages.scrollTop += newScrollHeight - previousScrollHeight;
                        } else {
                            mensajesOrdenados.forEach(mensaje => {
                                // Evitar duplicados si ya existe en el DOM
                                if (!document.getElementById('mensaje-' + mensaje.id_mensaje)) {
                                    if (mensaje && mensaje.id_mensaje && mensaje.remitente) {
                                        agregarMensaje({
                                            id_mensaje: mensaje.id_mensaje,
                                            id_suscrito_remitente: mensaje.id_suscrito_remitente,
                                            mensaje: mensaje.mensaje,
                                            tiempo_transcurrido: mensaje.tiempo_transcurrido || 'Ahora',
                                            remitente: {
                                                id_suscrito: mensaje.remitente.id_suscrito,
                                                nombre_completo: mensaje.remitente.nombre_completo || 'Usuario',
                                                imagen_url: mensaje.remitente.imagen_url || '{{ asset("assets/img/aulavirtual/elipse1.png") }}'
                                            },
                                            created_at: mensaje.created_at
                                        });
                                    }
                                }
                            });
                        }

                        currentPageMensajes = page;

                        // Determinar si quedan páginas
                        if (data.last_page && page >= data.last_page) {
                            noMoreMensajes = true;
                        }
                        
                        // Si es la primera carga, hacer scroll al final
                        if (!prepend && (!append || page === 1)) {
                            setTimeout(() => scrollToBottom(), 100);
                        }
                    } else {
                        if (!append) {
                            chatMessages.innerHTML = `
                                <div class="empty-chat">
                                    <div class="empty-chat-icon">
                                        <i class="fas fa-comments"></i>
                                    </div>
                                    <p>No hay mensajes aún. ¡Sé el primero en escribir!</p>
                                </div>
                            `;
                        }
                        noMoreMensajes = true;
                    }
                } catch (error) {
                    console.error('❌ Error al cargar mensajes:', error);
                    if (!append) {
                        chatMessages.innerHTML = `
                            <div class="empty-chat">
                                <p class="uk-text-danger">Error al cargar mensajes: ${error.message}</p>
                                <p><small>Por favor, recarga la página.</small></p>
                            </div>
                        `;
                    }
                } finally {
                    isLoadingMensajes = false;
                    setLoadingMensajes(false);
                }
            }
            
            // Mantener compatibilidad con cargarMensajes() antigua
            function cargarMensajes() {
                cargarMensajesPaginado(1, false);
            }

            // Resetea contenedor y estado de paginación
            function resetMensajesView() {
                if (!chatMessages) return;
                chatMessages.innerHTML = '';
                const sentinelTop = document.getElementById('messages-sentinel-top');
                if (sentinelTop && !chatMessages.contains(sentinelTop)) {
                    chatMessages.prepend(sentinelTop);
                }
                if (messagesLoading && !chatMessages.contains(messagesLoading)) {
                    chatMessages.insertBefore(messagesLoading, chatMessages.children[1] || null);
                }
                setLoadingMensajes(false);
                noMoreMensajes = false;
                currentPageMensajes = 1;
                isLoadingMensajes = false;
            }

            function setLoadingMensajes(flag) {
                if (messagesLoading) {
                    messagesLoading.style.display = flag ? 'block' : 'none';
                }
            }

            // Construye el elemento de mensaje (sin insertarlo)
            function buildMessageElement(data) {
                const isOwn = data.id_suscrito_remitente == idSuscrito;

                const messageDiv = document.createElement('div');
                messageDiv.className = `message ${isOwn ? 'own' : ''}`;
                messageDiv.id = `mensaje-${data.id_mensaje}`;

                messageDiv.innerHTML = `
                    <img src="${data.remitente.imagen_url}" alt="${data.remitente.nombre_completo}" class="message-avatar" onerror="this.src='{{ asset('assets/img/aulavirtual/elipse1.png') }}'">
                    <div class="message-content">
                        <div class="message-header">
                            <span class="message-author">${data.remitente.nombre_completo}</span>
                            <span class="message-time">${data.tiempo_transcurrido || 'Ahora'}</span>
                        </div>
                        <div class="message-text">${escapeHtml(data.mensaje)}</div>
                    </div>
                `;

                return messageDiv;
            }

            function agregarMensaje(data) {
                console.log('➕ agregarMensaje() llamado con:', data);
                
                // Verificar que el mensaje no exista ya por ID
                const existingMsg = document.getElementById(`mensaje-${data.id_mensaje}`);
                if (existingMsg) {
                    console.log('⚠️ Mensaje ya existe por ID, ignorando:', data.id_mensaje);
                    return;
                }

                const isOwn = data.id_suscrito_remitente == idSuscrito;
                
                // Si es un mensaje propio, verificar si hay un mensaje temporal con el mismo contenido
                if (isOwn && data.id_mensaje && !data.id_mensaje.toString().startsWith('temp-')) {
                    const mensajesExistentes = document.querySelectorAll('.message.own');
                    for (let msg of mensajesExistentes) {
                        const msgText = msg.querySelector('.message-text');
                        if (msgText && msgText.textContent.trim() === data.mensaje.trim()) {
                            // Si el mensaje existente tiene un ID temporal, actualizarlo
                            if (msg.id && msg.id.startsWith('mensaje-temp-')) {
                                console.log('🔄 Actualizando ID de mensaje temporal:', msg.id, '->', `mensaje-${data.id_mensaje}`);
                                msg.id = `mensaje-${data.id_mensaje}`;
                                return; // No agregar duplicado
                            }
                        }
                    }
                }
                
                console.log('👤 Es mi mensaje:', isOwn);
                
                const messageDiv = buildMessageElement(data);
                
                // Eliminar mensaje vacío si existe
                const emptyChat = chatMessages.querySelector('.empty-chat');
                if (emptyChat) {
                    console.log('🗑️ Eliminando empty-chat');
                    emptyChat.remove();
                }
                
                console.log('📌 Agregando mensaje al DOM');
                chatMessages.appendChild(messageDiv);
                console.log('✅ Mensaje agregado al DOM con ID:', data.id_mensaje);
            }

            // Inicializar IntersectionObserver para infinite scroll de mensajes (al hacer scroll hacia arriba)
            function initInfiniteScrollMensajes() {
                const sentinelTop = document.getElementById('messages-sentinel-top');
                if (!sentinelTop || !chatMessages) return;
                if (observerMensajes) observerMensajes.disconnect();

                observerMensajes = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting && !isLoadingMensajes && !noMoreMensajes) {
                            // Cargar la siguiente página (mensajes más antiguos) y mantener la posición de scroll
                            cargarMensajesPaginado(currentPageMensajes + 1, true, true);
                        }
                    });
                }, {
                    root: chatMessages,
                    rootMargin: '200px 0px 0px 0px',
                    threshold: 0
                });

                observerMensajes.observe(sentinelTop);
            }

            // Fallback con scroll listener por si el IntersectionObserver no dispara
            function initScrollFallbackMensajes() {
                if (!chatMessages || scrollListenerMensajesAttached) return;
                scrollListenerMensajesAttached = true;

                chatMessages.addEventListener('scroll', function() {
                    if (chatMessages.scrollTop <= 80 && !isLoadingMensajes && !noMoreMensajes) {
                        cargarMensajesPaginado(currentPageMensajes + 1, true, true);
                    }
                });
            }

            function enviarMensaje() {
                const mensaje = chatInput.value.trim();
                
                if (!mensaje) {
                    console.warn('Mensaje vacío, no se envía');
                    return false;
                }

                // Ocultar indicador de escribiendo al enviar
                typingIndicator.classList.remove('active');
                detenerEscribiendo();

                console.log('Enviando mensaje:', mensaje, 'Tipo:', currentTipo);

                // Deshabilitar botón inmediatamente
                chatSendBtn.disabled = true;
                chatSendBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Enviando...';

                // Limpiar input inmediatamente
                const mensajeOriginal = mensaje;
                chatInput.value = '';
                chatInput.style.height = 'auto';

                // Crear mensaje temporal (optimistic update)
                const tempId = 'temp-' + Date.now();
                const tempMensaje = {
                    id_mensaje: tempId,
                    id_suscrito_remitente: idSuscrito,
                    mensaje: mensajeOriginal,
                    tiempo_transcurrido: 'Ahora',
                    remitente: {
                        id_suscrito: idSuscrito,
                        nombre_completo: '{{ $usuarioActual->nombre_completo ?? "Tú" }}',
                        imagen_url: '{{ $usuarioActual->imagen_url ?? asset("assets/img/aulavirtual/elipse1.png") }}'
                    },
                    created_at: new Date().toISOString()
                };

                // Agregar mensaje inmediatamente
                agregarMensaje(tempMensaje);
                scrollToBottom();

                const data = {
                    mensaje: mensajeOriginal,
                    tipo: currentTipo
                };

                if (currentTipo === 'privado' && currentDestinatario) {
                    data.id_destinatario = currentDestinatario;
                }

                console.log('Datos a enviar:', data);

                fetch('{{ url("/api/comunidad/chat/enviar") }}', {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify(data)
                })
                .then(response => {
                    console.log('Respuesta del servidor:', response.status);
                    if (!response.ok) {
                        return response.json().then(err => {
                            console.error('Error en respuesta:', err);
                            return Promise.reject(err);
                        });
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('✅ Mensaje guardado en BD:', data);
                    if (data.success && data.mensaje) {
                        // El mensaje temporal ya está mostrado, solo actualizar el ID con el real del servidor
                        const tempElement = document.getElementById(`mensaje-${tempId}`);
                        if (tempElement) {
                            // Actualizar el ID del mensaje temporal con el ID real del servidor
                            tempElement.id = `mensaje-${data.mensaje.id_mensaje}`;
                            console.log('✅ ID del mensaje actualizado de', tempId, 'a', data.mensaje.id_mensaje);
                            // El mensaje ya está visible, no necesitamos hacer nada más
                        } else {
                            // Si por alguna razón no existe el temporal, agregar el real
                            const mensajeReal = {
                                id_mensaje: data.mensaje.id_mensaje,
                                id_suscrito_remitente: data.mensaje.id_suscrito_remitente,
                                mensaje: data.mensaje.mensaje,
                                tiempo_transcurrido: data.mensaje.tiempo_transcurrido || 'Ahora',
                                remitente: data.mensaje.remitente,
                                created_at: data.mensaje.created_at
                            };
                            agregarMensaje(mensajeReal);
                            scrollToBottom();
                        }
                    } else {
                        throw new Error(data.error || 'Respuesta inválida del servidor');
                    }
                })
                .catch(error => {
                    console.error('Error completo al enviar mensaje:', error);
                    // Remover mensaje temporal en caso de error
                    const tempElement = document.getElementById(`mensaje-${tempId}`);
                    if (tempElement) {
                        tempElement.remove();
                    }
                    const errorMsg = error.error || error.message || error.errors || 'Error al enviar mensaje. Por favor, intenta de nuevo.';
                    alert(typeof errorMsg === 'string' ? errorMsg : JSON.stringify(errorMsg));
                    // Restaurar mensaje en el input
                    chatInput.value = mensajeOriginal;
                })
                .finally(() => {
                    chatSendBtn.disabled = false;
                    chatSendBtn.innerHTML = '<i class="fas fa-paper-plane"></i> Enviar';
                });

                return false;
            }

            function scrollToBottom() {
                chatMessages.scrollTop = chatMessages.scrollHeight;
            }

            function escapeHtml(text) {
                const div = document.createElement('div');
                div.textContent = text;
                return div.innerHTML;
            }

            function indicarEscribiendo() {
                const ahora = Date.now();
                if (ahora - ultimaEscritura < 1000) {
                    return;
                }
                ultimaEscritura = ahora;

                const data = {
                    tipo: currentTipo
                };

                if (currentTipo === 'privado' && currentDestinatario) {
                    data.id_destinatario = currentDestinatario;
                }

                fetch('{{ url("/api/comunidad/chat/escribiendo") }}', {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify(data)
                }).catch(error => console.error('Error al indicar escribiendo:', error));
            }

            function detenerEscribiendo() {
                clearTimeout(escribiendoTimeout);
            }

            // Función para mostrar el indicador de escribiendo (ahora desde WebSocket)
            function mostrarEscribiendo(usuarios) {
                if (usuarios && usuarios.length > 0) {
                    const nombres = usuarios.map(u => u.nombre_completo);
                    let texto = '';
                    
                    if (nombres.length === 1) {
                        texto = `${nombres[0]} está escribiendo...`;
                    } else if (nombres.length === 2) {
                        texto = `${nombres[0]} y ${nombres[1]} están escribiendo...`;
                    } else {
                        texto = `${nombres[0]} y ${nombres.length - 1} más están escribiendo...`;
                    }
                    
                    typingIndicator.textContent = texto;
                    typingIndicator.classList.add('active');
                    
                    // Ocultar después de 3 segundos si no hay más actualizaciones
                    clearTimeout(window.escribiendoTimeout);
                    window.escribiendoTimeout = setTimeout(() => {
                        typingIndicator.classList.remove('active');
                    }, 3000);
                } else {
                    typingIndicator.classList.remove('active');
                }
            }

            // Función para actualizar badge de un usuario específico (sin consulta al servidor)
            function actualizarBadgeUsuario(idRemitente, incrementar = true) {
                const badge = document.getElementById('unread-badge-' + idRemitente);
                const memberItem = document.getElementById('member-' + idRemitente);
                
                if (badge) {
                    let cantidadActual = parseInt(badge.textContent) || 0;
                    
                    if (incrementar) {
                        cantidadActual += 1;
                        badge.textContent = cantidadActual > 99 ? '99+' : cantidadActual;
                        badge.style.display = 'flex';
                        
                        if (memberItem) {
                            memberItem.classList.add('has-unread');
                        }
                        
                        // Incrementar el contador global de mensajes sin leer
                        if (typeof window.incrementarMensajesSinLeer === 'function') {
                            window.incrementarMensajesSinLeer();
                            console.log('🔔 Contador global incrementado por nuevo mensaje privado');
                        }
                    } else {
                        // Ocultar badge si se marca como leído
                        badge.style.display = 'none';
                        if (memberItem) {
                            memberItem.classList.remove('has-unread');
                        }
                        // 📝 NO decrementar aquí - se hace en marcarMensajesComoLeidos()
                    }
                } else if (incrementar && memberItem) {
                    // Si no existe el badge pero hay un mensaje nuevo, crearlo
                    const nuevoBadge = document.createElement('span');
                    nuevoBadge.className = 'unread-badge';
                    nuevoBadge.id = 'unread-badge-' + idRemitente;
                    nuevoBadge.textContent = '1';
                    nuevoBadge.style.display = 'flex';
                    memberItem.appendChild(nuevoBadge);
                    memberItem.classList.add('has-unread');
                    
                    // Incrementar el contador global de mensajes sin leer
                    if (typeof window.incrementarMensajesSinLeer === 'function') {
                        window.incrementarMensajesSinLeer();
                        console.log('🔔 Contador global incrementado (nuevo badge creado)');
                    }
                }
            }

            // Función para cargar mensajes no leídos
            function cargarMensajesNoLeidos() {
                fetch('{{ url("/api/comunidad/chat/mensajes-no-leidos") }}', {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    credentials: 'same-origin'
                })
                .then(response => response.json())
                .then(data => {
                    console.log('📬 Mensajes no leídos:', data);
                    
                    // Limpiar todos los badges primero
                    document.querySelectorAll('.unread-badge').forEach(badge => {
                        badge.style.display = 'none';
                    });
                    document.querySelectorAll('.member-item').forEach(item => {
                        item.classList.remove('has-unread');
                    });
                    
                    // Actualizar badges
                    Object.keys(data).forEach(idRemitente => {
                        const cantidad = data[idRemitente];
                        const badge = document.getElementById('unread-badge-' + idRemitente);
                        const memberItem = document.getElementById('member-' + idRemitente);
                        
                        if (badge && cantidad > 0) {
                            badge.textContent = cantidad > 99 ? '99+' : cantidad;
                            badge.style.display = 'flex';
                            
                            if (memberItem) {
                                memberItem.classList.add('has-unread');
                            }
                        }
                    });
                })
                .catch(error => {
                    console.error('❌ Error al cargar mensajes no leídos:', error);
                });
            }

            // Función para marcar mensajes como leídos
            function marcarMensajesComoLeidos(idRemitente) {
                if (!idRemitente) return;
                
                // Obtener la cantidad de mensajes sin leer ANTES de marcar como leído
                const badge = document.getElementById('unread-badge-' + idRemitente);
                const cantidadAntes = badge ? parseInt(badge.textContent) || 0 : 0;
                
                fetch('{{ url("/api/comunidad/chat/marcar-leidos") }}', {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    credentials: 'same-origin',
                    body: JSON.stringify({
                        id_remitente: idRemitente
                    })
                })
                .then(response => response.json())
                .then(data => {
                    console.log('✅ Mensajes marcados como leídos');
                    
                    // Decrementar el contador global por la cantidad de mensajes que se marcaron como leído
                    if (typeof window.decrementarMensajesSinLeer === 'function' && cantidadAntes > 0) {
                        for (let i = 0; i < cantidadAntes; i++) {
                            window.decrementarMensajesSinLeer();
                        }
                        console.log('🔔 Badge flotante decrementado en TIEMPO REAL por', cantidadAntes, 'mensajes');
                    }
                    
                    // Actualizar badge localmente sin consultar al servidor
                    actualizarBadgeUsuario(idRemitente, false);
                })
                .catch(error => {
                    console.error('❌ Error al marcar mensajes como leídos:', error);
                });
            }

            // Función para mantener al usuario activo
            function mantenerUsuarioActivo() {
                // Actualizar última conexión cada 30 segundos mientras está en el chat
                fetch('{{ url("/api/comunidad/chat/mantener-activo") }}', {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    credentials: 'same-origin'
                }).catch(error => {
                    console.error('Error al mantener usuario activo:', error);
                });
            }

            // Cargar mensajes no leídos solo al iniciar (una vez)
            cargarMensajesNoLeidos();
            
            // Mantener usuario activo al iniciar
            mantenerUsuarioActivo();
            
            // Mantener usuario activo cada 30 segundos
            setInterval(mantenerUsuarioActivo, 30000);
            
            // NO hacer polling - usar WebSocket para actualizaciones en tiempo real

            // Limpiar al salir
            window.addEventListener('beforeunload', function() {
                if (currentChannel) window.Echo.leave(currentChannel);
                detenerEscribiendo();
            });

            // Scroll automático al cargar
            setTimeout(scrollToBottom, 500);

            // Inicializar tab según el tipo de chat
            if (tipoChat === 'privado') {
                setTimeout(() => {
                    cambiarTab('privado');
                }, 200);
            }

            // Función para inicializar miembros
            function inicializarMiembros() {
                console.log('🔄 Inicializando miembros... (currentTipo:', currentTipo + ')');
                const members = document.querySelectorAll('.member-item-clickable');
                console.log('📋 Miembros encontrados:', members.length);
                
                if (members.length === 0) {
                    console.warn('⚠️ No hay miembros para inicializar');
                    const noMembers = document.getElementById('no-members');
                    if (noMembers && currentTipo === 'privado') {
                        noMembers.style.display = 'block';
                    }
                    return;
                }
                
                members.forEach((item, index) => {
                    // Remover todos los event listeners anteriores clonando
                    const newItem = item.cloneNode(true);
                    if (item.parentNode) {
                        item.parentNode.replaceChild(newItem, item);
                    }
                    
                    // Configurar el nuevo elemento
                    newItem.style.cursor = 'pointer';
                    
                    // IMPORTANTE: Respetar el display actual si ya está configurado
                    const shouldShow = currentTipo === 'privado';
                    newItem.style.display = shouldShow ? 'flex' : 'none';
                    
                    const idDest = newItem.getAttribute('data-id');
                    const nombre = newItem.getAttribute('data-nombre');
                    const imagen = newItem.getAttribute('data-imagen');
                    
                    console.log(`👤 Miembro ${index + 1}:`, { 
                        id: idDest, 
                        nombre: nombre,
                        display: newItem.style.display
                    });
                    
                    // Agregar event listener
                    newItem.addEventListener('click', function(e) {
                        e.preventDefault();
                        e.stopPropagation();
                        e.stopImmediatePropagation();
                        
                        console.log('🖱️ CLICK EN MIEMBRO:', { idDest, nombre, imagen });
                        
                        if (idDest && nombre) {
                            console.log('✅ Abriendo chat privado con:', nombre);
                            abrirChatPrivado(idDest, nombre, imagen);
                            cerrarSidebarEnMovil();
                        } else {
                            console.error('❌ Datos incompletos del miembro');
                        }
                    }, true); // Usar captura
                    
                    // También agregar hover para feedback visual
                    newItem.addEventListener('mouseenter', function() {
                        this.style.backgroundColor = '#f0f2f5';
                    });
                    newItem.addEventListener('mouseleave', function() {
                        if (!this.classList.contains('active')) {
                            this.style.backgroundColor = '';
                        }
                    });
                });
                
                console.log('✅ Todos los miembros inicializados correctamente');
            }

            // Inicializar miembros después de que el DOM esté completamente listo
            setTimeout(() => {
                inicializarMiembros();
            }, 300);
            
            // También inicializar cuando se carga completamente la página
            window.addEventListener('load', function() {
                setTimeout(() => {
                    inicializarMiembros();
                }, 200);
            });

            // Nota: cambiarTab ya incluye la re-inicialización de miembros en su definición

            // Hacer funciones disponibles globalmente
            window.cambiarTab = cambiarTab;
            window.abrirChatGlobal = abrirChatGlobal;
            window.abrirChatPrivado = abrirChatPrivado;
            window.cargarMensajesNoLeidos = cargarMensajesNoLeidos;
            
            console.log('✅ Chat inicializado correctamente');
            console.log('🔄 Tipo de chat inicial:', currentTipo);
            console.log('📱 Miembros cargados:', document.querySelectorAll('.member-item-clickable').length);
        });
    </script>
@endsection