{% extends "base.html" %}

{% block title %}Red Hat CVE Checker - Analyze Scanner Reports{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card mb-4">
            <div class="card-header">
                <i class="bi bi-file-earmark-text me-2"></i>
                Upload Scanner Report
            </div>
            <div class="card-body">
                <form id="uploadForm" enctype="multipart/form-data">
                    <div class="upload-zone" id="uploadZone">
                        <i class="bi bi-cloud-upload"></i>
                        <h5 class="mt-3">Drop your scanner CSV/JSON file here</h5>
                        <p class="text-muted">or click to browse</p>
                        <input type="file" id="fileInput" name="file" accept=".csv,.json" hidden>
                        <div id="selectedFile" class="mt-3 d-none">
                            <span class="badge bg-secondary fs-6">
                                <i class="bi bi-file-earmark me-1"></i>
                                <span id="fileName"></span>
                            </span>
                        </div>
                    </div>
                    
                    <div class="row mt-4">
                        <div class="col-md-6">
                            <label for="parserFormat" class="form-label">Scanner Format</label>
                            <select class="form-select" id="parserFormat" name="parser_format">
                                <option value="auto" selected>Auto-detect</option>
                                {% for parser in parsers %}
                                <option value="{{ parser.name }}">{{ parser.description }}</option>
                                {% endfor %}
                            </select>
                            <div class="form-text">Select your scanner type or let us auto-detect it.</div>
                        </div>
                        <div class="col-md-6 d-flex align-items-end">
                            <button type="submit" class="btn btn-rh btn-lg w-100" id="analyzeBtn" disabled>
                                <i class="bi bi-search me-2"></i>Analyze Report
                            </button>
                        </div>
                    </div>
                    
                    <div class="row mt-3">
                        <div class="col-12">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="checkLifecycle" name="check_lifecycle">
                                <label class="form-check-label" for="checkLifecycle">
                                    <i class="bi bi-calendar-check me-1"></i>Check product lifecycle status
                                </label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="useAiDetection" name="use_ai_detection" disabled>
                                <label class="form-check-label text-muted" for="useAiDetection">
                                    <i class="bi bi-robot me-1"></i>Use AI detection (requires Ollama or API key)
                                </label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="checkOcpVersions" name="check_ocp_versions">
                                <label class="form-check-label" for="checkOcpVersions">
                                    <i class="bi bi-box-seam me-1"></i>Analyze OCP release versions
                                </label>
                            </div>
                        </div>
                        <div class="col-12 mt-2" id="ocpVersionRow" style="display: none;">
                            <label for="ocpVersionInput" class="form-label small text-muted">
                                <i class="bi bi-tag me-1"></i>OCP Version (optional - faster than image inspection)
                            </label>
                            <input type="text" class="form-control form-control-sm" id="ocpVersionInput" 
                                   placeholder="e.g., 4.16.46" style="max-width: 200px;">
                            <small class="text-muted">If provided, skips slow image inspection</small>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <i class="bi bi-info-circle me-2"></i>
                About This Tool
            </div>
            <div class="card-body">
                <p>
                    The Red Hat CVE Checker validates vulnerability scanner reports against 
                    <strong>Red Hat VEX (Vulnerability Exploitability eXchange)</strong> data to help you:
                </p>
                <ul>
                    <li><strong>Identify False Positives:</strong> Find CVEs that don't actually affect your Red Hat software</li>
                    <li><strong>Verify Severity Ratings:</strong> Compare scanner severity against Red Hat's assessment</li>
                    <li><strong>Check CVSS Scores:</strong> Highlight significant CVSS score discrepancies</li>
                    <li><strong>Detect Non-RH Software:</strong> Flag findings that may be from third-party sources</li>
                </ul>
                
                <h6 class="mt-4">Supported Scanners</h6>
                <div class="row">
                    {% for parser in parsers %}
                    <div class="col-md-4 col-6 mb-2">
                        <span class="badge bg-light text-dark">
                            <i class="bi bi-check-circle text-success me-1"></i>
                            {{ parser.description }}
                        </span>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Loading overlay -->
<div class="loading-overlay d-none" id="loadingOverlay">
    <div class="text-center">
        <div class="spinner-border text-danger" style="width: 3rem; height: 3rem;" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <h5 class="mt-3" id="loadingTitle">Analyzing your report...</h5>
        <p class="text-muted" id="loadingMessage">Parsing scanner file...</p>
        <div class="progress mt-3" style="width: 300px; margin: 0 auto; height: 8px;">
            <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" 
                 role="progressbar" id="loadingProgress" style="width: 10%"></div>
        </div>
        <small class="text-muted mt-2 d-block" id="loadingDetail"></small>
    </div>
</div>

<!-- Error toast -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div id="errorToast" class="toast" role="alert">
        <div class="toast-header bg-danger text-white">
            <i class="bi bi-exclamation-triangle me-2"></i>
            <strong class="me-auto">Error</strong>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body" id="errorMessage"></div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const uploadZone = document.getElementById('uploadZone');
    const fileInput = document.getElementById('fileInput');
    const analyzeBtn = document.getElementById('analyzeBtn');
    const uploadForm = document.getElementById('uploadForm');
    const loadingOverlay = document.getElementById('loadingOverlay');
    const ocpCheckbox = document.getElementById('checkOcpVersions');
    const ocpLabel = ocpCheckbox.nextElementSibling;
    
    // Check OCP analysis capability
    const ocpVersionRow = document.getElementById('ocpVersionRow');
    
    fetch('/api/ocp-status')
        .then(response => response.json())
        .then(status => {
            if (!status.can_analyze) {
                // If no pull secret, still allow checkbox but show version input is required
                ocpLabel.innerHTML = '<i class="bi bi-box-seam me-1"></i>Analyze OCP release versions <small class="text-warning">(provide version below)</small>';
            }
        })
        .catch(() => {
            // Silently fail - feature just won't be available
        });
    
    // Show/hide OCP version input when checkbox is toggled
    ocpCheckbox.addEventListener('change', function() {
        ocpVersionRow.style.display = this.checked ? 'block' : 'none';
    });
    const selectedFile = document.getElementById('selectedFile');
    const fileName = document.getElementById('fileName');
    const errorToast = new bootstrap.Toast(document.getElementById('errorToast'));
    
    // Click to upload
    uploadZone.addEventListener('click', () => fileInput.click());
    
    // Drag and drop
    uploadZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        uploadZone.classList.add('dragover');
    });
    
    uploadZone.addEventListener('dragleave', () => {
        uploadZone.classList.remove('dragover');
    });
    
    uploadZone.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadZone.classList.remove('dragover');
        
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            fileInput.files = files;
            handleFileSelect(files[0]);
        }
    });
    
    // File input change
    fileInput.addEventListener('change', () => {
        if (fileInput.files.length > 0) {
            handleFileSelect(fileInput.files[0]);
        }
    });
    
    function handleFileSelect(file) {
        fileName.textContent = file.name;
        selectedFile.classList.remove('d-none');
        analyzeBtn.disabled = false;
    }
    
    // Enable AI detection only when lifecycle check is enabled
    const checkLifecycle = document.getElementById('checkLifecycle');
    const useAiDetection = document.getElementById('useAiDetection');
    
    checkLifecycle.addEventListener('change', () => {
        useAiDetection.disabled = !checkLifecycle.checked;
        if (!checkLifecycle.checked) {
            useAiDetection.checked = false;
        }
    });
    
    // Progress animation helper
    function updateProgress(percent, message, detail) {
        document.getElementById('loadingProgress').style.width = percent + '%';
        if (message) document.getElementById('loadingMessage').textContent = message;
        if (detail) document.getElementById('loadingDetail').textContent = detail;
    }
    
    // Form submit
    uploadForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        
        if (!fileInput.files.length) return;
        
        loadingOverlay.classList.remove('d-none');
        analyzeBtn.disabled = true;
        
        // Reset progress
        updateProgress(10, 'Parsing scanner file...', '');
        
        // Check options before building form data
        const checkingOcp = document.getElementById('checkOcpVersions').checked;
        
        const formData = new FormData();
        formData.append('file', fileInput.files[0]);
        formData.append('parser_format', document.getElementById('parserFormat').value);
        formData.append('check_lifecycle', document.getElementById('checkLifecycle').checked);
        formData.append('use_ai_detection', document.getElementById('useAiDetection').checked);
        formData.append('check_ocp_versions', checkingOcp);
        formData.append('ocp_version', document.getElementById('ocpVersionInput').value.trim());
        
        // Simulate progress during analysis
        const ocpVersionProvided = document.getElementById('ocpVersionInput').value.trim();
        const progressSpeed = (checkingOcp && !ocpVersionProvided) ? 1000 : 500;
        const progressMax = 85;
        const progressIncrement = (checkingOcp && !ocpVersionProvided) ? 2 : 5;
        
        let progressInterval = setInterval(() => {
            const currentWidth = parseInt(document.getElementById('loadingProgress').style.width);
            if (currentWidth < progressMax) {
                const newWidth = currentWidth + Math.random() * progressIncrement;
                updateProgress(Math.min(newWidth, progressMax), null, null);
            }
        }, progressSpeed);
        
        // Update messages during wait - adapt based on options selected
        
        setTimeout(() => updateProgress(20, 'Fetching Red Hat VEX data...', 'Using concurrent requests for speed'), 1000);
        setTimeout(() => updateProgress(40, 'Comparing findings...', 'Checking severity ratings and CVSS scores'), 3000);
        
        if (checkingOcp) {
            const ocpVersionProvided = document.getElementById('ocpVersionInput').value.trim();
            if (ocpVersionProvided) {
                // Fast path - version provided, no inspection needed
                setTimeout(() => updateProgress(60, 'Checking OCP version status...', 'Using provided version ' + ocpVersionProvided), 3000);
                setTimeout(() => updateProgress(75, 'Calculating validation score...', 'Almost done...'), 5000);
            } else {
                // Auto-detect path - inspect one image to detect version
                setTimeout(() => updateProgress(50, 'Detecting OCP version...', 'Checking cache for known digests'), 3000);
                setTimeout(() => updateProgress(55, 'Detecting OCP version...', 'Inspecting one image to auto-detect version'), 8000);
                setTimeout(() => updateProgress(65, 'Detecting OCP version...', 'This may take up to 2 minutes for first scan'), 15000);
                setTimeout(() => updateProgress(75, 'Applying OCP version info...', 'Version detected, enriching findings'), 30000);
            }
        } else {
            setTimeout(() => updateProgress(70, 'Calculating validation score...', 'Almost done...'), 5000);
        }
        
        try {
            const response = await fetch('/api/analyze', {
                method: 'POST',
                body: formData
            });
            
            clearInterval(progressInterval);
            
            if (!response.ok) {
                const error = await response.json();
                throw new Error(error.detail || 'Analysis failed');
            }
            
            updateProgress(95, 'Preparing report...', '');
            const result = await response.json();
            
            updateProgress(100, 'Complete!', `Analyzed ${result.summary.total_findings} findings`);
            
            // Brief pause to show completion
            setTimeout(() => {
                window.location.href = `/report/${result.report_id}`;
            }, 300);
            
        } catch (error) {
            clearInterval(progressInterval);
            loadingOverlay.classList.add('d-none');
            analyzeBtn.disabled = false;
            document.getElementById('errorMessage').textContent = error.message;
            errorToast.show();
        }
    });
});
</script>
{% endblock %}