dashboard-real-time-enhancements.js

/**
 * ⚡ DASHBOARD REAL-TIME ENHANCEMENTS
 * Mejoras visuales y funcionales en tiempo real para el dashboard
 * Hace que todas las métricas sean verdaderamente dinámicas y atractivas
 */

class DashboardRealTimeEnhancements {
    constructor() {
        this.system = null;
        this.isActive = false;
        this.animations = new Map();
        this.counters = new Map();
        
        this.init();
    }
    
    async init() {
        console.log('⚡ Initializing Real-Time Dashboard Enhancements...');
        
        await this.waitForSystem();
        this.setupRealTimeElements();
        this.startAnimations();
        this.addInteractivity();
        
        this.isActive = true;
        console.log('✅ Dashboard Real-Time Enhancements ready!');
    }
    
    async waitForSystem() {
        return new Promise((resolve) => {
            const checkSystem = () => {
                if (window.laTandaSystemComplete && window.laTandaSystemComplete.isInitialized) {
                    this.system = window.laTandaSystemComplete;
                    resolve();
                } else {
                    setTimeout(checkSystem, 100);
                }
            };
            checkSystem();
        });
    }
    
    setupRealTimeElements() {
        // Agregar indicadores de tiempo real
        this.addLiveIndicators();
        
        // Mejorar mensajes flash
        this.enhanceFlashMessages();
        
        // Agregar contadores animados
        this.setupAnimatedCounters();
        
        // Mejorar el gráfico de crecimiento
        this.enhanceGrowthChart();
        
        // Agregar efectos de red blockchain
        this.enhanceBlockchainNetwork();
    }
    
    addLiveIndicators() {
        // Agregar indicador "EN VIVO" a las estadísticas
        const heroStats = document.querySelectorAll('.hero-stat');
        heroStats.forEach(stat => {
            if (!stat.querySelector('.live-indicator')) {
                const liveIndicator = document.createElement('div');
                liveIndicator.className = 'live-indicator';
                liveIndicator.innerHTML = `
                    <span class="live-dot"></span>
                    <span class="live-text">EN VIVO</span>
                `;
                stat.appendChild(liveIndicator);
            }
        });
        
        // Agregar estilos para indicadores
        this.addLiveIndicatorStyles();
    }
    
    addLiveIndicatorStyles() {
        const style = document.createElement('style');
        style.textContent = `
            .live-indicator {
                position: absolute;
                top: 8px;
                right: 8px;
                display: flex;
                align-items: center;
                gap: 4px;
                font-size: 10px;
                color: #00FF00;
                font-weight: bold;
                z-index: 10;
            }
            
            .live-dot {
                width: 6px;
                height: 6px;
                background: #00FF00;
                border-radius: 50%;
                animation: livePulse 1.5s infinite;
            }
            
            @keyframes livePulse {
                0%, 100% { opacity: 1; transform: scale(1); }
                50% { opacity: 0.3; transform: scale(0.8); }
            }
            
            .hero-stat {
                position: relative;
                overflow: visible;
            }
            
            .flash-word {
                display: none;
                animation: fadeInOut 0.5s ease-in-out;
            }
            
            .flash-word.active {
                display: inline;
            }
            
            @keyframes fadeInOut {
                0% { opacity: 0; transform: translateY(10px); }
                100% { opacity: 1; transform: translateY(0); }
            }
            
            .stat-number {
                font-family: 'Orbitron', monospace;
                font-weight: 700;
                letter-spacing: 1px;
            }
            
            .portfolio-value {
                font-family: 'Orbitron', monospace;
                font-weight: 600;
            }
            
            .chart-bar {
                transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
                position: relative;
                overflow: hidden;
            }
            
            .chart-bar::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
                animation: shimmer 2s infinite;
            }
            
            @keyframes shimmer {
                0% { left: -100%; }
                100% { left: 100%; }
            }
            
            .blockchain-network {
                animation: networkPulse 4s ease-in-out infinite;
            }
            
            @keyframes networkPulse {
                0%, 100% { opacity: 0.6; }
                50% { opacity: 1; }
            }
            
            .network-node {
                animation: nodePulse 3s ease-in-out infinite;
            }
            
            .network-node:nth-child(2) { animation-delay: 0.5s; }
            .network-node:nth-child(3) { animation-delay: 1s; }
            
            @keyframes nodePulse {
                0%, 100% { transform: scale(1); opacity: 0.7; }
                50% { transform: scale(1.2); opacity: 1; }
            }
            
            .connecting-line {
                animation: lineFlow 2s linear infinite;
            }
            
            @keyframes lineFlow {
                0% { opacity: 0.3; }
                50% { opacity: 1; }
                100% { opacity: 0.3; }
            }
        `;
        
        document.head.appendChild(style);
    }
    
    enhanceFlashMessages() {
        const flashContainer = document.querySelector('.flash-text');
        if (!flashContainer) return;
        
        // Agregar mensajes dinámicos basados en el sistema
        const dynamicMessages = this.generateDynamicMessages();
        
        // Reemplazar mensajes estáticos con dinámicos
        const existingMessages = flashContainer.querySelectorAll('.flash-word');
        existingMessages.forEach((msg, index) => {
            if (dynamicMessages[index]) {
                msg.textContent = dynamicMessages[index];
            }
        });
        
        // Iniciar rotación automática cada 4 segundos
        this.startMessageRotation(flashContainer);
    }
    
    generateDynamicMessages() {
        const analytics = this.system ? this.system.calculateRealAnalytics() : {};
        const userTandas = this.system ? this.system.tandas.filter(t => 
            t.participants.some(p => p.userId === this.system.currentUser.id)
        ).length : 0;
        
        return [
            `Únete a ${analytics.totalGroups || 0} grupos activos en La Tanda Web3`,
            `${analytics.activeTandas || 0} tandas generando rendimientos en tiempo real`,
            `L. ${(analytics.totalLiquidity || 0).toLocaleString()} en liquidez total protegida por blockchain`,
            `${analytics.successRate || 98.5}% de éxito en pagos automáticos con smart contracts`,
            userTandas === 0 
                ? `¡Comienza tu primera tanda y multiplica tu capital con DeFi!` 
                : `Participa en ${userTandas} tandas y multiplica tu capital con DeFi`
        ];
    }
    
    startMessageRotation(container) {
        const messages = container.querySelectorAll('.flash-word');
        let currentIndex = 0;
        
        setInterval(() => {
            // Ocultar mensaje actual
            messages[currentIndex].classList.remove('active');
            
            // Mostrar siguiente mensaje
            currentIndex = (currentIndex + 1) % messages.length;
            messages[currentIndex].classList.add('active');
            
            // Actualizar contenido dinámico cada 5 rotaciones
            if (currentIndex === 0) {
                const newMessages = this.generateDynamicMessages();
                messages.forEach((msg, index) => {
                    if (newMessages[index]) {
                        msg.textContent = newMessages[index];
                    }
                });
            }
            
        }, 4000);
    }
    
    setupAnimatedCounters() {
        // Configurar contadores para números grandes
        const statNumbers = document.querySelectorAll('.stat-number');
        statNumbers.forEach(stat => {
            this.makeCounterAnimated(stat);
        });
        
        const portfolioValues = document.querySelectorAll('.portfolio-value');
        portfolioValues.forEach(value => {
            this.makeCounterAnimated(value);
        });
    }
    
    makeCounterAnimated(element) {
        if (!element || element.dataset.animated) return;
        
        element.dataset.animated = 'true';
        
        // Observador para detectar cuando el elemento es visible
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    this.animateCounter(element);
                    observer.unobserve(element);
                }
            });
        });
        
        observer.observe(element);
    }
    
    animateCounter(element) {
        const text = element.textContent;
        const number = this.extractNumber(text);
        
        if (number === null) return;
        
        const duration = 2000; // 2 segundos
        const steps = 60;
        const increment = number / steps;
        const stepDuration = duration / steps;
        
        let current = 0;
        const timer = setInterval(() => {
            current += increment;
            
            if (current >= number) {
                current = number;
                clearInterval(timer);
            }
            
            // Actualizar texto manteniendo formato
            const formattedNumber = this.formatNumber(current, text);
            element.textContent = formattedNumber;
            
        }, stepDuration);
    }
    
    extractNumber(text) {
        // Extraer número de strings como "L. 2.3M+" o "98.5%" o "5,847"
        const match = text.match(/[\d,\.]+/);
        if (!match) return null;
        
        let number = parseFloat(match[0].replace(/,/g, ''));
        
        // Manejar sufijos (K, M, etc.)
        if (text.includes('K')) number *= 1000;
        if (text.includes('M')) number *= 1000000;
        
        return number;
    }
    
    formatNumber(number, originalText) {
        // Mantener formato original
        if (originalText.includes('%')) {
            return `${number.toFixed(1)}%`;
        }
        
        if (originalText.includes('L.')) {
            if (originalText.includes('M')) {
                return `L. ${(number / 1000000).toFixed(1)}M+`;
            }
            if (originalText.includes('K')) {
                return `L. ${(number / 1000).toFixed(0)}K`;
            }
            return `L. ${number.toLocaleString()}`;
        }
        
        return Math.round(number).toLocaleString();
    }
    
    enhanceGrowthChart() {
        const chart = document.querySelector('.web3-growth-chart');
        if (!chart) return;
        
        const bars = chart.querySelectorAll('.chart-bar');
        
        // Animar barras al cargar
        bars.forEach((bar, index) => {
            const height = bar.dataset.height || 50;
            bar.style.height = '0%';
            
            setTimeout(() => {
                bar.style.height = `${height}%`;
            }, index * 200);
        });
        
        // Actualización continua basada en datos reales
        setInterval(() => {
            this.updateChartWithRealData(bars);
        }, 10000); // Cada 10 segundos
    }
    
    updateChartWithRealData(bars) {
        if (!this.system) return;
        
        const analytics = this.system.calculateRealAnalytics();
        
        // Generar datos de crecimiento basados en métricas reales
        const growthData = this.calculateGrowthData(analytics);
        
        bars.forEach((bar, index) => {
            if (growthData[index]) {
                const newHeight = Math.max(20, Math.min(100, growthData[index]));
                bar.style.height = `${newHeight}%`;
                
                // Agregar efecto de brillo para cambios significativos
                if (Math.abs(newHeight - parseFloat(bar.dataset.height)) > 10) {
                    bar.style.boxShadow = '0 0 15px rgba(0, 255, 255, 0.6)';
                    setTimeout(() => {
                        bar.style.boxShadow = '';
                    }, 1000);
                }
                
                bar.dataset.height = newHeight;
            }
        });
    }
    
    calculateGrowthData(analytics) {
        // Calcular datos de crecimiento basados en métricas reales del sistema
        const baseGrowth = [40, 65, 80, 100, 75, 90, 95];
        const performanceFactor = (analytics.successRate || 98) / 100;
        const liquidityFactor = Math.min(1.2, (analytics.totalLiquidity || 1000000) / 2000000);
        
        return baseGrowth.map((base, index) => {
            const variation = Math.sin(Date.now() / 10000 + index) * 5;
            const adjusted = base * performanceFactor * liquidityFactor + variation;
            return Math.round(adjusted);
        });
    }
    
    enhanceBlockchainNetwork() {
        const network = document.querySelector('.blockchain-network');
        if (!network) return;
        
        const nodes = network.querySelectorAll('.network-node');
        const lines = network.querySelectorAll('.connecting-line');
        
        // Animar nodos basado en actividad del sistema
        setInterval(() => {
            if (this.system) {
                const activity = this.calculateNetworkActivity();
                this.updateNetworkAnimation(nodes, lines, activity);
            }
        }, 3000);
    }
    
    calculateNetworkActivity() {
        // Calcular actividad de red basada en tandas activas y pagos recientes
        const activeTandas = this.system.tandas.filter(t => t.status === 'active').length;
        const recentPayments = this.system.payments.filter(p => 
            Date.now() - p.timestamp < 24 * 60 * 60 * 1000 // Últimas 24 horas
        ).length;
        
        return {
            intensity: Math.min(1, (activeTandas + recentPayments) / 10),
            frequency: Math.max(1, activeTandas),
            connections: recentPayments
        };
    }
    
    updateNetworkAnimation(nodes, lines, activity) {
        // Actualizar animación de nodos basada en actividad
        nodes.forEach((node, index) => {
            const delay = (activity.frequency * 500) + (index * 200);
            node.style.animationDelay = `${delay}ms`;
            node.style.animationDuration = `${3 / activity.intensity}s`;
        });
        
        // Actualizar líneas de conexión
        lines.forEach(line => {
            line.style.animationDuration = `${2 / activity.intensity}s`;
            if (activity.connections > 5) {
                line.style.filter = 'brightness(1.5)';
            } else {
                line.style.filter = '';
            }
        });
    }
    
    startAnimations() {
        console.log('🎬 Starting real-time animations...');
        
        // Animate crypto particles
        this.animateCryptoParticles();
        
        // Animate growth chart bars
        this.animateGrowthChart();
        
        // Skip counter animations temporarily to avoid undefined errors
        // this.startCounterAnimations();
        
        // Animate network connections
        this.animateNetworkConnections();
        
        console.log('✨ Real-time animations started successfully');
    }
    
    animateCryptoParticles() {
        const particles = document.querySelectorAll('.crypto-particle');
        particles.forEach((particle, index) => {
            // Random animation delays
            const delay = Math.random() * 2000;
            const duration = 3000 + Math.random() * 2000;
            
            setTimeout(() => {
                particle.style.animation = `float ${duration}ms ease-in-out infinite`;
                particle.style.animationDelay = `${delay}ms`;
            }, index * 200);
        });
    }
    
    animateGrowthChart() {
        const chartBars = document.querySelectorAll('.chart-bar');
        chartBars.forEach((bar, index) => {
            const height = bar.dataset.height || '50';
            
            // Start from 0 height and animate to target
            bar.style.height = '0%';
            bar.style.transition = 'height 1.5s ease-out';
            
            setTimeout(() => {
                bar.style.height = `${height}%`;
            }, index * 100 + 500);
        });
    }
    
    startCounterAnimations() {
        const counterElements = document.querySelectorAll('.stat-number, .portfolio-value');
        
        counterElements.forEach(element => {
            const finalValue = element.textContent;
            
            // Skip if no text content
            if (!finalValue || typeof finalValue !== 'string') {
                return;
            }
            
            const numericValue = parseFloat(finalValue.replace(/[^\d.-]/g, ''));
            
            if (!isNaN(numericValue) && numericValue > 0) {
                this.animateCounter(element, 0, numericValue, finalValue, 2000);
            }
        });
    }
    
    animateCounter(element, start, end, originalText, duration) {
        // Safety check for originalText
        if (!originalText || typeof originalText !== 'string') {
            console.warn('Invalid originalText for counter animation:', originalText);
            return;
        }
        
        const range = end - start;
        const increment = range / (duration / 16); // 60fps
        let current = start;
        
        const timer = setInterval(() => {
            current += increment;
            
            if (current >= end) {
                current = end;
                clearInterval(timer);
                element.textContent = originalText;
            } else {
                // Format the number based on original text pattern
                try {
                    if (originalText.includes('L.')) {
                        element.textContent = `L. ${Math.floor(current).toLocaleString()}`;
                    } else if (originalText.includes('%')) {
                        element.textContent = `${Math.floor(current)}%`;
                    } else if (originalText.includes('K')) {
                        element.textContent = `${Math.floor(current)}K`;
                    } else if (originalText.includes('M')) {
                        element.textContent = `${Math.floor(current)}M`;
                    } else {
                        element.textContent = Math.floor(current).toLocaleString();
                    }
                } catch (error) {
                    console.warn('Error formatting counter text:', error);
                    element.textContent = Math.floor(current).toString();
                }
            }
        }, 16);
        
        this.counters.set(element, timer);
    }
    
    animateNetworkConnections() {
        const networkLines = document.querySelectorAll('.connecting-line');
        networkLines.forEach((line, index) => {
            line.style.opacity = '0';
            line.style.transform = 'scaleX(0)';
            line.style.transition = 'opacity 0.8s ease-out, transform 0.8s ease-out';
            
            setTimeout(() => {
                line.style.opacity = '1';
                line.style.transform = 'scaleX(1)';
            }, index * 300 + 1000);
        });
    }
    
    addInteractivity() {
        // Hacer estadísticas clickeables para mostrar detalles
        const heroStats = document.querySelectorAll('.hero-stat');
        heroStats.forEach(stat => {
            stat.style.cursor = 'pointer';
            stat.addEventListener('click', () => {
                this.showStatDetails(stat);
            });
        });
        
        // Efectos hover mejorados
        const portfolioItems = document.querySelectorAll('.portfolio-item');
        portfolioItems.forEach(item => {
            item.addEventListener('mouseenter', () => {
                item.style.transform = 'scale(1.05)';
                item.style.filter = 'brightness(1.2)';
            });
            
            item.addEventListener('mouseleave', () => {
                item.style.transform = '';
                item.style.filter = '';
            });
        });
    }
    
    showStatDetails(statElement) {
        const label = statElement.querySelector('.stat-label').textContent;
        const value = statElement.querySelector('.stat-number').textContent;
        
        // Crear tooltip con información detallada
        this.showTooltip(statElement, this.getStatDetails(label, value));
    }
    
    getStatDetails(label, value) {
        if (!this.system) return 'Información no disponible';
        
        const analytics = this.system.calculateRealAnalytics();
        
        switch (label) {
            case 'Liquidity Pool Total':
                return `
                    <strong>Liquidez Total:</strong> ${value}<br>
                    <small>• Grupos activos: ${analytics.activeGroups || 0}</small><br>
                    <small>• Tandas en progreso: ${analytics.activeTandas || 0}</small><br>
                    <small>• Crecimiento mensual: +${((analytics.monthlyVolume || 0) / (analytics.totalLiquidity || 1) * 100).toFixed(1)}%</small>
                `;
                
            case 'Active Wallets':
                return `
                    <strong>Billeteras Activas:</strong> ${value}<br>
                    <small>• Usuarios verificados: ${Math.round((parseInt(value.replace(/,/g, '')) || 0) * 0.8)}</small><br>
                    <small>• Nuevos esta semana: +${Math.round((parseInt(value.replace(/,/g, '')) || 0) * 0.05)}</small><br>
                    <small>• Retención: ${analytics.memberRetentionRate || 92}%</small>
                `;
                
            case 'Smart Contract Success':
                return `
                    <strong>Éxito de Contratos:</strong> ${value}<br>
                    <small>• Pagos completados: ${analytics.onTimePaymentRate || 0}%</small><br>
                    <small>• Transacciones fallidas: ${(100 - parseFloat(value)).toFixed(1)}%</small><br>
                    <small>• Tiempo promedio: <3 segundos</small>
                `;
                
            default:
                return `<strong>${label}:</strong> ${value}`;
        }
    }
    
    showTooltip(element, content) {
        // Remover tooltip anterior
        const existingTooltip = document.querySelector('.stat-tooltip');
        if (existingTooltip) {
            existingTooltip.remove();
        }
        
        // Crear nuevo tooltip
        const tooltip = document.createElement('div');
        tooltip.className = 'stat-tooltip';
        tooltip.innerHTML = content;
        
        // Estilos del tooltip
        Object.assign(tooltip.style, {
            position: 'absolute',
            background: 'rgba(15, 23, 42, 0.95)',
            border: '1px solid rgba(0, 255, 255, 0.3)',
            borderRadius: '8px',
            padding: '12px',
            fontSize: '14px',
            zIndex: '1000',
            maxWidth: '250px',
            backdropFilter: 'blur(10px)',
            animation: 'fadeIn 0.3s ease'
        });
        
        // Posicionar tooltip
        const rect = element.getBoundingClientRect();
        tooltip.style.left = `${rect.left}px`;
        tooltip.style.top = `${rect.bottom + 10}px`;
        
        document.body.appendChild(tooltip);
        
        // Remover después de 3 segundos
        setTimeout(() => {
            if (tooltip.parentElement) {
                tooltip.remove();
            }
        }, 3000);
    }
    
    // Método público para actualizar métricas
    updateMetrics() {
        if (!this.isActive || !this.system) return;
        
        console.log('⚡ Updating real-time dashboard metrics...');
        
        // Forzar actualización de contadores
        const statNumbers = document.querySelectorAll('.stat-number');
        statNumbers.forEach(stat => {
            if (!stat.dataset.updating) {
                this.refreshCounter(stat);
            }
        });
        
        // Actualizar gráfico
        const bars = document.querySelectorAll('.chart-bar');
        if (bars.length > 0) {
            this.updateChartWithRealData(bars);
        }
        
        // Actualizar mensajes
        this.enhanceFlashMessages();
    }
    
    refreshCounter(element) {
        element.dataset.updating = 'true';
        
        // Efecto de refresh
        element.style.filter = 'brightness(1.5)';
        element.style.transform = 'scale(1.1)';
        
        setTimeout(() => {
            element.style.filter = '';
            element.style.transform = '';
            element.dataset.updating = 'false';
        }, 500);
    }
}

// Inicialización global
window.dashboardRealTimeEnhancements = null;

document.addEventListener('DOMContentLoaded', () => {
    setTimeout(() => {
        window.dashboardRealTimeEnhancements = new DashboardRealTimeEnhancements();
    }, 1500);
});

// Escuchar eventos del sistema
window.addEventListener('tandasDataUpdate', () => {
    if (window.dashboardRealTimeEnhancements) {
        window.dashboardRealTimeEnhancements.updateMetrics();
    }
});

console.log('⚡ Dashboard Real-Time Enhancements loaded!');