main.js

document.addEventListener('DOMContentLoaded', () => {
    const toggleButton = document.getElementById('toggle-button');
    const statsSection = document.getElementById('stats');
    let isShowingDaily = false;
    let hasTriggeredConfetti = false;

    function fetchData(url, initialLoad = false) {
        fetch(url)
            .then(response => response.json())
            .then(data => {
                const userList = document.getElementById('user-list');
                const mentionsCount = document.getElementById('mentions-count');
                const topUserInfo = document.getElementById('top-user-info');
                userList.innerHTML = '';
                const sortedUsers = Object.entries(data.users).sort((a, b) => b[1] - a[1]).slice(0, 10);
                const fragment = document.createDocumentFragment();
                sortedUsers.forEach(([user, count], index) => {
                    const li = document.createElement('li');
                    li.textContent = `${user}: ${count}`;
                    li.style.animationDelay = `${index * 0.1}s`;
                    fragment.appendChild(li);
                });
                userList.appendChild(fragment);
                countUp(mentionsCount, 0, data.total_mentions, 1000);
                if (sortedUsers.length > 0) {
                    const [topUser, maxMessages] = sortedUsers[0];
                    topUserInfo.innerHTML = `<span class="top-user-name highlight">${topUser}</span> with <span class="top-user-count">${maxMessages}</span> mentions.`;
                }
                if (initialLoad && !hasTriggeredConfetti) {
                    setTimeout(triggerConfetti, 1000);
                    hasTriggeredConfetti = true;
                }
            })
            .catch(error => {
                console.error('Error fetching stats:', error);
            });
    }

    function toggleStats() {
        isShowingDaily = !isShowingDaily;
        const url = isShowingDaily ? 'https://thecooldoggo.hackclub.app/daily_customs_count.json' : 'https://thecooldoggo.hackclub.app/customs_count.json';
        toggleButton.textContent = isShowingDaily ? 'Show Total Stats' : 'Show Daily Stats';
        statsSection.classList.add('fade-out');
        statsSection.classList.add('hidden');
        
        setTimeout(() => {
            fetchData(url);
            statsSection.classList.remove('fade-out');
            statsSection.classList.remove('hidden');
            statsSection.classList.add('fade-in');
            setTimeout(() => {
                statsSection.classList.remove('fade-in');
            }, 500);
        }, 500);
    }

    toggleButton.addEventListener('click', toggleStats);
    fetchData('https://thecooldoggo.hackclub.app/customs_count.json', true);

    const fadeInElements = document.querySelectorAll('.fade-in');
    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
            }
        });
    });

    fadeInElements.forEach(element => {
        observer.observe(element);
    });
});

function countUp(element, start, end, duration) {
    let startTime = null;

    function animate(currentTime) {
        if (startTime === null) startTime = currentTime;
        const progress = currentTime - startTime;
        const easing = easeOutCubic(progress / duration);
        const current = Math.min(Math.floor(easing * (end - start) + start), end);
        element.textContent = formatNumber(current);

        if (current < end) {
            requestAnimationFrame(animate);
        }
    }

    function easeOutCubic(t) {
        return 1 - Math.pow(1 - t, 3);
    }

    requestAnimationFrame(animate);
}

function triggerConfetti() {
    confetti({
        particleCount: 270,
        spread: 150,
        origin: { y: 0.5 }
    });
}

function formatNumber(num) {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}