script.js

document.addEventListener('DOMContentLoaded', function() {
    // Initialize charts with sample data
    initCharts();
    loadNewsFeed();
    setupDarkModeToggle();
});

function initCharts() {
    // Sample data - in a real app, this would come from your API
    const dates = ['2023-01', '2023-02', '2023-03', '2023-04', '2023-05', '2023-06'];
    const inflationData = [5.2, 5.5, 5.8, 6.1, 6.0, 5.9];
    const gdpData = [2.1, 2.3, 2.5, 2.7, 2.9, 3.1];
    const sentimentData = [0.2, -0.1, 0.3, -0.2, 0.1, 0.4];

    // Inflation Chart
    const inflationCtx = document.getElementById('inflationChart').getContext('2d');
    new Chart(inflationCtx, {
        type: 'line',
        data: {
            labels: dates,
            datasets: [{
                label: 'Inflation Rate',
                data: inflationData,
                borderColor: '#ef4444',
                backgroundColor: 'rgba(239, 68, 68, 0.1)',
                tension: 0.3,
                fill: true
            }]
        },
        options: getChartOptions('Inflation Rate (%)')
    });

    // GDP Chart
    const gdpCtx = document.getElementById('gdpChart').getContext('2d');
    new Chart(gdpCtx, {
        type: 'line',
        data: {
            labels: dates,
            datasets: [{
                label: 'GDP Growth',
                data: gdpData,
                borderColor: '#10b981',
                backgroundColor: 'rgba(16, 185, 129, 0.1)',
                tension: 0.3,
                fill: true
            }]
        },
        options: getChartOptions('GDP Growth (%)')
    });

    // Full Chart
    const fullCtx = document.getElementById('fullChart').getContext('2d');
    new Chart(fullCtx, {
        type: 'line',
        data: {
            labels: dates,
            datasets: [
                {
                    label: 'Inflation',
                    data: inflationData,
                    borderColor: '#ef4444',
                    backgroundColor: 'rgba(239, 68, 68, 0.1)',
                    yAxisID: 'y',
                    tension: 0.3
                },
                {
                    label: 'GDP Growth',
                    data: gdpData,
                    borderColor: '#10b981',
                    backgroundColor: 'rgba(16, 185, 129, 0.1)',
                    yAxisID: 'y',
                    tension: 0.3
                },
                {
                    label: 'Sentiment',
                    data: sentimentData,
                    borderColor: '#6366f1',
                    backgroundColor: 'rgba(99, 102, 241, 0.1)',
                    yAxisID: 'y1',
                    tension: 0.3
                }
            ]
        },
        options: {
            responsive: true,
            interaction: {
                mode: 'index',
                intersect: false,
            },
            plugins: {
                title: {
                    display: true,
                    text: 'Economic Indicators Over Time',
                    color: '#6b7280',
                    font: {
                        size: 16
                    }
                },
                legend: {
                    position: 'top',
                    labels: {
                        color: '#6b7280'
                    }
                },
                tooltip: {
                    mode: 'index',
                    intersect: false
                }
            },
            scales: {
                x: {
                    grid: {
                        color: 'rgba(209, 213, 219, 0.2)'
                    },
                    ticks: {
                        color: '#6b7280'
                    }
                },
                y: {
                    type: 'linear',
                    display: true,
                    position: 'left',
                    grid: {
                        color: 'rgba(209, 213, 219, 0.2)'
                    },
                    ticks: {
                        color: '#6b7280'
                    }
                },
                y1: {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    grid: {
                        drawOnChartArea: false,
                        color: 'rgba(209, 213, 219, 0.2)'
                    },
                    ticks: {
                        color: '#6b7280'
                    }
                }
            }
        }
    });

    // Update text elements
    document.getElementById('sentimentText').textContent = `Current sentiment: Positive (0.42)`;
    document.getElementById('inflationText').textContent = `Forecast: 5.9% (↓ 0.1% from last month)`;
    document.getElementById('gdpText').textContent = `Forecast: 3.1% (↑ 0.2% from last quarter)`;

    // Initialize sentiment gauge
    updateSentimentGauge(0.42);
}

function getChartOptions(title) {
    return {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: false
            },
            title: {
                display: false
            },
            tooltip: {
                enabled: true,
                mode: 'index',
                intersect: false
            }
        },
        scales: {
            x: {
                grid: {
                    display: false
                },
                ticks: {
                    display: false
                }
            },
            y: {
                grid: {
                    display: false
                },
                ticks: {
                    display: false
                }
            }
        },
        elements: {
            point: {
                radius: 0
            }
        }
    };
}

function updateSentimentGauge(value) {
    // Value between -1 and 1
    const gaugeFill = document.createElement('div');
    gaugeFill.className = 'gauge-fill';
    gaugeFill.style.transform = `rotate(${value * 0.5}turn)`;
    
    const gaugeCover = document.createElement('div');
    gaugeCover.className = 'gauge-cover';
    gaugeCover.textContent = value > 0 ? '+' + value.toFixed(2) : value.toFixed(2);
    
    const gaugeBody = document.createElement('div');
    gaugeBody.className = 'gauge-body';
    gaugeBody.appendChild(gaugeFill);
    
    const gaugeContainer = document.createElement('div');
    gaugeContainer.className = 'gauge-container';
    gaugeContainer.appendChild(gaugeBody);
    gaugeContainer.appendChild(gaugeCover);
    
    document.getElementById('sentimentGauge').innerHTML = '';
    document.getElementById('sentimentGauge').appendChild(gaugeContainer);
}

async function loadNewsFeed() {
    try {
        // In a real app, you would fetch this from your API
        const mockNews = [
            {
                title: "Central Bank Announces Interest Rate Hike to Combat Inflation",
                source: "Financial Times",
                date: "2023-06-15",
                sentiment: 0.42
            },
            {
                title: "GDP Growth Exceeds Expectations in Q2",
                source: "Bloomberg",
                date: "2023-06-10",
                sentiment: 0.78
            },
            {
                title: "Unemployment Rates Rise Slightly Amid Economic Slowdown",
                source: "Reuters",
                date: "2023-06-05",
                sentiment: -0.35
            },
            {
                title: "Government Announces New Stimulus Package to Boost Economy",
                source: "Wall Street Journal",
                date: "2023-05-28",
                sentiment: 0.65
            }
        ];

        const newsFeed = document.getElementById('newsFeed');
        newsFeed.innerHTML = '';

        mockNews.forEach(item => {
            const sentimentColor = item.sentiment > 0.5 ? 'text-green-500' : 
                                 item.sentiment < -0.5 ? 'text-red-500' : 'text-yellow-500';
            const sentimentIcon = item.sentiment > 0.5 ? 'trending-up' : 
                                 item.sentiment < -0.5 ? 'trending-down' : 'minus';

            const newsItem = document.createElement('div');
            newsItem.className = 'news-item bg-white dark:bg-gray-800 rounded-lg shadow p-4';
            newsItem.innerHTML = `
                <div class="flex justify-between items-start">
                    <div class="flex-1">
                        <h3 class="font-medium text-gray-800 dark:text-gray-200">${item.title}</h3>
                        <div class="flex items-center mt-2 text-sm text-gray-500 dark:text-gray-400">
                            <span>${item.source}</span>
                            <span class="mx-2">•</span>
                            <span>${item.date}</span>
                        </div>
                    </div>
                    <div class="flex items-center ml-4 ${sentimentColor}">
                        <i data-feather="${sentimentIcon}" class="w-5 h-5 mr-1"></i>
                        <span>${item.sentiment > 0 ? '+' : ''}${item.sentiment.toFixed(2)}</span>
                    </div>
                </div>
            `;
            newsFeed.appendChild(newsItem);
        });

        feather.replace();
    } catch (error) {
        console.error('Error loading news feed:', error);
        document.getElementById('newsFeed').innerHTML = `
            <div class="text-center py-8 text-gray-500 dark:text-gray-400">
                <i data-feather="alert-circle" class="w-12 h-12 mx-auto mb-4"></i>
                <p>Failed to load news feed. Please try again later.</p>
            </div>
        `;
        feather.replace();
    }
}

function setupDarkModeToggle() {
    const darkModeToggle = document.createElement('button');
    darkModeToggle.className = 'flex items-center justify-center w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200';
    darkModeToggle.innerHTML = '<i data-feather="moon"></i>';
    darkModeToggle.addEventListener('click', () => {
        document.documentElement.classList.toggle('dark');
        localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
        feather.replace();