popup.js

let currentFilter = 'all';
let analysisData = null;

document.addEventListener('DOMContentLoaded', async () => {
    await loadAnalysis();

    // Set up event listeners
    document.getElementById('refresh-btn').addEventListener('click', loadAnalysis);
    document.getElementById('export-btn').addEventListener('click', exportAnalysis);

    document.querySelectorAll('.risk-tab').forEach(tab => {
        tab.addEventListener('click', (e) => {
            currentFilter = e.target.dataset.risk;
            updateActiveTab();
            displayFindings();
        });
    });
});

async function loadAnalysis() {
    try {
        analysisData = await new Promise((resolve) => {
            chrome.runtime.sendMessage({ type: 'get_analysis' }, resolve);
        });

        updateStats();
        updateAlerts();
        displayFindings();
    } catch (error) {
        console.error('Failed to load analysis:', error);
    }
}

function updateStats() {
    if (!analysisData) return;

    const highCount = analysisData.high?.length || 0;
    const mediumCount = analysisData.medium?.length || 0;
    const lowCount = analysisData.low?.length || 0;
    const totalCount = analysisData.all?.length || 0;

    document.getElementById('high-count').textContent = highCount;
    document.getElementById('medium-count').textContent = mediumCount;
    document.getElementById('low-count').textContent = lowCount;
    document.getElementById('total-count').textContent = totalCount;
}

function updateAlerts() {
    const alertsContainer = document.getElementById('alerts-container');
    alertsContainer.innerHTML = '';

    if (!analysisData || !analysisData.all) return;

    // Check for user recording
    const userRecording = analysisData.userRecording?.length || 0;
    if (userRecording > 0) {
        alertsContainer.innerHTML += `
      <div class="session-warning">
        ⚠️ <strong>User Recording Detected!</strong> This site may be recording user interactions and behaviors.
      </div>
    `;
    }

    // Check for background activity
    const backgroundActivity = analysisData.all.filter(f =>
        f.type === 'background_activity' || f.type === 'high_data_ratio'
    );

    if (backgroundActivity.length > 0) {
        alertsContainer.innerHTML += `
      <div class="idle-alert">
        🚨 <strong>Background Operations:</strong> Unusual activity detected during idle periods.
      </div>
    `;
    }
}

function updateActiveTab() {
    document.querySelectorAll('.risk-tab').forEach(tab => {
        tab.classList.remove('active');
    });
    document.querySelector(`[data-risk="${currentFilter}"]`).classList.add('active');
}

function displayFindings() {
    const container = document.getElementById('threats-container');

    if (!analysisData || !analysisData.all || analysisData.all.length === 0) {
        container.innerHTML = '<div class="no-threats">✅ No concerning technologies detected on this page</div>';
        return;
    }

    let findings = analysisData.all;
    if (currentFilter !== 'all') {
        findings = analysisData[currentFilter] || [];
    }

    if (findings.length === 0) {
        container.innerHTML = `<div class="no-threats">✅ No ${currentFilter} complexity findings detected</div>`;
        return;
    }

    container.innerHTML = findings.map(finding => createFindingElement(finding)).join('');
}

function createFindingElement(finding) {
    const complexityLevel = getComplexityLevel(finding.riskLevel);
    const findingIcon = getFindingIcon(finding.type);

    return `
    <div class="threat ${complexityLevel}">
      <div class="threat-header">
        <div class="threat-type">${findingIcon} ${formatFindingType(finding.type)}</div>
        <div class="threat-risk ${complexityLevel}">${complexityLevel.toUpperCase()}</div>
      </div>
      <div class="threat-tech">${finding.technology}</div>
      <div class="threat-details">${formatFindingDetails(finding)}</div>
      ${finding.categories ? createCategoriesHtml(finding.categories) : ''}
      <div class="threat-method">Detected via: ${formatMethod(finding.method)}</div>
    </div>
  `;
}

function getComplexityLevel(level) {
    if (level >= 3) return 'high';
    if (level >= 2) return 'medium';
    return 'low';
}

function getFindingIcon(type) {
    const icons = {
        'user_recording': '📹',
        'storage_element': '🍪',
        'web_technology': '📊',
        'bulk_upload': '📤',
        'bulk_transfer': '📥',
        'background_activity': '⏰',
        'high_data_ratio': '📈',
        'analytics': '📊',
        'advertising': '📢',
        'tag_manager': '🏷️',
        'data_api': '🗂️',
        'events': '🎯'
    };
    return icons[type] || '🔍';
}

function formatFindingType(type) {
    return type.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
}

function formatFindingDetails(finding) {
    switch (finding.type) {
        case 'storage_element':
            return `Storage: ${finding.name} (${finding.domain})`;

        case 'bulk_upload':
            return `Large upload: ${formatBytes(finding.size)} to ${finding.domain}`;

        case 'bulk_transfer':
            return `Large download: ${formatBytes(finding.size)} from ${finding.domain}`;

        case 'background_activity':
            return `${finding.count} requests during ${Math.round(finding.duration/1000/60)} minutes of inactivity`;

        case 'high_data_ratio':
            return `${finding.ratio}% of requests are data operations (${finding.dataRequests}/${finding.totalRequests})`;

        default:
            if (finding.url) {
                const domain = new URL(finding.url).hostname;
                return `Request: ${domain}`;
            }
            return finding.domain || 'Unknown source';
    }
}

function formatMethod(method) {
    const methods = {
        'builtin_pattern': 'Built-in patterns',
        'builtin_storage': 'Built-in storage analysis',
        'database_network': 'Technology database',
        'database_storage': 'Storage database',
        'upload_analysis': 'Upload monitoring',
        'response_analysis': 'Response analysis',
        'idle_analysis': 'Idle behavior',
        'ratio_analysis': 'Request pattern analysis'
    };
    return methods[method] || method;
}

function createCategoriesHtml(categories) {
    if (!Array.isArray(categories)) return '';

    return `
    <div class="threat-categories">
      ${categories.map(cat => `<span class="category-tag">${cat}</span>`).join('')}
    </div>
  `;
}

function formatBytes(bytes) {
    if (bytes === 0) return '0 B';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

async function exportAnalysis() {
    if (!analysisData || !analysisData.all || analysisData.all.length === 0) {
        alert('No findings to export');
        return;
    }

    try {
        // Get current tab info
        const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
        const domain = new URL(tab.url).hostname;

        const exportData = {
            domain: domain,
            url: tab.url,
            scanTime: new Date().toISOString(),
            totalFindings: analysisData.all.length,
            complexityBreakdown: {
                high: analysisData.high?.length || 0,
                medium: analysisData.medium?.length || 0,
                low: analysisData.low?.length || 0
            },
            findings: analysisData.all,
            userRecording: (analysisData.userRecording?.length || 0) > 0,
            backgroundOperations: analysisData.all.some(f =>
                f.type === 'background_activity' || f.type === 'high_data_ratio'
            )
        };

        // Create downloadable file
        const blob = new Blob([JSON.stringify(exportData, null, 2)],
            { type: 'application/json' });
        const url = URL.createObjectURL(blob);

        // Trigger download
        const a = document.createElement('a');
        a.href = url;
        a.download = `website-analysis-${domain}-${new Date().toISOString().split('T')[0]}.json`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);

    } catch (error) {
        console.error('Export failed:', error);
        alert('Export failed. Check console for details.');
    }
}