{% extends "base.html" %}
{% set active = "ia" %}
{% block title %}Asistente IA · ArcaBeauty Club{% endblock %}

{% block extra_css %}
<style>
.chat-shell { display:grid; grid-template-columns:260px 1fr; gap:20px; height:calc(100vh - 180px); }
.sugerencias { display:flex; flex-direction:column; gap:8px; }
.chip {
    padding:10px 14px; border-radius:10px; background:var(--blanco); border:1px solid var(--linea);
    font-size:13px; cursor:pointer; color:var(--tinta); transition:border-color .15s, box-shadow .15s;
    text-align:left;
}
.chip:hover { border-color:var(--terracota-claro); box-shadow:var(--sombra); }
.chat-main { display:flex; flex-direction:column; }
.messages { flex:1; overflow-y:auto; padding:4px 0 16px; display:flex; flex-direction:column; gap:12px; }
.msg { max-width:82%; border-radius:14px; padding:13px 16px; font-size:14px; line-height:1.55; }
.msg.user { align-self:flex-end; background:var(--ciruela); color:var(--crema); border-bottom-right-radius:4px; }
.msg.assistant { align-self:flex-start; background:var(--blanco); border:1px solid var(--linea); border-bottom-left-radius:4px; }
.msg.assistant.cargando { color:var(--tinta-suave); font-style:italic; }
.chat-input { display:flex; gap:8px; margin-top:auto; padding-top:12px; border-top:1px solid var(--linea); }
.chat-input textarea { flex:1; resize:none; height:52px; border-radius:10px; padding:12px 14px; font-size:14px; }
.chat-input button { align-self:flex-end; }
.bienvenida { text-align:center; padding:40px 20px; color:var(--tinta-suave); }
.bienvenida .display { font-size:22px; color:var(--ciruela); margin-bottom:8px; }
@media (max-width:820px) { .chat-shell { grid-template-columns:1fr; height:auto; } }
</style>
{% endblock %}

{% block content %}
<div class="topbar">
    <div>
        <div class="eyebrow">Módulo Premium</div>
        <h1>Asistente IA</h1>
    </div>
    <button class="btn ghost sm" onclick="limpiarChat()">Nueva conversación</button>
</div>

<div class="chat-shell">
    <div>
        <p style="font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--tinta-suave); margin-bottom:10px;">Sugerencias rápidas</p>
        <div class="sugerencias">
            <button class="chip" onclick="enviarSugerencia(this)">¿Cómo están las ventas de esta semana?</button>
            <button class="chip" onclick="enviarSugerencia(this)">¿Qué productos están en stock crítico?</button>
            <button class="chip" onclick="enviarSugerencia(this)">Dame ideas de promociones para atraer clientes nuevos</button>
            <button class="chip" onclick="enviarSugerencia(this)">Redacta un mensaje de WhatsApp para recordatorio de cita</button>
            <button class="chip" onclick="enviarSugerencia(this)">¿Cuáles son los servicios más populares?</button>
            <button class="chip" onclick="enviarSugerencia(this)">Dame consejos para reducir cancelaciones de citas</button>
            <button class="chip" onclick="enviarSugerencia(this)">Sugiere un plan de fidelización para clientes VIP</button>
        </div>
    </div>

    <div class="chat-main card" style="padding:20px;">
        <div class="messages" id="messages">
            <div class="bienvenida">
                <div class="display">¿En qué te puedo ayudar hoy?</div>
                <p>Soy tu asistente con contexto real del salón: ventas de hoy, inventario, servicios populares y más. Pregúntame lo que necesites.</p>
            </div>
        </div>
        <div class="chat-input">
            <textarea id="inputMsg" placeholder="Escribe tu pregunta o instrucción..." onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();enviar();}"></textarea>
            <button class="btn accent" onclick="enviar()" id="btnEnviar">Enviar</button>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let historial = [];

function limpiarChat() {
    historial = [];
    const box = document.getElementById('messages');
    box.innerHTML = `<div class="bienvenida"><div class="display">¿En qué te puedo ayudar hoy?</div><p>Soy tu asistente con contexto real del salón: ventas de hoy, inventario, servicios populares y más.</p></div>`;
}

function enviarSugerencia(btn) {
    document.getElementById('inputMsg').value = btn.textContent;
    enviar();
}

async function enviar() {
    const input = document.getElementById('inputMsg');
    const texto = input.value.trim();
    if (!texto) return;
    input.value = '';

    const box = document.getElementById('messages');
    if (box.querySelector('.bienvenida')) box.innerHTML = '';

    // Mensaje del usuario
    box.innerHTML += `<div class="msg user">${escapeHtml(texto)}</div>`;
    historial.push({role: 'user', content: texto});

    // Placeholder "pensando"
    const pid = 'p' + Date.now();
    box.innerHTML += `<div class="msg assistant cargando" id="${pid}">✦ Pensando...</div>`;
    box.scrollTop = box.scrollHeight;

    document.getElementById('btnEnviar').disabled = true;

    try {
        const resp = await fetch('/api/ia/chat', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ mensajes: historial })
        });
        const data = await resp.json();
        if (data.error) {
            document.getElementById(pid).className = 'msg assistant';
            document.getElementById(pid).innerHTML = formatear(data.error);
        } else {
            historial.push({role: 'assistant', content: data.texto});
            document.getElementById(pid).className = 'msg assistant';
            document.getElementById(pid).innerHTML = formatear(data.texto);
        }
    } catch(e) {
        document.getElementById(pid).innerHTML = 'Error al conectar con el servidor. Verifica tu conexión.';
    }
    document.getElementById('btnEnviar').disabled = false;
    box.scrollTop = box.scrollHeight;
}

function formatear(txt) {
    return txt
        .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
        .replace(/\n/g,'<br>')
        .replace(/•\s(.+)/g,'<span style="display:block;padding-left:10px;">• $1</span>');
}

function escapeHtml(t) {
    return t.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}
</script>
{% endblock %}