const state = {
    currentVendor: null,
    currentPage: 1,
    itemsPerPage: 50,
    filters: { severity: '', year: '' },
    charts: { trend: null, severity: null }
};

function updateThemeIcon(theme) {
    const icon = document.querySelector('#darkModeToggle i');
    if (icon) icon.className = theme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
}

function toggleDarkMode() {
    const currentTheme = document.documentElement.getAttribute('data-bs-theme');
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    document.documentElement.setAttribute('data-bs-theme', newTheme);
    localStorage.setItem('theme', newTheme);
    updateThemeIcon(newTheme);
    if (state.currentVendor) {
        fetch(`/api/stats/${state.currentVendor}`)
            .then(r => r.json())
            .then(data => updateCharts(data.stats))
            .catch(console.error);
    }
}

function getSeverityIcon(severity) {
    const icons = {
        'CRITICAL': '<i class="fas fa-skull-crossbones"></i>',
        'HIGH': '<i class="fas fa-exclamation-triangle"></i>',
        'MEDIUM': '<i class="fas fa-exclamation-circle"></i>',
        'LOW': '<i class="fas fa-info-circle"></i>'
    };
    return icons[severity] || '<i class="fas fa-question"></i>';
}

function formatDate(dateString) {
    if (!dateString) return 'N/A';
    return new Date(dateString).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
}

function formatMonth(monthString) {
    const [year, month] = monthString.split('-');
    return new Date(year, month - 1).toLocaleDateString('en-US', { year: 'numeric', month: 'short' });
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function updateLastUpdate() {
    const elem = document.getElementById('lastUpdate');
    if (elem) elem.innerHTML = `<i class="fas fa-clock me-1"></i>Last update: ${new Date().toLocaleTimeString()}`;
}

function showLoading() {
    const tbody = document.getElementById('cveTableBody');
    if (tbody) tbody.innerHTML = `<tr><td colspan="5" class="text-center py-4"><div class="spinner-border text-primary"></div><p class="mt-2 text-muted">Loading...</p></td></tr>`;
}

function showError(message) {
    console.error(message);
    alert(message);
}

document.addEventListener('DOMContentLoaded', () => {
    initializeApp();
    setupEventListeners();
    loadVendors();
});

function initializeApp() {
    const savedTheme = localStorage.getItem('theme') || 'light';
    document.documentElement.setAttribute('data-bs-theme', savedTheme);
    updateThemeIcon(savedTheme);
}

function setupEventListeners() {
    const handlers = {
        'darkModeToggle': toggleDarkMode,
        'refreshBtn': () => state.currentVendor && loadVendorData(state.currentVendor, true),
        'clearFilters': clearFiltersHandler,
        'exportJSON': () => exportData('json'),
        'exportCSV': () => exportData('csv'),
        'searchBtn': performSearch
    };

    Object.entries(handlers).forEach(([id, handler]) => {
        const elem = document.getElementById(id);
        if (elem) elem.addEventListener('click', handler);
    });

    const filterForm = document.getElementById('filterForm');
    if (filterForm) filterForm.addEventListener('submit', (e) => { e.preventDefault(); applyFilters(); });

    const searchInput = document.getElementById('searchInput');
    if (searchInput) searchInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') performSearch(); });

    const prevPage = document.getElementById('prevPage');
    const nextPage = document.getElementById('nextPage');
    if (prevPage) prevPage.querySelector('a')?.addEventListener('click', (e) => { e.preventDefault(); changePage(-1); });
    if (nextPage) nextPage.querySelector('a')?.addEventListener('click', (e) => { e.preventDefault(); changePage(1); });
}

async function loadVendors() {
    try {
        const response = await fetch('/api/vendors');
        const data = await response.json();
        if (data.vendors) {
            renderVendorList(data.vendors);
            renderVendorDropdown(data.vendors);
            if (data.vendors.length > 0) loadVendorData(data.vendors[0].code);
        }
    } catch (error) {
        console.error('Error loading vendors:', error);
        showError('Failed to load vendors list');
    }
}

function renderVendorList(vendors) {
    const vendorList = document.getElementById('vendorList');
    if (!vendorList) return;

    vendorList.innerHTML = vendors.map(vendor => `
        <li class="nav-item">
            <a class="nav-link" href="#" data-vendor="${vendor.code}">
                ${vendor.name}
                <span class="badge bg-primary float-end">${vendor.total || 0}</span>
            </a>
        </li>
    `).join('');

    vendorList.querySelectorAll('a[data-vendor]').forEach(link => {
        link.addEventListener('click', (e) => {
            e.preventDefault();
            loadVendorData(link.getAttribute('data-vendor'));
            vendorList.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
            link.classList.add('active');
        });
    });
}

function renderVendorDropdown(vendors) {
    const dropdown = document.getElementById('vendorDropdown');
    if (!dropdown) return;

    dropdown.innerHTML = vendors.map(vendor => `
        <li><a class="dropdown-item" href="#" data-vendor="${vendor.code}">${vendor.name}</a></li>
    `).join('');

    dropdown.querySelectorAll('a[data-vendor]').forEach(link => {
        link.addEventListener('click', (e) => {
            e.preventDefault();
            loadVendorData(link.getAttribute('data-vendor'));
        });
    });
}

async function loadVendorData(vendorCode, forceRefresh = false) {
    state.currentVendor = vendorCode;
    state.currentPage = 1;
    showLoading();

    try {
        const [cvesResponse, statsResponse] = await Promise.all([
            fetch(`/api/cve/${vendorCode}?limit=${state.itemsPerPage}&offset=0`),
            fetch(`/api/stats/${vendorCode}`)
        ]);

        const cvesData = await cvesResponse.json();
        const statsData = await statsResponse.json();

        updateTitle(vendorCode);
        updateStats(statsData.stats);
        renderCVETable(cvesData.cves);
        updateCharts(statsData.stats);
        updateLastUpdate();
    } catch (error) {
        console.error('Error loading vendor data:', error);
        showError('Failed to load CVE data');
    }
}

function updateTitle(vendorCode) {
    const vendors = {
        'microsoft': 'Microsoft', 'apple': 'Apple', 'fortinet': 'Fortinet',
        'cisco': 'Cisco', 'adobe': 'Adobe', 'oracle': 'Oracle',
        'google': 'Google', 'linux': 'Linux Kernel', 'vmware': 'VMware',
        'paloalto': 'Palo Alto Networks', 'docker': 'Docker', 'kubernetes': 'Kubernetes'
    };

    const mainTitle = document.getElementById('mainTitle');
    if (mainTitle) mainTitle.innerHTML = `<i class="fas fa-shield-alt text-primary me-2"></i>${vendors[vendorCode] || vendorCode} CVEs`;
}

function updateStats(stats) {
    const elements = {
        statTotal: stats.total || 0,
        statCritical: stats.severity?.CRITICAL || 0,
        statHigh: stats.severity?.HIGH || 0,
        statMonth: stats.this_month || 0
    };
    Object.entries(elements).forEach(([id, value]) => {
        const elem = document.getElementById(id);
        if (elem) elem.textContent = value;
    });
}

function renderCVETable(cves) {
    const tbody = document.getElementById('cveTableBody');
    if (!tbody) return;

    if (!cves || cves.length === 0) {
        tbody.innerHTML = `<tr><td colspan="5" class="text-center py-4 text-muted"><i class="fas fa-inbox fa-3x mb-3"></i><p>No CVEs found</p></td></tr>`;
        return;
    }

    tbody.innerHTML = cves.map(cve => `
        <tr onclick="showCVEDetails('${cve.cve_id}')" style="cursor: pointer;">
            <td><span class="cve-id">${cve.cve_id}</span></td>
            <td><span class="badge badge-${(cve.severity || 'unknown').toLowerCase()}">${getSeverityIcon(cve.severity)} ${cve.severity || 'UNKNOWN'}</span></td>
            <td><strong>${cve.cvss_score ? cve.cvss_score.toFixed(1) : 'N/A'}</strong></td>
            <td><div class="text-truncate" style="max-width: 400px;">${escapeHtml(cve.description || 'No description available')}</div></td>
            <td><small class="text-muted">${formatDate(cve.published_date)}</small></td>
        </tr>
    `).join('');

    if (cves.length >= state.itemsPerPage) {
        const paginationNav = document.getElementById('paginationNav');
        if (paginationNav) paginationNav.classList.remove('d-none');
    }
}

async function showCVEDetails(cveId) {
    const modalElement = document.getElementById('cveModal');
    if (!modalElement) return;

    const modal = new bootstrap.Modal(modalElement);
    const modalTitle = document.getElementById('cveModalTitle');
    const modalBody = document.getElementById('cveModalBody');

    if (modalTitle) modalTitle.textContent = cveId;
    if (modalBody) modalBody.innerHTML = '<div class="text-center"><div class="spinner-border"></div></div>';

    modal.show();

    try {
        const response = await fetch(`/api/cve/${state.currentVendor}`);
        const data = await response.json();
        const cve = data.cves.find(c => c.cve_id === cveId);

        if (cve && modalBody) {
            const references = cve.references ? JSON.parse(cve.references) : [];
            const cweIds = cve.cwe_ids ? JSON.parse(cve.cwe_ids) : [];

            modalBody.innerHTML = `
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <h6>Severity</h6>
                        <span class="badge badge-${(cve.severity || 'unknown').toLowerCase()} fs-6">${getSeverityIcon(cve.severity)} ${cve.severity || 'UNKNOWN'}</span>
                    </div>
                    <div class="col-md-6 mb-3">
                        <h6>CVSS Score</h6>
                        <p class="fs-4 mb-0"><strong>${cve.cvss_score ? cve.cvss_score.toFixed(1) : 'N/A'}</strong></p>
                        ${cve.cvss_vector ? `<small class="text-muted">${cve.cvss_vector}</small>` : ''}
                    </div>
                </div>
                <div class="mb-3"><h6>Description</h6><p>${escapeHtml(cve.description || 'N/A')}</p></div>
                <div class="row">
                    <div class="col-md-6 mb-3"><h6>Published</h6><p>${formatDate(cve.published_date)}</p></div>
                    <div class="col-md-6 mb-3"><h6>Modified</h6><p>${formatDate(cve.last_modified)}</p></div>
                </div>
                ${cweIds.length > 0 ? `<div class="mb-3"><h6>CWE IDs</h6><p>${cweIds.map(cwe => `<span class="badge bg-secondary me-1">${cwe}</span>`).join('')}</p></div>` : ''}
                ${references.length > 0 ? `<div class="mb-3"><h6>References</h6><ul class="list-unstyled">${references.slice(0, 5).map(ref => `<li><a href="${ref}" target="_blank"><i class="fas fa-external-link-alt me-1"></i>${ref}</a></li>`).join('')}</ul></div>` : ''}
            `;
        }
    } catch (error) {
        console.error('Error loading CVE details:', error);
        if (modalBody) modalBody.innerHTML = '<p class="text-danger">Error loading CVE details</p>';
    }
}

function updateCharts(stats) {
    updateTrendChart(stats.monthly || {});
    updateSeverityChart(stats.severity || {});
}

function updateTrendChart(monthlyData) {
    const ctx = document.getElementById('trendChart');
    if (!ctx) return;
    if (state.charts.trend) state.charts.trend.destroy();

    const months = Object.keys(monthlyData).sort();
    state.charts.trend = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: months.map(m => formatMonth(m)),
            datasets: [{
                label: 'CVE Count',
                data: months.map(m => monthlyData[m]),
                backgroundColor: 'rgba(13, 110, 253, 0.5)',
                borderColor: 'rgba(13, 110, 253, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: { y: { beginAtZero: true } }
        }
    });
}

function updateSeverityChart(severityData) {
    const ctx = document.getElementById('severityChart');
    if (!ctx) return;
    if (state.charts.severity) state.charts.severity.destroy();

    state.charts.severity = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ['Critical', 'High', 'Medium', 'Low'],
            datasets: [{
                data: [severityData.CRITICAL || 0, severityData.HIGH || 0, severityData.MEDIUM || 0, severityData.LOW || 0],
                backgroundColor: ['rgba(220, 53, 69, 0.8)', 'rgba(253, 126, 20, 0.8)', 'rgba(13, 202, 240, 0.8)', 'rgba(108, 117, 125, 0.8)']
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { position: 'bottom' } }
        }
    });
}

async function applyFilters() {
    state.filters.severity = document.getElementById('filterSeverity')?.value || '';
    state.filters.year = document.getElementById('filterYear')?.value || '';
    state.currentPage = 1;
    showLoading();

    try {
        let url = `/api/cve/${state.currentVendor}/filter?limit=${state.itemsPerPage}&offset=0`;
        if (state.filters.severity) url += `&severity=${state.filters.severity}`;
        if (state.filters.year) url += `&year=${state.filters.year}`;

        const response = await fetch(url);
        const data = await response.json();
        renderCVETable(data.cves);
    } catch (error) {
        console.error('Error applying filters:', error);
        showError('Failed to apply filters');
    }
}

function clearFiltersHandler() {
    const severityFilter = document.getElementById('filterSeverity');
    const yearFilter = document.getElementById('filterYear');
    if (severityFilter) severityFilter.value = '';
    if (yearFilter) yearFilter.value = '';
    state.filters = { severity: '', year: '' };
    if (state.currentVendor) loadVendorData(state.currentVendor);
}

function changePage(delta) {
    state.currentPage += delta;
    if (state.currentPage < 1) state.currentPage = 1;

    const offset = (state.currentPage - 1) * state.itemsPerPage;
    fetch(`/api/cve/${state.currentVendor}?limit=${state.itemsPerPage}&offset=${offset}`)
        .then(r => r.json())
        .then(data => {
            renderCVETable(data.cves);
            const currentPage = document.getElementById('currentPage');
            if (currentPage) currentPage.textContent = state.currentPage;
        })
        .catch(console.error);
}

async function performSearch() {
    const searchInput = document.getElementById('searchInput');
    if (!searchInput) return;

    const query = searchInput.value.trim();
    const resultsDiv = document.getElementById('searchResults');
    if (!resultsDiv) return;

    if (query.length < 3) {
        resultsDiv.innerHTML = '<p class="text-muted">Please enter at least 3 characters</p>';
        return;
    }

    resultsDiv.innerHTML = '<div class="text-center"><div class="spinner-border"></div></div>';

    try {
        const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
        const data = await response.json();

        if (data.results && data.results.length > 0) {
            resultsDiv.innerHTML = `<div class="list-group">${data.results.map(cve => `
                <a href="#" class="list-group-item list-group-item-action" onclick="showCVEDetails('${cve.cve_id}'); return false;">
                    <div class="d-flex w-100 justify-content-between">
                        <h6 class="mb-1 cve-id">${cve.cve_id}</h6>
                        <span class="badge badge-${(cve.severity || 'unknown').toLowerCase()}">${cve.severity}</span>
                    </div>
                    <p class="mb-1 small">${escapeHtml(cve.description.substring(0, 150))}...</p>
                    <small class="text-muted">${formatDate(cve.published_date)}</small>
                </a>`).join('')}</div>`;
        } else {
            resultsDiv.innerHTML = '<p class="text-muted">No results found</p>';
        }
    } catch (error) {
        console.error('Error searching:', error);
        resultsDiv.innerHTML = '<p class="text-danger">Search failed</p>';
    }
}

function exportData(format) {
    if (!state.currentVendor) return;
    window.open(`/api/export/${state.currentVendor}/${format}`, '_blank');
}