{% extends './manager.html' %}
{% block content %}
{% load static %}

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<style>
    :root {
        --brand-pink: #d63384;
        --brand-navy: #0b2f4c;
        --bg-chat: #f0f2f5;
        --white: #ffffff;
        --bot-msg-bg: #ffffff;
        --user-msg-bg: #d63384;
    }

    .chat-card-wrapper {
        background: var(--white);
        height: calc(100vh - 80px); 
        display: flex;
        flex-direction: column;
        width: 100%;
        font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    }

    /* Cabecera Gerencial */
    .chat-header {
        background: var(--brand-navy);
        color: white;
        padding: 15px 25px;
        display: flex;
        align-items: center;
        gap: 15px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        z-index: 10;
    }

    /* Avatar Minimalista y Elegante (Sin color de fondo llamativo) */
    .avatar-bot {
        width: 42px;
        height: 42px;
        background: var(--white); /* Fondo blanco limpio */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: var(--brand-navy); /* El robot ahora es color Navy */
        border: 2px solid var(--brand-pink); /* Borde fino en rosa para resaltar */
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        flex-shrink: 0;
    }

    #messages {
        flex: 1;
        padding: 20px;
        overflow-y: auto;
        background-color: var(--bg-chat);
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* Animación de burbujas */
    .msg-bot, .msg-user {
        display: flex;
        animation: fadeInUp 0.3s ease;
    }

    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .msg-user { justify-content: flex-end; }
    .msg-user span { 
        background: var(--user-msg-bg); 
        color: white; 
        padding: 10px 16px; 
        border-radius: 18px 18px 2px 18px;
        max-width: 80%;
        box-shadow: 0 2px 4px rgba(214, 51, 132, 0.2);
    }

    .msg-bot { justify-content: flex-start; }
    .msg-bot span { 
        background: var(--bot-msg-bg); 
        color: #333; 
        padding: 10px 16px; 
        border-radius: 18px 18px 18px 2px;
        border: 1px solid #e0e0e0;
        max-width: 80%;
    }

    /* Sugerencias Estilizadas */
    #dynamic-suggestions {
        padding: 15px 20px;
        background: #f8f9fa;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        border-top: 1px solid #dee2e6;
    }

    .suggestion-btn {
        background: white;
        color: var(--brand-navy);
        border: 1.5px solid var(--brand-navy);
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: bold;
        cursor: pointer;
        transition: 0.2s ease;
    }

    .suggestion-btn:hover {
        background: var(--brand-navy);
        color: white;
        transform: translateY(-2px);
    }

    /* Área de Entrada */
    #input-area {
        padding: 15px 30px;
        background: var(--white);
        display: flex;
        gap: 10px;
        border-top: 1px solid #eee;
        align-items: center;
    }

    #userInput { 
        flex: 1; 
        border-radius: 25px; 
        padding: 12px 20px; 
        border: 1.5px solid #ccc; 
        outline: none;
    }

    #userInput:focus { border-color: var(--brand-pink); }

    #sendButton { 
        background: var(--brand-navy); 
        color: white; 
        border: none; 
        border-radius: 50%; 
        width: 45px; 
        height: 45px; 
        cursor: pointer; 
        transition: transform 0.2s;
    }
    
    #sendButton:hover { transform: scale(1.05); background: var(--brand-pink); }

    .typing-indicator {
        font-size: 12px;
        color: #888;
        margin-left: 10px;
        margin-bottom: 5px;
        display: none;
    }

    .chart-container-msg {
        background: white;
        padding: 15px;
        border-radius: 15px;
        margin-top: 10px;
        border: 1px solid #ddd;
        width: 100%;
        max-width: 450px;
    }
</style>

<div class="chat-card-wrapper">
    <div class="chat-header">
        <div class="avatar-bot">
            <i class="fas fa-robot"></i>
        </div>
        <div>
            <h5 class="mb-0 fw-bold">ASISTENTE V&M GERENCIAL</h5>
            <small style="opacity: 0.8;">Análisis de datos en tiempo real</small>
        </div>
    </div>

    <div id="messages">
        <div class="msg-bot"><span>Hola. Selecciona una opción para analizar la interacción:</span></div>
    </div>

    <div id="typing" class="typing-indicator">Procesando consulta...</div>

    <div id="dynamic-suggestions"></div>

    <div id="input-area">
        <input type="text" id="userInput" placeholder="Escribe tu consulta..." autocomplete="off">
        <button id="sendButton"><i class="fas fa-paper-plane"></i></button>
    </div>
</div>

<script>
    const messagesEl = document.getElementById("messages");
    const suggestionContainer = document.getElementById("dynamic-suggestions");
    const userInput = document.getElementById("userInput");
    const typingIndicator = document.getElementById("typing");

    let currentMenuKey = "main";

    const menus = {
        main: [
            { label: "💖 Top Likes", value: "submenu_likes" },
            { label: "🚫 Menos Likes", value: "submenu_sin_likes" },
            { label: "👥 Clientes", value: "Muestra los modelos de productos con más likes por cada cliente" },
            { label: "📅 Reportes por mes", value: "submenu_mes" }
        ],
        submenu_likes: [
            { label: "📐 Por Talla", value: "Dame el top de productos con más likes por talla" },
            { label: "🌈 Por Color", value: "Dame el top de productos con más likes por color" },
            { label: "👠 Por Categoria", value: "Dame el top de productos con más likes por categoria" },
            { label: "🔙 Volver", value: "main" }
        ],
        submenu_sin_likes: [
            { label: "📐 Tallas con menos Likes", value: "Dame el top de productos con menos likes por talla" },
            { label: "🌈 Colores con menos Likes", value: "Dame el top de productos con menos likes por color" },
            { label: "👠 Categorías con menos Likes", value: "Dame el top de productos con menos likes por categoria" },
            { label: "🔙 Volver", value: "main" }
        ],
        submenu_mes: [
            { label: "✨ Este Mes", value: "Tendencia de likes este mes" },
            { label: "📂 Elegir Mes Específico", value: "submenu_listado_meses" },
            { label: "🔙 Volver", value: "main" }
        ],
        submenu_listado_meses: [
            { label: "Ene", value: "actividades del mes de enero" }, { label: "Feb", value: "actividades del mes de febrero" },
            { label: "Mar", value: "actividades del mes de marzo" }, { label: "Abr", value: "actividades del mes de abril" },
            { label: "May", value: "actividades del mes de mayo" }, { label: "Jun", value: "actividades del mes de junio" },
            { label: "Jul", value: "actividades del mes de julio" }, { label: "Ago", value: "actividades del mes de agosto" },
            { label: "Sep", value: "actividades del mes de septiembre" }, { label: "Oct", value: "actividades del mes de octubre" },
            { label: "Nov", value: "actividades del mes de noviembre" }, { label: "Dic", value: "actividades del mes de diciembre" },
            { label: "🔙 Volver", value: "submenu_mes" }
        ]
    };

    function renderButtons(key) {
        currentMenuKey = key;
        suggestionContainer.innerHTML = "";
        menus[key].forEach(opt => {
            const btn = document.createElement("button");
            btn.className = "suggestion-btn";
            btn.innerHTML = opt.label;
            btn.onclick = () => {
                if (opt.value.startsWith("submenu_") || opt.value === "main") {
                    renderButtons(opt.value);
                } else {
                    userInput.value = opt.value;
                    sendMessage();
                }
            };
            suggestionContainer.appendChild(btn);
        });
    }

    function appendMessage(text, sender = "bot") {
        const div = document.createElement("div");
        div.className = sender === "user" ? "msg-user" : "msg-bot";
        div.innerHTML = `<span>${text}</span>`;
        messagesEl.appendChild(div);
        messagesEl.scrollTop = messagesEl.scrollHeight;
    }

    function sendMessage() {
        const message = userInput.value.trim();
        if (!message) return;
        
        appendMessage(message, "user");
        userInput.value = "";
        typingIndicator.style.display = "block";

        fetch("/api/chatbot/admin/", { 
            method: "POST",
            headers: { "Content-Type": "application/json", "X-CSRFToken": "{{ csrf_token }}" },
            body: JSON.stringify({ message })
        })
        .then(res => res.json())
        .then(data => {
            typingIndicator.style.display = "none";
            appendMessage(data.reply, "bot");
            if (data.action && data.action.startsWith('chart_')) {
                renderChartInChat(data.action, data.chart_data);
            }
            renderButtons(currentMenuKey); 
        })
        .catch(() => { typingIndicator.style.display = "none"; });
    }

    function renderChartInChat(action, chartData) {
        const chartDiv = document.createElement("div");
        chartDiv.className = "chart-container-msg"; 
        const canvas = document.createElement("canvas");
        chartDiv.appendChild(canvas);
        messagesEl.appendChild(chartDiv);
        messagesEl.scrollTop = messagesEl.scrollHeight;

        new Chart(canvas, {
            type: action === "chart_bar" ? 'bar' : action === "chart_line" ? 'line' : 'pie',
            data: {
                labels: chartData.labels,
                datasets: [{
                    label: chartData.label,
                    data: chartData.data,
                    backgroundColor: ['#d63384', '#0b2f4c', '#ffc107', '#28a745', '#17a2b8'],
                    borderWidth: 1,
                    borderRadius: 5
                }]
            },
            options: { responsive: true, plugins: { legend: { display: action === 'chart_pie' } } }
        });
    }

    renderButtons("main");
    document.getElementById("sendButton").onclick = sendMessage;
    userInput.addEventListener("keydown", (e) => { if (e.key === "Enter") sendMessage(); });
</script>
{% endblock %}