document.addEventListener('DOMContentLoaded', () => {
    initRealTimeData();
    initInteractions();
});

// --------------------------------------------------------
// REAL-TIME API DATA (CoinGecko for Market Simulation)
// --------------------------------------------------------
async function initRealTimeData() {
    const btcEl = document.getElementById('btc-price');
    const ethEl = document.getElementById('eth-price');
    const volEl = document.getElementById('total-vol');

    try {
        // Fetching data from public API
        const response = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum&vs_currencies=usd&include_24hr_vol=true');
        const data = await response.json();

        if (data.bitcoin) {
            animateValue(btcEl, 0, data.bitcoin.usd, 1000, '$');
        }
        if (data.ethereum) {
            animateValue(ethEl, 0, data.ethereum.usd, 1000, '$');
        }
        
        // Just a mockup for volume as it requires a different endpoint, utilizing the API response structure
        volEl.innerText = '$84.2B'; 
        
    } catch (error) {
        console.error('API Connection Failed:', error);
        btcEl.innerText = 'OFFLINE';
        ethEl.innerText = 'OFFLINE';
        volEl.innerText = 'UNKNOWN';
    }
}

// Number Counter Animation
function animateValue(obj, start, end, duration, prefix = '') {
    let startTimestamp = null;
    const step = (timestamp) => {
        if (!startTimestamp) startTimestamp = timestamp;
        const progress = Math.min((timestamp - startTimestamp) / duration, 1);
        const value = Math.floor(progress * (end - start) + start);
        obj.innerHTML = prefix + value.toLocaleString();
        if (progress < 1) {
            window.requestAnimationFrame(step);
        } else {
            // Format to 2 decimals at the end for crypto
            obj.innerHTML = prefix + end.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
        }
    };
    window.requestAnimationFrame(step);
}

// --------------------------------------------------------
// INTERACTIONS
// --------------------------------------------------------
function initInteractions() {
    // Smooth scroll for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth'
                });
            }
        });
    });

    // Randomly update "Status" in agent cards to simulate "Alive" system
    setInterval(() => {
        const cards = document.querySelectorAll('custom-agent-card');
        const randomCard = cards[Math.floor(Math.random() * cards.length)];
        // We would need to expose a method in the component to do this cleanly,
        // but for now we can trigger a visual glitch on the container
        randomCard.classList.add('animate-pulse');
        setTimeout(() => {
            randomCard.classList.remove('animate-pulse');
        }, 500);
    }, 3000);
}