script.js

// Application State
let reportData = {
    title: '',
    scope: '',
    executiveSummary: '',
    conclusion: '',
    vulnerabilities: [],
    recommendations: []
};

let currentTheme = 'light';

// DOM Elements
const themeToggle = document.getElementById('themeToggle');
const navItems = document.querySelectorAll('.nav-item');
const tabContents = document.querySelectorAll('.tab-content');
const addVulnerabilityBtn = document.getElementById('addVulnerability');
const addRecommendationBtn = document.getElementById('addRecommendation');
const generateReportBtn = document.getElementById('generateReport');
const downloadPDFBtn = document.getElementById('downloadPDF');
const pdfModal = document.getElementById('pdfModal');
const modalClose = document.getElementById('modalClose');
const confirmPDFBtn = document.getElementById('confirmPDF');
const cancelPDFBtn = document.getElementById('cancelPDF');

// Initialize Application
document.addEventListener('DOMContentLoaded', function() {
    initializeEventListeners();
    loadSavedData();
    updateTheme();
});

// Event Listeners
function initializeEventListeners() {
    // Theme toggle
    themeToggle.addEventListener('click', toggleTheme);
    
    // Navigation
    navItems.forEach(item => {
        item.addEventListener('click', () => switchTab(item.dataset.tab));
    });
    
    // Form inputs
    document.getElementById('title').addEventListener('input', (e) => {
        reportData.title = e.target.value;
        saveData();
    });
    
    document.getElementById('scope').addEventListener('input', (e) => {
        reportData.scope = e.target.value;
        saveData();
    });
    
    document.getElementById('executive-summary').addEventListener('input', (e) => {
        reportData.executiveSummary = e.target.value;
        saveData();
    });
    
    document.getElementById('conclusion').addEventListener('input', (e) => {
        reportData.conclusion = e.target.value;
        saveData();
    });
    
    // Buttons
    addVulnerabilityBtn.addEventListener('click', addVulnerability);
    addRecommendationBtn.addEventListener('click', addRecommendation);
    generateReportBtn.addEventListener('click', generateReport);
    downloadPDFBtn.addEventListener('click', showPDFModal);
    
    // Modal
    modalClose.addEventListener('click', hidePDFModal);
    cancelPDFBtn.addEventListener('click', hidePDFModal);
    confirmPDFBtn.addEventListener('click', downloadPDF);
    
    // Close modal on outside click
    pdfModal.addEventListener('click', (e) => {
        if (e.target === pdfModal) {
            hidePDFModal();
        }
    });
}

// Theme Management
function toggleTheme() {
    currentTheme = currentTheme === 'light' ? 'dark' : 'light';
    updateTheme();
    localStorage.setItem('theme', currentTheme);
}

function updateTheme() {
    document.documentElement.setAttribute('data-theme', currentTheme);
    const icon = themeToggle.querySelector('i');
    icon.className = currentTheme === 'light' ? 'fas fa-moon' : 'fas fa-sun';
}

// Navigation
function switchTab(tabName) {
    // Update navigation
    navItems.forEach(item => {
        item.classList.toggle('active', item.dataset.tab === tabName);
    });
    
    // Update content
    tabContents.forEach(content => {
        content.classList.toggle('active', content.id === tabName);
    });
}

// Vulnerability Management
function addVulnerability() {
    const vulnerability = {
        id: Date.now(),
        title: '',
        severity: 'medium',
        description: '',
        impact: '',
        solution: ''
    };
    
    reportData.vulnerabilities.push(vulnerability);
    renderVulnerabilities();
    saveData();
}

function removeVulnerability(id) {
    reportData.vulnerabilities = reportData.vulnerabilities.filter(v => v.id !== id);
    renderVulnerabilities();
    saveData();
}

function updateVulnerability(id, field, value) {
    const vulnerability = reportData.vulnerabilities.find(v => v.id === id);
    if (vulnerability) {
        vulnerability[field] = value;
        saveData();
    }
}

function renderVulnerabilities() {
    const container = document.getElementById('vulnerabilityList');
    container.innerHTML = '';
    
    reportData.vulnerabilities.forEach(vuln => {
        const vulnElement = createVulnerabilityElement(vuln);
        container.appendChild(vulnElement);
    });
}

function createVulnerabilityElement(vuln) {
    const div = document.createElement('div');
    div.className = 'vulnerability-item';
    div.innerHTML = `
        <div class="item-header">
            <input type="text" class="item-title" placeholder="Vulnerability title" 
                   value="${vuln.title}" onchange="updateVulnerability(${vuln.id}, 'title', this.value)">
            <select onchange="updateVulnerability(${vuln.id}, 'severity', this.value)">
                <option value="critical" ${vuln.severity === 'critical' ? 'selected' : ''}>Critical</option>
                <option value="high" ${vuln.severity === 'high' ? 'selected' : ''}>High</option>
                <option value="medium" ${vuln.severity === 'medium' ? 'selected' : ''}>Medium</option>
                <option value="low" ${vuln.severity === 'low' ? 'selected' : ''}>Low</option>
                <option value="info" ${vuln.severity === 'info' ? 'selected' : ''}>Info</option>
            </select>
            <span class="severity-badge severity-${vuln.severity}">${getSeverityText(vuln.severity)}</span>
            <button class="remove-item" onclick="removeVulnerability(${vuln.id})">
                <i class="fas fa-trash"></i>
            </button>
        </div>
        <div class="form-group">
            <label>Description</label>
            <textarea placeholder="Detailed description of the vulnerability..." 
                      onchange="updateVulnerability(${vuln.id}, 'description', this.value)">${vuln.description}</textarea>
        </div>
        <div class="form-group">
            <label>Impact</label>
            <textarea placeholder="Impact of this vulnerability on the system..." 
                      onchange="updateVulnerability(${vuln.id}, 'impact', this.value)">${vuln.impact}</textarea>
        </div>
        <div class="form-group">
            <label>Solution</label>
            <textarea placeholder="Recommended solution method..." 
                      onchange="updateVulnerability(${vuln.id}, 'solution', this.value)">${vuln.solution}</textarea>
        </div>
    `;
    return div;
}

// Recommendation Management
function addRecommendation() {
    const recommendation = {
        id: Date.now(),
        title: '',
        priority: 'medium',
        description: '',
        implementation: ''
    };
    
    reportData.recommendations.push(recommendation);
    renderRecommendations();
    saveData();
}

function removeRecommendation(id) {
    reportData.recommendations = reportData.recommendations.filter(r => r.id !== id);
    renderRecommendations();
    saveData();
}

function updateRecommendation(id, field, value) {
    const recommendation = reportData.recommendations.find(r => r.id === id);
    if (recommendation) {
        recommendation[field] = value;
        saveData();
    }
}

function renderRecommendations() {
    const container = document.getElementById('recommendationList');
    container.innerHTML = '';
    
    reportData.recommendations.forEach(rec => {
        const recElement = createRecommendationElement(rec);
        container.appendChild(recElement);
    });
}

function createRecommendationElement(rec) {
    const div = document.createElement('div');
    div.className = 'recommendation-item';
    div.innerHTML = `
        <div class="item-header">
            <input type="text" class="item-title" placeholder="Recommendation title" 
                   value="${rec.title}" onchange="updateRecommendation(${rec.id}, 'title', this.value)">
            <select onchange="updateRecommendation(${rec.id}, 'priority', this.value)">
                <option value="critical" ${rec.priority === 'critical' ? 'selected' : ''}>Critical</option>
                <option value="high" ${rec.priority === 'high' ? 'selected' : ''}>High</option>
                <option value="medium" ${rec.priority === 'medium' ? 'selected' : ''}>Medium</option>
                <option value="low" ${rec.priority === 'low' ? 'selected' : ''}>Low</option>
            </select>
            <span class="severity-badge severity-${rec.priority}">${getPriorityText(rec.priority)}</span>
            <button class="remove-item" onclick="removeRecommendation(${rec.id})">
                <i class="fas fa-trash"></i>
            </button>
        </div>
        <div class="form-group">
            <label>Description</label>
            <textarea placeholder="Detailed description of the recommendation..." 
                      onchange="updateRecommendation(${rec.id}, 'description', this.value)">${rec.description}</textarea>
        </div>
        <div class="form-group">
            <label>Implementation</label>
            <textarea placeholder="How to implement this recommendation..." 
                      onchange="updateRecommendation(${rec.id}, 'implementation', this.value)">${rec.implementation}</textarea>
        </div>
    `;
    return div;
}

// Report Generation
function generateReport() {
    if (!validateReportData()) {
        return;
    }
    
    const reportHTML = createReportHTML();
    const previewContainer = document.getElementById('reportPreview');
    previewContainer.innerHTML = reportHTML;
    
    // Switch to preview tab
    switchTab('preview');
    
    // Show success message
    showNotification('Report generated successfully!', 'success');
}

function validateReportData() {
    const errors = [];
    
    if (!reportData.title.trim()) {
        errors.push('Report title is required');
    }
    
    if (!reportData.scope.trim()) {
        errors.push('Scope information is required');
    }
    
    if (!reportData.executiveSummary.trim()) {
        errors.push('Executive summary is required');
    }
    
    if (errors.length > 0) {
        showNotification('Please fill in the missing fields:\n' + errors.join('\n'), 'error');
        return false;
    }
    
    return true;
}

function createReportHTML() {
    const currentDate = new Date().toLocaleDateString('en-US');
    
    let vulnerabilitiesHTML = '';
    if (reportData.vulnerabilities.length > 0) {
        vulnerabilitiesHTML = reportData.vulnerabilities.map(vuln => `
            <div class="vulnerability-item-report">
                <h3>${vuln.title || 'Untitled Vulnerability'} 
                    <span class="severity-badge severity-${vuln.severity}">${getSeverityText(vuln.severity)}</span>
                </h3>
                ${vuln.description ? `<p><strong>Description:</strong> ${vuln.description}</p>` : ''}
                ${vuln.impact ? `<p><strong>Impact:</strong> ${vuln.impact}</p>` : ''}
                ${vuln.solution ? `<p><strong>Solution:</strong> ${vuln.solution}</p>` : ''}
            </div>
        `).join('');
    } else {
        vulnerabilitiesHTML = '<p>No vulnerabilities were identified during the assessment.</p>';
    }
    
    let recommendationsHTML = '';
    if (reportData.recommendations.length > 0) {
        recommendationsHTML = reportData.recommendations.map(rec => `
            <div class="recommendation-item-report">
                <h3>${rec.title || 'Untitled Recommendation'} 
                    <span class="severity-badge severity-${rec.priority}">${getPriorityText(rec.priority)}</span>
                </h3>
                ${rec.description ? `<p><strong>Description:</strong> ${rec.description}</p>` : ''}
                ${rec.implementation ? `<p><strong>Implementation:</strong> ${rec.implementation}</p>` : ''}
            </div>
        `).join('');
    } else {
        recommendationsHTML = '<p>No specific recommendations are provided at this time.</p>';
    }
    
    return `
        <div class="report-content">
            <h1>${reportData.title}</h1>
            
            <div class="report-meta">
                <p><strong>Report Date:</strong> ${currentDate}</p>
                <p><strong>Number of Vulnerabilities:</strong> ${reportData.vulnerabilities.length}</p>
                <p><strong>Number of Recommendations:</strong> ${reportData.recommendations.length}</p>
            </div>
            
            <h2>Scope</h2>
            <p>${reportData.scope.replace(/\n/g, '<br>')}</p>
            
            <h2>Executive Summary</h2>
            <p>${reportData.executiveSummary.replace(/\n/g, '<br>')}</p>
            
            <h2>Identified Vulnerabilities</h2>
            <div class="vulnerability-list-report">
                ${vulnerabilitiesHTML}
            </div>
            
            <h2>Recommendations</h2>
            <div class="recommendation-list-report">
                ${recommendationsHTML}
            </div>
            
            ${reportData.conclusion ? `
                <h2>Conclusion</h2>
                <p>${reportData.conclusion.replace(/\n/g, '<br>')}</p>
            ` : ''}
        </div>
    `;
}

// PDF Management
function showPDFModal() {
    if (!validateReportData()) {
        return;
    }
    
    pdfModal.classList.add('active');
}

function hidePDFModal() {
    pdfModal.classList.remove('active');
}

function downloadPDF() {
    hidePDFModal();
    
    // Create a new window with the report content
    const reportHTML = createReportHTML();
    const printWindow = window.open('', '_blank');
    
    printWindow.document.write(`
        <!DOCTYPE html>
        <html>
        <head>
            <title>${reportData.title}</title>
            <style>
                body {
                    font-family: 'Times New Roman', serif;
                    line-height: 1.6;
                    color: #333;
                    max-width: 800px;
                    margin: 0 auto;
                    padding: 20px;
                }
                h1 {
                    color: #2563eb;
                    border-bottom: 2px solid #2563eb;
                    padding-bottom: 10px;
                }
                h2 {
                    color: #1e293b;
                    margin-top: 30px;
                    margin-bottom: 15px;
                }
                h3 {
                    color: #1e293b;
                    margin-top: 20px;
                    margin-bottom: 10px;
                }
                .report-meta {
                    background: #f8fafc;
                    padding: 15px;
                    border-radius: 8px;
                    margin-bottom: 30px;
                    border-left: 4px solid #2563eb;
                }
                .vulnerability-item-report,
                .recommendation-item-report {
                    background: #f8fafc;
                    border-left: 4px solid #2563eb;
                    padding: 15px;
                    margin-bottom: 15px;
                    border-radius: 4px;
                }
                .severity-badge {
                    padding: 4px 8px;
                    border-radius: 4px;
                    font-size: 12px;
                    font-weight: bold;
                    text-transform: uppercase;
                    margin-left: 10px;
                }
                .severity-critical { background: #dc2626; color: white; }
                .severity-high { background: #dc2626; color: white; }
                .severity-medium { background: #d97706; color: white; }
                .severity-low { background: #059669; color: white; }
                .severity-info { background: #64748b; color: white; }
                @media print {
                    body { margin: 0; }
                    .no-print { display: none; }
                }
            </style>
        </head>
        <body>
            ${reportHTML}
            <div class="no-print" style="text-align: center; margin-top: 30px;">
                <button onclick="window.print()" style="padding: 10px 20px; background: #2563eb; color: white; border: none; border-radius: 4px; cursor: pointer;">
                    Save as PDF
                </button>
                <button onclick="window.close()" style="padding: 10px 20px; background: #64748b; color: white; border: none; border-radius: 4px; cursor: pointer; margin-left: 10px;">
                    Close
                </button>
            </div>
        </body>
        </html>
    `);
    
    printWindow.document.close();
    
    // Auto-trigger print dialog after a short delay
    setTimeout(() => {
        printWindow.print();
    }, 500);
    
    showNotification('PDF download window opened!', 'success');
}

// Utility Functions
function getSeverityText(severity) {
    const severityMap = {
        'critical': 'Critical',
        'high': 'High',
        'medium': 'Medium',
        'low': 'Low',
        'info': 'Info'
    };
    return severityMap[severity] || 'Medium';
}

function getPriorityText(priority) {
    const priorityMap = {
        'critical': 'Critical',
        'high': 'High',
        'medium': 'Medium',
        'low': 'Low'
    };
    return priorityMap[priority] || 'Medium';
}

function showNotification(message, type = 'info') {
    // Create notification element
    const notification = document.createElement('div');
    notification.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 15px 20px;
        border-radius: 8px;
        color: white;
        font-weight: 600;
        z-index: 10000;
        max-width: 400px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        animation: slideIn 0.3s ease;
    `;
    
    // Set background color based on type
    const colors = {
        'success': '#059669',
        'error': '#dc2626',
        'warning': '#d97706',
        'info': '#2563eb'
    };
    
    notification.style.backgroundColor = colors[type] || colors.info;
    notification.textContent = message;
    
    // Add animation styles
    const style = document.createElement('style');
    style.textContent = `
        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        @keyframes slideOut {
            from { transform: translateX(0); opacity: 1; }
            to { transform: translateX(100%); opacity: 0; }
        }
    `;
    document.head.appendChild(style);
    
    document.body.appendChild(notification);
    
    // Remove notification after 3 seconds
    setTimeout(() => {
        notification.style.animation = 'slideOut 0.3s ease';
        setTimeout(() => {
            if (notification.parentNode) {
                notification.parentNode.removeChild(notification);
            }
        }, 300);
    }, 3000);
}

// Data Persistence
function saveData() {
    localStorage.setItem('pentesterReportData', JSON.stringify(reportData));
}

function loadSavedData() {
    const saved = localStorage.getItem('pentesterReportData');
    const savedTheme = localStorage.getItem('theme');
    
    if (saved) {
        try {
            reportData = JSON.parse(saved);
            
            // Populate form fields
            document.getElementById('title').value = reportData.title || '';
            document.getElementById('scope').value = reportData.scope || '';
            document.getElementById('executive-summary').value = reportData.executiveSummary || '';
            document.getElementById('conclusion').value = reportData.conclusion || '';
            
            // Render dynamic content
            renderVulnerabilities();
            renderRecommendations();
        } catch (e) {
            console.error('Error loading saved data:', e);
        }
    }
    
    if (savedTheme) {
        currentTheme = savedTheme;
    }
}

// Make functions globally available
window.updateVulnerability = updateVulnerability;
window.removeVulnerability = removeVulnerability;
window.updateRecommendation = updateRecommendation;
window.removeRecommendation = removeRecommendation;