{% extends './manager.html' %}
{% block content %}
<div class="container-fluid mt-4 pb-5">
    <div class="card shadow-sm mb-4 animate__animated animate__fadeIn">
        <div class="card-body d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center">
                <div class="bg-primary text-white stat-icon me-3"><i class="fas fa-chart-line"></i></div>
                <div>
                    <h3 class="fw-bold mb-0">Business Intelligence</h3>
                    <p class="text-muted small mb-0">Análisis de Comportamiento y Tendencias</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <div class="col-md-3"><div class="card card-stats shadow-sm p-3 border-start border-danger border-5"><h6>Total Likes</h6><h3>{{ likes_totales }}</h3></div></div>
        <div class="col-md-3"><div class="card card-stats shadow-sm p-3 border-start border-primary border-5"><h6>Modelos</h6><h3>{{ total_modelos }}</h3></div></div>
        
        <div class="col-md-3">
    <div class="card card-stats shadow-sm p-3 border-start border-5" 
         onclick="mostrarFormula()" 
         style="cursor: pointer; border-color: {% if promedio >= 2.0 %}#1cc88a{% elif promedio >= 1.0 %}#4e73df{% else %}#858796{% endif %} !important;" 
         title="Ver fórmula de cálculo">
        
        <div class="d-flex justify-content-between align-items-start">
            <div>
                <h6 class="text-muted small fw-bold text-uppercase mb-1">
                    Engagement <i class="fas fa-info-circle text-muted small"></i>
                </h6>
                
                <h3 class="fw-bold" style="color: {% if promedio >= 2.0 %}#1cc88a{% elif promedio >= 1.0 %}#4e73df{% else %}#5a5c69{% endif %};">
                    {{ promedio }}
                </h3>
            </div>

            <div class="text-end">
                {% if promedio >= 2.0 %}
                    <i class="fas fa-medal text-success fs-4"></i>
                {% elif promedio >= 1.0 %}
                    <i class="fas fa-chart-line text-primary fs-4"></i>
                {% else %}
                    <i class="fas fa-arrow-right text-secondary fs-4"></i>
                {% endif %}
            </div>
        </div>

       <div class="mt-2">
    {% if promedio >= 2.0 %}
        <span class="badge bg-success text-white border border-success" style="font-size: 0.65rem;">
            <i class="fas fa-circle me-1"></i> EXCELENTE (FIDELIZACIÓN TOTAL)
        </span>
    {% elif promedio >= 1.1 %}
        <span class="badge bg-warning text-dark border border-warning" style="font-size: 0.65rem;">
            <i class="fas fa-circle me-1"></i> ESTABLE (CRECIMIENTO)
        </span>
    {% else %}
        <span class="badge bg-danger text-white border border-danger" style="font-size: 0.65rem;">
            <i class="fas fa-circle me-1"></i> CRÍTICO (POCA INTERACCIÓN)
        </span>
    {% endif %}
</div>
    </div>
</div>
        
<div class="col-md-3">
    <div class="card shadow-sm border-0 h-100" style="border-radius: 15px; border-left: 5px solid #ffc107 !important;">
        <div class="card-body p-3 d-flex align-items-center">
            <div class="flex-grow-1">
                <h6 class="text-muted small fw-bold text-uppercase mb-1" style="font-size: 0.7rem;">Top Categoría</h6>
                <h3 class="fw-bold mb-0" style="color: #333; font-size: 1.4rem;">
                    {{ categoria_top|upper }}
                </h3>
                <div class="mt-1">
                    <span class="badge bg-warning-subtle text-warning fw-bold" style="font-size: 0.65rem; border: 1px solid #ffc107;">
                        <i class="fas fa-crown me-1"></i> TENDENCIA
                    </span>
                </div>
            </div>
            <div class="ms-2">
                <div  style="width: 40px; height: 40px;">
                    <i class="fas fa-trophy text-warning"></i>
                </div>
            </div>
        </div>
    </div>
</div>    </div>

    <div class="row mb-4">
        <div class="col-lg-8">
            <div class="card shadow-sm p-4 h-100">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 id="tituloGrafica" class="fw-bold">📈 Análisis Temporal</h5>
                    <div class="btn-group">
                        <button id="btnMes" class="btn btn-primary btn-sm" onclick="cambiarGrafica('mes')">Mes</button>
                        <button id="btnDia" class="btn btn-light btn-sm" onclick="cambiarGrafica('dia')">Día</button>
                        <button id="btnHora" class="btn btn-light btn-sm" onclick="cambiarGrafica('hora')">Hora</button>
                    </div>
                </div>
                <div style="height:300px;"><canvas id="graficaPrincipal"></canvas></div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card shadow-sm p-4 h-100">
                <h5 class="fw-bold">Distribución por Categoría</h5>
                <div style="height:220px;"><canvas id="graficaPie"></canvas></div>
                <div id="listaCorreos" class="mt-3" style="display:none;">
                    <div class="p-2 rounded bg-light border-start border-primary border-4">
                        <h6 class="small fw-bold text-primary text-uppercase">Leads de: <span id="tagCategoria"></span></h6>
                        <div id="correosContainer" style="max-height:150px; overflow-y:auto;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card shadow-sm my-5 animate__animated animate__fadeIn">
        <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center flex-wrap gap-2">
            <h5 class="fw-bold mb-0 text-primary"><i class="fas fa-users me-2"></i>Listado Estratégico de Clientes</h5>
            <div class="d-flex gap-2">
                <div class="search-container">
                    <i class="fas fa-search"></i>
                    <input type="text" id="buscadorLeads" class="form-control form-control-sm" placeholder="Buscar cliente...">
                </div>
                <button class="btn btn-success btn-sm fw-bold px-3 shadow-sm" onclick="exportarSoloContactos()">
                    <i class="fas fa-file-excel me-1"></i> Exportar
                </button>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0" id="tablaClientes">
                <thead class="bg-light text-muted small text-uppercase">
                    <tr>
                        <th class="ps-4">Usuario</th>
                        <th>Correo Electrónico</th>
                        <th>Preferencia BI</th>
                        <th class="text-end pe-4">Acción</th>
                    </tr>
                </thead>
                <tbody>
                    {% for c in clientes_estrella %}
                    <tr class="cliente-row" data-categoria="{{ c.preferencia_real }}" onclick="abrirPerfilLead('{{ c.username }}', '{{ c.email }}', '{{ c.preferencia_real }}', '{{ c.producto_nombre }}')">
                        <td class="ps-4">
                            <div class="d-flex align-items-center">
                                <div class="avatar-sm bg-primary text-white rounded-circle me-2 shadow-sm">{{ c.username|slice:":1"|upper }}</div>
                                <span class="fw-bold text-dark">{{ c.username }}</span>
                            </div>
                        </td>
                        <td>{{ c.email }}</td>
                        <td><span class="badge bg-info-subtle text-dark border rounded-pill px-3">{{ c.preferencia_real }}</span></td>
                        <td class="text-end pe-4">
                            <button class="btn btn-sm btn-outline-primary rounded-pill px-3">Ver Perfil</button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <div class="row my-5 animate__animated animate__fadeInUp">
        <div class="col-lg-6 mb-4">
            <div class="card shadow-sm border-0 border-top border-primary border-5 h-100">
                <div class="card-header bg-white py-3">
                    <h6 class="text-uppercase fw-bold mb-0 text-primary"><i class="fas fa-medal me-2"></i>Top 5: Modelos Estrella</h6>
                </div>
                <div class="card-body">
                    {% for p in productos_top %}
                    <div class="mb-4">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <span class="fw-bold text-dark small">{{ p.nombre_completo|upper }}</span>
                            <span class="badge rounded-pill" style="background-color: {{ p.color_barra }};">{{ p.total_likes }} likes</span>
                        </div>
                        <div class="progress" style="height: 10px; border-radius: 20px; background-color: #f0f2f5;">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" 
                                 style="width: {{ p.porcentaje }}%; background-color: {{ p.color_barra }};"></div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="col-lg-6 mb-4">
            <div class="card shadow-sm border-0 border-top border-danger border-5 h-100">
                <div class="card-header bg-white py-3">
                    <h6 class="text-uppercase fw-bold mb-0 text-danger"><i class="fas fa-snowflake me-2"></i>Bottom 5: Menos Votos</h6>
                </div>
                <div class="card-body">
                    {% for p in productos_bottom %}
                    <div class="mb-3 d-flex align-items-center justify-content-between p-3 rounded-3 bg-light border">
                        <div class="d-flex align-items-center">
                            <div class="bg-danger rounded-circle me-3" style="width: 10px; height: 10px;"></div>
                            <span class="text-muted fw-bold small">{{ p.nombre_completo }}</span>
                        </div>
                        <span class="badge bg-white text-danger border border-danger-subtle">{{ p.total_likes }}</span>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js"></script>

<script>
    // --- LÓGICA DE FÓRMULA (NUEVA PARA EL INGENIERO) ---
    // --- EXPLICACIÓN TÉCNICA PARA EL INGENIERO ---
    function mostrarFormula() {
    Swal.fire({
        title: '<i class="fas fa-users-cog me-2"></i>Métrica de Engagement Social',
        html: `
        <div class="text-start p-2" style="font-size: 0.95rem;">
            <p class="text-muted">Esta métrica mide el <strong>nivel de lealtad</strong> de nuestra comunidad de clientes.</p>
            
            <div class="bg-light p-3 rounded border text-center my-3 shadow-sm">
                <p class="mb-2 text-uppercase small fw-bold text-secondary">Fórmula de Fidelización:</p>
                <div class="h5 mb-0 text-primary">
                    <span class="badge bg-danger">Likes Totales ({{ likes_totales }})</span> 
                    <span class="text-dark"> ÷ </span>
                    <span class="badge bg-info">Total Clientes ({{ total_usuarios }})</span>
                </div>
            </div>

            <div class="p-2 border-start border-4 border-primary bg-primary-subtle rounded mb-3">
                <p class="mb-0"><strong>Resultado:</strong> Cada cliente aporta <b>{{ promedio }}</b> interacciones promedio.</p>
            </div>

           
        </div>`,
        confirmButtonText: 'Entendido',
        confirmButtonColor: '#4e73df'
    });
}

    // --- Lógica de Gráficas (Datos de Django) ---
    let gPrincipal;
    const dMes = { labels: [{% for m, t in likes_por_mes.items %}"{{ m }}"{% if not forloop.last %},{% endif %}{% endfor %}], data: [{% for m, t in likes_por_mes.items %}{{ t }}{% if not forloop.last %},{% endif %}{% endfor %}] };
    const dDia = { labels: ["Lun", "Mar", "Mié", "Jue", "Vie", "Sáb", "Dom"], data: {{ likes_por_dia|safe }} };
    const dHora = { labels: [{% for h, t in likes_por_hora.items %}"{{ h }}:00"{% if not forloop.last %},{% endif %}{% endfor %}], data: [{% for h, t in likes_por_hora.items %}{{ t }}{% if not forloop.last %},{% endif %}{% endfor %}] };

    gPrincipal = new Chart(document.getElementById('graficaPrincipal'), {
        type: 'line',
        data: { labels: dMes.labels, datasets: [{ label: 'Interacciones', data: dMes.data, borderColor: '#4e73df', tension: 0.4, fill: true, backgroundColor: 'rgba(78,115,223,0.1)' }] },
        options: { maintainAspectRatio: false }
    });

    new Chart(document.getElementById('graficaPie'), {
        type: 'doughnut',
        data: { labels: [{% for s in stats_categoria %}"{{ s.categoria }}"{% if not forloop.last %},{% endif %}{% endfor %}], datasets: [{ data: [{% for s in stats_categoria %}{{ s.votos }}{% if not forloop.last %},{% endif %}{% endfor %}], backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e'] }] },
        options: { cutout: '70%', plugins: { legend: { position: 'bottom' } }, onClick: (e, item) => { if(item[0]) mostrarCorreos(item[0].element.$context.chart.data.labels[item[0].index]); } }
    });

    // --- FUNCIÓN EXCEL ---
    function exportarSoloContactos() {
        const filas = [['NOMBRE DE USUARIO', 'CORREO ELECTRÓNICO']];
        const filasTabla = document.querySelectorAll('#tablaClientes tbody tr');
        filasTabla.forEach(tr => {
            const nombre = tr.querySelector('.fw-bold').innerText;
            const email = tr.cells[1].innerText;
            filas.push([nombre, email]);
        });
        const ws = XLSX.utils.aoa_to_sheet(filas);
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, "Contactos");
        XLSX.writeFile(wb, "Lista_Contactos.xlsx");
        Swal.fire({ icon: 'success', title: 'Excel Generado', timer: 1500, showConfirmButton: false });
    }

    // --- PERFIL DETALLADO ---
    function abrirPerfilLead(nombre, email, preferencia, producto) {
        Swal.fire({
            title: `<span class="fw-bold">Perfil del Cliente</span>`,
            html: `
                <div class="text-start mt-3">
                    <div class="p-3 bg-light rounded-3 mb-3 border-start border-primary border-4">
                        <p class="mb-0"><strong>Usuario:</strong> ${nombre}</p>
                        <p class="mb-0"><strong>Email:</strong> ${email}</p>
                    </div>
                    <div class="row">
                        <div class="col-6"><div class="p-2 border rounded text-center"><small class="text-muted d-block small">Preferencia</small><span class="badge bg-info text-dark">${preferencia}</span></div></div>
                        <div class="col-6"><div class="p-2 border rounded text-center"><small class="text-muted d-block small">Último Visto</small><span class="fw-bold small text-truncate d-block">${producto}</span></div></div>
                    </div>
                </div>`,
            confirmButtonColor: '#4e73df',
            confirmButtonText: 'Cerrar'
        });
    }

    function cambiarGrafica(t) {
        const map = { mes: dMes, dia: dDia, hora: dHora };
        gPrincipal.data.labels = map[t].labels;
        gPrincipal.data.datasets[0].data = map[t].data;
        gPrincipal.update();
        document.querySelectorAll('.btn-group button').forEach(b => b.classList.replace('btn-primary', 'btn-light'));
        document.getElementById('btn' + t.charAt(0).toUpperCase() + t.slice(1)).classList.replace('btn-light', 'btn-primary');
    }

    function mostrarCorreos(cat) {
        const cont = document.getElementById('correosContainer');
        document.getElementById('listaCorreos').style.display = "block";
        document.getElementById('tagCategoria').innerText = cat;
        cont.innerHTML = "";
        document.querySelectorAll('.cliente-row').forEach(row => {
            if(row.getAttribute('data-categoria') === cat) {
                cont.innerHTML += `<div class="lead-item"><span class="small">${row.cells[1].innerText}</span></div>`;
            }
        });
    }

    document.getElementById('buscadorLeads').addEventListener('keyup', function() {
        let filtro = this.value.toLowerCase();
        let filas = document.querySelectorAll('#tablaClientes tbody tr');
        filas.forEach(row => {
            let texto = row.innerText.toLowerCase();
            row.style.display = texto.includes(filtro) ? '' : 'none';
        });
    });
</script>
{% endblock %}