document.addEventListener('DOMContentLoaded', function() {
    const domainInput = document.getElementById('domainInput');
    const scanBtn = document.getElementById('scanBtn');
    const resultsSection = document.getElementById('resultsSection');
    const scanResults = document.getElementById('scanResults');
    
    // Mock API function - in a real implementation, this would call actual threat intelligence APIs
    async function scanDomain(domain) {
        return new Promise((resolve) => {
            setTimeout(() => {
                // Simulate API response
                const isSuspicious = Math.random() > 0.7; // 30% chance to be flagged
                
                const response = {
                    domain,
                    isSuspicious,
                    lastScanned: new Date().toISOString(),
                    reputationScore: Math.floor(Math.random() * 100),
                    categories: isSuspicious 
                        ? ['Adult Content', 'Potential CSAM', 'High Risk'] 
                        : ['General Content', 'Low Risk'],
                    hostingInfo: {
                        ip: `192.168.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}`,
                        country: isSuspicious ? 'Offshore Location' : 'United States',
                        registrar: isSuspicious ? 'Anonymous Registrar Inc' : 'GoDaddy LLC'
                    },
                    threatIndicators: isSuspicious 
                        ? ['Known bad IP neighborhood', 'Recently registered domain', 'Hidden WHOIS'] 
                        : ['Clean record'],
                    historicalData: {
                        firstSeen: new Date(Date.now() - Math.floor(Math.random() * 31536000000)).toISOString().split('T')[0],
                        changes: Math.floor(Math.random() * 10)
                    }
                };
                
                resolve(response);
            }, 1500); // Simulate network delay
        });
    }
    
    function displayResults(data) {
        scanResults.innerHTML = '';
        
        const resultCard = document.createElement('div');
        resultCard.className = 'bg-gray-700 rounded-lg p-6';
        
        const statusColor = data.isSuspicious ? 'text-red-500' : 'text-green-500';
        const statusText = data.isSuspicious ? 'SUSPICIOUS' : 'CLEAN';
        
        resultCard.innerHTML = `
            <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
                <div>
                    <h3 class="text-xl font-semibold">${data.domain}</h3>
                    <p class="text-gray-400">Scanned: ${new Date(data.lastScanned).toLocaleString()}</p>
                </div>
                <div class="mt-2 md:mt-0">
                    <span class="px-4 py-2 rounded-full ${statusColor} bg-opacity-20 font-bold">${statusText}</span>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                    <h4 class="font-semibold text-gray-300 mb-2">Reputation Score</h4>
                    <div class="w-full bg-gray-600 rounded-full h-4">
                        <div class="bg-${data.isSuspicious ? 'red' : 'green'}-500 h-4 rounded-full" 
                             style="width: ${data.reputationScore}%"></div>
                    </div>
                    <p class="text-sm mt-1">${data.reputationScore}/100</p>
                </div>
                
                <div>
                    <h4 class="font-semibold text-gray-300 mb-2">Content Categories</h4>
                    <div class="flex flex-wrap gap-2">
                        ${data.categories.map(cat => `
                            <span class="px-3 py-1 rounded-full text-xs ${data.isSuspicious ? 'bg-red-900 text-red-200' : 'bg-green-900 text-green-200'}">
                                ${cat}
                            </span>
                        `).join('')}
                    </div>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h4 class="font-semibold text-gray-300 mb-2">Hosting Information</h4>
                    <div class="space-y-2">
                        <p><span class="text-gray-400">IP:</span> ${data.hostingInfo.ip}</p>
                        <p><span class="text-gray-400">Country:</span> ${data.hostingInfo.country}</p>
                        <p><span class="text-gray-400">Registrar:</span> ${data.hostingInfo.registrar}</p>
                    </div>
                </div>
                
                <div>
                    <h4 class="font-semibold text-gray-300 mb-2">Threat Indicators</h4>
                    <ul class="list-disc pl-5 space-y-1">
                        ${data.threatIndicators.map(ind => `<li>${ind}</li>`).join('')}
                    </ul>
                </div>
            </div>
            
            ${data.isSuspicious ? `
                <div class="mt-6 p-4 bg-red-900 bg-opacity-30 rounded-lg border border-red-700">
                    <div class="flex items-center gap-2 text-red-300">
                        <i data-feather="alert-circle"></i>
                        <h4 class="font-bold">Warning</h4>
                    </div>
                    <p class="mt-2 text-sm">This domain has been flagged for potentially harmful content. 
                    Consider reporting to <a href="https://report.cybertip.org/" target="_blank" class="underline">appropriate authorities</a>.</p>
                </div>
            ` : ''}
        `;
        
        scanResults.appendChild(resultCard);
        feather.replace();
    }
    
    scanBtn.addEventListener('click', async function() {
        const domain = domainInput.value.trim();
        
        if (!domain) {
            alert('Please enter a domain to scan');
            return;
        }
        
        // Simple domain validation
        if (!/^([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,}$/i.test(domain)) {
            alert('Please enter a valid domain name');
            return;
        }
        
        // Show loading state
        scanBtn.disabled = true;
        scanBtn.innerHTML = `<i data-feather="loader" class="animate-spin"></i> Scanning...`;
        feather.replace();
        
        try {
            const results = await scanDomain(domain);
            displayResults(results);
            resultsSection.classList.remove('hidden');
        } catch (error) {
            alert('Error scanning domain: ' + error.message);
        } finally {
            scanBtn.disabled = false;
            scanBtn.innerHTML = `<i data-feather="search"></i> Scan Domain`;
            feather.replace();
        }
    });
    
    // Allow Enter key to trigger scan
    domainInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            scanBtn.click();
        }
    });
});