{% extends 'layouts/base.html' %}

{% block title %}Configuración del Bot{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-900">Configuración del Bot y WhatsApp</h1>
    <p class="text-gray-500">Vincula tu número y personaliza las respuestas automáticas de {{ vendedor.nombre_negocio }}.</p>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Columna Izquierda: Vinculación de WhatsApp (Código QR Dinámico) -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex flex-col items-center text-center">
        <h2 class="text-lg font-semibold text-gray-800 mb-2">Conexión de WhatsApp</h2>
        <p class="text-sm text-gray-500 mb-6">Escanea el código QR con la app de WhatsApp en tu celular para sincronizar el bot.</p>

        <!-- Contenedor del Código QR -->
        <div id="qrContainer" class="bg-gray-50 p-4 rounded-xl border border-gray-200 mb-4 flex items-center justify-center w-64 h-64 relative">
            <div id="loadingQr" class="text-gray-400 text-sm flex flex-col items-center">
                <i class="ph ph-spinner animate-spin text-3xl mb-2 text-blue-600"></i>
                Generando QR...
            </div>
            <img id="qrImage" src="" alt="Código QR WhatsApp" class="hidden w-full h-full object-contain rounded-lg">
        </div>

        <div id="estadoConexion" class="mb-4">
            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-800">
                <span class="w-2 h-2 mr-1.5 bg-amber-500 rounded-full animate-pulse"></span> Desconectado
            </span>
        </div>

        <button onclick="verificarEstadoQR()" class="w-full bg-gray-100 hover:bg-gray-200 text-gray-700 py-2 rounded-lg font-medium transition-colors text-sm">
            <i class="ph ph-arrows-clockwise mr-1"></i> Actualizar Estado QR
        </button>
    </div>

    <!-- Columna Derecha: Reglas y Comandos del Bot (Cero Código Quemado) -->
    <div class="lg:col-span-2 bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <h2 class="text-lg font-semibold text-gray-800 mb-4">Reglas y Mensajes Automatizados</h2>
        
        <form action="{{ url_for('settings.bot_config') }}" method="POST">
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Comando para Aprobar Ventas</label>
                    <input type="text" name="comando_aprobar" value="{{ config.comando_aprobar if config else '#aprobar' }}" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 font-mono text-sm">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Comando para Renovar</label>
                    <input type="text" name="comando_renovar" value="{{ config.comando_renovar if config else '#renovar' }}" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 font-mono text-sm">
                </div>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Mensaje de Bienvenida Automático</label>
                <textarea name="mensaje_bienvenida" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm" placeholder="¡Hola! Bienvenido a nuestro servicio de streaming...">{{ config.mensaje_bienvenida if config else '' }}</textarea>
                <p class="text-xs text-gray-400 mt-1">Este mensaje se enviará automáticamente cuando un cliente nuevo escriba por primera vez al WhatsApp.</p>
            </div>

            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-1">Días de anticipación para el 1er Recordatorio</label>
                <input type="number" name="recordatorio_1_dias" value="{{ config.recordatorio_1_dias if config else 3 }}" class="w-full sm:w-1/3 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm">
                <p class="text-xs text-gray-400 mt-1">Cuántos días antes del vencimiento el bot alertará al cliente de su renovación.</p>
            </div>

            <!-- === NUEVO CAMPO: HORARIO DE COBRANZA AUTOMÁTICA === -->
            <div class="mb-6 bg-blue-50 p-5 rounded-xl border border-blue-100 shadow-sm">
                <div class="flex items-start gap-4">
                    <div class="w-12 h-12 bg-white rounded-full flex items-center justify-center border border-blue-200 text-blue-600 shadow-sm shrink-0">
                        <i class="ph ph-clock text-2xl"></i>
                    </div>
                    <div class="flex-grow">
                        <h4 class="text-sm font-bold text-blue-900 mb-1">Horario de Cobranza Automática</h4>
                        <p class="text-xs text-blue-700 mb-3">¿A qué hora exacta quieres que el bot despierte, revise los vencimientos y envíe los mensajes de cobranza o corte a tus clientes?</p>
                        
                        <div class="flex items-center gap-2">
                            <input type="time" name="hora_recordatorios" 
                                   value="{{ config.hora_recordatorios.strftime('%H:%M') if config and config.hora_recordatorios else '10:00' }}" 
                                   required 
                                   class="w-40 px-3 py-2 border border-blue-200 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm font-mono shadow-sm bg-white text-gray-900">
                            <span class="text-xs text-gray-500 font-medium">Hora Local (Perú)</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex justify-end border-t border-gray-100 pt-4">
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium shadow-sm transition-colors">
                    Guardar Configuración
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    // Lógica para cargar y mostrar el Código QR de WhatsApp dinámicamente
    async function verificarEstadoQR() {
        const qrImage = document.getElementById('qrImage');
        const loadingQr = document.getElementById('loadingQr');
        const estadoConexion = document.getElementById('estadoConexion');

        try {
            const respuesta = await fetch('/configuracion/api/qr-estado');
            const data = await respuesta.json();

            if (data.conectado) {
                loadingQr.classList.add('hidden');
                qrImage.classList.add('hidden');
                estadoConexion.innerHTML = `<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800"><span class="w-2 h-2 mr-1.5 bg-green-500 rounded-full"></span> Conectado y Operativo</span>`;
            } else {
                loadingQr.classList.add('hidden');
                qrImage.src = data.qr_code;
                qrImage.classList.remove('hidden');
                estadoConexion.innerHTML = `<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-800"><span class="w-2 h-2 mr-1.5 bg-amber-500 rounded-full animate-pulse"></span> Esperando escaneo QR</span>`;
            }
        } catch (error) {
            console.error("Error al obtener el estado del QR:", error);
        }
    }

    // Ejecutar al cargar la página
    window.onload = verificarEstadoQR;
</script>
{% endblock %}