// Variable para rastrear la longitud de los mensajes y saber si hay nuevos (para hacer auto-scroll)
var ultimoConteoMensajes = 0;
// Control para evitar scroll si el usuario está mirando hacia arriba
var usuarioHaciendoScroll = false;

function init() {
    // Al cargar la página, listamos los mensajes
    listarMensajes(true);

    // Evento para el envío del formulario
    $("#formularioChat").on("submit", function(e) {
        guardarMensaje(e);
    });

    // Detectar si el usuario está scrolleando hacia arriba
    $("#chat-box").on('scroll', function() {
        var div = $(this);
        // Si no está cerca del fondo, asumimos que está leyendo hacia arriba
        if (div.scrollTop() + div.innerHeight() < div[0].scrollHeight - 50) {
            usuarioHaciendoScroll = true;
        } else {
            usuarioHaciendoScroll = false;
        }
    });

    // Hacer polling cada 3 segundos (3000 ms) para nuevos mensajes
    setInterval(function() {
        listarMensajes(false);
    }, 3000);
}

function listarMensajes(forzarScroll) {
    $.ajax({
        url: '../ajax/chat.php?op=listar',
        type: "GET",
        dataType: "json",
        success: function(data) {
            var html = "";
            var conteoMensajes = data.length;

            data.forEach(function(msg) {
                if (msg.is_mine) {
                    // Mensaje propio (derecha)
                    html += '<div class="direct-chat-msg right">';
                    html += '   <div class="direct-chat-info clearfix">';
                    html += '       <span class="direct-chat-name pull-right">Yo (' + msg.nombre_usuario + ')</span>';
                    html += '       <span class="direct-chat-timestamp pull-left">' + msg.fecha_hora + '</span>';
                    html += '   </div>';
                    html += '   <img class="direct-chat-img" src="../public/dist/img/avatar5.png" alt="User Image">';
                    html += '   <div class="direct-chat-text">' + msg.mensaje + '</div>';
                    html += '</div>';
                } else {
                    // Mensaje de otro (izquierda)
                    html += '<div class="direct-chat-msg">';
                    html += '   <div class="direct-chat-info clearfix">';
                    html += '       <span class="direct-chat-name pull-left">' + msg.nombre_usuario + '</span>';
                    html += '       <span class="direct-chat-timestamp pull-right">' + msg.fecha_hora + '</span>';
                    html += '   </div>';
                    html += '   <img class="direct-chat-img" src="../public/dist/img/avatar04.png" alt="User Image">';
                    html += '   <div class="direct-chat-text">' + msg.mensaje + '</div>';
                    html += '</div>';
                }
            });

            $("#chat-box").html(html);

            // Si hay mensajes nuevos, o si es la primera carga (forzarScroll), o si no está mirando hacia arriba
            if (forzarScroll || (conteoMensajes > ultimoConteoMensajes && !usuarioHaciendoScroll)) {
                var d = $('#chat-box');
                d.scrollTop(d.prop("scrollHeight"));
            }

            ultimoConteoMensajes = conteoMensajes;
        },
        error: function(e) {
            console.log("Error al cargar chat: " + e.responseText);
        }
    });
}

function guardarMensaje(e) {
    e.preventDefault(); // Evita que se recargue la página
    var mensaje = $("#mensaje").val().trim();
    
    if (mensaje === "") return;

    $("#btnEnviar").prop("disabled", true);

    $.ajax({
        url: "../ajax/chat.php?op=guardar",
        type: "POST",
        data: { mensaje: mensaje },
        success: function(datos) {
            // Limpiar la caja de texto
            $("#mensaje").val("");
            // Refrescar inmediatamente el chat y forzar scroll
            listarMensajes(true);
            $("#btnEnviar").prop("disabled", false);
            $("#mensaje").focus();
        },
        error: function(e) {
            console.log("Error al enviar mensaje: " + e.responseText);
            $("#btnEnviar").prop("disabled", false);
        }
    });
}

init();
