sales-bot-stacks/sales-bot/templates/dashboard.html

{% extends "base.html" %}

{% block title %}Dashboard - Sales Bot{% endblock %}

{% block content %}
<header class="page-header">
    <div>
        <h1><span>Sales</span> Bot Dashboard</h1>
        <p class="fecha" id="fecha-actual"></p>
    </div>
    <div class="header-actions">
        <button class="btn btn-secondary" onclick="generarReporte('diario')">PDF Diario</button>
        <button class="btn btn-secondary" onclick="generarReporte('ejecutivo')">PDF Ejecutivo</button>
        <button class="refresh-btn" onclick="cargarTodosDatos()">Actualizar</button>
    </div>
</header>

<!-- Stats Grid Principal -->
<div class="stats-grid">
    <div class="stat-card">
        <div class="label">Ventas Hoy</div>
        <div class="value" id="ventas-hoy">-</div>
        <div class="subvalue" id="monto-hoy">$0.00</div>
    </div>
    <div class="stat-card green">
        <div class="label">Ventas del Mes</div>
        <div class="value" id="ventas-mes">-</div>
        <div class="subvalue" id="monto-mes">$0.00</div>
    </div>
    <div class="stat-card orange">
        <div class="label">Vendedores Activos</div>
        <div class="value" id="vendedores-activos">-</div>
        <div class="subvalue">hoy</div>
    </div>
    <div class="stat-card purple">
        <div class="label">Prediccion Manana</div>
        <div class="value" id="prediccion-dia">-</div>
        <div class="subvalue" id="tendencia-text">calculando...</div>
    </div>
</div>

<!-- Comparativas Rapidas -->
<div class="comparison-bar">
    <div class="comparison-item">
        <span class="comp-label">vs Semana Anterior:</span>
        <span class="comp-value" id="comp-semana">--</span>
    </div>
    <div class="comparison-item">
        <span class="comp-label">vs Mes Anterior:</span>
        <span class="comp-value" id="comp-mes">--</span>
    </div>
    <div class="comparison-item">
        <span class="comp-label">Promedio Diario:</span>
        <span class="comp-value" id="promedio-diario">--</span>
    </div>
</div>

<!-- Graficas de Tendencias -->
<div class="charts-section">
    <div class="panel chart-panel">
        <div class="panel-header">
            <h2>Tendencia de Ventas (30 dias)</h2>
            <div class="chart-controls">
                <button class="chart-btn active" data-days="30" onclick="cambiarPeriodo(30)">30D</button>
                <button class="chart-btn" data-days="14" onclick="cambiarPeriodo(14)">14D</button>
                <button class="chart-btn" data-days="7" onclick="cambiarPeriodo(7)">7D</button>
            </div>
        </div>
        <div class="chart-container">
            <canvas id="chart-tendencias"></canvas>
        </div>
    </div>

    <div class="panel chart-panel-small">
        <h2>Comparativa Semanal</h2>
        <div class="chart-container-small">
            <canvas id="chart-semanal"></canvas>
        </div>
        <div class="comparison-details" id="detalles-semana">
            <div class="detail-row">
                <span>Esta semana:</span>
                <span id="semana-actual">$0</span>
            </div>
            <div class="detail-row">
                <span>Semana anterior:</span>
                <span id="semana-anterior">$0</span>
            </div>
        </div>
    </div>
</div>

<!-- Ranking y Ventas Recientes -->
<div class="main-grid">
    <div class="panel">
        <div class="panel-header">
            <h2>Ranking del Mes</h2>
            <span class="badge" id="total-vendedores">0 vendedores</span>
        </div>
        <ul class="ranking-list" id="ranking-list">
            <li class="loading"><div class="loading-spinner"></div></li>
        </ul>
    </div>

    <div class="panel">
        <div class="panel-header">
            <h2>Ventas Recientes</h2>
            <span class="badge" id="ventas-hoy-badge">0 hoy</span>
        </div>
        <div class="ventas-list" id="ventas-list">
            <div class="loading"><div class="loading-spinner"></div></div>
        </div>
    </div>
</div>

<!-- Analisis y Predicciones -->
<div class="analytics-section">
    <div class="panel">
        <h2>Prediccion Proximos 7 Dias</h2>
        <div class="prediction-grid">
            <div class="prediction-card">
                <div class="pred-label">Manana</div>
                <div class="pred-value" id="pred-dia-1">$0</div>
            </div>
            <div class="prediction-card">
                <div class="pred-label">En 3 dias</div>
                <div class="pred-value" id="pred-dia-3">$0</div>
            </div>
            <div class="prediction-card">
                <div class="pred-label">Proxima semana</div>
                <div class="pred-value" id="pred-semana">$0</div>
            </div>
            <div class="prediction-card">
                <div class="pred-label">Confianza</div>
                <div class="pred-value" id="pred-confianza">--%</div>
            </div>
        </div>
        <div class="prediction-trend" id="prediction-trend">
            <span class="trend-icon" id="trend-icon">--</span>
            <span class="trend-text" id="trend-text">Calculando tendencia...</span>
        </div>
    </div>

    <div class="panel">
        <h2>Comparativa Mensual</h2>
        <div class="chart-container-small">
            <canvas id="chart-mensual"></canvas>
        </div>
        <div class="comparison-details">
            <div class="detail-row">
                <span>Este mes:</span>
                <span id="mes-actual">$0</span>
            </div>
            <div class="detail-row">
                <span>Mes anterior:</span>
                <span id="mes-anterior">$0</span>
            </div>
            <div class="detail-row highlight">
                <span>Diferencia:</span>
                <span id="mes-diferencia">$0 (0%)</span>
            </div>
        </div>
    </div>
</div>

<!-- Top Performers -->
<div class="panel full-width">
    <div class="panel-header">
        <h2>Top Performers del Mes</h2>
        <button class="btn btn-sm" onclick="exportarDatos()">Exportar</button>
    </div>
    <div class="performers-table">
        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>Vendedor</th>
                    <th>Ventas</th>
                    <th>Tubos</th>
                    <th>Monto Total</th>
                    <th>Comision</th>
                    <th>Racha</th>
                    <th>% Meta</th>
                </tr>
            </thead>
            <tbody id="performers-tbody">
                <tr><td colspan="8" class="loading">Cargando...</td></tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Camera Button for Mobile -->
<button class="fab-button" id="btn-camera" onclick="abrirCamara()">
    <span>&#128247;</span>
</button>

<!-- Camera Modal -->
<div class="modal" id="camera-modal">
    <div class="modal-content camera-modal-content">
        <div class="camera-container">
            <video id="camera-video" autoplay playsinline></video>
            <div class="camera-overlay">
                <div class="camera-frame"></div>
            </div>
            <div class="camera-controls">
                <button class="camera-btn close" onclick="cerrarCamara()">&#10005;</button>
                <button class="camera-btn capture" onclick="capturarFoto()">&#128247;</button>
            </div>
        </div>
    </div>
</div>
<canvas id="camera-canvas" style="display: none;"></canvas>

<!-- Report Modal -->
<div class="modal" id="report-modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Generando Reporte</h3>
            <button class="modal-close" onclick="cerrarModalReporte()">&#10005;</button>
        </div>
        <div class="modal-body" id="report-modal-body">
            <div class="loading-spinner"></div>
            <p>Generando PDF...</p>
        </div>
    </div>
</div>

<!-- Toast Notifications -->
<div class="toast-container" id="toast-container"></div>
{% endblock %}

{% block extra_css %}
<style>
/* Header Actions */
.header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Comparison Bar */
.comparison-bar {
    display: flex;
    gap: 20px;
    padding: 16px 20px;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.comparison-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.comp-label {
    color: #888;
    font-size: 13px;
}

.comp-value {
    font-weight: 600;
    font-size: 14px;
}

.comp-value.positive { color: #00ff88; }
.comp-value.negative { color: #ff4444; }
.comp-value.neutral { color: #888; }

/* Charts Section */
.charts-section {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

@media (max-width: 1000px) {
    .charts-section { grid-template-columns: 1fr; }
}

.chart-panel {
    min-height: 350px;
}

.chart-panel-small {
    min-height: 350px;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.chart-controls {
    display: flex;
    gap: 4px;
}

.chart-btn {
    padding: 6px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: #888;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.chart-btn:hover, .chart-btn.active {
    background: rgba(0,212,255,0.2);
    border-color: #00d4ff;
    color: #00d4ff;
}

.chart-container {
    height: 280px;
    position: relative;
}

.chart-container-small {
    height: 180px;
    position: relative;
    margin-bottom: 16px;
}

.comparison-details {
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}

.detail-row span:first-child { color: #888; }
.detail-row span:last-child { font-weight: 600; }
.detail-row.highlight span:last-child { color: #00d4ff; }

/* Analytics Section */
.analytics-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

@media (max-width: 800px) {
    .analytics-section { grid-template-columns: 1fr; }
}

.prediction-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

@media (max-width: 600px) {
    .prediction-grid { grid-template-columns: repeat(2, 1fr); }
}

.prediction-card {
    background: rgba(255,255,255,0.03);
    padding: 16px;
    border-radius: 10px;
    text-align: center;
}

.pred-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.pred-value {
    font-size: 20px;
    font-weight: 700;
    color: #00d4ff;
}

.prediction-trend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
}

.trend-icon {
    font-size: 24px;
}

.trend-icon.up { color: #00ff88; }
.trend-icon.down { color: #ff4444; }
.trend-icon.stable { color: #ffaa00; }

.trend-text {
    color: #ccc;
    font-size: 14px;
}

/* Full Width Panel */
.panel.full-width {
    margin-bottom: 24px;
}

.performers-table {
    overflow-x: auto;
}

.performers-table table {
    width: 100%;
    border-collapse: collapse;
}

.performers-table th,
.performers-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.performers-table th {
    color: #888;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
}

.performers-table td {
    font-size: 14px;
}

.performers-table tr:hover {
    background: rgba(255,255,255,0.02);
}

.performers-table .highlight {
    color: #00d4ff;
    font-weight: 600;
}

/* Badge */
.badge {
    background: rgba(0,212,255,0.2);
    color: #00d4ff;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
}

/* FAB Button */
.fab-button {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00d4ff, #00ff88);
    border: none;
    color: #000;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,212,255,0.4);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition: transform 0.2s;
}

.fab-button:hover {
    transform: scale(1.1);
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: #1a1a2e;
    border-radius: 16px;
    padding: 24px;
    max-width: 500px;
    width: 90%;
    border: 1px solid rgba(255,255,255,0.1);
}

.camera-modal-content {
    max-width: 600px;
    padding: 0;
    overflow: hidden;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modal-close {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
}

.modal-body {
    text-align: center;
    padding: 20px;
}

/* Camera Styles */
.camera-container {
    position: relative;
    background: #000;
}

.camera-container video {
    width: 100%;
    max-height: 70vh;
    display: block;
}

.camera-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.camera-frame {
    width: 80%;
    height: 60%;
    border: 2px dashed rgba(0,212,255,0.5);
    border-radius: 8px;
}

.camera-controls {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 16px;
    background: rgba(0,0,0,0.8);
}

.camera-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    font-size: 20px;
    cursor: pointer;
    transition: transform 0.2s;
}

.camera-btn.capture {
    background: linear-gradient(135deg, #00d4ff, #00ff88);
    color: #000;
}

.camera-btn.close {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.camera-btn:hover {
    transform: scale(1.1);
}

/* Toast */
.toast-container {
    position: fixed;
    bottom: 100px;
    right: 24px;
    z-index: 2000;
}

.toast {
    background: #1a1a2e;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 12px 20px;
    margin-top: 10px;
    color: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    animation: slideIn 0.3s ease;
}

.toast.success { border-color: #00ff88; }
.toast.error { border-color: #ff4444; }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Button Variants */
.btn-secondary {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.15);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

/* Progress Bar */
.progress-bar {
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 8px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #00d4ff, #00ff88);
    border-radius: 3px;
    transition: width 0.5s ease;
}
</style>
{% endblock %}

{% block extra_js %}
<script src="/static/js/charts.js"></script>
<script src="/static/js/camera.js"></script>
<script>
// ============== VARIABLES GLOBALES ==============
let chartTendencias = null;
let chartSemanal = null;
let chartMensual = null;
let periodoActual = 30;

// ============== HELPERS ==============
function formatMoney(amount) {
    return new Intl.NumberFormat('es-MX', { style: 'currency', currency: 'MXN' }).format(amount || 0);
}

function formatDate(dateStr) {
    if (!dateStr) return '';
    const date = new Date(dateStr);
    return date.toLocaleTimeString('es-MX', { hour: '2-digit', minute: '2-digit' });
}

function formatPercent(value, showSign = true) {
    const num = parseFloat(value) || 0;
    const sign = showSign && num > 0 ? '+' : '';
    return `${sign}${num.toFixed(1)}%`;
}

function showToast(message, type = 'success') {
    const container = document.getElementById('toast-container');
    const toast = document.createElement('div');
    toast.className = `toast ${type}`;
    toast.textContent = message;
    container.appendChild(toast);
    setTimeout(() => toast.remove(), 4000);
}

// ============== CARGA DE DATOS ==============
async function cargarResumen() {
    try {
        const res = await fetch('/api/dashboard/resumen');
        const data = await res.json();

        document.getElementById('ventas-hoy').textContent = data.ventas_hoy || 0;
        document.getElementById('monto-hoy').textContent = formatMoney(data.monto_hoy);
        document.getElementById('ventas-mes').textContent = data.ventas_mes || 0;
        document.getElementById('monto-mes').textContent = formatMoney(data.monto_mes);
        document.getElementById('vendedores-activos').textContent = data.vendedores_activos_hoy || 0;
        document.getElementById('ventas-hoy-badge').textContent = `${data.ventas_hoy || 0} hoy`;

        // Promedio diario
        const diasDelMes = new Date().getDate();
        const promedio = (data.monto_mes || 0) / diasDelMes;
        document.getElementById('promedio-diario').textContent = formatMoney(promedio);

        document.getElementById('fecha-actual').textContent = new Date().toLocaleDateString('es-MX', {
            weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'
        });
    } catch (e) {
        console.error('Error cargando resumen:', e);
    }
}

async function cargarRanking() {
    try {
        const res = await fetch('/api/dashboard/ranking');
        const data = await res.json();
        const lista = document.getElementById('ranking-list');
        const tbody = document.getElementById('performers-tbody');

        if (!data || data.length === 0) {
            lista.innerHTML = '<li class="loading">No hay datos de ventas</li>';
            tbody.innerHTML = '<tr><td colspan="8">No hay datos</td></tr>';
            return;
        }

        document.getElementById('total-vendedores').textContent = `${data.length} vendedores`;

        // Ranking lateral (top 10)
        lista.innerHTML = data.slice(0, 10).map((v, i) => {
            const posClass = i === 0 ? 'gold' : i === 1 ? 'silver' : i === 2 ? 'bronze' : 'default';
            const tubos = v.tubos_totales || 0;
            const comision = v.comision_total || 0;
            const ventas = v.cantidad_ventas || 0;
            const nombre = v.nombre_completo || v.vendedor_username || v.vendedor;
            const username = v.vendedor_username || v.vendedor;

            return `
                <li class="ranking-item">
                    <div class="ranking-position ${posClass}">${i + 1}</div>
                    <div class="ranking-info">
                        <div class="ranking-name">${nombre}</div>
                        <div class="ranking-stats">@${username} - ${ventas} ventas</div>
                    </div>
                    <div class="ranking-value">
                        <div class="ranking-tubos">${tubos}</div>
                        ${comision > 0 ? `<div class="ranking-comision">+${formatMoney(comision)}</div>` : ''}
                    </div>
                </li>
            `;
        }).join('');

        // Tabla de performers
        tbody.innerHTML = data.map((v, i) => {
            const nombre = v.nombre_completo || v.vendedor_username || v.vendedor;
            const porcentaje = v.porcentaje_completado || 0;
            const racha = v.dias_consecutivos || v.racha || 0;

            return `
                <tr>
                    <td>${i + 1}</td>
                    <td><strong>${nombre}</strong><br><small style="color:#888">@${v.vendedor_username || v.vendedor}</small></td>
                    <td>${v.cantidad_ventas || 0}</td>
                    <td class="highlight">${v.tubos_totales || 0}</td>
                    <td>${formatMoney(v.total_vendido || v.monto_total)}</td>
                    <td style="color:#00ff88">${formatMoney(v.comision_total)}</td>
                    <td>${racha > 0 ? racha + ' dias' : '-'}</td>
                    <td>
                        <div style="display:flex;align-items:center;gap:8px;">
                            <span>${porcentaje.toFixed(0)}%</span>
                            <div class="progress-bar" style="flex:1;max-width:60px;">
                                <div class="progress-fill" style="width:${Math.min(porcentaje, 100)}%"></div>
                            </div>
                        </div>
                    </td>
                </tr>
            `;
        }).join('');
    } catch (e) {
        console.error('Error cargando ranking:', e);
    }
}

async function cargarVentasRecientes() {
    try {
        const res = await fetch('/api/dashboard/ventas-recientes');
        const data = await res.json();
        const lista = document.getElementById('ventas-list');

        if (!data || data.length === 0) {
            lista.innerHTML = '<div class="loading">No hay ventas hoy</div>';
            return;
        }

        lista.innerHTML = data.map(v => {
            const nombre = v.nombre_completo || v.vendedor_username;
            return `
            <div class="venta-item">
                <div class="venta-info">
                    <div class="vendedor">${nombre}</div>
                    <div class="cliente">${v.cliente || 'Sin cliente'} - ${formatDate(v.fecha_venta)}</div>
                </div>
                <div class="venta-monto">${formatMoney(v.monto)}</div>
            </div>
        `}).join('');
    } catch (e) {
        console.error('Error cargando ventas:', e);
    }
}

async function cargarTendencias(dias = 30) {
    try {
        const res = await fetch(`/api/analytics/trends?days=${dias}`);
        const data = await res.json();

        if (data.error) {
            console.warn('Analytics no disponible:', data.error);
            return;
        }

        // Crear/actualizar grafica de tendencias
        const ctx = document.getElementById('chart-tendencias');

        if (chartTendencias) {
            chartTendencias.destroy();
        }

        const datasets = [
            {
                label: 'Ventas',
                data: data.ventas || [],
                borderColor: '#00d4ff',
                backgroundColor: 'rgba(0, 212, 255, 0.1)',
                fill: true,
                tension: 0.4
            }
        ];

        // Agregar linea de prediccion si existe
        if (data.prediccion && data.prediccion.length > 0) {
            datasets.push({
                label: 'Prediccion',
                data: data.prediccion,
                borderColor: '#00ff88',
                borderDash: [5, 5],
                fill: false,
                tension: 0.4
            });
        }

        chartTendencias = new Chart(ctx, {
            type: 'line',
            data: {
                labels: data.labels || [],
                datasets: datasets
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: true, position: 'top', labels: { color: '#888' } }
                },
                scales: {
                    x: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#888' } },
                    y: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#888' } }
                }
            }
        });
    } catch (e) {
        console.error('Error cargando tendencias:', e);
    }
}

async function cargarPredicciones() {
    try {
        const res = await fetch('/api/analytics/predictions?days=30&predict=7');
        const data = await res.json();

        if (data.error) {
            console.warn('Predicciones no disponibles:', data.error);
            return;
        }

        // Actualizar cards de prediccion
        document.getElementById('prediccion-dia').textContent = formatMoney(data.next_day);
        document.getElementById('pred-dia-1').textContent = formatMoney(data.next_day);

        const predicciones = data.predicciones || [];
        document.getElementById('pred-dia-3').textContent = formatMoney(predicciones[2] || 0);
        document.getElementById('pred-semana').textContent = formatMoney(data.next_week);
        document.getElementById('pred-confianza').textContent = `${((data.confidence || 0) * 100).toFixed(0)}%`;

        // Tendencia
        const trend = data.tendencia || data.trend || 'stable';
        const trendIcon = document.getElementById('trend-icon');
        const trendText = document.getElementById('trend-text');
        const tendenciaText = document.getElementById('tendencia-text');

        if (trend === 'increasing') {
            trendIcon.textContent = '&#8593;';
            trendIcon.className = 'trend-icon up';
            trendText.textContent = 'Tendencia al alza - Las ventas estan mejorando';
            tendenciaText.textContent = 'tendencia al alza';
            tendenciaText.style.color = '#00ff88';
        } else if (trend === 'decreasing') {
            trendIcon.textContent = '&#8595;';
            trendIcon.className = 'trend-icon down';
            trendText.textContent = 'Tendencia a la baja - Atencion requerida';
            tendenciaText.textContent = 'tendencia a la baja';
            tendenciaText.style.color = '#ff4444';
        } else {
            trendIcon.textContent = '&#8594;';
            trendIcon.className = 'trend-icon stable';
            trendText.textContent = 'Tendencia estable - Ventas consistentes';
            tendenciaText.textContent = 'tendencia estable';
            tendenciaText.style.color = '#ffaa00';
        }
    } catch (e) {
        console.error('Error cargando predicciones:', e);
    }
}

async function cargarComparativas() {
    try {
        // Comparativa semanal
        const resSemanal = await fetch('/api/analytics/comparisons?type=weekly');
        const semanal = await resSemanal.json();

        if (!semanal.error) {
            document.getElementById('semana-actual').textContent = formatMoney(semanal.current_week);
            document.getElementById('semana-anterior').textContent = formatMoney(semanal.previous_week);

            const compSemana = document.getElementById('comp-semana');
            compSemana.textContent = formatPercent(semanal.diff_percent);
            compSemana.className = `comp-value ${semanal.diff_percent > 0 ? 'positive' : semanal.diff_percent < 0 ? 'negative' : 'neutral'}`;

            // Grafica semanal
            const ctxSemanal = document.getElementById('chart-semanal');
            if (chartSemanal) chartSemanal.destroy();

            chartSemanal = new Chart(ctxSemanal, {
                type: 'bar',
                data: {
                    labels: ['Anterior', 'Actual'],
                    datasets: [{
                        data: [semanal.previous_week || 0, semanal.current_week || 0],
                        backgroundColor: ['rgba(255,255,255,0.1)', 'rgba(0,212,255,0.5)'],
                        borderColor: ['rgba(255,255,255,0.2)', '#00d4ff'],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                        x: { grid: { display: false }, ticks: { color: '#888' } },
                        y: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#888' } }
                    }
                }
            });
        }

        // Comparativa mensual
        const resMensual = await fetch('/api/analytics/comparisons?type=monthly');
        const mensual = await resMensual.json();

        if (!mensual.error) {
            document.getElementById('mes-actual').textContent = formatMoney(mensual.current_month);
            document.getElementById('mes-anterior').textContent = formatMoney(mensual.previous_month);
            document.getElementById('mes-diferencia').textContent = `${formatMoney(mensual.difference)} (${formatPercent(mensual.diff_percent)})`;

            const compMes = document.getElementById('comp-mes');
            compMes.textContent = formatPercent(mensual.diff_percent);
            compMes.className = `comp-value ${mensual.diff_percent > 0 ? 'positive' : mensual.diff_percent < 0 ? 'negative' : 'neutral'}`;

            // Grafica mensual (3 meses)
            const ctxMensual = document.getElementById('chart-mensual');
            if (chartMensual) chartMensual.destroy();

            chartMensual = new Chart(ctxMensual, {
                type: 'bar',
                data: {
                    labels: mensual.months || ['Mes -2', 'Mes -1', 'Actual'],
                    datasets: [{
                        data: mensual.values || [0, 0, 0],
                        backgroundColor: ['rgba(255,255,255,0.1)', 'rgba(255,255,255,0.1)', 'rgba(0,212,255,0.5)'],
                        borderColor: ['rgba(255,255,255,0.2)', 'rgba(255,255,255,0.2)', '#00d4ff'],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: {
                        x: { grid: { display: false }, ticks: { color: '#888' } },
                        y: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#888' } }
                    }
                }
            });
        }
    } catch (e) {
        console.error('Error cargando comparativas:', e);
    }
}

// ============== ACCIONES ==============
function cambiarPeriodo(dias) {
    periodoActual = dias;
    document.querySelectorAll('.chart-btn').forEach(btn => {
        btn.classList.toggle('active', parseInt(btn.dataset.days) === dias);
    });
    cargarTendencias(dias);
}

async function generarReporte(tipo) {
    const modal = document.getElementById('report-modal');
    const body = document.getElementById('report-modal-body');

    modal.classList.add('active');
    body.innerHTML = '<div class="loading-spinner"></div><p>Generando PDF...</p>';

    try {
        const res = await fetch('/api/reports/generate', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ type: tipo === 'ejecutivo' ? 'executive' : 'daily' })
        });

        const data = await res.json();

        if (data.error) {
            body.innerHTML = `<p style="color:#ff4444;">Error: ${data.error}</p>
                <p style="color:#888;font-size:13px;">Asegurate de tener instalado reportlab</p>
                <button class="btn btn-secondary" onclick="cerrarModalReporte()">Cerrar</button>`;
            return;
        }

        body.innerHTML = `
            <p style="color:#00ff88;">Reporte generado exitosamente</p>
            <a href="${data.download_url}" class="btn btn-primary" download>Descargar PDF</a>
            <button class="btn btn-secondary" onclick="cerrarModalReporte()" style="margin-left:10px;">Cerrar</button>
        `;

        showToast('Reporte generado correctamente', 'success');
    } catch (e) {
        body.innerHTML = `<p style="color:#ff4444;">Error al generar reporte</p>
            <button class="btn btn-secondary" onclick="cerrarModalReporte()">Cerrar</button>`;
        showToast('Error al generar reporte', 'error');
    }
}

function cerrarModalReporte() {
    document.getElementById('report-modal').classList.remove('active');
}

async function exportarDatos() {
    try {
        showToast('Exportando datos...', 'success');
        // Aqui se podria implementar la exportacion a Excel/CSV
        // Por ahora solo mostramos un mensaje
        showToast('Funcion de exportacion disponible via comando /exportar', 'success');
    } catch (e) {
        showToast('Error al exportar', 'error');
    }
}

// ============== CARGAR TODO ==============
function cargarTodosDatos() {
    cargarResumen();
    cargarRanking();
    cargarVentasRecientes();
    cargarTendencias(periodoActual);
    cargarPredicciones();
    cargarComparativas();
}

// ============== INICIALIZACION ==============
document.addEventListener('DOMContentLoaded', function() {
    cargarTodosDatos();

    // Auto-refresh cada 30 segundos
    setInterval(cargarTodosDatos, 30000);

    // Mostrar boton de camara en mobile
    if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
        document.getElementById('btn-camera').style.display = 'flex';
    }
});

// Cerrar modales con Escape
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        document.querySelectorAll('.modal.active').forEach(m => m.classList.remove('active'));
        cerrarCamara();
    }
});
</script>
{% endblock %}