{% extends "base.html" %}

{% block title %}Smart Contract Security Audit - Counterscarp Engine{% endblock %}

{% block content %}
<style>
    /* ============================================
       UPLOAD PAGE — ENHANCED LAYOUT
       ============================================ */

    .upload-hero {
        text-align: center;
        padding: 1rem 0 0.5rem;
    }
    .upload-hero h1 {
        font-size: 2.25rem;
        color: #fff;
        margin-bottom: 0.5rem;
    }
    .upload-hero .subtitle {
        color: #a0a0b0;
        font-size: 1.1rem;
        max-width: 560px;
        margin: 0 auto 1.5rem;
    }

    /* Features preview tags (enhanced) */
    .features-preview {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
        margin-bottom: 1.5rem;
    }
    .feature-tag {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        background: #0f1629;
        border: 1px solid #2a2a4e;
        border-radius: 6px;
        padding: 0.3rem 0.7rem;
        font-size: 0.8rem;
        color: #a0a0b0;
        transition: border-color 0.2s;
    }
    .feature-tag:hover {
        border-color: #667eea;
    }
    .feature-tag .pro-badge {
        margin-left: 2px;
    }

    /* Upload card — wider to breathe */
    .upload-card {
        max-width: 680px;
        margin: 0 auto 1.5rem;
        text-align: center;
    }
    .upload-card h1 { display: none; } /* hero replaces it */

    /* Privacy trust banner */
    .trust-banner {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.85rem 1.25rem;
        background: rgba(102, 126, 234, 0.06);
        border: 1px solid rgba(102, 126, 234, 0.18);
        border-radius: 10px;
        margin-bottom: 1.5rem;
        text-align: left;
    }
    .trust-banner .trust-icon {
        font-size: 1.3rem;
        flex-shrink: 0;
        line-height: 1;
    }
    .trust-banner .trust-text {
        color: #a0a0b0;
        font-size: 0.85rem;
        line-height: 1.5;
    }
    .trust-banner .trust-text strong {
        color: #c0c0c0;
    }
    .trust-banner .trust-text a {
        color: #667eea;
        text-decoration: none;
    }
    .trust-banner .trust-text a:hover {
        text-decoration: underline;
    }

    /* ============================================
       SECTION — WHAT YOU GET
       ============================================ */
    .section-heading {
        text-align: center;
        margin-bottom: 1.75rem;
    }
    .section-heading h2 {
        font-size: 1.6rem;
        color: #fff;
        margin-bottom: 0.35rem;
    }
    .section-heading p {
        color: #888;
        font-size: 0.95rem;
    }

    .what-you-get-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.25rem;
        max-width: 1000px;
        margin: 0 auto 2.5rem;
    }
    .wyg-card {
        background: #16213e;
        border: 1px solid #2a2a4e;
        border-radius: 14px;
        padding: 1.5rem;
        transition: border-color 0.3s, transform 0.2s;
        position: relative;
    }
    .wyg-card:hover {
        border-color: #667eea;
        transform: translateY(-3px);
    }
    .wyg-card .wyg-icon {
        font-size: 1.75rem;
        margin-bottom: 0.75rem;
        display: block;
    }
    .wyg-card h3 {
        font-size: 1.05rem;
        color: #fff;
        margin-bottom: 0.4rem;
    }
    .wyg-card p {
        color: #a0a0b0;
        font-size: 0.88rem;
        line-height: 1.55;
    }
    .wyg-card .wyg-pro-tag {
        position: absolute;
        top: 12px;
        right: 12px;
    }

    /* ============================================
       SECTION — SAMPLE OUTPUT PREVIEW
       ============================================ */
    .sample-section {
        max-width: 1000px;
        margin: 0 auto 2.5rem;
    }
    .sample-preview-card {
        background: #16213e;
        border: 1px solid #2a2a4e;
        border-radius: 14px;
        overflow: hidden;
    }
    .sample-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid #2a2a4e;
        background: #0f1629;
    }
    .sample-header-left {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .sample-header-left h3 {
        color: #fff;
        font-size: 1rem;
        margin: 0;
    }
    .sample-risk-pill {
        padding: 0.3rem 0.85rem;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        background: rgba(220, 53, 69, 0.15);
        color: #dc3545;
        border: 1px solid rgba(220, 53, 69, 0.3);
    }
    .sample-body {
        padding: 1.5rem;
    }

    /* Mock severity pills row */
    .mock-severity-row {
        display: flex;
        gap: 0.75rem;
        margin-bottom: 1.25rem;
        flex-wrap: wrap;
    }
    .mock-sev-pill {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.85rem;
        border-radius: 8px;
        border: 1px solid transparent;
    }
    .mock-sev-pill.critical {
        background: rgba(220, 53, 69, 0.12);
        border-color: rgba(220, 53, 69, 0.3);
    }
    .mock-sev-pill.high {
        background: rgba(255, 140, 0, 0.12);
        border-color: rgba(255, 140, 0, 0.3);
    }
    .mock-sev-pill.medium {
        background: rgba(255, 215, 0, 0.12);
        border-color: rgba(255, 215, 0, 0.3);
    }
    .mock-sev-pill.low {
        background: rgba(68, 136, 255, 0.12);
        border-color: rgba(68, 136, 255, 0.3);
    }
    .mock-sev-count {
        font-size: 1.35rem;
        font-weight: 700;
    }
    .mock-sev-pill.critical .mock-sev-count { color: #ff4444; }
    .mock-sev-pill.high .mock-sev-count { color: #ff8c00; }
    .mock-sev-pill.medium .mock-sev-count { color: #ffd700; }
    .mock-sev-pill.low .mock-sev-count { color: #4488ff; }
    .mock-sev-label {
        font-size: 0.75rem;
        text-transform: uppercase;
        color: #888;
        letter-spacing: 0.03em;
    }

    /* Mock finding cards */
    .mock-finding {
        background: #0f1629;
        border: 1px solid #2a2a4e;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 0.75rem;
        display: flex;
        align-items: flex-start;
        gap: 0.85rem;
    }
    .mock-finding:last-child { margin-bottom: 0; }
    .mock-severity-badge {
        padding: 0.2rem 0.6rem;
        border-radius: 4px;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        white-space: nowrap;
        flex-shrink: 0;
        margin-top: 2px;
    }
    .mock-severity-badge.critical { background: #ff4444; color: #fff; }
    .mock-severity-badge.high { background: #ff8c00; color: #fff; }
    .mock-severity-badge.medium { background: #ffd700; color: #1a1a2e; }
    .mock-severity-badge.low { background: #4488ff; color: #fff; }
    .mock-finding-body h4 {
        color: #e0e0e0;
        font-size: 0.92rem;
        margin-bottom: 0.25rem;
    }
    .mock-finding-body p {
        color: #888;
        font-size: 0.82rem;
        line-height: 1.45;
    }
    .mock-remediation {
        color: #28a745;
        font-size: 0.8rem;
        margin-top: 0.3rem;
    }

    .sample-footer {
        padding: 1rem 1.5rem;
        border-top: 1px solid #2a2a4e;
        text-align: center;
    }
    .sample-footer a {
        color: #667eea;
        text-decoration: none;
        font-weight: 500;
        font-size: 0.9rem;
        transition: color 0.2s;
    }
    .sample-footer a:hover {
        color: #8fa4f0;
        text-decoration: underline;
    }

    /* ============================================
       SECTION — PRO FEATURE CTAs
       ============================================ */
    .pro-cta-section {
        max-width: 1000px;
        margin: 0 auto 2.5rem;
    }
    .pro-cta-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.25rem;
    }
    .pro-cta-card {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        border: 1px solid rgba(233, 69, 96, 0.35);
        border-radius: 14px;
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        transition: border-color 0.3s, transform 0.2s;
    }
    .pro-cta-card:hover {
        border-color: #e94560;
        transform: translateY(-3px);
    }
    .pro-cta-top {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        margin-bottom: 0.6rem;
    }
    .pro-cta-icon {
        font-size: 1.5rem;
    }
    .pro-cta-top h3 {
        color: #e0e0e0;
        font-size: 1rem;
        margin: 0;
    }
    .pro-cta-desc {
        color: #a0a0b0;
        font-size: 0.88rem;
        line-height: 1.55;
        margin-bottom: 1rem;
        flex: 1;
    }
    .btn-unlock-pro {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        background: linear-gradient(135deg, #e94560, #c23152);
        color: white;
        padding: 0.6rem 1.25rem;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 600;
        font-size: 0.88rem;
        transition: transform 0.2s, opacity 0.2s;
        text-align: center;
    }
    .btn-unlock-pro:hover {
        transform: translateY(-2px);
        opacity: 0.92;
    }
    .compare-plans-link {
        display: block;
        text-align: center;
        margin-top: 1.25rem;
    }
    .compare-plans-link a {
        color: #667eea;
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 500;
    }
    .compare-plans-link a:hover {
        text-decoration: underline;
    }

    /* ============================================
       MOBILE RESPONSIVE
       ============================================ */
    @media (max-width: 768px) {
        .upload-hero h1 {
            font-size: 1.6rem;
        }
        .upload-hero .subtitle {
            font-size: 0.95rem;
        }
        .what-you-get-grid,
        .pro-cta-grid {
            grid-template-columns: 1fr;
        }
        .mock-severity-row {
            gap: 0.5rem;
        }
        .mock-sev-pill {
            flex: 1;
            min-width: 0;
            padding: 0.45rem 0.5rem;
            justify-content: center;
        }
        .mock-finding {
            flex-direction: column;
            gap: 0.5rem;
        }
        .trust-banner {
            flex-direction: column;
            text-align: center;
        }
        .upload-zone {
            padding: 1.5rem 1rem;
            min-height: 120px;
        }
        .features-preview {
            gap: 0.4rem;
        }
        .feature-tag {
            font-size: 0.75rem;
            padding: 0.25rem 0.55rem;
        }
    }

    @media (max-width: 480px) {
        .upload-hero h1 {
            font-size: 1.35rem;
        }
        .mock-sev-pill {
            flex-direction: column;
            align-items: center;
            padding: 0.35rem 0.3rem;
            gap: 0.15rem;
        }
    }
</style>

<div class="container">
    <!-- Hero -->
    <div class="upload-hero">
        <h1>Smart Contract Security Audit</h1>
        <p class="subtitle">Upload your Solidity or Rust smart contracts for automated security analysis</p>
        <div class="features-preview">
            <span class="feature-tag">Heuristic Scanner</span>
            <span class="feature-tag">Slither Analysis</span>
            <span class="feature-tag">AI Copilot <span class="pro-badge">PRO</span></span>
            <span class="feature-tag">Attack Graph <span class="pro-badge">PRO</span></span>
            <span class="feature-tag">HTML Reports <span class="pro-badge">DEV</span></span>
        </div>
    </div>

    <!-- Upload Form Card -->
    <div class="card upload-card">
        <form id="auditForm" action="/audit" method="post" enctype="multipart/form-data">
            <div class="form-group">
                <label for="project_name">Project Name</label>
                <input type="text" id="project_name" name="project_name" required
                       placeholder="Enter your project name">
            </div>

            <div class="form-group">
                <label>Upload Files</label>
                <div class="upload-zone" id="uploadZone">
                    <div class="upload-icon">&#128194;</div>
                    <p class="upload-text">Drag and drop your files here</p>
                    <p class="upload-hint">or click to browse</p>
                    <p class="upload-formats">Supports: .sol, .rs files</p>
                    <input type="file" id="files" name="files" multiple accept=".sol,.rs">
                </div>
            </div>

            <div class="file-list" id="fileList"></div>

            <!-- Privacy / Data Handling Trust Banner -->
            <div class="trust-banner">
                <span class="trust-icon">&#128274;</span>
                <span class="trust-text">
                    <strong>Your code is analyzed on our secure server and never stored or shared beyond your scan session.</strong>
                    <a href="/privacy">See our Privacy Policy</a>
                </span>
            </div>

            <button type="submit" class="btn-primary" id="submitBtn" disabled>
                Run Audit
            </button>
        </form>
    </div>

    <!-- ==========================================
         SECTION: What You Get
         ========================================== -->
    <div class="section-heading">
        <h2>What You Get</h2>
        <p>Every scan produces a comprehensive security report</p>
    </div>

    <div class="what-you-get-grid">
        <div class="wyg-card">
            <span class="wyg-icon">&#128220;</span>
            <h3>Vulnerability Report</h3>
            <p>Severity-ranked findings with detailed descriptions, code locations, and impact analysis for every detected issue.</p>
        </div>
        <div class="wyg-card">
            <span class="wyg-icon">&#127919;</span>
            <h3>Risk Score</h3>
            <p>Overall contract risk assessment rated Critical, High, Medium, or Low — giving you an instant summary of your security posture.</p>
        </div>
        <div class="wyg-card">
            <span class="wyg-icon">&#9881;</span>
            <h3>Multi-Engine Analysis</h3>
            <p>Results from 6+ security engines including Heuristic Scanner, Slither, Aderyn, Mythril, Medusa, and Foundry — cross-verified for accuracy.</p>
        </div>
        <div class="wyg-card">
            <span class="wyg-icon">&#128736;</span>
            <h3>Actionable Remediation</h3>
            <p>Specific fix suggestions for each finding, including code examples and best-practice references so you can patch issues fast.</p>
        </div>
        <div class="wyg-card">
            <span class="wyg-icon">&#128196;</span>
            <h3>Export — Markdown &amp; JSON</h3>
            <p>Download reports in Markdown and JSON formats — free for every user. Easy to integrate into CI pipelines and documentation.</p>
        </div>
        <div class="wyg-card">
            <span class="wyg-icon">&#127775;</span>
            <h3>Export — HTML &amp; SARIF</h3>
            <p>Professional branded HTML reports and SARIF output for GitHub Advanced Security integration.</p>
            <span class="pro-badge wyg-pro-tag">DEV</span>
        </div>
    </div>

    <!-- ==========================================
         SECTION: Sample Output Preview
         ========================================== -->
    <div class="section-heading">
        <h2>See Sample Results</h2>
        <p>Here's a preview of what your scan report looks like</p>
    </div>

    <div class="sample-section">
        <div class="sample-preview-card">
            <!-- Mock header bar -->
            <div class="sample-header">
                <div class="sample-header-left">
                    <h3>VulnerableVault.sol</h3>
                    <span class="sample-risk-pill">High Risk</span>
                </div>
            </div>

            <div class="sample-body">
                <!-- Mock severity pills -->
                <div class="mock-severity-row">
                    <div class="mock-sev-pill critical">
                        <span class="mock-sev-count">3</span>
                        <span class="mock-sev-label">Critical</span>
                    </div>
                    <div class="mock-sev-pill high">
                        <span class="mock-sev-count">5</span>
                        <span class="mock-sev-label">High</span>
                    </div>
                    <div class="mock-sev-pill medium">
                        <span class="mock-sev-count">12</span>
                        <span class="mock-sev-label">Medium</span>
                    </div>
                    <div class="mock-sev-pill low">
                        <span class="mock-sev-count">8</span>
                        <span class="mock-sev-label">Low</span>
                    </div>
                </div>

                <!-- Mock finding cards -->
                <div class="mock-finding">
                    <span class="mock-severity-badge critical">Critical</span>
                    <div class="mock-finding-body">
                        <h4>Reentrancy in withdraw()</h4>
                        <p>External call to msg.sender before balance update allows recursive invocation to drain funds.</p>
                        <div class="mock-remediation">&#10003; Apply checks-effects-interactions pattern</div>
                    </div>
                </div>
                <div class="mock-finding">
                    <span class="mock-severity-badge high">High</span>
                    <div class="mock-finding-body">
                        <h4>Unprotected setOwner()</h4>
                        <p>Missing access control allows any caller to change contract ownership.</p>
                        <div class="mock-remediation">&#10003; Add onlyOwner modifier to setOwner</div>
                    </div>
                </div>
                <div class="mock-finding">
                    <span class="mock-severity-badge medium">Medium</span>
                    <div class="mock-finding-body">
                        <h4>Unchecked external call return value</h4>
                        <p>Transfer return value is not checked; silent failures may leave funds locked.</p>
                        <div class="mock-remediation">&#10003; Use require() to validate transfer success</div>
                    </div>
                </div>
            </div>

            <div class="sample-footer">
                <a href="/">View Full Sample Report &rarr;</a>
            </div>
        </div>
    </div>

    <!-- ==========================================
         SECTION: Pro Feature Upgrade CTAs
         ========================================== -->
    <div class="section-heading">
        <h2>Unlock the Full Power</h2>
        <p>Upgrade to Pro for advanced analysis capabilities</p>
    </div>

    <div class="pro-cta-section">
        <div class="pro-cta-grid">
            <div class="pro-cta-card">
                <div class="pro-cta-top">
                    <span class="pro-cta-icon">&#129302;</span>
                    <h3>AI Audit Copilot</h3>
                    <span class="pro-badge">PRO</span>
                </div>
                <p class="pro-cta-desc">
                    Get AI-powered vulnerability explanations, impact assessments, and remediation
                    strategies generated by an LLM trained on smart contract security patterns.
                </p>
                <a href="/pricing" class="btn-unlock-pro">Unlock with Pro &mdash; $149/mo</a>
            </div>

            <div class="pro-cta-card">
                <div class="pro-cta-top">
                    <span class="pro-cta-icon">&#128202;</span>
                    <h3>Attack Graph Visualization</h3>
                    <span class="pro-badge">PRO</span>
                </div>
                <p class="pro-cta-desc">
                    Interactive D3.js attack-path diagrams showing how vulnerabilities chain together
                    — so you can prioritize fixes that break exploit paths.
                </p>
                <a href="/pricing" class="btn-unlock-pro">Unlock with Pro &mdash; $149/mo</a>
            </div>

            <div class="pro-cta-card">
                <div class="pro-cta-top">
                    <span class="pro-cta-icon">&#127775;</span>
                    <h3>HTML &amp; SARIF Reports</h3>
                    <span class="pro-badge">DEV</span>
                </div>
                <p class="pro-cta-desc">
                    Branded HTML reports for stakeholders and SARIF output that integrates directly
                    with GitHub Advanced Security code scanning alerts.
                </p>
                <a href="/pricing" class="btn-unlock-pro">Unlock with Developer &mdash; $49/mo</a>
            </div>
        </div>

        <div class="compare-plans-link">
            <a href="/pricing">Compare all plans &rarr;</a>
        </div>
    </div>
</div>

<script>
    const uploadZone = document.getElementById('uploadZone');
    const fileInput = document.getElementById('files');
    const fileList = document.getElementById('fileList');
    const submitBtn = document.getElementById('submitBtn');
    const auditForm = document.getElementById('auditForm');

    let selectedFiles = [];

    // Drag and drop handlers
    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 = Array.from(e.dataTransfer.files).filter(file => {
            const ext = file.name.split('.').pop().toLowerCase();
            return ext === 'sol' || ext === 'rs';
        });

        if (files.length > 0) {
            addFiles(files);
        }
    });

    // Click to browse — avoid double-trigger when clicking the file input itself
    uploadZone.addEventListener('click', (e) => {
        if (e.target !== fileInput) {
            fileInput.click();
        }
    });

    fileInput.addEventListener('change', () => {
        addFiles(Array.from(fileInput.files));
    });

    function addFiles(files) {
        selectedFiles = [...selectedFiles, ...files];
        updateFileList();
    }

    function removeFile(index) {
        selectedFiles.splice(index, 1);
        updateFileList();
    }

    function updateFileList() {
        fileList.innerHTML = '';

        if (selectedFiles.length === 0) {
            submitBtn.disabled = true;
            return;
        }

        selectedFiles.forEach((file, index) => {
            const fileItem = document.createElement('div');
            fileItem.className = 'file-item';
            fileItem.innerHTML = `
                <span class="file-name">${file.name}</span>
                <span class="file-size">${formatFileSize(file.size)}</span>
                <button type="button" class="file-remove" onclick="removeFile(${index})">&times;</button>
            `;
            fileList.appendChild(fileItem);
        });

        // Update file input with current files
        const dataTransfer = new DataTransfer();
        selectedFiles.forEach(file => dataTransfer.items.add(file));
        fileInput.files = dataTransfer.files;

        submitBtn.disabled = false;
    }

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

    // Form submission — use FormData + fetch for reliable file upload
    auditForm.addEventListener('submit', (e) => {
        e.preventDefault();

        if (selectedFiles.length === 0) {
            alert('Please select at least one file.');
            return;
        }

        const projectName = document.getElementById('project_name').value.trim();
        if (!projectName) {
            alert('Please enter a project name.');
            return;
        }

        submitBtn.disabled = true;
        submitBtn.textContent = 'Running Audit...';

        const formData = new FormData();
        formData.append('project_name', projectName);
        selectedFiles.forEach(file => formData.append('files', file));

        fetch('/audit', {
            method: 'POST',
            body: formData,
            redirect: 'follow',
        })
        .then(response => {
            if (response.redirected) {
                window.location.href = response.url;
            } else if (response.ok) {
                return response.text().then(html => {
                    document.body.innerHTML = html;
                });
            } else {
                throw new Error('Audit failed: ' + response.statusText);
            }
        })
        .catch(err => {
            alert('Error: ' + err.message);
            submitBtn.disabled = false;
            submitBtn.textContent = 'Run Audit';
        });
    });
</script>
{% endblock %}