document.addEventListener('DOMContentLoaded', function() {
    // Data processing
    const userData = processUserData();
    const categoryData = processCategoryData();
    
    // Render user cards
    renderUserCards(userData);
    
    // Initialize charts
    initUserHoursChart(userData);
    initCategoryChart(categoryData);
    initPaymentChart(userData);
    
    // Calculate and display total
    calculateAndDisplayTotal(userData);

    // Display Gloire's stats
    const gloireStats = displayUserStats(userData, 'Gloire');
    if (gloireStats) {
        const statsContainer = document.createElement('div');
        statsContainer.className = 'bg-white rounded-xl shadow-md p-6 mb-8';
        statsContainer.innerHTML = `
            <h2 class="text-xl font-semibold mb-4 text-gray-800">Detailed Stats for ${gloireStats.username}</h2>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div class="bg-blue-50 p-4 rounded-lg">
                    <p class="text-blue-600 text-sm font-medium">Total Hours</p>
                    <h3 class="text-blue-800 text-2xl font-bold">${gloireStats.totalHours}</h3>
                </div>
                <div class="bg-green-50 p-4 rounded-lg">
                    <p class="text-green-600 text-sm font-medium">Total Files</p>
                    <h3 class="text-green-800 text-2xl font-bold">${gloireStats.totalFiles}</h3>
                </div>
                <div class="bg-purple-50 p-4 rounded-lg">
                    <p class="text-purple-600 text-sm font-medium">Avg Hours/File</p>
                    <h3 class="text-purple-800 text-2xl font-bold">${gloireStats.averageHours}</h3>
                </div>
                <div class="bg-yellow-50 p-4 rounded-lg">
                    <p class="text-yellow-600 text-sm font-medium">Total Payment</p>
                    <h3 class="text-yellow-800 text-2xl font-bold">${gloireStats.totalPayment}</h3>
                </div>
            </div>
        `;
        document.querySelector('main > div.w-full.lg\\:w-3\\/4').prepend(statsContainer);
    }
});
function processUserData() {
    const rawData = [
        // This would be the actual data from your dataset
        // For brevity, I'm showing a sample structure
        { username: 'Eric', hours: 1.92, files: 9, payment: 48.00, image: 'https://enzostvs-cached-generation.hf.space/generate/smiling-man-tech?format=portrait-3_4' },
        { username: 'Banana', hours: 1.49, files: 6, payment: 37.25, image: 'https://enzostvs-cached-generation.hf.space/generate/happy-woman-studio?format=portrait-3_4' },
        { username: 'MICHELLINE', hours: 1.91, files: 9, payment: 47.75, image: 'https://enzostvs-cached-generation.hf.space/generate/professional-woman-headset?format=portrait-3_4' },
        { username: 'John', hours: 1.75, files: 8, payment: 43.75, image: 'https://enzostvs-cached-generation.hf.space/generate/business-man-smiling?format=portrait-3_4' },
        { username: 'Sarah', hours: 1.68, files: 7, payment: 42.00, image: 'https://enzostvs-cached-generation.hf.space/generate/young-woman-headphones?format=portrait-3_4' },
        { username: 'Mike', hours: 1.55, files: 6, payment: 38.75, image: 'https://enzostvs-cached-generation.hf.space/generate/hipster-man-beard?format=portrait-3_4' },
        { username: 'Emma', hours: 1.42, files: 5, payment: 35.50, image: 'https://enzostvs-cached-generation.hf.space/generate/creative-woman-studio?format=portrait-3_4' },
        { username: 'David', hours: 1.35, files: 5, payment: 33.75, image: 'https://enzostvs-cached-generation.hf.space/generate/young-man-microphone?format=portrait-3_4' },
        { username: 'Lisa', hours: 1.28, files: 4, payment: 32.00, image: 'https://enzostvs-cached-generation.hf.space/generate/smiling-woman-recording?format=portrait-3_4' },
        { username: 'Alex', hours: 1.15, files: 4, payment: 28.75, image: 'https://enzostvs-cached-generation.hf.space/generate/young-adult-headset?format=portrait-3_4' }
];
    
    // Sort by hours descending
    return rawData.sort((a, b) => b.hours - a.hours);
}

function processCategoryData() {
    return {
        'Vlog': 8.72,
        'Blog': 5.91,
        'Fitness': 2.11,
        'Food': 0.62,
        'Evaluation': 0.56,
        'Unboxing': 1.28,
        'Art': 1.23,
        'Books': 1.18,
        'Game': 0.42,
        // Add all other categories...
    };
}

function renderUserCards(users) {
    const container = document.getElementById('user-cards-container');
    users.forEach(user => {
const card = document.createElement('custom-user-card');
        card.setAttribute('username', user.username);
        card.setAttribute('hours', user.hours.toFixed(2));
        card.setAttribute('files', user.files);
        card.setAttribute('payment', (user.payment || user.hours * 25).toFixed(2));
        card.setAttribute('image', user.image);
        container.appendChild(card);
    });
}

function initUserHoursChart(users) {
    const ctx = document.getElementById('userHoursChart').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: users.map(u => u.username),
            datasets: [{
                label: 'Effective Hours',
                data: users.map(u => u.hours),
                backgroundColor: '#3B82F6',
                borderColor: '#3B82F6',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Hours'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Username'
                    }
                }
            }
        }
    });
}

function initCategoryChart(categories) {
    const ctx = document.getElementById('categoryChart').getContext('2d');
    const categoryNames = Object.keys(categories);
    
    new Chart(ctx, {
        type: 'pie',
        data: {
            labels: categoryNames,
            datasets: [{
                data: categoryNames.map(c => categories[c]),
                backgroundColor: [
                    '#3B82F6', '#10B981', '#F59E0B', '#6366F1', '#EC4899',
                    '#14B8A6', '#F97316', '#8B5CF6', '#EF4444', '#84CC16'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'right'
                }
            }
        }
    });
}
function calculateAndDisplayTotal(users) {
    const totalPayment = users.reduce((sum, user) => sum + (user.payment || user.hours * 25), 0);
    document.getElementById('totalPayment').textContent = `${totalPayment.toFixed(2)}`;
}
function filterUserData(users, username) {
    return users.filter(user => user.username.toLowerCase().includes(username.toLowerCase()));
}

function displayUserStats(userData, username) {
    const filteredUsers = filterUserData(userData, username);
    if (filteredUsers.length === 0) {
        return null;
    }

    const totalHours = filteredUsers.reduce((sum, user) => sum + user.hours, 0);
    const totalFiles = filteredUsers.length;
    const totalPayment = filteredUsers.reduce((sum, user) => sum + (user.payment || user.hours * 25), 0);

    return {
        username: filteredUsers[0].username,
        totalHours: totalHours.toFixed(2),
        totalFiles,
        totalPayment: totalPayment.toFixed(2),
        averageHours: (totalHours / totalFiles).toFixed(2)
    };
}

function initPaymentChart(users) {
    const ctx = document.getElementById('paymentChart').getContext('2d');
// Calculate total payment
    const totalPayment = users.reduce((sum, user) => sum + (user.payment || user.hours * 25), 0);
    
    new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: [...users.map(u => u.username), 'Total'],
            datasets: [{
                data: [...users.map(u => (u.payment || u.hours * 25)), totalPayment],
                backgroundColor: [
                    '#3B82F6', '#10B981', '#F59E0B', '#6366F1', '#EC4899',
                    '#14B8A6', '#F97316', '#8B5CF6', '#EF4444', '#84CC16',
                    '#000000'
                ],
backgroundColor: [
                    '#3B82F6', '#10B981', '#F59E0B', '#6366F1', '#EC4899'
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'right'
                }
            }
        }
    });
}