<?php
session_start();

// Verificar autenticación
if (!isset($_SESSION['authenticated']) || $_SESSION['authenticated'] !== true) {
    // Permitir acceso en modo debug
    if (!isset($_GET['debug']) || $_GET['debug'] !== 'true') {
        header('Location: login.php');
        exit;
    }
}

$user_id = $_GET['user_id'] ?? '';
if (empty($user_id)) {
    die('ID de usuario requerido');
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat WhatsApp - Usuario</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <?php $asset_v = file_exists(__DIR__ . '/assets/css/styles.css') ? filemtime(__DIR__ . '/assets/css/styles.css') : time(); ?>
    <link href="assets/css/styles.css?v=<?php echo $asset_v; ?>" rel="stylesheet">
    <style>
        /* Más compacto: reducir la escala base y espacios para interfaces pequeñas */
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 0.88rem; /* más pequeño para toda la app */
        }
        
        .chat-container {
            background: white;
            border-radius: 10px;
            box-shadow: 0 6px 16px rgba(0,0,0,0.10);
            margin: 10px auto;
            max-width: 780px; /* ligeramente más estrecho */
            height: calc(100vh - 36px);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        
        .chat-header {
            background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
            color: white;
            padding: 8px 10px; /* aún más compacto */
            border-radius: 10px 10px 0 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        
        .chat-conversations {
            flex: 1;
            padding: 8px; /* menos padding para caber más */
            overflow-y: auto;
            background: #f8f9fa;
        }
        
        .chat-input {
            padding: 8px; /* compacto */
            background: white;
            border-radius: 0 0 10px 10px;
            border-top: 1px solid #eee;
        }
        
        .message-bubble {
            margin: 6px 0;
            padding: 6px 10px; /* menos padding */
            border-radius: 18px;
            max-width: 78%;
            word-wrap: break-word;
            font-size: 0.88rem;
            position: relative; /* para posicionar timestamp */
            padding-right: 60px; /* espacio para timestamp y ticks */
        }

        /* Estilos tipo WhatsApp: colas y timestamps dentro de burbuja */
        .message-bubble.message-outgoing {
            border-bottom-right-radius: 4px; /* más afilado en la esquina del tail */
        }
        .message-bubble.message-incoming {
            border-bottom-left-radius: 4px;
        }

        /* Cola simple usando pseudo-elemento */
        .message-bubble.message-outgoing::after {
            content: '';
            position: absolute;
            right: -6px;
            bottom: 4px;
            width: 12px;
            height: 12px;
            background: #DCF8C6;
            transform: rotate(45deg);
            border-bottom-right-radius: 2px;
            z-index: 0;
        }
        .message-bubble.message-incoming::after {
            content: '';
            position: absolute;
            left: -6px;
            bottom: 4px;
            width: 12px;
            height: 12px;
            background: #fff;
            transform: rotate(45deg);
            border-bottom-left-radius: 2px;
            z-index: 0;
            box-shadow: 0 1px 2px rgba(0,0,0,0.03);
        }

        /* Timestamp dentro de la burbuja, oculto hasta hover para limpieza visual */
        .message-bubble .message-time {
            position: absolute;
            right: 8px;
            bottom: 4px;
            font-size: 0.65rem;
            color: #666;
            opacity: 0;
            transition: opacity 0.12s ease-in-out;
            white-space: nowrap;
        }
        .message-bubble:hover .message-time,
        .message-bubble:focus-within .message-time {
            opacity: 1;
        }

        /* Agrupación de mensajes consecutivos (menor separación) */
        .message-bubble.grouped { margin-top: 2px; }
        .message-bubble.grouped + .message-bubble { margin-top: 2px; }
        .message-bubble.grouped::after { bottom: 2px; }
        .message-bubble.message-alert { padding-right: 60px; }
        
        /* Ajuste para que texto no choque con timestamp */
        .message-text { display: block; padding-right: 6px; }
        
        /* Estilos para mensajes multimedia */
        .message-bubble img {
            max-width: 220px; /* más pequeño */
            max-height: 280px;
            width: auto;
            height: auto;
            border-radius: 6px;
            cursor: pointer;
            display: block;
            margin: 4px 0;
        }
        
        .message-bubble video {
            max-width: 220px;
            max-height: 280px;
            border-radius: 6px;
            display: block;
            margin: 4px 0;
        }
        
        .message-bubble audio {
            width: 160px;
            height: 32px;
            margin: 4px 0;
            display: block;
        }
        
        .message-document {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: rgba(0,0,0,0.04);
            border-radius: 8px;
            text-decoration: none;
            color: inherit;
            margin: 4px 0;
        }
        
        .message-document:hover {
            background: rgba(0,0,0,0.08);
        }
        
        .message-document i {
            font-size: 1.25rem;
            color: #25D366;
        }
        
        .message-outgoing {
            background: #DCF8C6;
            margin-left: auto;
            border-bottom-right-radius: 4px;
        }
        
        .message-incoming {
            background: white;
            margin-right: auto;
            border-bottom-left-radius: 4px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.06);
        }
        
        .message-time {
            font-size: 0.7rem;
            color: #999;
            margin-top: 4px;
            text-align: right;
        }
        
        .message-incoming .message-time {
            text-align: left;
        }

        /* Preservar espacios y saltos de línea en el texto de mensajes */
        .message-text {
            white-space: pre-wrap; /* conserva saltos de línea y múltiples espacios */
            word-break: break-word;
            overflow-wrap: anywhere;
        }
        
        .typing-indicator {
            display: none;
            padding: 8px;
            font-style: italic;
            color: #666;
        }
        
        .input-group {
            border-radius: 20px;
            overflow: hidden;
        }
        
        .form-control {
            border: none;
            padding: 8px 14px;
            font-size: 0.88rem;
        }
        
        .btn-send {
            background: #25D366;
            border: none;
            color: white;
            padding: 10px 14px;
            border-radius: 0 20px 20px 0;
            font-size: 0.9rem;
        }
        
        .btn-send:hover {
            background: #128C7E;
            color: white;
        }
        
        .user-avatar {
            width: 28px; /* más pequeño */
            height: 28px;
            border-radius: 50%;
            background: #25D366;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 0.85rem;
        }
        
        .status-indicator {
            font-size: 0.65rem;
            opacity: 0.85;
        }

        /* Mensajes que requieren atención (asesor) */
        .message-alert {
            background: #fff7f7 !important;
            border-left: 4px solid #dc3545 !important;
            color: #6b0000;
        }

        .header-advisor-badge {
            display: inline-block;
            background: #dc3545;
            color: white;
            padding: 2px 6px;
            border-radius: 12px;
            font-size: 0.75rem;
            margin-left: 8px;
        }

        .conversation-attention {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: #dc3545;
            color: white;
            font-size: 0.9rem;
        }
        
        /* Estilos para multimedia */
        .attach-btn {
            background: transparent;
            border: none;
            color: #666;
            padding: 8px 10px;
            cursor: pointer;
            font-size: 1rem;
        }
        
        .attach-btn:hover {
            color: #25D366;
        }
        
        .media-preview {
            padding: 8px;
            background: #f0f0f0;
            border-radius: 8px;
            margin-bottom: 8px;
            display: none;
        }
        
        .media-preview.show {
            display: block;
            animation: slideDown 0.22s ease-out;
        }
        
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-8px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .media-preview-content {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .media-thumbnail {
            width: 48px;
            height: 48px;
            object-fit: cover;
            border-radius: 4px;
        }
        
        .media-info {
            flex: 1;
        }
        
        .media-filename {
            font-weight: 500;
            font-size: 0.85rem;
            color: #333;
        }
        
        .media-filesize {
            font-size: 0.75rem;
            color: #666;
        }
        
        .message-media {
            margin-top: 6px;
        }
        
        .message-media img,
        .message-media video {
            max-width: 100%;
            border-radius: 6px;
            margin-top: 4px;
        }
        
        .message-media audio {
            width: 100%;
            margin-top: 4px;
        }
        
        .message-document {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px;
            background: #f0f0f0;
            border-radius: 8px;
            margin-top: 5px;
            text-decoration: none;
            color: inherit;
        }
        
        .message-document:hover {
            background: #e0e0e0;
        }
        
        .message-document i {
            font-size: 1.25rem;
            color: #666;
        }
        
        .mic-btn {
            background: transparent;
            border: none;
            color: #666;
            padding: 8px 10px;
            cursor: pointer;
            font-size: 1rem;
        }
        
        .mic-btn:hover {
            color: #25D366;
        }
        
        .mic-btn.recording {
            color: #dc3545;
            animation: pulse 1s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        .recording-indicator {
            display: none;
            padding: 8px;
            background: #fff3cd;
            border-radius: 8px;
            margin-bottom: 8px;
            align-items: center;
            gap: 8px;
        }
        
        .recording-indicator.show {
            display: flex;
        }
        
        .recording-time {
            font-weight: 500;
            color: #dc3545;
            font-size: 0.85rem;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="chat-container">
            <!-- Header del chat -->
            <div class="chat-header">
                <div class="d-flex align-items-center">
                    <div class="user-avatar me-3" id="userAvatar">
                        <i class="fas fa-user"></i>
                    </div>
                    <div>
                        <h5 class="mb-0" id="userName">Cargando... <span id="advisorBadge" style="display:none;" class="header-advisor-badge">¡Atención!</span></h5>
                        <small class="status-indicator" id="userStatus">
                            <i class="fas fa-circle text-success"></i> En línea
                        </small>
                    </div> 
                </div>
                <div class="d-flex align-items-center">
                    <button id="attendBtn" class="btn btn-outline-light btn-sm me-2" onclick="toggleAttend()" title="Atender/Finalizar">
                        <i class="fas fa-user-check"></i> Atender
                    </button>
                    <small id="attendStatus" class="text-white me-3" style="font-size:0.9rem;"></small>
                    <button class="btn btn-outline-light btn-sm me-2" onclick="refreshChat()">
                        <i class="fas fa-sync-alt"></i>
                    </button>
                    <button class="btn btn-outline-light btn-sm" onclick="window.close()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            
            <!-- Mensajes del chat -->
            <div class="chat-conversations" id="chatconversations">
                <div class="d-flex justify-content-center">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Cargando mensajes...</span>
                    </div>
                </div>
            </div>
            
            <!-- Indicador de escritura -->
            <div class="typing-indicator" id="typingIndicator">
                <i class="fas fa-circle"></i>
                <i class="fas fa-circle"></i>
                <i class="fas fa-circle"></i>
                El usuario está escribiendo...
            </div>
            
            <!-- Input de mensaje -->
            <div class="chat-input">
                <div class="row mb-3">
                    <div class="col-md-4">
                        <select class="form-select" id="messageType">
                            <option value="text">Mensaje de texto</option>
                            <option value="template">Plantilla</option>
                        </select>
                    </div>
                    <div class="col-md-4" id="templateSelectContainer" style="display: none;">
                        <select class="form-select" id="templateSelect">
                            <option value="">Seleccionar plantilla...</option>
                        </select>
                    </div>
                </div>
                
                <!-- Indicador de grabación -->
                <div class="recording-indicator" id="recordingIndicator">
                    <i class="fas fa-microphone text-danger"></i>
                    <span>Grabando audio...</span>
                    <span class="recording-time" id="recordingTime">0:00</span>
                    <button type="button" class="btn btn-sm btn-success ms-auto" onclick="stopRecording()">
                        <i class="fas fa-stop"></i> Detener
                    </button>
                    <button type="button" class="btn btn-sm btn-danger" onclick="cancelRecording()">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                
                <!-- Preview de multimedia -->
                <div class="media-preview" id="mediaPreview">
                    <div class="media-preview-content">
                        <img id="mediaThumbnail" class="media-thumbnail" style="display: none;" />
                        <div class="media-info">
                            <div class="media-filename" id="mediaFilename"></div>
                            <div class="media-filesize" id="mediaFilesize"></div>
                        </div>
                        <button type="button" class="btn btn-sm btn-danger" onclick="cancelMediaUpload()">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <input type="text" class="form-control form-control-sm mt-2" id="mediaCaption" 
                           placeholder="Agregar caption (opcional)...">
                </div>

                <!-- Quick replies (Respuestas rápidas) -->
                <div id="quickRepliesContainer" style="display:none; margin-bottom:10px;">
                    <div class="d-flex flex-wrap" id="quickRepliesButtons" style="gap:8px;"></div>
                </div>
                
                <div class="input-group">
                    <input type="file" id="fileInput" style="display: none;" 
                           accept="image/*,video/*,audio/*,.pdf,.doc,.docx,.xls,.xlsx" />
                    <button type="button" class="attach-btn" id="attachBtn" title="Adjuntar archivo">
                        <i class="fas fa-paperclip"></i>
                    </button>
                    <button type="button" class="mic-btn" id="micBtn" title="Grabar audio">
                        <i class="fas fa-microphone"></i>
                    </button>
                    <input type="text" class="form-control" id="messageInput" 
                           placeholder="Escribe un mensaje..." 
                           onkeypress="handleEnterKey(event)">
                    <button class="btn btn-send" onclick="sendMessage()">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>

                <!-- Quick replies toggle -->
                <div class="mt-2 d-flex align-items-center">
                    <button class="btn btn-sm btn-outline-secondary" id="toggleQuickRepliesBtn" onclick="toggleQuickReplies()">
                        <i class="fas fa-bolt"></i> Respuestas rápidas
                    </button>
                    <small class="ms-2 text-muted">Usa respuestas automáticas rápidas</small>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- FFmpeg WASM for client-side audio conversion (webm -> ogg) -->
    <script src="https://unpkg.com/@ffmpeg/ffmpeg@0.11.8/dist/ffmpeg.min.js"></script>
    <script>
        // Variables globales
        const userId = <?php echo json_encode($user_id); ?>;
        let currentUser = null;
        let whatsappManager = null;
        
        // Manager para API calls
        class WhatsAppManager {
            constructor() {
                this.isInitialized = true;
            }
            
            async apiCall(endpoint, options = {}) {
                const defaultOptions = {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                };
                
                // Configurar método y cuerpo si es POST
                if (options.body) {
                    defaultOptions.method = 'POST';
                    defaultOptions.body = JSON.stringify(options.body);
                }
                
                // Combinar opciones correctamente
                const finalOptions = {
                    ...defaultOptions,
                    ...options,
                    headers: {
                        ...defaultOptions.headers,
                        ...(options.headers || {})
                    }
                };
                
                // Si había un body en options, asegurar que se serializa correctamente
                if (options.body && typeof options.body === 'object') {
                    finalOptions.body = JSON.stringify(options.body);
                }
                
                const url = endpoint.startsWith('http') ? endpoint : `api/${endpoint}`;
                const response = await fetch(url, finalOptions);
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                // Manejar respuestas que no contienen JSON válido
                try {
                    const text = await response.text();
                    if (!text || text.trim() === '') {
                        throw new Error('Empty response body');
                    }
                    return JSON.parse(text);
                } catch (err) {
                    // Incluir parte del cuerpo en el error para ayudar al diagnóstico (truncado)
                    console.error('apiCall parse error for', url, err);
                    const respText = await response.text().catch(() => '');
                    const snippet = (respText && respText.length > 0) ? respText.substr(0, 1000) : '<no body available>';
                    throw new Error('Invalid JSON response from ' + url + ': ' + err.message + ' -- response snippet: ' + snippet);
                }
            }
        }
        
        // Inicializar manager
        whatsappManager = new WhatsAppManager();

        // ===== FFmpeg in-browser conversion helpers =====
        let ffmpegInstance = null;
        let ffmpegLoaded = false;

        // Cargar script dinámicamente
        function loadScript(url) {
            return new Promise((resolve, reject) => {
                const s = document.createElement('script');
                s.src = url;
                s.onload = () => resolve();
                s.onerror = () => reject(new Error('Failed to load ' + url));
                document.head.appendChild(s);
            });
        }

        async function ensureFFmpeg() {
            if (ffmpegLoaded) return;

            if (typeof WebAssembly === 'undefined') {
                throw new Error('WebAssembly no está disponible en este navegador; no se puede convertir en cliente');
            }

            // Si FFmpeg no está presente, intentar cargar desde varios CDNs
            if (!window.FFmpeg || !window.FFmpeg.createFFmpeg) {
                const cdns = [
                    'https://cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg@0.11.8/dist/ffmpeg.min.js',
                    'https://unpkg.com/@ffmpeg/ffmpeg@0.11.8/dist/ffmpeg.min.js'
                ];
                let loaded = false;
                for (const url of cdns) {
                    try {
                        await loadScript(url);
                        if (window.FFmpeg && window.FFmpeg.createFFmpeg) {
                            loaded = true;
                            break;
                        }
                    } catch (e) {
                        console.warn('No se pudo cargar ffmpeg desde', url, e);
                    }
                }
                if (!loaded) {
                    throw new Error('No se pudo cargar ffmpeg.wasm desde los CDNs');
                }
            }

            const { createFFmpeg, fetchFile } = window.FFmpeg;
            ffmpegInstance = createFFmpeg({ log: true });

            showAlert('Cargando conversor de audio en navegador... (esto puede tardar varios segundos)', 'info');
            try {
                await ffmpegInstance.load();
                // attach helper
                ffmpegInstance._fetchFile = fetchFile;
                ffmpegLoaded = true;
            } catch (e) {
                console.error('FFmpeg load failed:', e);
                throw new Error('No se pudo inicializar ffmpeg en el navegador: ' + (e.message || e));
            }
        }

        async function convertWebmToOgg(file) {
            await ensureFFmpeg();
            const inName = 'input.webm';
            const outName = 'output.ogg';
            try {
                showAlert('Convirtiendo audio a OGG... puede tardar unos segundos', 'info');
                // fetchFile helper puede fallar en algunas builds; intentar con fetch si es necesario
                let data;
                if (ffmpegInstance._fetchFile) {
                    data = await ffmpegInstance._fetchFile(file);
                } else if (window.FFmpeg && window.FFmpeg.fetchFile) {
                    data = await window.FFmpeg.fetchFile(file);
                } else {
                    // fallback: leer como ArrayBuffer
                    data = new Uint8Array(await file.arrayBuffer());
                }

                ffmpegInstance.FS('writeFile', inName, data);
                await ffmpegInstance.run('-i', inName, '-c:a', 'libopus', '-b:a', '64k', outName);
                const outData = ffmpegInstance.FS('readFile', outName);
                const blob = new Blob([outData.buffer], { type: 'audio/ogg' });
                const newName = (file.name || 'audio').replace(/\.[^/.]+$/, '') + '.ogg';
                const outFile = new File([blob], newName, { type: 'audio/ogg' });
                return outFile;
            } catch (err) {
                console.error('Error converting to OGG (client):', err);
                throw err;
            }
        }
        
        // Función para escapar HTML
        function escapeHtml(text) {
            if (!text) return '';
            const map = {
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#039;'
            };
            return text.toString().replace(/[&<>"']/g, function(m) { return map[m]; });
        }

        // Helper: validar que una URL de media sea útil (no null/undefined/empty)
        function isValidMediaUrl(u) {
            return (typeof u === 'string') && u.trim() !== '' && u !== 'null' && u !== 'undefined';
        }

        // Helper: mapear URLs externas a proxy seguro cuando sea necesario
        function ensureProxyUrl(u, download = false) {
            if (!isValidMediaUrl(u)) return '';
            // Si ya es una URL interna o una ruta proxy, devolverla tal cual
            if (u.startsWith('/') || u.indexOf('/api/version/media-url.php') === 0) return u;
            try {
                const parsed = new URL(u);
                const host = parsed.host.toLowerCase();
                // Si es Facebook lookaside / graph, preferir proxy para añadir Authorization
                if (host.includes('lookaside.fbsbx.com') || host.includes('facebook.com') || host.includes('graph.facebook.com')) {
                    return `/api/version/media-url.php?url=${encodeURIComponent(u)}${download ? '&download=1' : ''}`;
                }
            } catch (e) {
                // Si no es URL absoluta, devolver tal cual
            }
            return u;
        }
        
        // Cargar datos del usuario y mensajes
        async function loadUserData() {
            try {
                const response = await whatsappManager.apiCall(`get_conversation_detail.php?user_id=${userId}`);
                
                if (response && response.success) {
                    currentUser = response.user;
                    
                    // Actualizar header
                    const displayName = currentUser.name || 'Usuario';
                    const phoneNumber = currentUser.phone_number || '';
                    document.getElementById('userName').innerHTML = `
                        <span id="userNameText">${escapeHtml(displayName)}</span>
                        <button id="editNameBtn" class="btn btn-sm btn-light ms-2" onclick="editUserName()" title="Editar nombre">
                            <i class="fas fa-edit"></i>
                        </button>
                        ${phoneNumber ? `<br><small class="opacity-75">${escapeHtml(phoneNumber)}</small>` : ''}
                        <div id="editNameContainer" style="display:none; margin-top:6px;">
                            <input id="editNameInput" class="form-control form-control-sm" type="text" value="${escapeHtml(displayName)}" style="display:inline-block; width:70%;">
                            <button id="saveNameBtn" class="btn btn-sm btn-success ms-2" onclick="saveUserName()">Guardar</button>
                            <button id="cancelNameBtn" class="btn btn-sm btn-secondary ms-1" onclick="cancelEditUserName()">Cancelar</button>
                        </div>
                    `;
                    document.getElementById('userAvatar').innerHTML = 
                        `<span>${(currentUser.name || 'U').charAt(0).toUpperCase()}</span>`;
                    
                    // Mostrar badge de atención si existe
                    try {
                        const advisorBadge = document.getElementById('advisorBadge');
                        if (advisorBadge) {
                            advisorBadge.style.display = currentUser.advisor_requested ? 'inline-block' : 'none';
                        }
                    } catch (e) {
                        // ignore
                    }

                    // Estado de atención
                    renderAttendControls();
                    
                    // Cargar mensajes
                    displayconversations(response.conversations);
                    
                    // Cargar plantillas
                    loadTemplates();

                    // Cargar respuestas rápidas (quick replies)
                    loadQuickReplies();
                    
                } else {
                    showError('Error cargando datos del usuario');
                }
            } catch (error) {
                console.error('Error:', error);
                showError('Error cargando conversación: ' + error.message);
            }
        }
        
        // Mostrar mensajes
        function displayconversations(conversations) {
            const chatconversations = document.getElementById('chatconversations');
            
            if (!conversations || conversations.length === 0) {
                chatconversations.innerHTML = `
                    <div class="text-center text-muted py-5">
                        <i class="fas fa-comments fa-3x mb-3"></i>
                        <br>No hay mensajes en esta conversación
                        <br><small>Envía el primer mensaje para comenzar</small>
                    </div>
                `;
                return;
            }
            
            let html = '';
            for (let i = 0; i < conversations.length; i++) {
                const msg = conversations[i];
                const prev = conversations[i-1] || null;
                const isOutgoing = msg.direction === 'outgoing';
                let messageClass = isOutgoing ? 'message-outgoing' : 'message-incoming';
                // Agrupar si el mensaje anterior es del mismo lado y está cerca en el tiempo (5 min)
                try {
                    if (prev && prev.direction === msg.direction) {
                        const t1 = new Date(prev.created_at).getTime();
                        const t2 = new Date(msg.created_at).getTime();
                        if (!isNaN(t1) && !isNaN(t2) && (Math.abs(t2 - t1) <= (5 * 60 * 1000))) {
                            messageClass += ' grouped';
                        }
                    }
                } catch (e) {
                    // ignore parsing errors
                }
                
                // Debug: ver todos los datos del mensaje (prioriza media_url_external y valida URLs)
                const has_media_external = isValidMediaUrl(msg.media_url_external);
                const effective_media = isValidMediaUrl(msg.media_url_external) ? msg.media_url_external : (isValidMediaUrl(msg.local_file) ? msg.local_file : (isValidMediaUrl(msg.local_thumb) ? msg.local_thumb : (isValidMediaUrl(msg.media_url) ? msg.media_url : '')));
                console.log('Procesando mensaje:', {
                    id: msg.id,
                    type: msg.message_type,
                    has_media_external: has_media_external,
                    effective_media: effective_media,
                    content: msg.content
                });
                
                // Verificar si es multimedia (validando principalmente media_url_external o archivos locales)
                let contentHtml = '';
                const hasMediaUrl = isValidMediaUrl(msg.media_url_external) || isValidMediaUrl(msg.local_file) || isValidMediaUrl(msg.local_thumb);
                const isMultimedia = hasMediaUrl && msg.message_type && msg.message_type !== 'text';
                
                if (isMultimedia) {
                    console.log('→ Renderizando como multimedia:', msg.message_type);
                    // Mensaje multimedia
                    // Declarar variables de media aquí para evitar TDZ (referencias en otros `case`)
                    let thumbUrl = '';
                    let fullUrl = '';
                    switch (msg.message_type) {
                        case 'image':
                            // Determinar miniatura y URL completa (prioriza media_url_external o archivos locales)
                            thumbUrl = '';
                            if (isValidMediaUrl(msg.local_thumb)) {
                                thumbUrl = `/${msg.local_thumb}`;
                            } else if (isValidMediaUrl(msg.local_file)) {
                                thumbUrl = `/${msg.local_file}`;
                            } else if (isValidMediaUrl(msg.effective_media) || isValidMediaUrl(msg.media_url_external)) {
                                // Priorizar effective_media si existe; usar proxy para Facebook/lookaside
                                const external = isValidMediaUrl(msg.effective_media) ? msg.effective_media : msg.media_url_external;
                                if (/lookaside\.fbsbx\.com|graph\.facebook\.com|facebook\.com/i.test(external)) {
                                    const midMatch = external.match(/[?&]mid=([^&]+)/i);
                                    if (midMatch && midMatch[1]) {
                                        const mid = decodeURIComponent(midMatch[1]);
                                        thumbUrl = `/api/version/media-url.php?id=${encodeURIComponent(mid)}`;
                                    } else {
                                        thumbUrl = `/api/version/media-url.php?url=${encodeURIComponent(external)}`;
                                    }
                                } else {
                                    thumbUrl = external;
                                }
                            } else if (isValidMediaUrl(msg.media_url)) {
                                thumbUrl = msg.media_url;
                            }

                            fullUrl = '';
                            if (isValidMediaUrl(msg.local_file)) {
                                fullUrl = `/api/version/media-url.php?local=${encodeURIComponent(msg.local_file)}`;
                            } else if (isValidMediaUrl(msg.media_url_external)) {
                                // Si la URL externa contiene un media id (api/get_media.php?id=... o mid=...), usar id para consultar Graph API
                                const external = msg.media_url_external;
                                let mid = '';

                                if (external.indexOf('api/get_media.php?id=') !== -1) {
                                    const parts = external.split('id=');
                                    mid = parts[1] ? decodeURIComponent(parts[1]) : '';
                                } else {
                                    // Buscar parámetro mid en la query string (ej: ?mid=12345&...)
                                    const m = external.match(/[?&]mid=([^&]+)/i);
                                    if (m && m[1]) {
                                        mid = decodeURIComponent(m[1]);
                                    }
                                }

                                if (mid) {
                                    fullUrl = `/api/version/media-url.php?id=${encodeURIComponent(mid)}`;
                                } else if (/^https?:\/\//i.test(external)) {
                                    fullUrl = `/api/version/media-url.php?url=${encodeURIComponent(external)}`;
                                } else {
                                    fullUrl = `/api/version/media-url.php?url=${encodeURIComponent(external)}`;
                                }
                            } else {
                                // No usar msg.media_url como fuente principal para apertura; dejar vacío para forzar 'no disponible'
                                fullUrl = '';
                            }

                            if (isValidMediaUrl(fullUrl)) {
                                // Usar data-fullurl y dataset para evitar problemas de escapado en el onclick
                                contentHtml = `
                                    <a href="#" data-fullurl="${escapeHtml(fullUrl)}" onclick="openImageModal(this.dataset.fullurl); return false;" title="Abrir imagen">
                                        <img src="${escapeHtml(thumbUrl || fullUrl)}" alt="Imagen" class="message-media-image">
                                    </a>`;
                            } else if (isValidMediaUrl(thumbUrl)) {
                                // Mostrar solo la miniatura si no hay URL externa/local para abrir
                                contentHtml = `<img src="${escapeHtml(thumbUrl)}" alt="Imagen" class="message-media-image">`;
                            } else {
                                // No hay media disponible
                                contentHtml = `<div class="text-muted"><em>Imagen no disponible</em></div>`;
                            }
                            break;
                        case 'video':
                            // Determinar mejor fuente de media
                            let mediaSrcVid = isValidMediaUrl(fullUrl) ? fullUrl : (isValidMediaUrl(thumbUrl) ? thumbUrl : (isValidMediaUrl(msg.media_url) ? msg.media_url : (isValidMediaUrl(msg.media_url_external) ? msg.media_url_external : '')));
                            // Mapear a proxy si es necesario (Facebook/media protegida)
                            if (isValidMediaUrl(mediaSrcVid)) {
                                mediaSrcVid = ensureProxyUrl(mediaSrcVid);
                            }
                            console.debug('video media src:', mediaSrcVid, 'fullUrl:', fullUrl, 'thumbUrl:', thumbUrl, 'msg.media_url:', msg.media_url, 'msg.media_url_external:', msg.media_url_external);
                            if (isValidMediaUrl(mediaSrcVid)) {
                                contentHtml = `<video controls class="message-media-video">
                                    <source src="${escapeHtml(mediaSrcVid)}" type="video/mp4">
                                    Tu navegador no soporta video HTML5.
                                </video>`;
                            } else {
                                contentHtml = `<div class="text-muted"><em>Video no disponible</em></div>`;
                            }
                            break;
                        case 'audio':
                            // Determinar mejor fuente de media para audio
                            let mediaSrcAudio = isValidMediaUrl(fullUrl) ? fullUrl : (isValidMediaUrl(thumbUrl) ? thumbUrl : (isValidMediaUrl(msg.media_url) ? msg.media_url : (isValidMediaUrl(msg.media_url_external) ? msg.media_url_external : '')));
                            // Mapear a proxy si es necesario (Facebook/media protegida)
                            if (isValidMediaUrl(mediaSrcAudio)) {
                                mediaSrcAudio = ensureProxyUrl(mediaSrcAudio);
                            }
                            if (isValidMediaUrl(mediaSrcAudio)) {
                                contentHtml = `<audio controls class="message-media-audio">
                                    <source src="${escapeHtml(mediaSrcAudio)}" type="audio/webm">
                                    <source src="${escapeHtml(mediaSrcAudio)}" type="audio/mpeg">
                                    <source src="${escapeHtml(mediaSrcAudio)}" type="audio/ogg">
                                    Tu navegador no soporta audio HTML5.
                                </audio>`;
                                console.debug('audio media src:', mediaSrcAudio, 'effective_media:', msg.effective_media, 'media_url_external:', msg.media_url_external, 'local_file:', msg.local_file);
                                // Añadir enlace de descarga seguro / proxy si es posible
                                let audioDownload = null;
                                let candidate = isValidMediaUrl(msg.effective_media) ? msg.effective_media : (isValidMediaUrl(msg.media_url_external) ? msg.media_url_external : (isValidMediaUrl(msg.local_file) ? msg.local_file : null));
                                if (candidate && candidate.indexOf && candidate.indexOf('api/get_media.php?id=') !== -1) {
                                    const parts = candidate.split('id=');
                                    const mid = parts[1] ? decodeURIComponent(parts[1]) : '';
                                    audioDownload = `/api/version/media-url.php?id=${encodeURIComponent(mid)}&download=1`;
                                } else if (candidate && /^https?:\/\//i.test(candidate)) {
                                    audioDownload = `/api/version/media-url.php?url=${encodeURIComponent(candidate)}&download=1`;
                                } else if (candidate && candidate === msg.local_file) {
                                    audioDownload = `/api/version/media-url.php?local=${encodeURIComponent(candidate)}&download=1`;
                                }
                                if (audioDownload) {
                                    contentHtml += `<div class="mt-2"><a href="${audioDownload}" class="btn btn-sm btn-outline-secondary" target="_blank" rel="noopener noreferrer">Descargar audio</a></div>`;
                                }
                            } else {
                                contentHtml = `<div class="text-muted"><em>Audio no disponible</em></div>`;
                            }
                            break;
                        case 'document':
                            const filename = msg.filename || msg.content || 'Documento';
                            const fileIcon = getFileIcon(filename);
                            // Construir URL de descarga usando effective_media o archivo local (validar fuentes)
                            let docSource = isValidMediaUrl(msg.effective_media) ? msg.effective_media : (isValidMediaUrl(msg.media_url_external) ? msg.media_url_external : (isValidMediaUrl(msg.local_file) ? msg.local_file : null));
                            let docUrl = null;
                            if (docSource && docSource.indexOf && docSource.indexOf('api/get_media.php?id=') !== -1) {
                                const parts = docSource.split('id=');
                                const mid = parts[1] ? decodeURIComponent(parts[1]) : '';
                                docUrl = `/api/version/media-url.php?id=${encodeURIComponent(mid)}&download=1`;
                            } else if (docSource && /^https?:\/\//i.test(docSource)) {
                                docUrl = `/api/version/media-url.php?url=${encodeURIComponent(docSource)}&download=1`;
                            } else if (docSource && docSource === msg.local_file) {
                                docUrl = `/api/version/media-url.php?local=${encodeURIComponent(docSource)}&download=1`;
                            }

                            if (docUrl) {
                                contentHtml = `<a href="${docUrl}" class="message-document" rel="noopener noreferrer" target="_blank">
                                    <i class="${fileIcon}"></i>
                                    <span>${escapeHtml(filename)}</span>
                                </a>`;
                            } else {
                                // Mostrar estado no disponible en vez de enlace vacío
                                contentHtml = `<div class="message-document" style="opacity:0.6;">
                                    <i class="${fileIcon}"></i>
                                    <span>${escapeHtml(filename)} (No disponible)</span>
                                </div>`;
                            }
                            break;
                        default:
                            console.warn('Tipo multimedia desconocido:', msg.message_type);
                            contentHtml = `<a href="${msg.media_url}" target="_blank" class="message-document">
                                <i class="fas fa-file"></i>
                                <span>${escapeHtml(msg.content || 'Archivo adjunto')}</span>
                            </a>`;
                    }
                    
                    if (msg.caption) {
                        contentHtml += `<div style="margin-top: 5px;">${escapeHtml(msg.caption)}</div>`;
                    }
                } else {
                    // Mensaje de texto normal
                    // Detectar mensajes 'system' embebidos en content (JSON)
                    let alertInfo = null;
                    try {
                        const parsed = JSON.parse(msg.content || '');
                        if (parsed && parsed.system) {
                            alertInfo = parsed;
                        }
                    } catch (e) {
                        // No es JSON, seguir
                    }

                    if (alertInfo) {
                        contentHtml = `<div class="message-text fw-bold">${escapeHtml(alertInfo.text || '[Atención]')}</div>`;
                        // Añadir clase especial a la burbuja
                        // marca el mensaje como requiring attention mediante messageClass
                        // we'll append an additional class later
                        messageClass += ' message-alert';
                    } else {
                        const textContent = msg.content || '';
                        contentHtml = textContent ? `<div class="message-text">${escapeHtml(textContent)}</div>` : '<em>Sin contenido</em>';
                    }
                }
                
                const messageTime = escapeHtml(msg.time || '');

                // Status ticks (solo en salientes)
                let statusHtml = '';
                if (isOutgoing) {
                    const s = (msg.status || '').toLowerCase();
                    if (s === 'read' || s === 'seen') {
                        statusHtml = '<i class="fas fa-check-double text-primary" title="Leído"></i>';
                    } else if (s === 'delivered') {
                        statusHtml = '<i class="fas fa-check-double text-muted" title="Entregado"></i>';
                    } else if (s === 'sent') {
                        statusHtml = '<i class="fas fa-check text-muted" title="Enviado"></i>';
                    } else {
                        statusHtml = '';
                    }
                }

                html += `
                    <div class="d-flex ${isOutgoing ? 'justify-content-end' : 'justify-content-start'}">
                        <div class="message-bubble ${messageClass}">
                            <div class="message-content">${contentHtml}</div>
                            <div class="message-time">
                                ${messageTime} ${statusHtml}
                            </div>
                        </div>
                    </div>
                `;
            }
            
            chatconversations.innerHTML = html;
            scrollToBottom();
        }
        
        // Cargar plantillas
        async function loadTemplates() {
            try {
            const response = await whatsappManager.apiCall('check_templates.php');
            const templateSelect = document.getElementById('templateSelect');

            if (response && response.templates) {
                templateSelect.innerHTML = '<option value="">Seleccionar plantilla...</option>';

                response.templates.forEach(template => {
                // Esperamos que la API devuelva "language_code" (fallback a en_US)
                const lang = template.language_code || template.language || 'en_US';
                const display = template.display_name || template.name;
                const option = document.createElement('option');
                option.value = template.name;
                option.textContent = `${display} (${lang})`;
                option.dataset.language = lang;
                option.dataset.templateId = template.id || '';
                templateSelect.appendChild(option);
                });

                // Valor por defecto global para la plantilla seleccionada
                window.language = 'en_US';
                window.currentTemplateId = null;

                // Actualizar el language global cuando cambie la plantilla seleccionada
                templateSelect.addEventListener('change', function() {
                const sel = this.selectedOptions[0];
                window.language = sel && sel.dataset && sel.dataset.language ? sel.dataset.language : 'en_US';
                window.currentTemplateId = sel && sel.dataset && sel.dataset.templateId ? sel.dataset.templateId : null;
                });

                // Si hay una plantilla seleccionada por defecto, establecer language acorde
                if (templateSelect.selectedOptions.length && templateSelect.selectedOptions[0].dataset.language) {
                window.language = templateSelect.selectedOptions[0].dataset.language;
                window.currentTemplateId = templateSelect.selectedOptions[0].dataset.templateId;
                }
            }
            } catch (error) {
            console.error('Error cargando plantillas:', error);
            }
        }
        
        // Enviar mensaje
        async function sendMessage() {
            // Si hay un archivo seleccionado, enviar multimedia
            if (selectedFile) {
                await sendMediaMessage();
                return;
            }
            
            const messageType = document.getElementById('messageType').value;
            const messageInput = document.getElementById('messageInput');
            const message = messageInput.value.trim();
            
            if (!message && messageType === 'text') {
                alert('Por favor escribe un mensaje');
                return;
            }
            
            if (messageType === 'template') {
                const templateSelect = document.getElementById('templateSelect');
                const template = templateSelect.value;
                
                if (!template) {
                    alert('Por favor selecciona una plantilla');
                    return;
                }
                
                // Verificar si la plantilla tiene variables
                if (window.currentTemplateId) {
                    await checkTemplateVariables(window.currentTemplateId, template, language);
                } else {
                    // Plantilla sin variables, enviar directo
                    await sendTemplateMessage(template, language, message);
                }
            } else {
                await sendTextMessage(message);
            }
            
            messageInput.value = '';
        }
        
        // Enviar mensaje de texto
        async function sendTextMessage(message) {
            try {
                showTyping();
                
                console.log('Enviando mensaje de texto:', {
                    message,
                    user: currentUser
                });
                
                const requestBody = {
                    recipient: currentUser.phone_number,
                    type: 'text',
                    message: message
                };
                
                console.log('Request body:', requestBody);
                
                const response = await whatsappManager.apiCall('send_message.php', {
                    body: requestBody
                });
                
                console.log('Response:', response);
                
                hideTyping();
                
                if (response && response.success) {
                    // Agregar mensaje a la vista inmediatamente
                    addMessageToView(message, 'outgoing');
                    showAlert('Mensaje enviado correctamente', 'success');
                } else {
                    throw new Error(response.error || 'Error enviando mensaje');
                }
            } catch (error) {
                hideTyping();
                console.error('Error enviando mensaje:', error);
                showAlert('Error enviando mensaje: ' + error.message, 'danger');
            }
        }
        
        // Enviar mensaje de plantilla
        async function sendTemplateMessage(template, language, parameters) {
            try {
                showTyping();
                
                console.log('Enviando plantilla:', {
                    template,
                    language,
                    parameters,
                    user: currentUser
                });
                
                // Preparar parámetros según el formato
                let paramArray = [];
                if (Array.isArray(parameters)) {
                    paramArray = parameters;
                } else if (typeof parameters === 'string' && parameters) {
                    paramArray = parameters.split(',').map(p => p.trim());
                } else {
                    paramArray = [];
                }
                
                const requestBody = {
                    recipient: currentUser.phone_number,
                    type: 'template',
                    template: template,
                    language: language || 'en_US',
                    parameters: paramArray
                };
                
                console.log('Request body:', requestBody);
                
                const response = await whatsappManager.apiCall('send_message.php', {
                    body: requestBody
                });
                
                console.log('Response:', response);
                
                hideTyping();
                
                if (response && response.success) {
                    const displayMsg = paramArray.length > 0 ? 
                        `Plantilla: ${template} (con ${paramArray.length} variable(s))` : 
                        `Plantilla: ${template}`;
                    addMessageToView(displayMsg, 'outgoing');
                    showAlert('Mensaje de plantilla enviado correctamente', 'success');
                } else {
                    throw new Error(response.error || 'Error enviando plantilla');
                }
            } catch (error) {
                hideTyping();
                console.error('Error enviando plantilla:', error);
                showAlert('Error enviando plantilla: ' + error.message, 'danger');
            }
        }
        
        // Agregar mensaje a la vista
        function addMessageToView(message, direction) {
            const chatconversations = document.getElementById('chatconversations');
            const isOutgoing = direction === 'outgoing';
            const messageClass = isOutgoing ? 'message-outgoing' : 'message-incoming';
            const now = new Date().toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit' });
            
            const messageHtml = `
                <div class="d-flex ${isOutgoing ? 'justify-content-end' : 'justify-content-start'}">
                    <div class="message-bubble ${messageClass}">
                        <div class="message-content"><div class="message-text">${escapeHtml(message)}</div></div>
                        <div class="message-time">
                            ${now} ${isOutgoing ? '<i class="fas fa-check text-muted"></i>' : ''}
                        </div>
                    </div>
                </div>
            `; 
            
            chatconversations.insertAdjacentHTML('beforeend', messageHtml);
            scrollToBottom();
        }
        
        // Mostrar indicador de escritura
        function showTyping() {
            document.getElementById('typingIndicator').style.display = 'block';
        }
        
        function hideTyping() {
            document.getElementById('typingIndicator').style.display = 'none';
        }
        
        // Scroll al final
        function scrollToBottom() {
            const chatconversations = document.getElementById('chatconversations');
            chatconversations.scrollTop = chatconversations.scrollHeight;
        }
        
        // Refrescar chat
        async function refreshChat() {
            await loadUserData();
        }
        
        // Manejar Enter para enviar
        function handleEnterKey(event) {
            if (event.key === 'Enter') {
                sendMessage();
            }
        }
        
        // Mostrar/ocultar selector de plantillas
        document.getElementById('messageType').addEventListener('change', function() {
            const templateContainer = document.getElementById('templateSelectContainer');
            if (this.value === 'template') {
                templateContainer.style.display = 'block';
            } else {
                templateContainer.style.display = 'none';
            }
        });
        
        // Mostrar alertas
        function showAlert(message, type = 'info') {
            const alertHtml = `
                <div class="alert alert-${type} alert-dismissible fade show position-fixed" 
                     style="top: 20px; right: 20px; z-index: 9999;" role="alert">
                    ${message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            `;
            
            document.body.insertAdjacentHTML('beforeend', alertHtml);
            
            setTimeout(() => {
                const alert = document.querySelector('.alert');
                if (alert) {
                    alert.remove();
                }
            }, 5000);
        }

        // ===== Quick replies (Respuestas rápidas) =====
        async function loadQuickReplies() {
            try {
                const resp = await whatsappManager.apiCall('get_autoresponses.php');
                const container = document.getElementById('quickRepliesButtons');
                const wrapper = document.getElementById('quickRepliesContainer');
                container.innerHTML = '';

                if (resp && resp.success && Array.isArray(resp.data)) {
                    const responses = resp.data;
                    // Filtrar solo respuestas tipo text y activas
                    responses.forEach(r => {
                        if (r.is_active && (r.response_type === 'text' || !r.response_type)) {
                            const btn = document.createElement('button');
                            btn.type = 'button';
                            btn.className = 'btn btn-sm btn-outline-primary';
                            btn.textContent = r.response_text.length > 40 ? r.response_text.substr(0, 40) + '…' : r.response_text;
                            btn.title = r.response_text;
                            btn.onclick = function() {
                                // enviar la respuesta rápida
                                sendTextMessage(r.response_text);
                                // Registrar en UI
                                showAlert('Respuesta rápida enviada', 'success');
                            };
                            container.appendChild(btn);
                        }
                    });

                    // No mostrar automáticamente el contenedor al cargar la conversación.
                    // Dejamos que el usuario lo abra con el botón toggle. Si no hay respuestas, mantener oculto.
                    if (!container.children.length) {
                        wrapper.style.display = 'none';
                    }
                } else {
                    wrapper.style.display = 'none';
                }
            } catch (err) {
                console.error('Error cargando respuestas rápidas:', err);
            }
        }

        function toggleQuickReplies() {
            const wrapper = document.getElementById('quickRepliesContainer');
            const container = document.getElementById('quickRepliesButtons');
            if (!wrapper) return;

            // Si no hay botones cargados, intentar cargarlos y luego mostrar
            if (container && container.children.length === 0) {
                loadQuickReplies().then(() => {
                    wrapper.style.display = (wrapper.style.display === 'block') ? 'none' : 'block';
                }).catch(() => {
                    // on error, mantener oculto
                    wrapper.style.display = 'none';
                });
            } else {
                wrapper.style.display = (wrapper.style.display === 'block') ? 'none' : 'block';
            }
        }

        // ===== Controles de atención (Atender / Finalizar) =====
        function renderAttendControls() {
            const btn = document.getElementById('attendBtn');
            const status = document.getElementById('attendStatus');
            if (!btn || !status || !currentUser) return;

            if (currentUser.in_service) {
                btn.innerHTML = '<i class="fas fa-user-times"></i> Finalizar';
                btn.classList.remove('btn-outline-light');
                btn.classList.add('btn-light','text-dark');
                status.innerHTML = `Atendido por ${currentUser.in_service_by_name || 'un asesor'}`;
            } else {
                btn.innerHTML = '<i class="fas fa-user-check"></i> Atender';
                btn.classList.remove('btn-light','text-dark');
                btn.classList.add('btn-outline-light');
                status.innerHTML = '';
            }
        }

        async function toggleAttend() {
            if (!currentUser) return;
            try {
                if (currentUser.in_service) {
                    const resp = await whatsappManager.apiCall('finish_attend.php', { body: { user_id: userId } });
                    if (resp && resp.success) {
                        showAlert('Finalizada la atención', 'success');
                        await loadUserData();
                    } else {
                        throw new Error(resp.error || 'Error finalizando');
                    }
                } else {
                    const resp = await whatsappManager.apiCall('attend.php', { body: { user_id: userId } });
                    if (resp && resp.success) {
                        showAlert('Atención iniciada', 'success');
                        await loadUserData();
                    } else {
                        throw new Error(resp.error || 'Error iniciando atención');
                    }
                }
            } catch (err) {
                console.error('Error toggling attend:', err);
                showAlert('Error al cambiar estado de atención: ' + err.message, 'danger');
            }
        }

        // ===== Edición de nombre de usuario =====
        function editUserName() {
            const container = document.getElementById('editNameContainer');
            const input = document.getElementById('editNameInput');
            if (!container || !input) return;
            input.value = currentUser.name || '';
            container.style.display = 'block';
            document.getElementById('editNameBtn').style.display = 'none';
            input.focus();
        }

        function cancelEditUserName() {
            const container = document.getElementById('editNameContainer');
            if (!container) return;
            container.style.display = 'none';
            document.getElementById('editNameBtn').style.display = 'inline-block';
        }

        async function saveUserName() {
            const input = document.getElementById('editNameInput');
            const saveBtn = document.getElementById('saveNameBtn');
            if (!input || !saveBtn) return;

            const newName = input.value.trim();
            if (newName.length === 0) {
                showAlert('El nombre no puede estar vacío', 'warning');
                return;
            }

            saveBtn.disabled = true;
            try {
                const resp = await whatsappManager.apiCall('update_user.php', { body: { user_id: userId, name: newName } });
                if (resp && resp.success) {
                    currentUser.name = newName;
                    document.getElementById('userNameText').innerHTML = escapeHtml(newName);
                    document.getElementById('userAvatar').innerHTML = `<span>${escapeHtml(newName.charAt(0).toUpperCase() || 'U')}</span>`;
                    cancelEditUserName();
                    showAlert('Nombre actualizado', 'success');
                } else {
                    throw new Error(resp.error || 'Error actualizando nombre');
                }
            } catch (err) {
                console.error('Error saving user name:', err);
                showAlert('Error al actualizar nombre: ' + err.message, 'danger');
            } finally {
                saveBtn.disabled = false;
            }
        }
        
        function showError(message) {
            showAlert(message, 'danger');
        }
        
        // ===== FUNCIONES MULTIMEDIA =====
        
        let selectedFile = null;
        let mediaRecorder = null;
        let audioChunks = [];
        let recordingStartTime = null;
        let recordingInterval = null;
        
        // ===== GRABACIÓN DE AUDIO =====
        
        // Iniciar grabación de audio
        async function startRecording() {
            try {
                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                
                mediaRecorder = new MediaRecorder(stream);
                audioChunks = [];
                
                mediaRecorder.ondataavailable = (event) => {
                    if (event.data.size > 0) {
                        audioChunks.push(event.data);
                    }
                };
                
                mediaRecorder.onstop = async () => {
                    const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
                    
                    // Convertir a File object
                    const audioFile = new File([audioBlob], `audio_${Date.now()}.webm`, {
                        type: 'audio/webm'
                    });
                    
                    selectedFile = audioFile;
                    showMediaPreview(audioFile);
                    
                    // Detener el stream
                    stream.getTracks().forEach(track => track.stop());
                };
                
                mediaRecorder.start();
                recordingStartTime = Date.now();
                
                // Mostrar indicador de grabación
                document.getElementById('recordingIndicator').classList.add('show');
                document.getElementById('micBtn').classList.add('recording');
                
                // Actualizar tiempo de grabación
                updateRecordingTime();
                recordingInterval = setInterval(updateRecordingTime, 1000);
                
            } catch (error) {
                console.error('Error al acceder al micrófono:', error);
                showAlert('No se pudo acceder al micrófono. Verifica los permisos.', 'danger');
            }
        }
        
        // Detener grabación
        function stopRecording() {
            if (mediaRecorder && mediaRecorder.state !== 'inactive') {
                mediaRecorder.stop();
                clearInterval(recordingInterval);
                document.getElementById('recordingIndicator').classList.remove('show');
                document.getElementById('micBtn').classList.remove('recording');
            }
        }
        
        // Cancelar grabación
        function cancelRecording() {
            if (mediaRecorder && mediaRecorder.state !== 'inactive') {
                mediaRecorder.stop();
                audioChunks = [];
                selectedFile = null;
                clearInterval(recordingInterval);
                document.getElementById('recordingIndicator').classList.remove('show');
                document.getElementById('micBtn').classList.remove('recording');
            }
        }
        
        // Actualizar tiempo de grabación
        function updateRecordingTime() {
            if (!recordingStartTime) return;
            
            const elapsed = Math.floor((Date.now() - recordingStartTime) / 1000);
            const minutes = Math.floor(elapsed / 60);
            const seconds = elapsed % 60;
            
            document.getElementById('recordingTime').textContent = 
                `${minutes}:${seconds.toString().padStart(2, '0')}`;
        }
        
        // ===== FUNCIONES DE ARCHIVOS =====
        
        // Manejar selección de archivo
        function handleFileSelect(event) {
            const file = event.target.files[0];
            if (!file) return;
            
            // Validar tipo de archivo
            const allowedTypes = {
                image: ['image/jpeg', 'image/png', 'image/jpg'],
                video: ['video/mp4', 'video/3gpp'],
                audio: ['audio/mpeg', 'audio/mp3', 'audio/aac', 'audio/ogg'],
                document: ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
                          'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']
            };
            
            let mediaType = null;
            for (const [type, mimes] of Object.entries(allowedTypes)) {
                if (mimes.includes(file.type)) {
                    mediaType = type;
                    break;
                }
            }
            
            if (!mediaType) {
                showAlert('Tipo de archivo no soportado', 'danger');
                event.target.value = '';
                return;
            }
            
            // Validar tamaño
            const maxSizes = {
                image: 5 * 1024 * 1024,      // 5MB
                video: 16 * 1024 * 1024,     // 16MB
                audio: 16 * 1024 * 1024,     // 16MB
                document: 100 * 1024 * 1024  // 100MB
            };
            
            if (file.size > maxSizes[mediaType]) {
                showAlert(`Archivo muy grande. Máximo: ${formatFileSize(maxSizes[mediaType])}`, 'danger');
                event.target.value = '';
                return;
            }
            
            selectedFile = file;
            showMediaPreview(file);
        }
        
        // Mostrar preview del archivo
        function showMediaPreview(file) {
            const preview = document.getElementById('mediaPreview');
            const thumbnail = document.getElementById('mediaThumbnail');
            const filename = document.getElementById('mediaFilename');
            const filesize = document.getElementById('mediaFilesize');
            
            filename.textContent = file.name;
            filesize.textContent = formatFileSize(file.size);
            
            // Mostrar thumbnail si es imagen
            if (file.type.startsWith('image/')) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    thumbnail.src = e.target.result;
                    thumbnail.style.display = 'block';
                };
                reader.readAsDataURL(file);
            } else if (file.type.startsWith('audio/')) {
                // Mostrar reproductor para audio
                const reader = new FileReader();
                reader.onload = function(e) {
                    thumbnail.outerHTML = `<audio controls style="width: 100%; margin-bottom: 10px;" id="mediaThumbnail">
                        <source src="${e.target.result}" type="${file.type}">
                    </audio>`;
                };
                reader.readAsDataURL(file);
            } else {
                thumbnail.style.display = 'none';
            }
            
            preview.classList.add('show');
        }
        
        // Formatear tamaño de archivo
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
        }
        
        // Cancelar subida de multimedia
        function cancelMediaUpload() {
            selectedFile = null;
            document.getElementById('fileInput').value = '';
            
            // Restaurar thumbnail si se cambió por audio
            const thumbnailElement = document.getElementById('mediaThumbnail');
            if (thumbnailElement && thumbnailElement.tagName === 'AUDIO') {
                thumbnailElement.outerHTML = '<img id="mediaThumbnail" class="media-thumbnail" style="display: none;" />';
            }
            
            document.getElementById('mediaPreview').classList.remove('show');
            document.getElementById('mediaCaption').value = '';
        }
        
        // Enviar mensaje multimedia
        async function sendMediaMessage() {
            if (!selectedFile) return;
            
            try {
                showTyping();
                
// Subir archivo inicialmente
                const formData = new FormData();
                formData.append('file', selectedFile);
                formData.append('uploaded_by', userId);

                const uploadResponse = await fetch('api/upload_media.php', {
                    method: 'POST',
                    body: formData
                });

                let uploadData = await uploadResponse.json();

                if (!uploadData.success) {
                    throw new Error(uploadData.error || 'Error subiendo archivo');
                }

                // Si el servidor no pudo convertir (p. ej. shell_exec disabled), intentar conversión en navegador y re-subir
                let clientConversionTried = false;
                if (uploadData.conversion_error && selectedFile && selectedFile.type === 'audio/webm') {
                    console.debug('Server conversion failed:', uploadData.conversion_error);
                    showAlert('Servidor no pudo convertir el audio; intentando conversión local en el navegador...', 'info');
                    try {
                        clientConversionTried = true;
                        const converted = await convertWebmToOgg(selectedFile);

                        // Re-subir archivo convertido
                        const formData2 = new FormData();
                        formData2.append('file', converted);
                        formData2.append('uploaded_by', userId);

                        const uploadResponse2 = await fetch('api/upload_media.php', {
                            method: 'POST',
                            body: formData2
                        });

                        const uploadData2 = await uploadResponse2.json();
                        if (!uploadData2.success) {
                            throw new Error(uploadData2.error || 'Error subiendo archivo convertido');
                        }

                        uploadData = uploadData2; // usar el resultado de la re-subida
                        selectedFile = converted; // actualizar selectedFile a la versión convertida
                        showAlert('Conversión local completada y archivo subido correctamente', 'success');
                        console.debug('Client-side conversion and reupload succeeded');
                    } catch (convErr) {
                        console.error('Client-side conversion failed:', convErr);
                        showAlert('No se pudo convertir el audio en el navegador: ' + (convErr.message || convErr), 'danger');
                        // seguimos con el archivo original subido; avisamos al usuario
                    }
                }

                // Si aún hay conversion_error y no se intentó conversión en cliente, avisar
                if (uploadData.conversion_error && !clientConversionTried) {
                    showAlert('Advertencia: La conversión de audio no se realizó en el servidor. El audio puede no reproducirse en algunos clientes. (' + uploadData.conversion_error + ')', 'warning');
                }
                
                // Enviar mensaje con el archivo
                const caption = document.getElementById('mediaCaption').value.trim();
                
                const sendResponse = await whatsappManager.apiCall('send_media_message.php', {
                    body: {
                        recipient: currentUser.phone_number,
                        media_url: uploadData.public_url,
                        media_type: uploadData.media_type,
                        caption: caption || null,
                        filename: uploadData.filename
                    }
                });
                
                hideTyping();
                
                if (sendResponse && sendResponse.success) {
                    cancelMediaUpload();
                    showAlert('Multimedia enviado correctamente', 'success');
                    await loadUserData(); // Recargar mensajes
                } else {
                    throw new Error(sendResponse.error || 'Error enviando multimedia');
                }
                
            } catch (error) {
                hideTyping();
                console.error('Error enviando multimedia:', error);
                showAlert('Error enviando multimedia: ' + error.message, 'danger');
            }
        }
        
        // Modificar renderMessage para soportar multimedia
        const originalAddMessageToView = addMessageToView;
        addMessageToView = function(content, type, timestamp = null) {
            if (typeof content === 'object' && content.media_url) {
                // Es un mensaje multimedia
                return renderMediaMessage(content, type, timestamp);
            }
            return originalAddMessageToView(content, type, timestamp);
        };
        
        // Renderizar mensaje multimedia
        function renderMediaMessage(message, type, timestamp = null) {
            const chatconversations = document.getElementById('chatconversations');
            const messageDiv = document.createElement('div');
            messageDiv.className = `message-bubble message-${type}`;
            
            let mediaHtml = '';
            const mediaUrl = message.media_url || message.content;
            
            switch (message.media_type) {
                case 'image':
                    mediaHtml = `<img src="${mediaUrl}" alt="Imagen" style="max-width: 100%; border-radius: 8px;">`;
                    break;
                case 'video':
                    mediaHtml = `<video controls style="max-width: 100%; border-radius: 8px;"><source src="${mediaUrl}"></video>`;
                    break;
                case 'audio':
                    mediaHtml = `<audio controls style="width: 100%;"><source src="${mediaUrl}"></audio>`;
                    break;
                case 'document':
                    const filename = message.filename || 'Documento';
                    mediaHtml = `<a href="${mediaUrl}" target="_blank" class="message-document">
                        <i class="fas fa-file-alt"></i>
                        <span>${filename}</span>
                    </a>`;
                    break;
            }
            
            let html = `<div class="message-media">${mediaHtml}</div>`;
            
            if (message.caption) {
                html += `<div class="message-text" style="margin-top: 5px;">${escapeHtml(message.caption)}</div>`;
            }
            
            if (timestamp) {
                html += `<div class="message-time">${formatTimestamp(timestamp)}</div>`;
            }
            
            messageDiv.innerHTML = html;
            chatconversations.appendChild(messageDiv);
            scrollToBottom();
        }
        
        // Escape HTML
        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }
        
        // Formatear timestamp
        function formatTimestamp(timestamp) {
            if (!timestamp) return '';
            const date = new Date(timestamp);
            const hours = date.getHours().toString().padStart(2, '0');
            const minutes = date.getMinutes().toString().padStart(2, '0');
            return `${hours}:${minutes}`;
        }
        
        // Inicializar cuando la página se carga
        document.addEventListener('DOMContentLoaded', function() {
            loadUserData();
            
            // Event listeners para multimedia
            document.getElementById('attachBtn').addEventListener('click', function() {
                document.getElementById('fileInput').click();
            });
            
            document.getElementById('fileInput').addEventListener('change', handleFileSelect);
            
            // Event listener para micrófono
            document.getElementById('micBtn').addEventListener('click', function() {
                if (mediaRecorder && mediaRecorder.state === 'recording') {
                    stopRecording();
                } else {
                    startRecording();
                }
            });
            
            // Auto-refresh cada 30 segundos para nuevos mensajes
            setInterval(refreshChat, 30000);
        });
        
        // Función para obtener icono según tipo de archivo
        function getFileIcon(filename) {
            const ext = filename.split('.').pop().toLowerCase();
            const iconMap = {
                'pdf': 'fas fa-file-pdf text-danger',
                'doc': 'fas fa-file-word text-primary',
                'docx': 'fas fa-file-word text-primary',
                'xls': 'fas fa-file-excel text-success',
                'xlsx': 'fas fa-file-excel text-success',
                'ppt': 'fas fa-file-powerpoint text-warning',
                'pptx': 'fas fa-file-powerpoint text-warning',
                'zip': 'fas fa-file-archive text-secondary',
                'rar': 'fas fa-file-archive text-secondary',
                'txt': 'fas fa-file-alt text-muted',
            };
            return iconMap[ext] || 'fas fa-file text-muted';
        }
        
        // Modal para ver imágenes en grande
        function openImageModal(imageUrl) {
            if (!isValidMediaUrl(imageUrl)) {
                showAlert('Media no disponible', 'warning');
                return;
            }

            // Crear modal si no existe
            let modal = document.getElementById('imageModal');
            if (!modal) {
                modal = document.createElement('div');
                modal.id = 'imageModal';
                modal.className = 'modal fade';
                modal.innerHTML = `
                    <div class="modal-dialog modal-dialog-centered modal-lg">
                        <div class="modal-content bg-transparent border-0">
                            <div class="modal-body p-0 position-relative">
                                <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-3" 
                                        data-bs-dismiss="modal" style="z-index: 10;"></button>
                                <img id="modalImage" src="" class="img-fluid w-100" style="border-radius: 10px;">
                            </div>
                        </div>
                    </div>
                `;
                document.body.appendChild(modal);
            }
            
            // Actualizar imagen y mostrar
            document.getElementById('modalImage').src = imageUrl;
            const bsModal = new bootstrap.Modal(modal);
            bsModal.show();
        }
        
        // Variables globales para el modal de plantillas
        let currentTemplateData = null;
        
        // Verificar si la plantilla tiene variables
        async function checkTemplateVariables(templateId, templateName, language) {
            try {
                const response = await whatsappManager.apiCall(`get_template_details.php?id=${templateId}`);
                
                if (response && response.success && response.template) {
                    currentTemplateData = response.template;
                    
                    if (response.template.has_variables) {
                        // Mostrar modal para llenar variables
                        showTemplateVariablesModal(response.template);
                    } else {
                        // Enviar directo sin variables
                        await sendTemplateMessage(templateName, language, []);
                    }
                } else {
                    throw new Error('No se pudo obtener detalles de la plantilla');
                }
            } catch (error) {
                console.error('Error checking template variables:', error);
                showAlert('Error al cargar detalles de plantilla: ' + error.message, 'danger');
            }
        }
        
        // Mostrar modal con campos para variables
        function showTemplateVariablesModal(template) {
            // Actualizar información del encabezado
            document.getElementById('templateNameDisplay').textContent = template.name;
            document.getElementById('templateLanguageDisplay').textContent = `Idioma: ${template.language_code}`;
            document.getElementById('templateVariablesCount').textContent = `${template.variables_count} variable(s) requerida(s)`;
            
            // Generar formulario de variables
            const formContainer = document.getElementById('variablesForm');
            formContainer.innerHTML = '';
            
            template.variables.forEach((variable, index) => {
                const fieldHtml = `
                    <div class="mb-3">
                        <label class="form-label">
                            <strong>${variable.label}</strong>
                            ${variable.example ? `<small class="text-muted">(ej: ${variable.example})</small>` : ''}
                        </label>
                        <input type="text" 
                               class="form-control template-variable-input" 
                               data-index="${index}"
                               data-var-number="${variable.index}"
                               placeholder="${variable.example || 'Ingrese valor...'}"
                               required>
                    </div>
                `;
                formContainer.insertAdjacentHTML('beforeend', fieldHtml);
            });
            
            // Event listeners para actualizar preview en tiempo real
            const inputs = formContainer.querySelectorAll('.template-variable-input');
            inputs.forEach(input => {
                input.addEventListener('input', updateTemplatePreview);
            });
            
            // Inicializar preview vacío
            updateTemplatePreview();
            
            // Mostrar modal
            const modal = new bootstrap.Modal(document.getElementById('templateVariablesModal'));
            modal.show();
            
            // Event listener para botón de envío
            document.getElementById('btnSendTemplateWithVariables').onclick = sendTemplateWithVariables;
        }
        
        // Actualizar vista previa de la plantilla
        async function updateTemplatePreview() {
            if (!currentTemplateData) return;
            
            const inputs = document.querySelectorAll('.template-variable-input');
            const parameters = [];
            
            inputs.forEach(input => {
                parameters.push(input.value || '');
            });
            
            try {
                const response = await whatsappManager.apiCall('preview_template.php', {
                    body: {
                        template_id: currentTemplateData.id,
                        parameters: parameters
                    }
                });
                
                if (response && response.success && response.preview) {
                    const previewContainer = document.getElementById('templatePreview');
                    
                    if (response.preview.is_complete) {
                        previewContainer.innerHTML = response.preview.html;
                        previewContainer.className = 'p-3 bg-light rounded border border-success';
                    } else {
                        previewContainer.innerHTML = response.preview.html + 
                            '<div class="text-warning mt-2"><small><i class="fas fa-exclamation-triangle"></i> Faltan variables por completar</small></div>';
                        previewContainer.className = 'p-3 bg-light rounded border border-warning';
                    }
                }
            } catch (error) {
                console.error('Error updating preview:', error);
            }
        }
        
        // Enviar plantilla con variables
        async function sendTemplateWithVariables() {
            if (!currentTemplateData) return;
            
            const inputs = document.querySelectorAll('.template-variable-input');
            const parameters = [];
            let allFilled = true;
            
            inputs.forEach(input => {
                const value = input.value.trim();
                if (!value) {
                    allFilled = false;
                    input.classList.add('is-invalid');
                } else {
                    input.classList.remove('is-invalid');
                }
                parameters.push(value);
            });
            
            if (!allFilled) {
                showAlert('Por favor complete todas las variables requeridas', 'warning');
                return;
            }
            
            // Cerrar modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('templateVariablesModal'));
            modal.hide();
            
            // Enviar plantilla con parámetros
            await sendTemplateMessage(
                currentTemplateData.template_name,
                currentTemplateData.language_code,
                parameters
            );
            
            // Limpiar datos
            currentTemplateData = null;
        }
    </script>
    
    <!-- Modal para Variables de Plantilla -->
    <div class="modal fade" id="templateVariablesModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title">
                        <i class="fas fa-edit"></i> Completar Variables de Plantilla
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div id="templateInfo" class="alert alert-info mb-3">
                        <strong id="templateNameDisplay"></strong>
                        <div class="small mt-1">
                            <span id="templateLanguageDisplay"></span> | 
                            <span id="templateVariablesCount"></span>
                        </div>
                    </div>
                    
                    <div id="variablesForm"></div>
                    
                    <div class="mt-3">
                        <h6 class="border-bottom pb-2">
                            <i class="fas fa-eye"></i> Vista Previa
                        </h6>
                        <div id="templatePreview" class="p-3 bg-light rounded" style="min-height: 80px;">
                            <em class="text-muted">Complete los campos para ver la vista previa...</em>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        Cancelar
                    </button>
                    <button type="button" class="btn btn-success" id="btnSendTemplateWithVariables">
                        <i class="fas fa-paper-plane"></i> Enviar Mensaje
                    </button>
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>