<?php
/**
 * ASISMA CRM - Gestión de Instancias de WhatsApp (Evolution API)
 */
$esAdmin = SessionHelper::isAdmin();
?>
<!-- Header -->
<div class="mb-8 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
    <div>
        <a href="<?php echo APP_URL; ?>/whatsapp" class="inline-flex items-center gap-1.5 text-xs text-slate-500 hover:text-slate-300 font-semibold mb-3">
            <i data-lucide="arrow-left" class="w-3.5 h-3.5"></i>
            <span>Volver a Chats</span>
        </a>
        <h1 class="text-3xl font-extrabold text-white tracking-tight">Instancias de WhatsApp</h1>
        <p class="text-slate-400 text-sm mt-1">Cada <strong class="text-slate-300">vendedor</strong> tiene su propia línea de WhatsApp, conectada como instancia en el servidor Evolution de su franquicia. Cada línea tiene un webhook único.</p>
    </div>
    <div class="flex gap-3 self-start">
        <?php if (!empty($aprovisionamiento)): ?>
        <button onclick="abrirModalConectar()"
                class="px-4 py-2.5 bg-emerald-600 hover:bg-emerald-500 text-white rounded-xl text-sm font-semibold transition-all shadow-md shadow-emerald-600/10 flex items-center gap-1.5">
            <i data-lucide="qr-code" class="w-4 h-4"></i>
            <span>Conectar línea (QR)</span>
        </button>
        <?php else: ?>
        <span class="px-4 py-2.5 bg-amber-500/10 border border-amber-500/30 text-amber-400 rounded-xl text-xs font-semibold flex items-center gap-1.5" title="Configura EVOLUTION_URL_GLOBAL y EVOLUTION_APIKEY_GLOBAL en Configuración del sistema para crear líneas con QR desde aquí.">
            <i data-lucide="alert-triangle" class="w-4 h-4"></i>
            <span>QR desactivado: falta la API key global de Evolution</span>
        </span>
        <?php endif; ?>
        <button onclick="abrirModalInstancia()"
                class="px-4 py-2.5 bg-slate-900 hover:bg-slate-800 border border-slate-800 text-slate-300 rounded-xl text-sm font-semibold transition-colors flex items-center gap-1.5">
            <i data-lucide="plus" class="w-4 h-4"></i>
            <span>Registro manual</span>
        </button>
    </div>
</div>

<!-- Tabla de instancias -->
<div class="bg-slate-900 border border-slate-800/80 rounded-2xl shadow-xl overflow-hidden">
    <?php if (empty($instancias)): ?>
        <div class="text-center py-16 text-slate-500 px-6">
            <i data-lucide="smartphone" class="w-10 h-10 mx-auto mb-3 text-slate-600"></i>
            <p class="text-sm font-semibold text-slate-400">No hay instancias registradas</p>
            <p class="text-xs mt-1 max-w-md mx-auto">Registra la instancia de Evolution API que usará esta franquicia para enviar y recibir mensajes de WhatsApp.</p>
        </div>
    <?php else: ?>
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="border-b border-slate-800 text-left">
                    <th class="px-5 py-3.5 text-xs font-bold text-slate-400 uppercase tracking-wider">Instancia</th>
                    <th class="px-5 py-3.5 text-xs font-bold text-slate-400 uppercase tracking-wider">Vendedor (línea)</th>
                    <th class="px-5 py-3.5 text-xs font-bold text-slate-400 uppercase tracking-wider">Franquicia</th>
                    <th class="px-5 py-3.5 text-xs font-bold text-slate-400 uppercase tracking-wider">Teléfono</th>
                    <th class="px-5 py-3.5 text-xs font-bold text-slate-400 uppercase tracking-wider">Webhook</th>
                    <th class="px-5 py-3.5 text-xs font-bold text-slate-400 uppercase tracking-wider">Conexión</th>
                    <th class="px-5 py-3.5 text-xs font-bold text-slate-400 uppercase tracking-wider">Estado</th>
                    <th class="px-5 py-3.5 text-xs font-bold text-slate-400 uppercase tracking-wider text-right">Acciones</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($instancias as $inst): ?>
                <tr class="border-b border-slate-800/50 hover:bg-slate-800/30 transition-colors">
                    <td class="px-5 py-3.5">
                        <span class="font-semibold text-slate-200"><?php echo htmlspecialchars($inst['nombre_instancia']); ?></span>
                        <span class="block text-[10px] text-slate-500 font-mono truncate max-w-[220px]"><?php echo htmlspecialchars($inst['api_url']); ?></span>
                    </td>
                    <td class="px-5 py-3.5">
                        <?php if ($inst['usuario_nombre']): ?>
                            <span class="inline-flex items-center gap-1.5 text-xs font-semibold text-emerald-400">
                                <i data-lucide="user" class="w-3.5 h-3.5"></i><?php echo htmlspecialchars($inst['usuario_nombre']); ?>
                            </span>
                        <?php else: ?>
                            <span class="text-slate-600 text-xs">Sin dueño</span>
                        <?php endif; ?>
                    </td>
                    <td class="px-5 py-3.5 text-slate-300">
                        <?php echo $inst['franquiciado_nombre'] ? htmlspecialchars($inst['franquiciado_nombre']) : '<span class="text-indigo-400 text-xs font-semibold">Matriz (global)</span>'; ?>
                    </td>
                    <td class="px-5 py-3.5 font-mono text-slate-400 text-xs"><?php echo htmlspecialchars($inst['telefono'] ? $inst['telefono'] : '—'); ?></td>
                    <td class="px-5 py-3.5">
                        <button onclick="copiarWebhook(this, '<?php echo APP_URL; ?>/api/whatsapp/webhook?t=<?php echo htmlspecialchars($inst['webhook_token']); ?>')"
                                class="inline-flex items-center gap-1.5 text-xs font-semibold text-blue-400 hover:text-blue-300 bg-blue-500/10 border border-blue-500/20 px-2.5 py-1 rounded-lg transition-colors"
                                title="Copiar URL única del webhook de esta línea">
                            <i data-lucide="clipboard-copy" class="w-3.5 h-3.5"></i>
                            <span>Copiar URL</span>
                        </button>
                    </td>
                    <td class="px-5 py-3.5">
                        <span class="conexion-badge inline-flex items-center gap-1.5 text-xs text-slate-500" data-id="<?php echo $inst['id']; ?>">
                            <span class="w-1.5 h-1.5 rounded-full bg-slate-600"></span>
                            <span class="conexion-texto">consultando...</span>
                        </span>
                    </td>
                    <td class="px-5 py-3.5">
                        <?php if ($inst['activa']): ?>
                            <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">Activa</span>
                        <?php else: ?>
                            <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold bg-slate-800 text-slate-400 border border-slate-700">Inactiva</span>
                        <?php endif; ?>
                    </td>
                    <td class="px-5 py-3.5 text-right">
                        <div class="flex items-center justify-end gap-2">
                            <button onclick='abrirModalInstancia(<?php echo json_encode(array(
                                "id" => (int)$inst["id"],
                                "nombre_instancia" => $inst["nombre_instancia"],
                                "api_url" => $inst["api_url"],
                                "api_token" => $inst["api_token"],
                                "telefono" => $inst["telefono"],
                                "franquiciado_id" => $inst["franquiciado_id"],
                                "usuario_id" => $inst["usuario_id"]
                            ), JSON_HEX_APOS | JSON_HEX_QUOT); ?>)'
                                    class="p-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg transition-colors" title="Editar">
                                <i data-lucide="pencil" class="w-3.5 h-3.5"></i>
                            </button>
                            <button onclick="abrirModalQr(<?php echo $inst['id']; ?>)"
                                    class="p-2 bg-emerald-950/30 hover:bg-emerald-950/50 text-emerald-400 border border-emerald-900/30 rounded-lg transition-colors" title="Vincular teléfono (QR)">
                                <i data-lucide="qr-code" class="w-3.5 h-3.5"></i>
                            </button>
                            <button onclick="cerrarSesionInstancia(<?php echo $inst['id']; ?>)"
                                    class="p-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg transition-colors" title="Cerrar sesión del teléfono">
                                <i data-lucide="log-out" class="w-3.5 h-3.5"></i>
                            </button>
                            <button onclick="toggleInstancia(<?php echo $inst['id']; ?>, <?php echo $inst['activa'] ? 1 : 0; ?>)"
                                    class="p-2 bg-slate-800 hover:bg-slate-700 <?php echo $inst['activa'] ? 'text-amber-400' : 'text-emerald-400'; ?> rounded-lg transition-colors"
                                    title="<?php echo $inst['activa'] ? 'Desactivar' : 'Activar'; ?>">
                                <i data-lucide="<?php echo $inst['activa'] ? 'power-off' : 'power'; ?>" class="w-3.5 h-3.5"></i>
                            </button>
                            <button onclick="eliminarInstancia(<?php echo $inst['id']; ?>, '<?php echo htmlspecialchars($inst['nombre_instancia']); ?>')"
                                    class="p-2 bg-red-950/20 hover:bg-red-950/40 text-red-400 border border-red-900/30 rounded-lg transition-colors" title="Eliminar línea (Evolution + CRM)">
                                <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
    <?php endif; ?>
</div>

<!-- Ayuda webhook -->
<div class="mt-6 bg-slate-900 border border-slate-800/80 rounded-2xl p-6 shadow-xl">
    <h3 class="text-sm font-bold text-white mb-3 uppercase tracking-wider flex items-center gap-2">
        <i data-lucide="webhook" class="w-4 h-4 text-blue-500"></i>
        <span>Configuración del Webhook (uno por línea)</span>
    </h3>
    <p class="text-xs text-slate-400 leading-relaxed mb-3">
        <strong class="text-slate-300">Cada línea/vendedor tiene su propia URL de webhook</strong> (usa el botón "Copiar URL" de la tabla).
        En Evolution API, dentro del servidor de la franquicia, configura en cada instancia su URL única con los eventos
        <code class="text-emerald-400 bg-slate-950 px-1.5 py-0.5 rounded">MESSAGES_UPSERT</code> y
        <code class="text-emerald-400 bg-slate-950 px-1.5 py-0.5 rounded">MESSAGES_UPDATE</code>
        (este último trae los "vistos" ✓✓; y "Webhook Base64" activado para recibir adjuntos completos).
        Las líneas creadas desde el CRM con QR ya quedan configuradas con ambos. El formato es:
    </p>
    <code class="block bg-slate-950 border border-slate-800 rounded-lg px-4 py-3 text-xs text-blue-300 font-mono"><?php echo APP_URL; ?>/api/whatsapp/webhook?t=<span class="text-amber-400">{token-único-de-la-línea}</span></code>
</div>

<!-- Modal Crear/Editar -->
<div id="modalInstancia" class="hidden fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl shadow-2xl w-full max-w-lg p-6">
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-lg font-bold text-white" id="modalInstanciaTitulo">Nueva Instancia</h3>
            <button onclick="$('#modalInstancia').addClass('hidden')" class="text-slate-500 hover:text-slate-300">
                <i data-lucide="x" class="w-5 h-5"></i>
            </button>
        </div>
        <form id="formInstancia" class="space-y-4">
            <input type="hidden" name="id" value="0">
            <div>
                <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Nombre de la Instancia (Evolution) *</label>
                <input type="text" name="nombre_instancia" required placeholder="ej: crm-franquicia-stgo"
                       class="w-full px-3 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500">
            </div>
            <div>
                <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">URL de Evolution API *</label>
                <input type="url" name="api_url" required value="<?php echo htmlspecialchars($defaultApiUrl); ?>"
                       class="w-full px-3 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500">
            </div>
            <div>
                <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Token (apikey) *</label>
                <input type="text" name="api_token" required
                       class="w-full px-3 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-slate-200 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-emerald-500">
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Dueño de la línea <span class="text-red-400">*</span></label>
                    <select name="usuario_id" id="selUsuarioInst" required
                            class="w-full px-3 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-slate-300 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500">
                        <option value="">— Elegir usuario —</option>
                        <?php foreach ($usuarios as $us): ?>
                            <option value="<?php echo $us['id']; ?>" data-franq="<?php echo (int)$us['franquiciado_id']; ?>"><?php echo htmlspecialchars($us['nombre']); ?></option>
                        <?php endforeach; ?>
                    </select>
                    <span class="text-[10px] text-slate-500 mt-1 block">La instancia es PERSONAL: un usuario = una línea. Solo el dueño puede enviar; el resto de su franquicia ve los chats en modo lectura.</span>
                </div>
                <div>
                    <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Teléfono de la línea</label>
                    <input type="text" name="telefono" placeholder="+56 9 XXXX XXXX"
                           class="w-full px-3 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-slate-200 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500">
                </div>
                <?php if ($esAdmin): ?>
                <div class="sm:col-span-2">
                    <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Franquicia (servidor Evolution)</label>
                    <select name="franquiciado_id" id="selFranqInst"
                            class="w-full px-3 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-slate-300 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500">
                        <option value="0">Matriz (global)</option>
                        <?php foreach ($franquiciados as $fr): ?>
                            <option value="<?php echo $fr['id']; ?>"><?php echo htmlspecialchars($fr['nombre_fantasia']); ?> (#<?php echo $fr['id']; ?>)</option>
                        <?php endforeach; ?>
                    </select>
                    <span class="text-[10px] text-slate-500 mt-1 block">Solo informativa: la franquicia se toma SIEMPRE del dueño de la línea.</span>
                </div>
                <?php endif; ?>
            </div>
            <div class="flex justify-end gap-4 pt-2">
                <button type="button" onclick="$('#modalInstancia').addClass('hidden')"
                        class="px-4 py-2.5 border border-red-500/40 hover:border-red-500/70 hover:bg-red-500/10 text-red-400 rounded-xl text-sm font-semibold transition-colors">Cancelar</button>
                <button type="submit"
                        class="px-5 py-2.5 bg-emerald-600 hover:bg-emerald-500 text-white rounded-xl text-sm font-semibold transition-colors">Guardar</button>
            </div>
        </form>
    </div>
</div>

<!-- Modal: conectar línea nueva (elegir dueño → crear en Evolution → QR) -->
<div id="modalConectar" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-slate-950/80 backdrop-blur-sm px-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-md p-6 shadow-2xl">
        <h3 class="text-lg font-bold text-white mb-1 flex items-center gap-2">
            <i data-lucide="qr-code" class="w-5 h-5 text-emerald-400"></i> Conectar línea de WhatsApp
        </h3>
        <p class="text-xs text-slate-400 mb-4">El CRM crea la instancia en Evolution con su webhook y te muestra el QR. Solo hay que escanearlo desde el teléfono del dueño.</p>
        <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-2">Dueño de la línea *</label>
        <select id="selUsuarioConectar" class="w-full px-3 py-2.5 bg-slate-950 border border-slate-800 rounded-xl text-slate-300 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500">
            <option value="">— Elegir usuario —</option>
            <?php foreach ($usuarios as $us): ?>
                <option value="<?php echo $us['id']; ?>"><?php echo htmlspecialchars($us['nombre']); ?></option>
            <?php endforeach; ?>
        </select>
        <div class="flex justify-end gap-4 pt-5">
            <button type="button" onclick="$('#modalConectar').addClass('hidden')"
                    class="px-4 py-2.5 border border-red-500/40 hover:border-red-500/70 hover:bg-red-500/10 text-red-400 rounded-xl text-sm font-semibold transition-colors">Cancelar</button>
            <button type="button" id="btnCrearConectar" onclick="crearYConectar()"
                    class="px-5 py-2.5 bg-emerald-600 hover:bg-emerald-500 text-white rounded-xl text-sm font-semibold transition-colors flex items-center gap-1.5">
                <i data-lucide="qr-code" class="w-4 h-4"></i> Crear y mostrar QR
            </button>
        </div>
    </div>
</div>

<!-- Modal: QR de vinculación (se refresca solo; detecta la conexión) -->
<div id="modalQr" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-slate-950/80 backdrop-blur-sm px-4">
    <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-sm p-6 shadow-2xl text-center">
        <h3 class="text-lg font-bold text-white mb-1">Escanea con WhatsApp</h3>
        <p class="text-xs text-slate-400 mb-4">En el teléfono: WhatsApp → Dispositivos vinculados → Vincular dispositivo.</p>
        <div class="bg-white rounded-xl p-4 mx-auto inline-block min-w-[232px] min-h-[232px] flex items-center justify-center">
            <img id="imgQr" src="" alt="QR de vinculación" class="w-52 h-52 hidden">
            <span id="qrCargando" class="text-slate-500 text-sm">Generando QR...</span>
        </div>
        <div id="pairingWrap" class="hidden mt-3 text-xs text-slate-400">
            ¿Sin cámara? Vincula con el código: <b id="pairingCode" class="text-emerald-400 font-mono text-sm tracking-widest"></b>
        </div>
        <div class="mt-3 flex items-center justify-center gap-2 text-xs" id="estadoQr">
            <span class="w-2 h-2 rounded-full bg-amber-400 animate-pulse"></span>
            <span class="text-slate-400">Esperando escaneo... el QR se renueva solo.</span>
        </div>
        <button type="button" onclick="cerrarModalQr()"
                class="mt-5 px-4 py-2 border border-red-500/40 hover:border-red-500/70 hover:bg-red-500/10 text-red-400 rounded-xl text-xs font-semibold transition-colors">Cerrar</button>
    </div>
</div>

<script>
// ── Conexión de líneas con QR (aprovisionamiento Evolution desde el CRM) ──
var APP_URL = '<?php echo APP_URL; ?>';
var qrInstanciaId = null, qrTimer = null;

function abrirModalConectar() {
    $('#selUsuarioConectar').val('');
    $('#modalConectar').removeClass('hidden');
    lucide.createIcons();
}

function crearYConectar() {
    var usuarioId = $('#selUsuarioConectar').val();
    if (!usuarioId) {
        Swal.fire({ icon: 'warning', title: 'Elige el dueño', text: 'Cada línea pertenece a un usuario.', background: '#1e293b', color: '#f8fafc', confirmButtonColor: '#f59e0b' });
        return;
    }
    $('#btnCrearConectar').attr('disabled', true).addClass('opacity-60');
    $.post(APP_URL + '/whatsapp/instancias/crear-auto', { usuario_id: usuarioId }, function(r) {
        $('#btnCrearConectar').attr('disabled', false).removeClass('opacity-60');
        if (!r.success) {
            Swal.fire({ icon: 'error', title: 'No se pudo crear la línea', text: r.message, background: '#1e293b', color: '#f8fafc', confirmButtonColor: '#ef4444' });
            return;
        }
        $('#modalConectar').addClass('hidden');
        abrirModalQr(r.id);
    }, 'json');
}

function abrirModalQr(id) {
    qrInstanciaId = id;
    $('#imgQr').addClass('hidden').attr('src', '');
    $('#qrCargando').removeClass('hidden').text('Generando QR...');
    $('#pairingWrap').addClass('hidden');
    $('#modalQr').removeClass('hidden');
    lucide.createIcons();
    consultarQr();
    qrTimer = setInterval(consultarQr, 4000);
}

function cerrarModalQr() {
    clearInterval(qrTimer);
    qrTimer = null;
    $('#modalQr').addClass('hidden');
    location.reload();
}

function consultarQr() {
    $.get(APP_URL + '/whatsapp/instancias/qr', { id: qrInstanciaId }, function(r) {
        if (r.estado === 'open') {
            clearInterval(qrTimer);
            qrTimer = null;
            $('#modalQr').addClass('hidden');
            Swal.fire({
                icon: 'success', title: '¡Línea conectada!',
                text: r.telefono ? 'WhatsApp vinculado con el número ' + r.telefono + '.' : 'WhatsApp vinculado correctamente.',
                background: '#1e293b', color: '#f8fafc', confirmButtonColor: '#10b981',
                timer: 2200, showConfirmButton: false
            }).then(function() { location.reload(); });
            return;
        }
        if (r.qr) {
            var src = (r.qr.indexOf('data:') === 0) ? r.qr : 'data:image/png;base64,' + r.qr;
            $('#imgQr').attr('src', src).removeClass('hidden');
            $('#qrCargando').addClass('hidden');
        }
        if (r.pairing) {
            $('#pairingCode').text(r.pairing);
            $('#pairingWrap').removeClass('hidden');
        }
        if (!r.success && r.message) {
            $('#qrCargando').removeClass('hidden').text('Sin QR aún (' + r.message + '). Reintentando...');
        }
    }, 'json');
}

function cerrarSesionInstancia(id) {
    Swal.fire({
        icon: 'question', title: '¿Cerrar la sesión del teléfono?',
        text: 'La línea quedará desconectada hasta que se vincule de nuevo con el QR.',
        showCancelButton: true, confirmButtonText: 'Sí, cerrar sesión', cancelButtonText: 'Cancelar',
        background: '#1e293b', color: '#f8fafc', confirmButtonColor: '#d97706'
    }).then(function(res) {
        if (!res.isConfirmed) return;
        $.post(APP_URL + '/whatsapp/instancias/logout', { id: id }, function(r) {
            Swal.fire({ icon: r.success ? 'success' : 'error', title: r.message, background: '#1e293b', color: '#f8fafc', timer: 2000, showConfirmButton: false })
                .then(function() { location.reload(); });
        }, 'json');
    });
}

function eliminarInstancia(id, nombre) {
    Swal.fire({
        icon: 'warning', title: '¿Eliminar la línea "' + nombre + '"?',
        text: 'Se borra del servidor Evolution. El historial de chats se conserva en el CRM y el usuario queda libre para una línea nueva.',
        showCancelButton: true, confirmButtonText: 'Sí, eliminar', cancelButtonText: 'Cancelar',
        background: '#1e293b', color: '#f8fafc', confirmButtonColor: '#ef4444'
    }).then(function(res) {
        if (!res.isConfirmed) return;
        $.post(APP_URL + '/whatsapp/instancias/eliminar', { id: id }, function(r) {
            Swal.fire({ icon: r.success ? 'success' : 'error', title: r.message, background: '#1e293b', color: '#f8f8fc', timer: 2400, showConfirmButton: false })
                .then(function() { location.reload(); });
        }, 'json');
    });
}
</script>

<script>
$(document).ready(function() {
    // Consultar estado de conexión de cada instancia
    $('.conexion-badge').each(function() {
        var badge = $(this);
        $.ajax({
            url: '<?php echo APP_URL; ?>/whatsapp/instancias/estado',
            data: { id: badge.data('id') },
            dataType: 'json',
            success: function(res) {
                var punto = badge.find('span').first();
                var texto = badge.find('.conexion-texto');
                if (res.success && res.estado === 'open') {
                    punto.removeClass('bg-slate-600').addClass('bg-emerald-400');
                    texto.text('Conectada').addClass('text-emerald-400');
                } else if (res.success && res.estado === 'connecting') {
                    punto.removeClass('bg-slate-600').addClass('bg-amber-400');
                    texto.text('Conectando...').addClass('text-amber-400');
                } else {
                    punto.removeClass('bg-slate-600').addClass('bg-red-400');
                    texto.text('Desconectada').addClass('text-red-400');
                }
            },
            error: function() {
                badge.find('.conexion-texto').text('Sin respuesta');
            }
        });
    });

    $('#formInstancia').on('submit', function(e) {
        e.preventDefault();
        $.post('<?php echo APP_URL; ?>/whatsapp/instancias/guardar', $(this).serialize(), function(res) {
            if (res.success) {
                Swal.fire({ icon: 'success', title: res.message, background: '#1e293b', color: '#f8fafc', timer: 1400, showConfirmButton: false })
                    .then(function() { location.reload(); });
            } else {
                Swal.fire({ icon: 'error', title: 'Error', text: res.message, background: '#1e293b', color: '#f8fafc', confirmButtonColor: '#ef4444' });
            }
        }, 'json');
    });
});

function abrirModalInstancia(data) {
    var form = $('#formInstancia');
    form[0].reset();
    if (data) {
        $('#modalInstanciaTitulo').text('Editar Instancia');
        form.find('[name=id]').val(data.id);
        form.find('[name=nombre_instancia]').val(data.nombre_instancia);
        form.find('[name=api_url]').val(data.api_url);
        form.find('[name=api_token]').val(data.api_token);
        form.find('[name=telefono]').val(data.telefono || '');
        form.find('[name=franquiciado_id]').val(data.franquiciado_id || 0);
        form.find('[name=usuario_id]').val(data.usuario_id || 0);
    } else {
        $('#modalInstanciaTitulo').text('Nueva Instancia');
        form.find('[name=id]').val(0);
        form.find('[name=api_url]').val('<?php echo htmlspecialchars($defaultApiUrl); ?>');
    }
    $('#modalInstancia').removeClass('hidden');
    lucide.createIcons();
}

// Al elegir vendedor, autocompletar su franquicia
$(document).on('change', '#selUsuarioInst', function() {
    var franq = $(this).find('option:selected').data('franq');
    if (franq && $('#selFranqInst').length) {
        $('#selFranqInst').val(franq);
    }
});

function copiarWebhook(btn, url) {
    function feedback() {
        var original = btn.innerHTML;
        btn.innerHTML = '<i data-lucide="check" class="w-3.5 h-3.5"></i><span>¡Copiada!</span>';
        lucide.createIcons();
        setTimeout(function() { btn.innerHTML = original; lucide.createIcons(); }, 1600);
    }
    if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(url).then(feedback);
    } else {
        var ta = document.createElement('textarea');
        ta.value = url;
        document.body.appendChild(ta);
        ta.select();
        document.execCommand('copy');
        document.body.removeChild(ta);
        feedback();
    }
}

function toggleInstancia(id, activa) {
    Swal.fire({
        title: activa ? '¿Desactivar instancia?' : '¿Activar instancia?',
        text: activa ? 'Los envíos por esta línea quedarán deshabilitados.' : 'La línea volverá a estar disponible para envíos.',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Sí, continuar',
        cancelButtonText: 'Cancelar',
        background: '#1e293b',
        color: '#f8fafc',
        confirmButtonColor: activa ? '#d97706' : '#059669'
    }).then(function(r) {
        if (!r.isConfirmed) return;
        $.post('<?php echo APP_URL; ?>/whatsapp/instancias/toggle', { id: id }, function(res) {
            if (res.success) location.reload();
            else Swal.fire({ icon: 'error', title: 'Error', text: res.message, background: '#1e293b', color: '#f8fafc' });
        }, 'json');
    });
}
</script>
