document.addEventListener('DOMContentLoaded', () => {
    // Sample unemployment data (in a real app, this would come from an API)
    const unemploymentData = {
        'WLD': [6.23, 6.07, 6.00, 6.01, 5.87, 5.70, 5.54, 6.90, 6.20], // World 2013-2021
        'USA': [6.99, 5.96, 4.87, 4.36, 3.90, 3.67, 8.05, 5.35], // USA 2014-2021
        'CHN': [4.73, 4.47, 4.31, 4.56, 4.55, 5.00, 4.55], // China 2015-2021
        'IND': [5.44, 5.42, 5.36, 5.27, 5.36, 10.19, 7.71], // India 2015-2021
        'EUU': [10.84, 9.10, 8.12, 7.25, 6.68, 7.05, 7.00], // EU 2015-2021
        'JPN': [3.39, 2.81, 2.47, 2.35, 2.80, 2.80], // Japan 2016-2021
        'GBR': [4.81, 4.33, 4.00, 3.74, 4.47, 4.83], // UK 2016-2021
        'DEU': [4.12, 3.75, 3.38, 3.14, 3.86, 3.57], // Germany 2016-2021
        'FRA': [10.05, 9.41, 9.02, 8.41, 8.01, 7.86], // France 2016-2021
        'ITA': [11.69, 11.21, 10.61, 9.95, 9.16, 9.50] // Italy 2016-2021
    };

    const years = Array.from({length: 9}, (_, i) => 2013 + i); // 2013-2021

    // Initialize chart
    const ctx = document.getElementById('unemploymentChart').getContext('2d');
    let chart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: years,
            datasets: [{
                label: 'Unemployment Rate (%)',
                data: unemploymentData['WLD'],
                borderColor: '#4f46e5',
                backgroundColor: 'rgba(79, 70, 229, 0.1)',
                borderWidth: 2,
                fill: true,
                tension: 0.3
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                },
                tooltip: {
                    mode: 'index',
                    intersect: false,
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Unemployment Rate (%)'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Year'
                    }
                }
            }
        }
    });

    // Update chart when selection changes
    document.getElementById('updateBtn').addEventListener('click', () => {
        const country = document.getElementById('countrySelect').value;
        const startYear = parseInt(document.getElementById('startYear').value);
        const endYear = parseInt(document.getElementById('endYear').value);
        
        // Filter data based on year range
        const filteredYears = years.filter(year => year >= startYear && year <= endYear);
        const startIndex = years.indexOf(filteredYears[0]);
        const endIndex = years.indexOf(filteredYears[filteredYears.length - 1]);
        const filteredData = unemploymentData[country].slice(startIndex, endIndex + 1);

        // Update chart
        chart.data.labels = filteredYears;
        chart.data.datasets[0].data = filteredData;
        chart.data.datasets[0].label = `${document.getElementById('countrySelect').selectedOptions[0].text} Unemployment (%)`;
        chart.update();
    });

    // Initial chart update
    document.getElementById('updateBtn').click();
});