<?php
/**
 * ASISMA CRM - Bandeja de Chats WhatsApp (Evolution API)
 * Paleta FIEL a WhatsApp Web: tema oscuro del CRM = WhatsApp dark,
 * tema claro = WhatsApp light. Colores oficiales en las clases .wsp-*.
 */
$_estados = arr_estados_embudo();
$esAdminWsp = SessionHelper::isAdmin();
?>
<style>
/* ── Paleta WhatsApp (default: dark) ─────────────────────────────────────── */
.wsp-panel          { background: #111b21; border-color: #222d34 !important; }
.wsp-cabecera       { background: #202c33; }
.wsp-fondo-chat     { background: #0b141a; }
.wsp-borde          { border-color: #222d34 !important; }
.wsp-item           { border-color: #222d34 !important; }
.wsp-item:hover     { background: #202c33; }
.wsp-item-activo    { background: #2a3942 !important; }
.wsp-texto          { color: #e9edef !important; }
.wsp-texto-2        { color: #8696a0 !important; }
.wsp-burbuja-saliente { background: #005c4b; color: #e9edef; }
.wsp-burbuja-entrante { background: #202c33; color: #e9edef; }
.wsp-hora           { color: rgba(233, 237, 239, .55); }
.wsp-badge          { background: #00a884; color: #111b21; }
.wsp-avatar         { background: #6a7175; color: #e9edef; }
.wsp-input-zona     { background: #202c33; }
.wsp-input          { background: #2a3942 !important; color: #d1d7db !important; border: 1px solid transparent !important; }
.wsp-input::placeholder { color: #8696a0 !important; }
.wsp-input:focus    { outline: none; box-shadow: none; }
.wsp-icono          { color: #8696a0; }
.wsp-icono:hover    { color: #e9edef; }
.wsp-boton-enviar   { background: #00a884; color: #ffffff; }
.wsp-boton-enviar:hover { background: #06cf9c; }
.wsp-burbuja-saliente a, .wsp-burbuja-entrante a { color: #53bdeb; }

/* ── Paleta WhatsApp light (tema claro del CRM) ──────────────────────────── */
html.light .wsp-panel          { background: #ffffff; border-color: #e9edef !important; }
html.light .wsp-cabecera       { background: #f0f2f5; }
html.light .wsp-fondo-chat     { background: #efeae2; }
html.light .wsp-borde          { border-color: #e9edef !important; }
html.light .wsp-item           { border-color: #f0f2f5 !important; }
html.light .wsp-item:hover     { background: #f5f6f6; }
html.light .wsp-item-activo    { background: #f0f2f5 !important; }
html.light .wsp-texto          { color: #111b21 !important; }
html.light .wsp-texto-2        { color: #667781 !important; }
html.light .wsp-burbuja-saliente { background: #d9fdd3; color: #111b21; }
html.light .wsp-burbuja-entrante { background: #ffffff; color: #111b21; }
html.light .wsp-hora           { color: #667781; }
html.light .wsp-badge          { background: #25d366; color: #ffffff; }
html.light .wsp-avatar         { background: #dfe5e7; color: #54656f; }
html.light .wsp-input-zona     { background: #f0f2f5; }
html.light .wsp-input          { background: #ffffff !important; color: #111b21 !important; }
html.light .wsp-input::placeholder { color: #667781 !important; }
html.light .wsp-icono          { color: #54656f; }
html.light .wsp-icono:hover    { color: #111b21; }
html.light .wsp-burbuja-saliente a, html.light .wsp-burbuja-entrante a { color: #027eb5; }
</style>
<!-- Header -->
<div class="mb-6 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
    <div>
        <h1 class="text-3xl font-extrabold text-white tracking-tight">Chats de WhatsApp</h1>
        <p class="text-slate-400 text-sm mt-1">Conversaciones en tiempo real con tus leads mediante Evolution API.</p>
    </div>
    <a href="<?php echo APP_URL; ?>/whatsapp/instancias"
       class="px-4 py-2.5 bg-slate-900 hover:bg-slate-800 border border-slate-800 text-slate-200 rounded-xl text-sm font-semibold transition-colors flex items-center gap-1.5 self-start">
        <i data-lucide="settings-2" class="w-4 h-4 text-slate-400"></i>
        <span>Instancias</span>
    </a>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6" style="height: calc(100vh - 220px); min-height: 480px;">

    <!-- Lista de conversaciones -->
    <div class="wsp-panel border rounded-2xl shadow-xl flex flex-col overflow-hidden">
        <div class="p-3 wsp-cabecera border-b wsp-borde space-y-2">
            <div class="relative">
                <i data-lucide="search" class="w-4 h-4 wsp-icono absolute left-3 top-1/2 -translate-y-1/2"></i>
                <input type="text" id="buscarConv" placeholder="Buscar conversación..."
                       class="wsp-input w-full pl-9 pr-3 py-2 rounded-lg text-sm">
            </div>
            <?php if ($esAdminWsp): ?>
            <!-- Filtros de la MATRIZ: vertical / marca / franquicia -->
            <form method="GET" action="<?php echo APP_URL; ?>/whatsapp" id="filtrosWsp" class="grid grid-cols-3 gap-1.5">
                <?php if ($leadSel): ?><input type="hidden" name="lead_id" value="<?php echo (int)$leadSel['id']; ?>"><?php endif; ?>
                <select name="vertical_id" id="filtroVerticalWsp" class="wsp-input rounded-lg px-2 py-1.5 text-xs w-full">
                    <option value="">Vertical: todas</option>
                    <?php foreach ($verticales as $v): ?>
                    <option value="<?php echo $v['id']; ?>" <?php echo $filtros['vertical_id'] == $v['id'] ? 'selected' : ''; ?>><?php echo htmlspecialchars($v['nombre']); ?></option>
                    <?php endforeach; ?>
                </select>
                <select name="marca_id" id="filtroMarcaWsp" class="wsp-input rounded-lg px-2 py-1.5 text-xs w-full">
                    <option value="">Marca: todas</option>
                    <?php foreach ($marcas as $mk): ?>
                    <option value="<?php echo $mk['id']; ?>" data-vertical="<?php echo (int)$mk['vertical_id']; ?>" <?php echo $filtros['marca_id'] == $mk['id'] ? 'selected' : ''; ?>><?php echo htmlspecialchars($mk['nombre']); ?></option>
                    <?php endforeach; ?>
                </select>
                <select name="franquiciado_id" class="wsp-input rounded-lg px-2 py-1.5 text-xs w-full">
                    <option value="">Franquicia: todas</option>
                    <?php foreach ($franquiciados as $fr): ?>
                    <option value="<?php echo $fr['id']; ?>" <?php echo $filtros['franquiciado_id'] == $fr['id'] ? 'selected' : ''; ?>><?php echo htmlspecialchars($fr['nombre_fantasia']); ?></option>
                    <?php endforeach; ?>
                </select>
            </form>
            <?php endif; ?>
        </div>

        <div class="flex-1 overflow-y-auto" id="listaConversaciones">
            <?php if (empty($conversaciones)): ?>
                <div class="text-center py-16 wsp-texto-2 px-6">
                    <i data-lucide="message-square-dashed" class="w-10 h-10 mx-auto mb-3 wsp-icono"></i>
                    <p class="text-sm font-semibold wsp-texto">Sin conversaciones aún</p>
                    <p class="text-xs mt-1">Abre un lead y usa "Chat WhatsApp" para iniciar una conversación.</p>
                </div>
            <?php else: ?>
                <?php foreach ($conversaciones as $conv): ?>
                    <?php
                    $telConv = $conv['datos_liberados'] || SessionHelper::isAdmin()
                        ? $conv['telefono_real']
                        : ($conv['telefono_enmascarado'] ? $conv['telefono_enmascarado'] : '****');
                    $preview = $conv['ultimo_mensaje'] !== null && $conv['ultimo_mensaje'] !== ''
                        ? $conv['ultimo_mensaje']
                        : ($conv['ultimo_tipo'] ? '[' . $conv['ultimo_tipo'] . ']' : 'Sin mensajes');
                    ?>
                    <a href="<?php echo APP_URL; ?>/whatsapp?lead_id=<?php echo $conv['id']; ?>"
                       class="conv-item wsp-item flex items-center gap-3 px-4 py-3 border-b transition-colors <?php echo ($leadSel && $leadSel['id'] == $conv['id']) ? 'wsp-item-activo' : ''; ?>"
                       data-nombre="<?php echo htmlspecialchars(mb_strtolower($conv['contacto_nombre'])); ?>">
                        <div class="wsp-avatar w-11 h-11 rounded-full flex items-center justify-center font-bold text-base shrink-0">
                            <?php echo strtoupper(mb_substr($conv['contacto_nombre'], 0, 1)); ?>
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center justify-between gap-2">
                                <span class="text-sm font-semibold wsp-texto truncate"><?php echo htmlspecialchars($conv['contacto_nombre']); ?></span>
                                <?php if ($conv['ultimo_at']): ?>
                                <span class="text-[10px] <?php echo $conv['no_leidos'] > 0 ? 'font-bold' : ''; ?> wsp-texto-2 shrink-0" <?php echo $conv['no_leidos'] > 0 ? 'style="color:#00a884 !important;"' : ''; ?>><?php echo date('d/m H:i', strtotime($conv['ultimo_at'])); ?></span>
                                <?php endif; ?>
                            </div>
                            <div class="flex items-center justify-between gap-2 mt-0.5">
                                <span class="text-xs wsp-texto-2 truncate"><?php echo htmlspecialchars(mb_substr($preview, 0, 45)); ?></span>
                                <?php if ($conv['no_leidos'] > 0): ?>
                                <span class="wsp-badge text-[11px] font-bold rounded-full min-w-[20px] h-[20px] flex items-center justify-center px-1 shrink-0"><?php echo $conv['no_leidos']; ?></span>
                                <?php endif; ?>
                            </div>
                            <span class="text-[10px] wsp-texto-2 font-mono"><?php echo htmlspecialchars($telConv); ?><?php if ($esAdminWsp && $conv['franquiciado_nombre'] !== ''): ?> · <?php echo htmlspecialchars($conv['franquiciado_nombre']); ?><?php endif; ?></span>
                            <?php $estConv = isset($_estados[$conv['estado_embudo']]) ? $_estados[$conv['estado_embudo']] : null; ?>
                            <div class="flex items-center gap-1.5 mt-0.5 min-w-0">
                                <?php if ($estConv): ?>
                                <span class="w-1.5 h-1.5 rounded-full shrink-0" style="background: <?php echo $estConv['hex']; ?>;" title="Estado del lead"></span>
                                <span class="text-[10px] wsp-texto-2 shrink-0"><?php echo $estConv['label']; ?></span>
                                <?php endif; ?>
                                <span class="text-[10px] wsp-texto-2 truncate">
                                    · <?php echo $conv['vendedor_nombre'] !== '' ? 'Tomado por ' . htmlspecialchars($conv['vendedor_nombre']) : 'Sin tomar'; ?>
                                </span>
                            </div>
                        </div>
                    </a>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>

    <!-- Panel de chat -->
    <div class="lg:col-span-2 wsp-panel border rounded-2xl shadow-xl flex flex-col overflow-hidden">
        <?php if (!$leadSel): ?>
            <div class="flex-1 flex items-center justify-center wsp-fondo-chat">
                <div class="text-center px-6">
                    <div class="w-16 h-16 wsp-cabecera rounded-2xl flex items-center justify-center mx-auto mb-5" style="color:#00a884;">
                        <i data-lucide="message-circle" class="w-8 h-8"></i>
                    </div>
                    <h3 class="text-lg font-bold wsp-texto mb-1">Selecciona una conversación</h3>
                    <p class="text-sm wsp-texto-2 max-w-xs mx-auto">Elige un chat de la lista o abre un lead y pulsa "Chat WhatsApp".</p>
                </div>
            </div>
        <?php else: ?>
            <!-- Cabecera del chat -->
            <div class="px-5 py-3 border-b wsp-borde flex items-center justify-between gap-3 wsp-cabecera">
                <div class="flex items-center gap-3 min-w-0">
                    <div class="wsp-avatar w-10 h-10 rounded-full flex items-center justify-center font-bold shrink-0">
                        <?php echo strtoupper(mb_substr($leadSel['contacto_nombre'], 0, 1)); ?>
                    </div>
                    <div class="min-w-0">
                        <div class="flex items-center gap-2">
                            <h3 class="text-sm font-bold wsp-texto truncate"><?php echo htmlspecialchars($leadSel['contacto_nombre']); ?></h3>
                            <?php $estSel = isset($_estados[$leadSel['estado_embudo']]) ? $_estados[$leadSel['estado_embudo']] : null; ?>
                            <?php if ($estSel): ?>
                            <span class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold border <?php echo $estSel['color']; ?>"><?php echo $estSel['label']; ?></span>
                            <?php endif; ?>
                        </div>
                        <span class="text-[11px] wsp-texto-2 font-mono" id="instanciaChat">Instancia: cargando...</span>
                    </div>
                </div>
                <a href="<?php echo APP_URL; ?>/leads/ver?id=<?php echo $leadSel['id']; ?>"
                   class="wsp-input px-3 py-2 rounded-lg text-xs font-semibold transition-colors flex items-center gap-1.5 shrink-0">
                    <i data-lucide="user" class="w-3.5 h-3.5"></i>
                    <span class="hidden sm:inline">Ver Ficha</span>
                </a>
            </div>

            <!-- Mensajes (fondo del chat, colores WhatsApp) -->
            <div class="flex-1 overflow-y-auto p-5 space-y-1.5 wsp-fondo-chat" id="chatMensajes">
                <div class="text-center py-10 wsp-texto-2 text-xs" id="chatCargando">Cargando mensajes...</div>
            </div>

            <?php if (empty($puedeEnviar)): ?>
            <!-- Solo lectura: la línea pertenece a otro usuario (regla 22-07) -->
            <div class="px-4 py-3.5 border-t wsp-borde wsp-input-zona flex items-center justify-center gap-2">
                <i data-lucide="lock" class="w-4 h-4 wsp-icono"></i>
                <span class="text-sm wsp-texto-2">
                    Solo lectura — esta línea de WhatsApp
                    <?php echo $duenoInstancia !== '' ? 'pertenece a <b class="wsp-texto">' . htmlspecialchars($duenoInstancia) . '</b>' : 'no tiene una instancia tuya asociada'; ?>.
                    Solo su dueño puede enviar mensajes.
                </span>
            </div>
            <?php else: ?>
            <!-- Input -->
            <div class="px-4 py-3 border-t wsp-borde wsp-input-zona">
                <!-- Barra de grabación de voz (reemplaza al input mientras graba) -->
                <div id="barraGrabacion" class="hidden items-center gap-3 px-4 py-3 bg-red-950/20 border border-red-900/30 rounded-xl mb-2">
                    <span class="w-2.5 h-2.5 rounded-full bg-red-500 animate-pulse"></span>
                    <span class="text-sm font-semibold text-red-400">Grabando nota de voz...</span>
                    <span class="text-sm font-mono text-slate-300" id="tiempoGrabacion">0:00</span>
                    <div class="flex-1"></div>
                    <button type="button" onclick="cancelarGrabacion()" class="px-3 py-1.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg text-xs font-semibold transition-colors">Cancelar</button>
                    <button type="button" onclick="detenerYEnviarGrabacion()" class="px-3 py-1.5 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-xs font-semibold transition-colors flex items-center gap-1">
                        <i data-lucide="send" class="w-3 h-3"></i> Enviar
                    </button>
                </div>

                <form id="formEnviar" class="flex items-end gap-2">
                    <label class="p-2.5 wsp-icono rounded-full cursor-pointer transition-colors shrink-0" title="Adjuntar archivo (imagen, audio, video, documento)">
                        <i data-lucide="paperclip" class="w-5 h-5"></i>
                        <input type="file" id="adjuntoInput" class="hidden" accept="image/*,audio/*,video/*,.pdf,.doc,.docx,.xls,.xlsx">
                    </label>
                    <button type="button" id="btnMic" onclick="iniciarGrabacion()"
                            class="p-2.5 wsp-icono rounded-full transition-colors shrink-0" title="Grabar nota de voz">
                        <i data-lucide="mic" class="w-5 h-5"></i>
                    </button>
                    <div class="flex-1">
                        <div id="adjuntoPreview" class="hidden mb-2 px-3 py-2 wsp-input rounded-lg text-xs flex items-center gap-3">
                            <img id="adjuntoThumb" class="hidden w-12 h-12 rounded-lg object-cover" alt="">
                            <span id="adjuntoNombre" class="truncate flex-1"></span>
                            <button type="button" id="quitarAdjunto" class="wsp-icono hover:text-red-400"><i data-lucide="x" class="w-3.5 h-3.5"></i></button>
                        </div>
                        <textarea id="mensajeInput" rows="1" placeholder="Escribe un mensaje... (puedes pegar imágenes)"
                                  class="wsp-input w-full px-4 py-2.5 rounded-lg text-sm resize-none"></textarea>
                    </div>
                    <button type="submit" id="btnEnviar"
                            class="wsp-boton-enviar p-3 rounded-full transition-colors shrink-0">
                        <i data-lucide="send" class="w-4 h-4"></i>
                    </button>
                </form>
            </div>
            <?php endif; ?>
        <?php endif; ?>
    </div>
</div>

<script>
$(document).ready(function() {

    // Filtro de conversaciones
    $('#buscarConv').on('input', function() {
        var q = $(this).val().toLowerCase();
        $('.conv-item').each(function() {
            $(this).toggle($(this).data('nombre').indexOf(q) !== -1);
        });
    });

    // Filtros de la matriz: aplicar al cambiar (con cascada vertical → marca)
    $('#filtrosWsp select').on('change', function() {
        if (this.id === 'filtroVerticalWsp') {
            // Si la marca elegida no pertenece a la nueva vertical, se limpia
            var vid = $(this).val();
            var $marca = $('#filtroMarcaWsp option:selected');
            if (vid && $marca.val() && String($marca.data('vertical')) !== String(vid)) {
                $('#filtroMarcaWsp').val('');
            }
        }
        $('#filtrosWsp').submit();
    });
    // Ocultar marcas de otras verticales cuando hay vertical elegida
    (function() {
        var vid = $('#filtroVerticalWsp').val();
        if (!vid) return;
        $('#filtroMarcaWsp option[data-vertical]').each(function() {
            $(this).toggle(String($(this).data('vertical')) === String(vid));
        });
    })();

<?php if ($leadSel): ?>
    var leadId = <?php echo (int)$leadSel['id']; ?>;
    var puedeEnviarChat = <?php echo !empty($puedeEnviar) ? 'true' : 'false'; ?>;
    var ultimoMsgId = 0;
    var primeraCarga = true;
    var adjunto = null;
    var firmaMensajes = {}; // id -> estado_entrega|eliminado (para refrescar checks en vivo)

    function escapeHtml(t) {
        return $('<div>').text(t || '').html();
    }

    // Checks de estado (los "vistos", patrón OPS): ✓ enviado, ✓✓ entregado,
    // ✓✓ azul leído/reproducido, ⚠ error
    function iconoEstado(m) {
        if (m.direccion !== 'saliente') return '';
        var s = m.estado_entrega || 'sent';
        var icono = (s === 'sent') ? '✓' : (s === 'error' ? '⚠' : '✓✓');
        var color = (s === 'read' || s === 'played') ? '#53bdeb' : (s === 'error' ? '#ef4444' : 'inherit');
        return '<span class="check-msg" style="margin-left:4px;font-weight:bold;color:' + color + ';" title="' + s + '">' + icono + '</span>';
    }

    function renderMensaje(m) {
        var esSaliente = (m.direccion === 'saliente');
        // Burbujas con los colores REALES de WhatsApp (claro y oscuro)
        var burbuja = esSaliente
            ? 'wsp-burbuja-saliente ml-auto rounded-br-none'
            : 'wsp-burbuja-entrante mr-auto rounded-bl-none';
        var hora = m.created_at ? m.created_at.substring(11, 16) : '';
        var fecha = m.created_at ? m.created_at.substring(0, 10).split('-').reverse().join('/') : '';

        // Mensaje retractado: como en WhatsApp, sin contenido ni acciones
        if (m.eliminado) {
            return '<div class="max-w-[75%] px-3 py-2 rounded-lg shadow-sm ' + burbuja + '" data-msg-id="' + m.id + '">' +
                       '<p class="text-sm italic opacity-70">🚫 Este mensaje fue eliminado</p>' +
                       '<div class="wsp-hora text-[10px] mt-0.5 text-right" title="' + fecha + '">' + hora + '</div>' +
                   '</div>';
        }

        var contenidoHtml = '';
        if (m.media) {
            if (m.tipo === 'image') {
                contenidoHtml += '<img src="' + m.media + '" class="rounded-lg max-w-full max-h-64 cursor-pointer mb-1" onclick="window.open(this.src)">';
            } else if (m.tipo === 'sticker') {
                contenidoHtml += '<img src="' + m.media + '" class="w-28 h-28 object-contain mb-1" alt="sticker">';
            } else if (m.tipo === 'audio') {
                contenidoHtml += '<audio controls src="' + m.media + '" class="max-w-full mb-1" style="height:36px;"></audio>';
            } else if (m.tipo === 'video') {
                contenidoHtml += '<video controls src="' + m.media + '" class="rounded-lg max-w-full max-h-64 mb-1"></video>';
            } else {
                contenidoHtml += '<a href="' + m.media + '" target="_blank" class="flex items-center gap-2 text-blue-400 hover:underline mb-1"><i data-lucide="file-text" class="w-4 h-4"></i><span>Ver documento / archivo</span></a>';
            }
        } else if (m.tipo === 'sticker') {
            contenidoHtml += '<span class="text-2xl">🩵</span>';
        }
        if (m.contenido) {
            contenidoHtml += '<p class="text-sm whitespace-pre-wrap break-words">' + escapeHtml(m.contenido) + '</p>';
        }

        // El dueño de la línea puede retractar sus mensajes (eliminar para todos)
        var btnEliminar = (esSaliente && puedeEnviarChat)
            ? '<button type="button" onclick="eliminarMensajeWsp(' + m.id + ')" class="btn-borrar-msg opacity-0 group-hover:opacity-100 transition-opacity text-[10px] mr-1" title="Eliminar para todos (hasta 48 h)">🗑</button>'
            : '';

        return '<div class="max-w-[75%] px-3 py-2 rounded-lg shadow-sm group ' + burbuja + '" data-msg-id="' + m.id + '">' +
                   contenidoHtml +
                   '<div class="wsp-hora text-[10px] mt-0.5 text-right flex items-center justify-end">' + btnEliminar +
                       '<span title="' + fecha + '">' + hora + '</span>' + iconoEstado(m) +
                   '</div>' +
               '</div>';
    }

    // Retractar mensaje (patrón OPS: deleteMessageForEveryone, plazo ~48 h)
    window.eliminarMensajeWsp = function(id) {
        Swal.fire({
            icon: 'warning', title: '¿Eliminar este mensaje para todos?',
            text: 'Desaparecerá del teléfono del cliente. WhatsApp solo lo permite hasta ~48 horas después del envío.',
            showCancelButton: true, confirmButtonText: 'Sí, eliminar', cancelButtonText: 'Cancelar',
            background: '#1e293b', color: '#f8fafc', confirmButtonColor: '#ef4444'
        }).then(function(res) {
            if (!res.isConfirmed) return;
            $.post('<?php echo APP_URL; ?>/whatsapp/mensaje-eliminar', { id: id }, function(r) {
                if (r.success) { cargarChat(); }
                else Swal.fire({ icon: 'error', title: 'No se pudo eliminar', text: r.message, background: '#1e293b', color: '#f8fafc', confirmButtonColor: '#ef4444' });
            }, 'json');
        });
    };

    function cargarChat() {
        $.ajax({
            url: '<?php echo APP_URL; ?>/whatsapp/chat',
            data: { lead_id: leadId },
            dataType: 'json',
            success: function(res) {
                if (!res.success) return;
                $('#chatCargando').remove();
                $('#instanciaChat').text(res.instancia ? 'Instancia: ' + res.instancia : 'Sin instancia configurada');

                var contenedor = $('#chatMensajes');
                var nuevos = false;

                res.mensajes.forEach(function(m) {
                    var firma = (m.estado_entrega || '') + '|' + (m.eliminado ? 1 : 0);
                    if (m.id > ultimoMsgId) {
                        contenedor.append(renderMensaje(m));
                        ultimoMsgId = m.id;
                        firmaMensajes[m.id] = firma;
                        nuevos = true;
                    } else if (firmaMensajes[m.id] !== undefined && firmaMensajes[m.id] !== firma) {
                        // Cambió el estado (visto/eliminado): se repinta la burbuja
                        $('[data-msg-id="' + m.id + '"]').replaceWith(renderMensaje(m));
                        firmaMensajes[m.id] = firma;
                    }
                });

                if (primeraCarga && res.mensajes.length === 0) {
                    contenedor.html('<div class="text-center py-10 wsp-texto-2 text-xs" id="chatVacio">No hay mensajes aún. ¡Envía el primero!</div>');
                }
                if (nuevos) {
                    $('#chatVacio').remove();
                    $('#msgEnviando').remove(); // llegó el mensaje real: fuera la burbuja temporal
                    lucide.createIcons();
                    var el = contenedor[0];
                    // Autoscroll solo si el usuario está cerca del final (o primera carga)
                    if (primeraCarga || el.scrollHeight - el.scrollTop - el.clientHeight < 200) {
                        el.scrollTop = el.scrollHeight;
                    }
                }
                primeraCarga = false;
            }
        });
    }

    cargarChat();
    setInterval(cargarChat, 4000);

    // Adjuntos (con miniatura para imágenes)
    function fijarAdjunto(archivo) {
        adjunto = archivo || null;
        if (!adjunto) return;
        $('#adjuntoNombre').text(adjunto.name || 'imagen pegada');
        if (adjunto.type && adjunto.type.indexOf('image/') === 0) {
            var lector = new FileReader();
            lector.onload = function(ev) { $('#adjuntoThumb').attr('src', ev.target.result).removeClass('hidden'); };
            lector.readAsDataURL(adjunto);
        } else {
            $('#adjuntoThumb').addClass('hidden');
        }
        $('#adjuntoPreview').removeClass('hidden');
    }

    $('#adjuntoInput').on('change', function() { fijarAdjunto(this.files[0]); });

    $('#quitarAdjunto').on('click', function() {
        adjunto = null;
        $('#adjuntoInput').val('');
        $('#adjuntoThumb').addClass('hidden').attr('src', '');
        $('#adjuntoPreview').addClass('hidden');
    });

    // Pegar imágenes desde el portapapeles directo al chat
    $('#mensajeInput').on('paste', function(e) {
        var items = (e.originalEvent.clipboardData || {}).items || [];
        for (var i = 0; i < items.length; i++) {
            if (items[i].type.indexOf('image/') === 0) {
                var archivo = items[i].getAsFile();
                if (archivo) {
                    fijarAdjunto(new File([archivo], 'captura_' + Date.now() + '.png', { type: archivo.type }));
                    e.preventDefault();
                }
                break;
            }
        }
    });

    // ── Grabación de nota de voz ──
    var grabador = null, trozosAudio = [], streamMic = null, cancelada = false, cronometro = null, segundosGrab = 0;

    window.iniciarGrabacion = function() {
        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
            Swal.fire({ icon: 'warning', title: 'Micrófono no disponible', text: 'Tu navegador no soporta grabación de audio (o falta HTTPS).', confirmButtonColor: '#d97706' });
            return;
        }
        navigator.mediaDevices.getUserMedia({ audio: true }).then(function(stream) {
            streamMic = stream;
            trozosAudio = [];
            cancelada = false;
            // Igual que en el OPS: usar el formato que el navegador soporte de
            // verdad y conservar el mimeType REAL de la grabación
            var tipoGrab = 'audio/ogg', extGrab = 'ogg';
            if (typeof MediaRecorder.isTypeSupported === 'function') {
                if (MediaRecorder.isTypeSupported('audio/webm;codecs=opus')) { tipoGrab = 'audio/webm;codecs=opus'; extGrab = 'webm'; }
                else if (MediaRecorder.isTypeSupported('audio/webm')) { tipoGrab = 'audio/webm'; extGrab = 'webm'; }
            }
            try { grabador = new MediaRecorder(stream, { mimeType: tipoGrab }); } catch (e) { grabador = new MediaRecorder(stream); }
            if (grabador.mimeType) {
                tipoGrab = grabador.mimeType;
                extGrab = (tipoGrab.indexOf('webm') !== -1) ? 'webm' : 'ogg';
            }
            grabador.ondataavailable = function(ev) { trozosAudio.push(ev.data); };
            grabador.onstop = function() {
                streamMic.getTracks().forEach(function(t) { t.stop(); });
                clearInterval(cronometro);
                $('#barraGrabacion').addClass('hidden').removeClass('flex');
                $('#formEnviar').removeClass('hidden');
                if (cancelada || !trozosAudio.length) return;
                enviarNotaDeVoz(new Blob(trozosAudio, { type: tipoGrab }), 'nota_voz.' + extGrab);
            };
            grabador.start();
            segundosGrab = 0;
            $('#tiempoGrabacion').text('0:00');
            cronometro = setInterval(function() {
                segundosGrab++;
                $('#tiempoGrabacion').text(Math.floor(segundosGrab / 60) + ':' + ('0' + (segundosGrab % 60)).slice(-2));
            }, 1000);
            $('#formEnviar').addClass('hidden');
            $('#barraGrabacion').removeClass('hidden').addClass('flex');
            lucide.createIcons();
        }).catch(function() {
            Swal.fire({ icon: 'error', title: 'Sin acceso al micrófono', text: 'Autoriza el micrófono en el navegador para grabar notas de voz.', confirmButtonColor: '#ef4444' });
        });
    };

    window.cancelarGrabacion = function() { cancelada = true; if (grabador && grabador.state !== 'inactive') grabador.stop(); };
    window.detenerYEnviarGrabacion = function() { if (grabador && grabador.state !== 'inactive') grabador.stop(); };

    function enviarNotaDeVoz(blob, nombreArchivo) {
        var fd = new FormData();
        fd.append('lead_id', leadId);
        fd.append('mensaje', '');
        fd.append('es_nota_voz', '1');
        fd.append('adjunto', blob, nombreArchivo || 'nota_voz.ogg');
        mostrarEnviando('🎤 Nota de voz');
        $.ajax({
            url: '<?php echo APP_URL; ?>/whatsapp/enviar',
            type: 'POST', data: fd, processData: false, contentType: false, dataType: 'json',
            success: function(res) {
                if (res.success) { cargarChat(); }
                else {
                    $('#msgEnviando').remove();
                    Swal.fire({ icon: 'error', title: 'No se pudo enviar la nota de voz', text: res.message, background: '#1e293b', color: '#f8fafc', confirmButtonColor: '#ef4444' });
                }
            },
            error: function() {
                $('#msgEnviando').remove();
                Swal.fire({ icon: 'error', title: 'Error de red', text: 'No se pudo enviar la nota de voz.', background: '#1e293b', color: '#f8fafc', confirmButtonColor: '#ef4444' });
            }
        });
    }

    // Enviar con Enter (Shift+Enter = salto de línea)
    $('#mensajeInput').on('keydown', function(e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            $('#formEnviar').trigger('submit');
        }
    });

    // Burbuja temporal "Enviando..." (como el relojito de WhatsApp); se quita
    // cuando cargarChat trae el mensaje real o si el envío falla.
    function mostrarEnviando(textoPlano) {
        $('#msgEnviando').remove();
        var contenedor = $('#chatMensajes');
        contenedor.append(
            '<div class="max-w-[75%] px-3 py-2 rounded-lg shadow-sm wsp-burbuja-saliente ml-auto rounded-br-none opacity-70" id="msgEnviando">' +
                '<p class="text-sm whitespace-pre-wrap break-words">' + escapeHtml(textoPlano) + '</p>' +
                '<div class="wsp-hora text-[10px] mt-0.5 text-right">🕓 Enviando...</div>' +
            '</div>');
        contenedor[0].scrollTop = contenedor[0].scrollHeight;
    }

    $('#formEnviar').on('submit', function(e) {
        e.preventDefault();
        var texto = $('#mensajeInput').val().trim();
        if (!texto && !adjunto) return;

        // Tope de WhatsApp: avisar al tiro en vez de fallar en el servidor
        if (adjunto && adjunto.size > 16 * 1024 * 1024) {
            Swal.fire({ icon: 'warning', title: 'Archivo muy grande', text: 'El adjunto pesa ' + Math.round(adjunto.size / 1024 / 1024) + ' MB y el máximo es 16 MB.', background: '#1e293b', color: '#f8fafc', confirmButtonColor: '#d97706' });
            return;
        }

        var fd = new FormData();
        fd.append('lead_id', leadId);
        fd.append('mensaje', texto);
        if (adjunto) fd.append('adjunto', adjunto);

        mostrarEnviando(texto !== '' ? texto : '📎 ' + (adjunto && adjunto.name ? adjunto.name : 'archivo adjunto'));
        $('#btnEnviar').attr('disabled', true).addClass('opacity-60');

        $.ajax({
            url: '<?php echo APP_URL; ?>/whatsapp/enviar',
            type: 'POST',
            data: fd,
            processData: false,
            contentType: false,
            dataType: 'json',
            success: function(res) {
                if (res.success) {
                    $('#mensajeInput').val('');
                    $('#quitarAdjunto').trigger('click');
                    cargarChat();
                } else {
                    $('#msgEnviando').remove();
                    Swal.fire({ icon: 'error', title: 'No se pudo enviar', text: res.message, background: '#1e293b', color: '#f8fafc', confirmButtonColor: '#ef4444' });
                }
            },
            error: function() {
                $('#msgEnviando').remove();
                Swal.fire({ icon: 'error', title: 'Error de red', text: 'No se pudo contactar al servidor.', background: '#1e293b', color: '#f8fafc', confirmButtonColor: '#ef4444' });
            },
            complete: function() {
                $('#btnEnviar').attr('disabled', false).removeClass('opacity-60');
            }
        });
    });
<?php endif; ?>
});
</script>
