app.js

// AutoRevenue Generator JavaScript

// Application Data
const appData = {
  revenue_data: {
    total_generated: 1847.50,
    this_month: 1250.00,
    daily_average: 42.30,
    payment_links: {
      active: 12,
      total_revenue: 680.00,
      conversion_rate: 8.5
    },
    pdf_sales: {
      active: 8,
      total_revenue: 420.00,
      downloads: 156
    },
    forms: {
      active: 5,
      leads_generated: 89,
      revenue: 747.50
    }
  },
  recent_transactions: [
    {type: "Payment Link", amount: 25.00, product: "SEO Guide", time: "2 min ago"},
    {type: "PDF Sale", amount: 15.00, product: "Marketing Templates", time: "8 min ago"},
    {type: "Form Lead", amount: 50.00, product: "Consultation Booking", time: "15 min ago"},
    {type: "Payment Link", amount: 35.00, product: "Design Course", time: "23 min ago"}
  ],
  weekly_revenue: [
    {day: "Mon", amount: 45.20},
    {day: "Tue", amount: 67.80},
    {day: "Wed", amount: 23.50},
    {day: "Thu", amount: 89.30},
    {day: "Fri", amount: 112.70},
    {day: "Sat", amount: 78.90},
    {day: "Sun", amount: 156.40}
  ],
  payment_links: [
    {id: 1, name: "SEO Masterclass", price: 25.00, clicks: 234, conversions: 18, revenue: 450.00},
    {id: 2, name: "Design Templates Pack", price: 15.00, clicks: 156, conversions: 12, revenue: 180.00},
    {id: 3, name: "Marketing Automation Course", price: 50.00, clicks: 89, conversions: 5, revenue: 250.00}
  ],
  pdf_products: [
    {id: 1, name: "Complete Marketing Guide", price: 20.00, downloads: 67, revenue: 340.00},
    {id: 2, name: "Business Plan Template", price: 10.00, downloads: 89, revenue: 180.00}
  ],
  forms: [
    {id: 1, name: "Consultation Booking", submissions: 34, value_per_lead: 50.00, revenue: 450.00},
    {id: 2, name: "Premium Newsletter", submissions: 156, value_per_lead: 5.00, revenue: 300.00}
  ]
};

// Global variables
let revenueChart = null;
let toolsChart = null;
let currentRevenue = appData.revenue_data.total_generated;

// DOM Content Loaded
document.addEventListener('DOMContentLoaded', function() {
    initializeApp();
});

// Initialize Application
function initializeApp() {
    setupNavigation();
    setupRevenueCounter();
    setupCharts();
    populateTransactions();
    populatePaymentLinks();
    populatePDFProducts();
    populateForms();
    setupFormHandlers();
    setupNotifications();
    startRevenueSimulation();
    setupInteractivity();
}

// Navigation Setup
function setupNavigation() {
    const navLinks = document.querySelectorAll('.nav-link');
    const actionBtns = document.querySelectorAll('.action-btn');
    const sections = document.querySelectorAll('.section');

    // Navigation links
    navLinks.forEach(link => {
        link.addEventListener('click', (e) => {
            e.preventDefault();
            const targetSection = link.dataset.section;
            showSection(targetSection);
            
            // Update active nav link
            navLinks.forEach(nl => nl.classList.remove('active'));
            link.classList.add('active');
        });
    });

    // Action buttons
    actionBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            const targetSection = btn.dataset.section;
            showSection(targetSection);
            
            // Update active nav link
            navLinks.forEach(nl => nl.classList.remove('active'));
            document.querySelector(`[data-section="${targetSection}"]`).classList.add('active');
        });
    });
}

// Show Section
function showSection(sectionId) {
    const sections = document.querySelectorAll('.section');
    sections.forEach(section => {
        section.classList.remove('active');
    });
    
    const targetSection = document.getElementById(sectionId);
    if (targetSection) {
        targetSection.classList.add('active');
    }
}

// Revenue Counter Animation
function setupRevenueCounter() {
    const revenueElement = document.getElementById('total-revenue');
    animateCounter(revenueElement, 0, currentRevenue, 2000);
}

function animateCounter(element, start, end, duration) {
    const startTime = performance.now();
    
    function updateCounter(currentTime) {
        const elapsed = currentTime - startTime;
        const progress = Math.min(elapsed / duration, 1);
        
        // Easing function
        const easeOut = 1 - Math.pow(1 - progress, 3);
        const current = start + (end - start) * easeOut;
        
        element.textContent = current.toFixed(2);
        element.classList.add('count-up');
        
        if (progress < 1) {
            requestAnimationFrame(updateCounter);
        } else {
            element.classList.remove('count-up');
        }
    }
    
    requestAnimationFrame(updateCounter);
}

// Charts Setup
function setupCharts() {
    setupRevenueChart();
    setupToolsChart();
}

function setupRevenueChart() {
    const ctx = document.getElementById('revenueChart')?.getContext('2d');
    if (!ctx) return;

    const chartData = {
        labels: appData.weekly_revenue.map(item => item.day),
        datasets: [{
            label: 'Ingresos Diarios',
            data: appData.weekly_revenue.map(item => item.amount),
            borderColor: '#667eea',
            backgroundColor: 'rgba(102, 126, 234, 0.1)',
            borderWidth: 3,
            fill: true,
            tension: 0.4,
            pointBackgroundColor: '#667eea',
            pointBorderColor: '#ffffff',
            pointBorderWidth: 2,
            pointRadius: 6
        }]
    };

    revenueChart = new Chart(ctx, {
        type: 'line',
        data: chartData,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return '$' + value.toFixed(0);
                        }
                    }
                }
            }
        }
    });
}

function setupToolsChart() {
    const ctx = document.getElementById('toolsChart')?.getContext('2d');
    if (!ctx) return;

    const chartData = {
        labels: ['Enlaces de Pago', 'PDFs', 'Formularios'],
        datasets: [{
            data: [
                appData.revenue_data.payment_links.total_revenue,
                appData.revenue_data.pdf_sales.total_revenue,
                appData.revenue_data.forms.revenue
            ],
            backgroundColor: ['#667eea', '#764ba2', '#f093fb'],
            borderWidth: 0
        }]
    };

    toolsChart = new Chart(ctx, {
        type: 'doughnut',
        data: chartData,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
}

// Populate Transactions
function populateTransactions() {
    const container = document.getElementById('transactions-list');
    if (!container) return;

    container.innerHTML = '';
    
    appData.recent_transactions.forEach(transaction => {
        const transactionElement = createTransactionElement(transaction);
        container.appendChild(transactionElement);
    });
}

function createTransactionElement(transaction) {
    const div = document.createElement('div');
    div.className = 'transaction-item';
    
    const iconClass = getTransactionIcon(transaction.type);
    
    div.innerHTML = `
        <div class="transaction-info">
            <div class="transaction-icon">
                <i class="${iconClass}"></i>
            </div>
            <div class="transaction-details">
                <h4>${transaction.product}</h4>
                <p>${transaction.type}</p>
            </div>
        </div>
        <div class="transaction-amount">$${transaction.amount.toFixed(2)}</div>
        <div class="transaction-time">${transaction.time}</div>
    `;
    
    return div;
}

function getTransactionIcon(type) {
    const icons = {
        'Payment Link': 'fas fa-link',
        'PDF Sale': 'fas fa-file-pdf',
        'Form Lead': 'fas fa-clipboard-list'
    };
    return icons[type] || 'fas fa-dollar-sign';
}

// Populate Payment Links
function populatePaymentLinks() {
    const container = document.getElementById('links-table');
    if (!container) return;

    container.innerHTML = '';
    
    appData.payment_links.forEach(link => {
        const linkElement = createLinkElement(link);
        container.appendChild(linkElement);
    });
}

function createLinkElement(link) {
    const div = document.createElement('div');
    div.className = 'link-item';
    
    const conversionRate = ((link.conversions / link.clicks) * 100).toFixed(1);
    
    div.innerHTML = `
        <div class="item-info">
            <h4>${link.name}</h4>
            <p>$${link.price.toFixed(2)} • ${link.clicks} clics</p>
        </div>
        <div class="item-stats">
            <span>${link.conversions} conversiones</span>
            <span>${conversionRate}% tasa</span>
        </div>
        <div class="item-revenue">$${link.revenue.toFixed(2)}</div>
        <button class="btn btn--sm btn--outline">Ver</button>
    `;
    
    return div;
}

// Populate PDF Products
function populatePDFProducts() {
    const container = document.getElementById('pdf-products-grid');
    if (!container) return;

    container.innerHTML = '';
    
    appData.pdf_products.forEach(product => {
        const productElement = createProductElement(product);
        container.appendChild(productElement);
    });
}

function createProductElement(product) {
    const div = document.createElement('div');
    div.className = 'product-item';
    
    div.innerHTML = `
        <div class="item-info">
            <h4>${product.name}</h4>
            <p>$${product.price.toFixed(2)} • ${product.downloads} descargas</p>
        </div>
        <div class="item-stats">
            <span>Landing activa</span>
        </div>
        <div class="item-revenue">$${product.revenue.toFixed(2)}</div>
        <button class="btn btn--sm btn--outline">Editar</button>
    `;
    
    return div;
}

// Populate Forms
function populateForms() {
    const container = document.getElementById('forms-list');
    if (!container) return;

    container.innerHTML = '';
    
    appData.forms.forEach(form => {
        const formElement = createFormElement(form);
        container.appendChild(formElement);
    });
}

function createFormElement(form) {
    const div = document.createElement('div');
    div.className = 'form-item';
    
    div.innerHTML = `
        <div class="item-info">
            <h4>${form.name}</h4>
            <p>${form.submissions} submissions • $${form.value_per_lead.toFixed(2)}/lead</p>
        </div>
        <div class="item-stats">
            <span>Activo</span>
        </div>
        <div class="item-revenue">$${form.revenue.toFixed(2)}</div>
        <button class="btn btn--sm btn--outline">Config</button>
    `;
    
    return div;
}

// Form Handlers
function setupFormHandlers() {
    setupPaymentLinkForm();
    setupPDFUpload();
    setupFormBuilder();
}

function setupPaymentLinkForm() {
    const form = document.getElementById('payment-link-form');
    if (!form) return;

    form.addEventListener('submit', (e) => {
        e.preventDefault();
        
        const formData = new FormData(form);
        const productName = form.querySelector('input[type="text"]').value;
        const price = form.querySelector('input[type="number"]').value;
        
        if (productName && price) {
            generatePaymentLink(productName, price);
            showSuccessNotification('¡Enlace de pago creado!', `${productName} - $${price}`);
            playSuccessSound();
        }
    });
}

function generatePaymentLink(productName, price) {
    const linkContainer = document.getElementById('generated-link');
    const placeholder = document.getElementById('link-placeholder');
    const urlInput = document.getElementById('payment-url');
    const qrCanvas = document.getElementById('qr-canvas');
    
    if (!linkContainer || !urlInput || !qrCanvas) return;
    
    // Generate fake URL
    const linkId = Math.random().toString(36).substr(2, 9);
    const paymentUrl = `https://autorevenue.app/pay/${linkId}`;
    
    urlInput.value = paymentUrl;
    
    // Generate QR Code
    QRCode.toCanvas(qrCanvas, paymentUrl, {
        width: 150,
        margin: 2,
        color: {
            dark: '#667eea',
            light: '#ffffff'
        }
    });
    
    placeholder.style.display = 'none';
    linkContainer.style.display = 'block';
    
    // Copy link functionality
    const copyBtn = document.getElementById('copy-link');
    copyBtn.addEventListener('click', () => {
        navigator.clipboard.writeText(paymentUrl).then(() => {
            showSuccessNotification('¡Enlace copiado!', 'El enlace se ha copiado al portapapeles');
        });
    });
}

function setupPDFUpload() {
    const dropzone = document.getElementById('pdf-dropzone');
    const fileInput = document.getElementById('pdf-input');
    const configSection = document.getElementById('pdf-config');
    
    if (!dropzone || !fileInput) return;

    dropzone.addEventListener('click', () => {
        fileInput.click();
    });

    dropzone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropzone.classList.add('dragover');
    });

    dropzone.addEventListener('dragleave', () => {
        dropzone.classList.remove('dragover');
    });

    dropzone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropzone.classList.remove('dragover');
        
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            handlePDFUpload(files[0]);
        }
    });

    fileInput.addEventListener('change', (e) => {
        if (e.target.files.length > 0) {
            handlePDFUpload(e.target.files[0]);
        }
    });
}

function handlePDFUpload(file) {
    const configSection = document.getElementById('pdf-config');
    const titleInput = document.getElementById('pdf-title');
    
    if (!configSection || !titleInput) return;
    
    // Simulate upload
    titleInput.value = file.name.replace('.pdf', '');
    configSection.style.display = 'block';
    
    showSuccessNotification('¡PDF subido!', `${file.name} está listo para monetizar`);
    
    // Create PDF page button
    const createBtn = document.getElementById('create-pdf-page');
    createBtn.addEventListener('click', () => {
        showSuccessNotification('¡Landing page creada!', 'Tu PDF ya está monetizando automáticamente');
        playSuccessSound();
        
        // Simulate adding revenue
        setTimeout(() => {
            simulateNewTransaction('PDF Sale', 15.00, titleInput.value);
        }, 3000);
    });
}

function setupFormBuilder() {
    const templates = document.querySelectorAll('.template-card');
    const builderTool = document.getElementById('form-builder-tool');
    const previewArea = document.getElementById('form-preview-area');
    
    templates.forEach(template => {
        template.addEventListener('click', () => {
            // Remove previous selection
            templates.forEach(t => t.classList.remove('selected'));
            template.classList.add('selected');
            
            // Show builder
            builderTool.style.display = 'block';
            
            // Generate form preview
            const templateType = template.dataset.template;
            generateFormPreview(templateType, previewArea);
            
            showSuccessNotification('Template seleccionado', `${template.querySelector('h4').textContent} está listo para personalizar`);
        });
    });
    
    // Publish form
    const publishBtn = document.getElementById('publish-form');
    if (publishBtn) {
        publishBtn.addEventListener('click', () => {
            showSuccessNotification('¡Formulario publicado!', 'Ya está generando leads automáticamente');
            playSuccessSound();
            
            // Simulate form submission after a while
            setTimeout(() => {
                simulateNewTransaction('Form Lead', 50.00, 'Nuevo Lead');
            }, 5000);
        });
    }
}

function generateFormPreview(templateType, container) {
    const templates = {
        contact: `
            <form class="preview-form">
                <div class="form-group">
                    <label class="form-label">Nombre completo</label>
                    <input type="text" class="form-control" placeholder="Tu nombre">
                </div>
                <div class="form-group">
                    <label class="form-label">Email</label>
                    <input type="email" class="form-control" placeholder="tu@email.com">
                </div>
                <div class="form-group">
                    <label class="form-label">Mensaje</label>
                    <textarea class="form-control" rows="3" placeholder="Tu mensaje..."></textarea>
                </div>
                <button type="submit" class="btn btn--primary">Enviar</button>
            </form>
        `,
        consultation: `
            <form class="preview-form">
                <div class="form-group">
                    <label class="form-label">Nombre y empresa</label>
                    <input type="text" class="form-control" placeholder="Tu nombre y empresa">
                </div>
                <div class="form-group">
                    <label class="form-label">Email de contacto</label>
                    <input type="email" class="form-control" placeholder="tu@email.com">
                </div>
                <div class="form-group">
                    <label class="form-label">Tipo de consultoría</label>
                    <select class="form-control">
                        <option>Marketing Digital</option>
                        <option>Estrategia de Negocios</option>
                        <option>Análisis Financiero</option>
                    </select>
                </div>
                <button type="submit" class="btn btn--primary">Reservar Consultoría - $50</button>
            </form>
        `,
        newsletter: `
            <form class="preview-form">
                <div class="form-group">
                    <label class="form-label">Email</label>
                    <input type="email" class="form-control" placeholder="tu@email.com">
                </div>
                <div class="form-group">
                    <label class="form-label">Intereses</label>
                    <select class="form-control">
                        <option>Marketing</option>
                        <option>Ventas</option>
                        <option>Emprendimiento</option>
                    </select>
                </div>
                <button type="submit" class="btn btn--primary">Suscribirse - $5/mes</button>
            </form>
        `,
        survey: `
            <form class="preview-form">
                <div class="form-group">
                    <label class="form-label">¿Cuál es tu mayor desafío en marketing?</label>
                    <select class="form-control">
                        <option>Generar leads</option>
                        <option>Aumentar ventas</option>
                        <option>Retener clientes</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">Email para recibir recompensa</label>
                    <input type="email" class="form-control" placeholder="tu@email.com">
                </div>
                <button type="submit" class="btn btn--primary">Completar Encuesta - $10</button>
            </form>
        `
    };
    
    container.innerHTML = templates[templateType] || '<p>Template no encontrado</p>';
}

// Notifications System
function setupNotifications() {
    // Initial notifications
    setTimeout(() => {
        showSuccessNotification('¡Bienvenido!', 'Tu plataforma está generando ingresos automáticamente');
    }, 1000);
}

function showSuccessNotification(title, message) {
    const container = document.getElementById('notifications-container');
    if (!container) return;
    
    const notification = document.createElement('div');
    notification.className = 'notification';
    
    notification.innerHTML = `
        <i class="fas fa-check-circle"></i>
        <div class="notification-content">
            <h4>${title}</h4>
            <p>${message}</p>
        </div>
    `;
    
    container.appendChild(notification);
    
    // Auto remove after 5 seconds
    setTimeout(() => {
        notification.remove();
    }, 5000);
}

// Revenue Simulation
function startRevenueSimulation() {
    // Simulate new transactions every 30-60 seconds
    setInterval(() => {
        if (Math.random() > 0.3) { // 70% chance
            simulateRandomTransaction();
        }
    }, 45000); // Every 45 seconds
    
    // Initial simulation after 10 seconds
    setTimeout(() => {
        simulateRandomTransaction();
    }, 10000);
}

function simulateRandomTransaction() {
    const transactionTypes = [
        { type: 'Payment Link', amounts: [15, 25, 35, 50], products: ['SEO Course', 'Design Pack', 'Marketing Guide', 'Business Template'] },
        { type: 'PDF Sale', amounts: [10, 15, 20, 25], products: ['Marketing Guide', 'Business Plan', 'Templates Pack', 'Strategy Manual'] },
        { type: 'Form Lead', amounts: [30, 50, 75, 100], products: ['Consultation', 'Premium Lead', 'Expert Call', 'Strategy Session'] }
    ];
    
    const randomType = transactionTypes[Math.floor(Math.random() * transactionTypes.length)];
    const randomAmount = randomType.amounts[Math.floor(Math.random() * randomType.amounts.length)];
    const randomProduct = randomType.products[Math.floor(Math.random() * randomType.products.length)];
    
    simulateNewTransaction(randomType.type, randomAmount, randomProduct);
}

function simulateNewTransaction(type, amount, product) {
    // Update total revenue
    currentRevenue += amount;
    const revenueElement = document.getElementById('total-revenue');
    if (revenueElement) {
        animateCounter(revenueElement, currentRevenue - amount, currentRevenue, 1000);
    }
    
    // Add to transactions list
    const newTransaction = {
        type: type,
        amount: amount,
        product: product,
        time: 'Ahora'
    };
    
    const container = document.getElementById('transactions-list');
    if (container) {
        const transactionElement = createTransactionElement(newTransaction);
        container.insertBefore(transactionElement, container.firstChild);
        
        // Add animation
        transactionElement.style.animation = 'slideInUp 0.5s ease-out';
        
        // Remove oldest if more than 5
        const transactions = container.querySelectorAll('.transaction-item');
        if (transactions.length > 5) {
            transactions[transactions.length - 1].remove();
        }
    }
    
    // Show notification
    showSuccessNotification(
        `¡Nueva ${type}!`,
        `+$${amount.toFixed(2)} de ${product}`
    );
    
    // Play success sound
    playSuccessSound();
    
    // Update charts if visible
    updateCharts();
}

function updateCharts() {
    // Update revenue chart with new data point
    if (revenueChart) {
        const today = new Date().toLocaleDateString('es', { weekday: 'short' });
        const lastValue = revenueChart.data.datasets[0].data[revenueChart.data.datasets[0].data.length - 1];
        
        revenueChart.data.datasets[0].data[revenueChart.data.datasets[0].data.length - 1] = lastValue + (Math.random() * 20 + 10);
        revenueChart.update();
    }
}

// Interactivity Setup
function setupInteractivity() {
    // Add click handlers for all interactive elements
    document.addEventListener('click', (e) => {
        // Handle button clicks with feedback
        if (e.target.matches('.btn')) {
            e.target.classList.add('success-animation');
            setTimeout(() => {
                e.target.classList.remove('success-animation');
            }, 600);
        }
        
        // Handle card clicks
        if (e.target.closest('.stat-card, .overview-card')) {
            e.target.closest('.stat-card, .overview-card').classList.add('success-animation');
            setTimeout(() => {
                e.target.closest('.stat-card, .overview-card').classList.remove('success-animation');
            }, 600);
        }
    });
    
    // Add hover effects for interactive elements
    const interactiveElements = document.querySelectorAll('.btn, .card, .nav-link, .action-btn');
    interactiveElements.forEach(element => {
        element.addEventListener('mouseenter', () => {
            element.style.transform = element.style.transform + ' scale(1.02)';
        });
        
        element.addEventListener('mouseleave', () => {
            element.style.transform = element.style.transform.replace(' scale(1.02)', '');
        });
    });
}

// Utility Functions
function playSuccessSound() {
    const audio = document.getElementById('success-sound');
    if (audio) {
        audio.currentTime = 0;
        audio.play().catch(() => {
            // Handle autoplay policy restrictions
            console.log('Audio play prevented by browser policy');
        });
    }
}

function formatCurrency(amount) {
    return new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD'
    }).format(amount);
}

function getRandomColor() {
    const colors = ['#667eea', '#764ba2', '#f093fb', '#f5576c', '#11998e', '#38ef7d'];
    return colors[Math.floor(Math.random() * colors.length)];
}

// Initialize special effects
function initializeEffects() {
    // Add floating animation to money icons
    const floatingIcons = document.querySelectorAll('.floating-money i');
    floatingIcons.forEach((icon, index) => {
        icon.style.animationDelay = `${index * 0.5}s`;
    });
    
    // Add pulse effect to live indicator
    const pulseElement = document.querySelector('.pulse');
    if (pulseElement) {
        pulseElement.style.animation = 'pulse 2s infinite';
    }
}

// Performance optimization
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

// Initialize effects when DOM is ready
document.addEventListener('DOMContentLoaded', initializeEffects);

// Handle window resize for charts
window.addEventListener('resize', debounce(() => {
    if (revenueChart) revenueChart.resize();
    if (toolsChart) toolsChart.resize();
}, 250));

// Keyboard shortcuts
document.addEventListener('keydown', (e) => {
    if (e.ctrlKey || e.metaKey) {
        switch (e.key) {
            case '1':
                e.preventDefault();
                showSection('dashboard');
                break;
            case '2':
                e.preventDefault();
                showSection('payment-links');
                break;
            case '3':
                e.preventDefault();
                showSection('pdf-monetization');
                break;
            case '4':
                e.preventDefault();
                showSection('form-builder');
                break;
            case '5':
                e.preventDefault();
                showSection('analytics');
                break;
        }
    }
});

// Export for potential external use
window.AutoRevenueApp = {
    showSection,
    simulateNewTransaction,
    showSuccessNotification,
    currentRevenue: () => currentRevenue
};