document.addEventListener('DOMContentLoaded', function() {
    // Fetch IP information on page load
    fetchIPInfo();
    
    // Setup refresh button
    const refreshBtn = document.getElementById('refresh-btn');
    refreshBtn.addEventListener('click', function() {
        const icon = this.querySelector('i');
        icon.classList.remove('hidden');
        this.disabled = true;
        
        fetchIPInfo().finally(() => {
            setTimeout(() => {
                icon.classList.add('hidden');
                this.disabled = false;
            }, 500);
        });
    });
    
    // Theme toggle functionality (if you want to add a toggle button later)
    // const themeToggle = document.getElementById('theme-toggle');
    // themeToggle.addEventListener('click', function() {
    //     document.documentElement.classList.toggle('dark');
    //     localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
    // });
});

async function fetchIPInfo() {
    try {
        // First get the IP address
        const ipResponse = await fetch('https://api.ipify.org?format=json');
        const ipData = await ipResponse.json();
        const ipAddress = ipData.ip;
        
        // Then get detailed information using the IP
        const infoResponse = await fetch(`https://ipapi.co/${ipAddress}/json/`);
        const infoData = await infoResponse.json();
        
        // Update the UI with the fetched data
        document.getElementById('ip-address').textContent = ipAddress;
        document.getElementById('location').textContent = 
            `${infoData.city || 'Unknown'}, ${infoData.region || 'Unknown'}`;
        document.getElementById('country').textContent = 
            `${infoData.country_name || 'Unknown'} (${infoData.country || 'XX'})`;
        document.getElementById('isp').textContent = infoData.org || 'Unknown ISP';
        document.getElementById('timezone').textContent = infoData.timezone || 'Unknown';
        
        // Determine security status (simplified for demo)
        const securityStatus = infoData.proxy === true || infoData.vpn === true ? 
            '⚠️ VPN/Proxy Detected' : '✅ Normal Connection';
        document.getElementById('security').textContent = securityStatus;
        
        // Simulate map loading (in a real app you would use Google Maps or similar)
        const mapContainer = document.getElementById('map-container');
        mapContainer.innerHTML = `
            <div class="absolute inset-0 flex items-center justify-center">
                <div class="text-center">
                    <i data-feather="map-pin" class="text-secondary-500 w-12 h-12 mb-2 mx-auto"></i>
                    <p class="text-gray-800 dark:text-gray-200 font-medium">${infoData.city || 'Your Location'}</p>
                </div>
            </div>
        `;
        feather.replace();
        
    } catch (error) {
        console.error('Error fetching IP information:', error);
        
        // Show error state in UI
        const elements = [
            'ip-address', 'location', 'country', 
            'isp', 'timezone', 'security'
        ];
        
        elements.forEach(id => {
            document.getElementById(id).textContent = 'Failed to load';
            document.getElementById(id).classList.add('text-red-500');
        });
    }
}