<?php
require_once __DIR__ . '/includes/session_check.php';
require_once __DIR__ . '/includes/db.php';

// Solo para administradores
if ($_SESSION['role'] !== 'admin') {
    header('HTTP/1.0 403 Forbidden');
    die('Acceso denegado.');
}

// Obtener todos los usuarios de Telegram que han interactuado o son miembros de grupos
$stmt = $pdo->query(
    "SELECT DISTINCT r.platform_id, r.name
     FROM recipients r
     WHERE r.platform = 'telegram' AND r.type = 'user'
     ORDER BY r.name ASC"
);
$users = $stmt->fetchAll(PDO::FETCH_ASSOC);

require_once __DIR__ . '/templates/header.php';
?>

<style>
.chat-container {
    display: flex;
    height: calc(100vh - 200px); /* Ajustar altura */
}

/* Estilos para el selector de emojis */
.emoji-picker {
    position: fixed;
    width: 250px;
    max-height: 300px;
    overflow-y: auto;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 9999;
    display: none;
    flex-wrap: wrap;
    gap: 5px;
}

.emoji-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 1.5em;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    user-select: none;
}

.emoji-option:hover {
    background-color: #f8f9fa;
    transform: scale(1.2);
}

.emoji-option:active {
    transform: scale(0.95);
}

.input-group-prepend .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group-append .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#message-text {
    border-radius: 0;
}

.message-text {
    white-space: pre-wrap;
    word-wrap: break-word;
}
.user-list {
    border-right: 1px solid #dee2e6;
    overflow-y: auto;
}
.chat-history {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}
.message-form {
    padding: 1rem;
    border-top: 1px solid #dee2e6;
}
.message {
    max-width: 70%;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    margin-bottom: 0.5rem;
}
.message.in {
    background-color: #6495ED; /* Azul claro (CornflowerBlue) */
    color: white;
    align-self: flex-start;
}

.message.out {
    background-color: #6495ED; /* Azul claro (CornflowerBlue) */
    color: white;
    align-self: flex-end;
}

.user-list .list-group-item.active {
    background-color: #0d6efd;
    border-color: #0d6efd;
}
</style>

<div class="container-fluid">
    <h1 class="mt-4">Chat de Soporte de Telegram</h1>

    <div class="card shadow-sm">
        <div class="card-body p-0">
            <div class="chat-container">
                <!-- Columna de Usuarios -->
                <div class="col-md-4 col-lg-3 user-list">
                    <div class="list-group list-group-flush">
                        <?php foreach ($users as $user): ?>
                            <a href="#" class="list-group-item list-group-item-action" data-chat-id="<?= $user['platform_id'] ?>">
                                <?= htmlspecialchars($user['name']) ?>
                            </a>
                        <?php endforeach; ?>
                    </div>
                </div>

                <!-- Columna de Chat -->
                <div class="col-md-8 col-lg-9 d-flex flex-column">
                    <div id="chat-history" class="chat-history">
                        <div class="text-center text-muted my-auto">
                            <i class="bi bi-arrow-left-circle-fill fs-1"></i>
                            <p>Selecciona un usuario para ver la conversación.</p>
                        </div>
                    </div>
                    <div id="message-form-container" class="message-form" style="display: none;">
                        <form id="message-form">
                            <input type="hidden" id="chat-id-input" name="chat_id">
                            <div class="input-group" style="position: relative;">
                                <div class="input-group-prepend">
                                    <button type="button" id="emoji-trigger" class="btn btn-outline-secondary" onclick="toggleEmojiPicker()">
                                        <i class="bi bi-emoji-smile"></i>
                                    </button>
                                </div>
                                <input type="text" id="message-text" name="message" class="form-control" placeholder="Escribe tu respuesta..." required>
                                <div class="input-group-append">
                                    <button type="submit" class="btn btn-primary">Enviar</button>
                                </div>
                                
                                <!-- Selector de emojis simplificado -->
                                <div id="emoji-picker" style="
                                    display: none;
                                    position: absolute;
                                    bottom: 100%;
                                    left: 0;
                                    background: white;
                                    border: 1px solid #ddd;
                                    border-radius: 8px;
                                    padding: 10px;
                                    width: 250px;
                                    max-height: 200px;
                                    overflow-y: auto;
                                    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                                    z-index: 1000;">
                                    <div style="display: flex; flex-wrap: wrap; gap: 5px;">
                                        <span class="emoji-option" onclick="insertEmoji('😊')" style="cursor: pointer; font-size: 24px;">😊</span>
                                        <span class="emoji-option" onclick="insertEmoji('😂')" style="cursor: pointer; font-size: 24px;">😂</span>
                                        <span class="emoji-option" onclick="insertEmoji('😍')" style="cursor: pointer; font-size: 24px;">😍</span>
                                        <span class="emoji-option" onclick="insertEmoji('😎')" style="cursor: pointer; font-size: 24px;">😎</span>
                                        <span class="emoji-option" onclick="insertEmoji('😢')" style="cursor: pointer; font-size: 24px;">😢</span>
                                        <span class="emoji-option" onclick="insertEmoji('😡')" style="cursor: pointer; font-size: 24px;">😡</span>
                                        <span class="emoji-option" onclick="insertEmoji('😴')" style="cursor: pointer; font-size: 24px;">😴</span>
                                        <span class="emoji-option" onclick="insertEmoji('😷')" style="cursor: pointer; font-size: 24px;">😷</span>
                                        <span class="emoji-option" onclick="insertEmoji('🤔')" style="cursor: pointer; font-size: 24px;">🤔</span>
                                        <span class="emoji-option" onclick="insertEmoji('🤗')" style="cursor: pointer; font-size: 24px;">🤗</span>
                                        <span class="emoji-option" onclick="insertEmoji('👍')" style="cursor: pointer; font-size: 24px;">👍</span>
                                        <span class="emoji-option" onclick="insertEmoji('👎')" style="cursor: pointer; font-size: 24px;">👎</span>
                                        <span class="emoji-option" onclick="insertEmoji('👏')" style="cursor: pointer; font-size: 24px;">👏</span>
                                        <span class="emoji-option" onclick="insertEmoji('🙌')" style="cursor: pointer; font-size: 24px;">🙌</span>
                                        <span class="emoji-option" onclick="insertEmoji('🤝')" style="cursor: pointer; font-size: 24px;">🤝</span>
                                        <span class="emoji-option" onclick="insertEmoji('📱')" style="cursor: pointer; font-size: 24px;">📱</span>
                                        <span class="emoji-option" onclick="insertEmoji('💻')" style="cursor: pointer; font-size: 24px;">💻</span>
                                        <span class="emoji-option" onclick="insertEmoji('📷')" style="cursor: pointer; font-size: 24px;">📷</span>
                                        <span class="emoji-option" onclick="insertEmoji('🎮')" style="cursor: pointer; font-size: 24px;">🎮</span>
                                        <span class="emoji-option" onclick="insertEmoji('📚')" style="cursor: pointer; font-size: 24px;">📚</span>
                                    </div>
                                </div>
                            </div>
                            
                            <script>
                            // Función para mostrar/ocultar el selector de emojis
                            function toggleEmojiPicker() {
                                const picker = document.getElementById('emoji-picker');
                                if (picker.style.display === 'none' || !picker.style.display) {
                                    picker.style.display = 'block';
                                } else {
                                    picker.style.display = 'none';
                                }
                                return false;
                            }
                            
                            // Función para insertar un emoji en el campo de texto
                            function insertEmoji(emoji) {
                                const input = document.getElementById('message-text');
                                const start = input.selectionStart;
                                const end = input.selectionEnd;
                                const text = input.value;
                                input.value = text.substring(0, start) + emoji + text.substring(end);
                                input.focus();
                                input.setSelectionRange(start + emoji.length, start + emoji.length);
                                document.getElementById('emoji-picker').style.display = 'none';
                            }
                            
                            // Cerrar el selector al hacer clic fuera de él
                            document.addEventListener('click', function(e) {
                                const picker = document.getElementById('emoji-picker');
                                const trigger = document.getElementById('emoji-trigger');
                                if (picker && trigger && 
                                    e.target !== picker && !picker.contains(e.target) && 
                                    e.target !== trigger && !trigger.contains(e.target)) {
                                    picker.style.display = 'none';
                                }
                            });
                            </script>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<?php require_once __DIR__ . '/templates/footer.php'; ?>

<script>
// Función para insertar emojis en el campo de texto
function insertEmoji(emoji) {
    const input = document.getElementById('message-text');
    const start = input.selectionStart;
    const end = input.selectionEnd;
    const text = input.value;
    
    // Insertar el emoji en la posición del cursor
    input.value = text.substring(0, start) + emoji + text.substring(end);
    
    // Mover el cursor después del emoji insertado
    const newPos = start + emoji.length;
    input.selectionStart = input.selectionEnd = newPos;
    
    // Enfocar el campo de texto
    input.focus();
}

document.addEventListener('DOMContentLoaded', function() {
    const userLinks = document.querySelectorAll('.user-list .list-group-item');
    const chatHistory = document.getElementById('chat-history');
    const formContainer = document.getElementById('message-form-container');
    const messageForm = document.getElementById('message-form');
    const chatIdInput = document.getElementById('chat-id-input');
    const messageTextInput = document.getElementById('message-text');

    let activeChatId = null;
    let lastMessageId = 0;
    let refreshInterval = null;

    userLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();

            // Marcar usuario activo
            userLinks.forEach(l => l.classList.remove('active'));
            this.classList.add('active');

            // Detener el intervalo anterior si existe
            if (refreshInterval) {
                clearInterval(refreshInterval);
            }
            
            // Establecer el nuevo chat activo
            activeChatId = this.getAttribute('data-chat-id');
            chatIdInput.value = activeChatId;
            lastMessageId = 0; // Reiniciar el ID del último mensaje
            
            // Cargar el historial y comenzar a actualizar
            loadChatHistory(activeChatId);
            
                    // Iniciar la actualización automática con un intervalo dinámico
            let refreshDelay = 500; // Comenzar con 0.5 segundos
            
            function startRefreshTimer() {
                if (refreshInterval) clearInterval(refreshInterval);
                
                refreshInterval = setInterval(() => {
                    if (activeChatId && !document.hidden) {
                        checkForNewMessages(activeChatId);
                    }
                }, refreshDelay);
            }
            
            // Iniciar el temporizador
            startRefreshTimer();
        });
    });

    function loadChatHistory(chatId, onlyNew = false) {
        // Usar un timestamp para evitar caché del navegador
        const timestamp = new Date().getTime();
        const url = `get_chat_history.php?chat_id=${chatId}${onlyNew ? '&last_id=' + lastMessageId : ''}&_=${timestamp}`;
        
        if (!onlyNew) {
            chatHistory.innerHTML = '<div class="text-center text-muted my-auto"><div class="spinner-border" role="status"><span class="visually-hidden">Cargando...</span></div></div>';
            formContainer.style.display = 'block';
        }

        fetch(url)
            .then(response => response.json())
            .then(data => {
                console.log('Datos recibidos:', data); // Depuración
                
                if (onlyNew && (!data.history || data.history.length === 0)) {
                    return; // No hay mensajes nuevos
                }
                
                if (!onlyNew) {
                    chatHistory.innerHTML = '';
                }
                
                let hasNewMessages = false;
                
                if (data.success && data.history && data.history.length > 0) {
                    // Ordenar los mensajes por ID para asegurar el orden correcto
                    data.history.sort((a, b) => a.id - b.id);
                    
                    // Ordenar los mensajes por ID para asegurar el orden correcto
                    data.history.sort((a, b) => a.id - b);
                    
                    data.history.forEach(msg => {
                        // Solo agregar mensajes más recientes que el último mostrado
                        if (msg.id > lastMessageId || !onlyNew) {
                            const messageDiv = document.createElement('div');
                            messageDiv.classList.add('message', msg.direction);
                            // Usar innerHTML para permitir que el enlace de traducción se añada correctamente
                            messageDiv.innerHTML = `<div class="message-text">${msg.message_text.replace(/\n/g, '<br>')}</div>`;
                            
                            // Add translate link if needed
                            // For testing, always show for incoming messages
                            if (msg.direction === 'in') { // msg.language_code !== 'es' 
                                const translateLink = document.createElement('a');
                                translateLink.href = '#';
                                translateLink.textContent = ' (Traducir)';
                                translateLink.classList.add('translate-link');
                                translateLink.setAttribute('data-message-id', msg.id);
                                messageDiv.appendChild(translateLink);
                            }

                            // Agregar el mensaje al historial
                            chatHistory.appendChild(messageDiv);
                            
                            // Actualizar el ID del último mensaje
                            if (msg.id > lastMessageId) {
                                lastMessageId = msg.id;
                            }
                            
                            hasNewMessages = true;
                        }
                    });
                    
                    // Desplazarse al final solo si hay mensajes nuevos
                    if (hasNewMessages) {
                        chatHistory.scrollTop = chatHistory.scrollHeight;
                    }
                } else if (!onlyNew) {
                    chatHistory.innerHTML = '<div class="text-center text-muted my-auto">No hay mensajes en esta conversación.</div>';
                }
                
                // Si no es una actualización, desplazarse al final
                if (!onlyNew) {
                    chatHistory.scrollTop = chatHistory.scrollHeight;
                }
                
                // Actualizar lastMessageId si viene en la respuesta
                if (data.last_id && data.last_id > lastMessageId) {
                    lastMessageId = data.last_id;
                }
            })
            .catch(error => {
                if (!onlyNew) {
                    console.error('Error al cargar el historial:', error);
                    chatHistory.innerHTML = '<div class="text-center text-danger my-auto">Error al cargar el historial. Intenta recargar la página.</div>';
                }
            });
    }
    
    // Función para verificar mensajes nuevos
    function checkForNewMessages(chatId) {
        if (!document.hidden && chatId) {
            // Usar fetch con headers para evitar caché
            fetch(`get_chat_history.php?chat_id=${chatId}&last_id=${lastMessageId}&_=${new Date().getTime()}`, {
                headers: {
                    'Cache-Control': 'no-cache, no-store, must-revalidate',
                    'Pragma': 'no-cache',
                    'Expires': '0'
                }
            })
            .then(response => response.json())
            .then(data => {
                console.log('Datos recibidos en checkForNewMessages:', data); // Depuración
                
                if (data.success && data.history && data.history.length > 0) {
                    let hasNewMessages = false;
                    
                    // Ordenar los mensajes por ID para asegurar el orden correcto
                    data.history.sort((a, b) => a.id - b);
                    
                    data.history.forEach(msg => {
                        if (msg.id > lastMessageId) {
                            const messageDiv = document.createElement('div');
                            messageDiv.classList.add('message', msg.direction);
                            messageDiv.textContent = msg.message_text;
                            
                            chatHistory.appendChild(messageDiv);
                            
                            if (msg.id > lastMessageId) {
                                lastMessageId = msg.id;
                            }
                            
                            hasNewMessages = true;
                        }
                    });
                    
                    if (hasNewMessages) {
                        chatHistory.scrollTop = chatHistory.scrollHeight;
                        // Si hay mensajes nuevos, reiniciar el temporizador con el intervalo más corto
                        refreshDelay = 2000;
                        startRefreshTimer();
                    }
                }
                
                if (data.last_id && data.last_id > lastMessageId) {
                    lastMessageId = data.last_id;
                }
            })
            .catch(error => {
                console.error('Error al verificar mensajes nuevos:', error);
            });
        }
    }
    
    // Actualizar el chat cuando la pestaña vuelve a estar activa
    document.addEventListener('visibilitychange', function() {
        if (!document.hidden && activeChatId) {
            loadChatHistory(activeChatId);
        }
        
        // Inicializar el selector de emojis
        console.log('Inicializando selector de emojis...');
        let emojiPickerVisible = false;
        const emojiTrigger = document.getElementById('emoji-trigger');
        const emojiPicker = document.getElementById('emoji-picker');
        const messageTextInput = document.getElementById('message-text');
        
        console.log('Elementos del selector de emojis:', {
            emojiTrigger: emojiTrigger ? 'Encontrado' : 'No encontrado',
            emojiPicker: emojiPicker ? 'Encontrado' : 'No encontrado',
            messageTextInput: messageTextInput ? 'Encontrado' : 'No encontrado'
        });
        
        // Asegurarse de que el selector esté oculto inicialmente
        if (emojiPicker) {
            emojiPicker.style.display = 'none';
            emojiPicker.style.backgroundColor = '#fff';
            emojiPicker.style.border = '2px solid red';
            emojiPicker.innerHTML = '<div style="padding: 10px;">Selector de emojis</div>' + emojiPicker.innerHTML;
        }
        
        // Mostrar/ocultar selector de emojis
        if (emojiTrigger) {
            emojiTrigger.addEventListener('click', function(e) {
                console.log('Botón de emoji clickeado');
                e.preventDefault();
                e.stopPropagation();
                
                if (!emojiPicker) {
                    console.error('El selector de emojis no se encontró en el DOM');
                    return false;
                }
                
                if (emojiPickerVisible) {
                    console.log('Ocultando selector de emojis');
                    emojiPicker.style.display = 'none';
                } else {
                    console.log('Mostrando selector de emojis');
                    emojiPicker.style.display = 'block';
                    // Posicionar el selector debajo del botón
                    const rect = emojiTrigger.getBoundingClientRect();
                    emojiPicker.style.position = 'fixed';
                    emojiPicker.style.top = (rect.bottom + window.scrollY) + 'px';
                    emojiPicker.style.left = (rect.left + window.scrollX) + 'px';
                    emojiPicker.style.zIndex = '9999';
                    console.log('Posición del selector:', emojiPicker.style.top, emojiPicker.style.left);
                }
                
                emojiPickerVisible = !emojiPickerVisible;
                return false;
            });
        } else {
            console.error('No se pudo encontrar el botón de emoji');
        }

        // Cerrar el selector al hacer clic fuera
        document.addEventListener('click', function(e) {
            if (!emojiPicker || !emojiTrigger) return;
            
            const isClickInside = emojiPicker.contains(e.target) || emojiTrigger.contains(e.target);
            
            if (emojiPickerVisible && !isClickInside) {
                console.log('Clic fuera del selector, ocultando...');
                emojiPicker.style.display = 'none';
                emojiPickerVisible = false;
            }
        });
        
        // Manejar clics en emojis
        if (emojiPicker) {
            emojiPicker.addEventListener('click', function(e) {
                console.log('Clic en el selector de emojis');
                const emojiOption = e.target.closest('.emoji-option');
                if (emojiOption) {
                    const emojiChar = emojiOption.getAttribute('data-emoji');
                    console.log('Emoji seleccionado:', emojiChar);
                    if (emojiChar) {
                        insertEmoji(emojiChar);
                        emojiPicker.style.display = 'none';
                        emojiPickerVisible = false;
                    }
                }
            });
        }
    });

    // Evento para enviar mensaje
    messageForm.addEventListener('submit', function(e) {
        e.preventDefault();
        const messageText = messageTextInput.value.trim();
        if (!messageText) return;

        const formData = new FormData(this);

        // Optimistic UI update
        const messageDiv = document.createElement('div');
        messageDiv.className = `message out`;
        messageDiv.innerHTML = `
            <div class="message-text">${messageText.replace(/\n/g, '<br>')}</div>
            <div class="message-time">${new Date().toLocaleTimeString()}</div>
        `;
        chatHistory.appendChild(messageDiv);
        chatHistory.scrollTop = chatHistory.scrollHeight;

        messageTextInput.value = '';

        fetch('admin_send_message.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (!data.success) {
                alert('Error al enviar el mensaje: ' + data.error);
                // Opcional: eliminar el mensaje de la UI si falla
                chatHistory.removeChild(messageDiv);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error de red al enviar el mensaje.');
            chatHistory.removeChild(messageDiv);
        });
    });

    // Evento para traducir mensaje
    chatHistory.addEventListener('click', function(e) {
        if (e.target.classList.contains('translate-link')) {
            e.preventDefault();
            const messageId = e.target.getAttribute('data-message-id');
            const messageDiv = e.target.parentElement;

            fetch(`translate_message.php?message_id=${messageId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const translatedText = document.createElement('div');
                        translatedText.classList.add('translated-text');
                        translatedText.textContent = data.translated_text;
                        messageDiv.appendChild(translatedText);
                        e.target.remove(); // Remove the translate link
                    } else {
                        alert('Error al traducir el mensaje: ' + data.error);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Error de red al traducir el mensaje.');
                });
        }
    });
});
</script>
