script.js

// Enhanced Dashboard JavaScript with Animations
class MonezzyDashboard {
    constructor() {
        this.charts = {};
        this.isLoading = true;
        this.currentTheme = 'dark';
        this.aiChatOpen = false;
        
        this.init();
    }

    init() {
        this.showLoadingScreen();
        this.setupEventListeners();
        this.updateTimeGreeting();
        this.initializeCharts();
        this.animateElements();
        this.setupSearch();
        this.setupAIAssistant();
        
        // Hide loading screen after initialization
        setTimeout(() => {
            this.hideLoadingScreen();
        }, 2000);
    }

    showLoadingScreen() {
        const loadingScreen = document.getElementById('loadingScreen');
        if (loadingScreen) {
            loadingScreen.style.display = 'flex';
        }
    }

    hideLoadingScreen() {
        const loadingScreen = document.getElementById('loadingScreen');
        if (loadingScreen) {
            loadingScreen.classList.add('hidden');
            setTimeout(() => {
                loadingScreen.style.display = 'none';
                this.isLoading = false;
            }, 500);
        }
    }

    setupEventListeners() {
        // Mobile menu toggle
        const menuToggle = document.getElementById('menuToggle');
        const sidebar = document.getElementById('sidebar');
        
        if (menuToggle && sidebar) {
            menuToggle.addEventListener('click', () => {
                sidebar.classList.toggle('open');
            });
        }

        // Close sidebar when clicking outside on mobile
        document.addEventListener('click', (e) => {
            if (window.innerWidth <= 768 && sidebar) {
                if (!sidebar.contains(e.target) && !menuToggle?.contains(e.target)) {
                    sidebar.classList.remove('open');
                }
            }
        });

        // Navigation items
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', (e) => {
                e.preventDefault();
                this.handleNavigation(item);
            });
        });

        // Theme toggle
        const themeToggle = document.getElementById('themeToggle');
        if (themeToggle) {
            themeToggle.addEventListener('click', () => {
                this.toggleTheme();
            });
        }

        // Refresh data
        const refreshBtn = document.getElementById('refreshData');
        if (refreshBtn) {
            refreshBtn.addEventListener('click', () => {
                this.refreshData();
            });
        }

        // Quick actions
        document.querySelectorAll('.quick-action-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const action = e.currentTarget.dataset.action;
                this.handleQuickAction(action);
            });
        });

        // Notification button
        const notificationBtn = document.getElementById('notificationBtn');
        if (notificationBtn) {
            notificationBtn.addEventListener('click', () => {
                this.showNotifications();
            });
        }

        // User profile
        const userProfile = document.getElementById('userProfile');
        if (userProfile) {
            userProfile.addEventListener('click', () => {
                this.showUserMenu();
            });
        }

        // Category rows
        document.querySelectorAll('.table-row').forEach(row => {
            row.addEventListener('click', () => {
                this.showCategoryDetails(row.dataset.category);
            });
        });
    }

    handleNavigation(item) {
        // Remove active class from all items
        document.querySelectorAll('.nav-item').forEach(nav => {
            nav.classList.remove('active');
        });
        
        // Add active class to clicked item
        item.classList.add('active');
        
        // Get the navigation text
        const navText = item.querySelector('span').textContent;
        const page = item.dataset.page;
        
        // Show toast notification
        this.showToast('success', 'Navigation', `Switched to ${navText}`);
        
        // Add page transition effect
        this.animatePageTransition();
    }

    animatePageTransition() {
        const content = document.querySelector('.dashboard-content');
        if (content) {
            content.style.opacity = '0.7';
            content.style.transform = 'translateY(10px)';
            
            setTimeout(() => {
                content.style.opacity = '1';
                content.style.transform = 'translateY(0)';
            }, 200);
        }
    }

    toggleTheme() {
        this.currentTheme = this.currentTheme === 'dark' ? 'light' : 'dark';
        document.body.setAttribute('data-theme', this.currentTheme);
        
        const themeIcon = document.querySelector('#themeToggle i');
        if (themeIcon) {
            themeIcon.className = this.currentTheme === 'dark' ? 'fas fa-moon' : 'fas fa-sun';
        }
        
        this.showToast('info', 'Theme Changed', `Switched to ${this.currentTheme} mode`);
        
        // Re-initialize charts with new theme colors
        setTimeout(() => {
            this.updateChartsTheme();
        }, 300);
    }

    updateTimeGreeting() {
        const hour = new Date().getHours();
        const greetingElement = document.getElementById('timeGreeting');
        
        let greeting = 'Morning';
        if (hour >= 12 && hour < 17) {
            greeting = 'Afternoon';
        } else if (hour >= 17) {
            greeting = 'Evening';
        }
        
        if (greetingElement) {
            greetingElement.textContent = greeting;
        }
    }

    animateElements() {
        // Animate metric cards on load
        this.animateMetrics();
        
        // Animate progress bars
        this.animateProgressBars();
        
        // Animate frequency bars
        this.animateFrequencyBars();
        
        // Setup intersection observer for scroll animations
        this.setupScrollAnimations();
    }

    animateMetrics() {
        const metricCards = document.querySelectorAll('.metric-card h3[data-target]');
        
        metricCards.forEach((metric, index) => {
            setTimeout(() => {
                const target = parseInt(metric.dataset.target);
                const isRupee = metric.textContent.includes('₹');
                
                this.animateNumber(metric, 0, target, 2000, (value) => {
                    if (isRupee) {
                        return target >= 1000 ? `₹${(value/1000).toFixed(1)}k` : `₹${value}`;
                    }
                    return value.toString();
                });
            }, index * 200);
        });
    }

    animateNumber(element, start, end, duration, formatter) {
        const startTime = performance.now();
        
        const animate = (currentTime) => {
            const elapsed = currentTime - startTime;
            const progress = Math.min(elapsed / duration, 1);
            
            // Easing function
            const easeOutCubic = 1 - Math.pow(1 - progress, 3);
            const current = Math.floor(start + (end - start) * easeOutCubic);
            
            element.textContent = formatter(current);
            
            if (progress < 1) {
                requestAnimationFrame(animate);
            }
        };
        
        requestAnimationFrame(animate);
    }

    animateProgressBars() {
        setTimeout(() => {
            document.querySelectorAll('.progress-fill[data-progress]').forEach(bar => {
                const progress = bar.dataset.progress;
                bar.style.width = `${progress}%`;
            });
        }, 1000);
    }

    animateFrequencyBars() {
        setTimeout(() => {
            document.querySelectorAll('.frequency-fill[data-width]').forEach(bar => {
                const progress = bar.dataset.width;
                bar.style.width = `${progress}%`;
            });
        }, 1000);
    }

    setupScrollAnimations() {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        });

        document.querySelectorAll('.slide-up, .fade-in').forEach(el => {
            observer.observe(el);
        });
    }

    initializeCharts() {
        this.createMonthlyTrendsChart();
        this.createExpenseBreakdownChart();
        this.createSavingsProgressChart();
        this.createSparklineCharts();
    }

    createMonthlyTrendsChart() {
        const ctx = document.getElementById('monthlyTrendsChart');
        if (!ctx) return;

        this.charts.monthlyTrends = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
                datasets: [{
                    label: 'Income',
                    data: [45000, 52000, 48000, 61000, 55000, 67000],
                    backgroundColor: 'rgba(167, 66, 240, 0.8)',
                    borderColor: 'rgb(158, 51, 234)',
                    borderWidth: 2,
                    borderRadius: 8,
                    borderSkipped: false,
                }, {
                    label: 'Expenses',
                    data: [32000, 38000, 35000, 42000, 39000, 45000],
                    backgroundColor: 'rgba(222, 203, 255, 0.8)',
                    borderColor: 'rgb(232, 217, 255)',
                    borderWidth: 2,
                    borderRadius: 8,
                    borderSkipped: false,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                animation: {
                    duration: 2000,
                    easing: 'easeOutCubic'
                },
                plugins: {
                    legend: {
                        labels: {
                            color: '#a1a1aa',
                            usePointStyle: true,
                            padding: 20
                        }
                    }
                },
                scales: {
                    x: {
                        ticks: {
                            color: '#a1a1aa'
                        },
                        grid: {
                            color: 'rgba(51, 51, 51, 0.5)',
                            drawBorder: false
                        }
                    },
                    y: {
                        ticks: {
                            color: '#a1a1aa',
                            callback: function(value) {
                                return '₹' + (value / 1000) + 'k';
                            }
                        },
                        grid: {
                            color: 'rgba(51, 51, 51, 0.5)',
                            drawBorder: false
                        }
                    }
                }
            }
        });
    }

    createExpenseBreakdownChart() {
        const ctx = document.getElementById('expenseBreakdownChart');
        if (!ctx) return;

        this.charts.expenseBreakdown = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ['Food & Dining', 'Transportation', 'Entertainment', 'Shopping', 'Bills'],
                datasets: [{
                    data: [12500, 8200, 5800, 9400, 6100],
                    backgroundColor: [
                        '#ef4444',
                        '#f59e0b',
                        '#10b981',
                        '#8b5cf6',
                        '#06b6d4'
                    ],
                    borderWidth: 0,
                    hoverOffset: 10
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                animation: {
                    animateRotate: true,
                    duration: 2000
                },
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            color: '#a1a1aa',
                            padding: 20,
                            usePointStyle: true,
                            font: {
                                size: 12
                            }
                        }
                    }
                }
            }
        });
    }

    createSavingsProgressChart() {
        const ctx = document.getElementById('savingsProgressChart');
        if (!ctx) return;

        this.charts.savingsProgress = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
                datasets: [{
                    label: 'Savings Goal',
                    data: [25000, 50000, 75000, 100000],
                    borderColor: 'rgba(139, 92, 246, 0.5)',
                    backgroundColor: 'transparent',
                    borderDash: [5, 5],
                    pointRadius: 0,
                    borderWidth: 2
                }, {
                    label: 'Actual Savings',
                    data: [28000, 52000, 71000, 89000],
                    borderColor: '#8b5cf6',
                    backgroundColor: 'rgba(139, 92, 246, 0.1)',
                    fill: true,
                    tension: 0.4,
                    pointBackgroundColor: '#8b5cf6',
                    pointBorderColor: '#ffffff',
                    pointBorderWidth: 2,
                    pointRadius: 6,
                    pointHoverRadius: 8,
                    borderWidth: 3
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                animation: {
                    duration: 2000,
                    easing: 'easeOutCubic'
                },
                plugins: {
                    legend: {
                        labels: {
                            color: '#a1a1aa',
                            usePointStyle: true
                        }
                    }
                },
                scales: {
                    x: {
                        ticks: {
                            color: '#a1a1aa'
                        },
                        grid: {
                            color: 'rgba(51, 51, 51, 0.5)',
                            drawBorder: false
                        }
                    },
                    y: {
                        ticks: {
                            color: '#a1a1aa',
                            callback: function(value) {
                                return '₹' + (value / 1000) + 'k';
                            }
                        },
                        grid: {
                            color: 'rgba(51, 51, 51, 0.5)',
                            drawBorder: false
                        }
                    }
                }
            }
        });
    }

    createSparklineCharts() {
        const sparklineData = {
            income: [20, 25, 22, 28, 26, 30, 25],
            expense: [15, 18, 16, 20, 19, 22, 17],
            savings: [5, 7, 6, 8, 7, 8, 8],
            transactions: [10, 12, 11, 15, 14, 16, 12]
        };

        Object.keys(sparklineData).forEach(key => {
            const ctx = document.getElementById(`${key}Sparkline`);
            if (ctx) {
                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: ['', '', '', '', '', '', ''],
                        datasets: [{
                            data: sparklineData[key],
                            borderColor: '#8b5cf6',
                            backgroundColor: 'rgba(139, 92, 246, 0.1)',
                            borderWidth: 2,
                            fill: true,
                            tension: 0.4,
                            pointRadius: 0
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { display: false }
                        },
                        scales: {
                            x: { display: false },
                            y: { display: false }
                        },
                        animation: {
                            duration: 1500,
                            delay: 500
                        }
                    }
                });
            }
        });
    }

    setupSearch() {
        const searchInput = document.getElementById('searchInput');
        const searchSuggestions = document.getElementById('searchSuggestions');
        
        if (searchInput && searchSuggestions) {
            searchInput.addEventListener('input', (e) => {
                const query = e.target.value.toLowerCase();
                if (query.length > 0) {
                    this.showSearchSuggestions(query, searchSuggestions);
                } else {
                    searchSuggestions.classList.remove('show');
                }
            });

            searchInput.addEventListener('focus', () => {
                if (searchInput.value.length > 0) {
                    searchSuggestions.classList.add('show');
                }
            });

            document.addEventListener('click', (e) => {
                if (!searchInput.contains(e.target) && !searchSuggestions.contains(e.target)) {
                    searchSuggestions.classList.remove('show');
                }
            });
        }
    }

    showSearchSuggestions(query, container) {
        const suggestions = [
            'Food & Dining expenses',
            'Transportation costs',
            'Monthly savings goal',
            'Investment portfolio',
            'Tax reports',
            'Family accounts'
        ].filter(item => item.toLowerCase().includes(query));

        container.innerHTML = suggestions.map(suggestion => 
            `<div class="search-suggestion-item" onclick="dashboard.selectSuggestion('${suggestion}')">${suggestion}</div>`
        ).join('');
        
        container.classList.add('show');
    }

    selectSuggestion(suggestion) {
        const searchInput = document.getElementById('searchInput');
        const searchSuggestions = document.getElementById('searchSuggestions');
        
        if (searchInput) {
            searchInput.value = suggestion;
        }
        if (searchSuggestions) {
            searchSuggestions.classList.remove('show');
        }
        
        this.showToast('info', 'Search', `Searching for: ${suggestion}`);
    }

    setupAIAssistant() {
        const aiToggle = document.getElementById('aiToggle');
        const aiChat = document.getElementById('aiChat');
        const aiClose = document.getElementById('aiClose');
        const aiSend = document.getElementById('aiSend');
        const aiInput = document.getElementById('aiInput');

        if (aiToggle && aiChat) {
            aiToggle.addEventListener('click', () => {
                this.toggleAIChat();
            });
        }

        if (aiClose) {
            aiClose.addEventListener('click', () => {
                this.closeAIChat();
            });
        }

        if (aiSend && aiInput) {
            aiSend.addEventListener('click', () => {
                this.sendAIMessage();
            });

            aiInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') {
                    this.sendAIMessage();
                }
            });
        }
    }

    toggleAIChat() {
        const aiChat = document.getElementById('aiChat');
        if (aiChat) {
            this.aiChatOpen = !this.aiChatOpen;
            aiChat.classList.toggle('show', this.aiChatOpen);
        }
    }

    closeAIChat() {
        const aiChat = document.getElementById('aiChat');
        if (aiChat) {
            this.aiChatOpen = false;
            aiChat.classList.remove('show');
        }
    }

    sendAIMessage() {
        const aiInput = document.getElementById('aiInput');
        const aiMessages = document.getElementById('aiMessages');
        
        if (aiInput && aiMessages && aiInput.value.trim()) {
            const message = aiInput.value.trim();
            
            // Add user message
            this.addAIMessage('user', message);
            
            // Clear input
            aiInput.value = '';
            
            // Simulate AI response
            setTimeout(() => {
                const responses = [
                    "I can help you track your expenses better. Would you like me to categorize your recent transactions?",
                    "Based on your spending pattern, I suggest setting aside ₹5,000 more for your emergency fund.",
                    "Your food expenses have increased by 15% this month. Consider meal planning to reduce costs.",
                    "Great question! I can help you optimize your savings strategy. Let me analyze your data."
                ];
                const randomResponse = responses[Math.floor(Math.random() * responses.length)];
                this.addAIMessage('bot', randomResponse);
            }, 1000);
        }
    }

    addAIMessage(type, content) {
        const aiMessages = document.getElementById('aiMessages');
        if (!aiMessages) return;

        const messageDiv = document.createElement('div');
        messageDiv.className = `ai-message ${type}`;
        
        if (type === 'bot') {
            messageDiv.innerHTML = `
                <div class="message-avatar">
                    <i class="fas fa-robot"></i>
                </div>
                <div class="message-content">${content}</div>
            `;
        } else {
            messageDiv.innerHTML = `
                <div class="message-content user-message">${content}</div>
            `;
            messageDiv.style.flexDirection = 'row-reverse';
        }
        
        aiMessages.appendChild(messageDiv);
        aiMessages.scrollTop = aiMessages.scrollHeight;
    }

    refreshData() {
        const refreshBtn = document.getElementById('refreshData');
        if (refreshBtn) {
            const icon = refreshBtn.querySelector('i');
            icon.style.animation = 'spin 1s linear infinite';
            
            setTimeout(() => {
                icon.style.animation = '';
                this.showToast('success', 'Data Refreshed', 'Your financial data has been updated');
                
                // Re-animate metrics
                this.animateMetrics();
            }, 1000);
        }
    }

    handleQuickAction(action) {
        const actions = {
            'add-expense': 'Add Expense form opened',
            'transfer': 'Money Transfer initiated',
            'pay-bill': 'Bill Payment started'
        };
        
        this.showToast('info', 'Quick Action', actions[action] || 'Action performed');
    }

    showNotifications() {
        this.showToast('info', 'Notifications', 'You have 3 new notifications');
    }

    showUserMenu() {
        this.showToast('info', 'User Menu', 'Profile menu opened');
    }

    showCategoryDetails(category) {
        const categoryNames = {
            food: 'Food & Dining',
            transport: 'Transportation',
            entertainment: 'Entertainment',
            shopping: 'Shopping'
        };
        
        this.showToast('info', 'Category Details', `Viewing ${categoryNames[category]} details`);
    }

    updateChartsTheme() {
        // Update chart colors based on theme
        Object.values(this.charts).forEach(chart => {
            if (chart && chart.options) {
                const textColor = this.currentTheme === 'dark' ? '#a1a1aa' : '#475569';
                const gridColor = this.currentTheme === 'dark' ? 'rgba(51, 51, 51, 0.5)' : 'rgba(226, 232, 240, 0.5)';
                
                if (chart.options.plugins && chart.options.plugins.legend) {
                    chart.options.plugins.legend.labels.color = textColor;
                }
                
                if (chart.options.scales) {
                    Object.values(chart.options.scales).forEach(scale => {
                        if (scale.ticks) scale.ticks.color = textColor;
                        if (scale.grid) scale.grid.color = gridColor;
                    });
                }
                
                chart.update();
            }
        });
    }

    showToast(type, title, message) {
        const toastContainer = document.getElementById('toastContainer');
        if (!toastContainer) return;

        const toast = document.createElement('div');
        toast.className = `toast ${type}`;
        
        const icons = {
            success: 'fas fa-check',
            error: 'fas fa-times',
            info: 'fas fa-info'
        };
        
        toast.innerHTML = `
            <div class="toast-icon">
                <i class="${icons[type]}"></i>
            </div>
            <div class="toast-content">
                <div class="toast-title">${title}</div>
                <div class="toast-message">${message}</div>
            </div>
        `;
        
        toastContainer.appendChild(toast);
        
        // Auto remove after 3 seconds
        setTimeout(() => {
            toast.style.transform = 'translateX(100%)';
            setTimeout(() => {
                if (toastContainer.contains(toast)) {
                    toastContainer.removeChild(toast);
                }
            }, 300);
        }, 3000);
    }
}

// Initialize dashboard when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    window.dashboard = new MonezzyDashboard();
});

// Add CSS for search suggestions
const additionalStyles = `
.search-suggestion-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid var(--border-color);
}

.search-suggestion-item:hover {
    background-color: var(--secondary-bg);
}

.search-suggestion-item:last-child {
    border-bottom: none;
}

.user-message {
    background: var(--accent-purple) !important;
    color: white !important;
    margin-left: 2rem;
}

.ai-message.user {
    justify-content: flex-end;
}

.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
`;

// Add the additional styles to the document
const styleSheet = document.createElement('style');
styleSheet.textContent = additionalStyles;
document.head.appendChild(styleSheet);