{% extends "base.html" %}

{% block title %}Audit Results - Counterscarp Engine{% endblock %}

{% block content %}
<div class="container">

    <!-- A. Project Header Bar -->
    <div class="project-header">
        <div class="project-header-left">
            <h1>{{ scan_meta.project_name | default('Audit Results') }}</h1>
            {% if scan_meta.timestamp %}
            <span class="project-timestamp">{{ scan_meta.timestamp[:19] | replace('T', '  ') }} UTC</span>
            {% endif %}
        </div>
        <div class="project-header-right">
            <span class="verdict-badge verdict-{{ pass_fail.lower() }}">
                {% if pass_fail == 'PASS' %}&#10003; PASS
                {% elif pass_fail == 'WARNING' %}&#9888; WARNING
                {% else %}&#10007; FAIL{% endif %}
            </span>
        </div>
    </div>

    <!-- B. Scan Coverage Section -->
    <div class="scan-coverage card">
        <div class="scan-coverage-header">
            <h2>Scan Coverage</h2>
        </div>
        <div class="stats-bar">
            <div class="stat-item">
                <span class="stat-value">{{ scan_meta.files_scanned | default('?') }}</span>
                <span class="stat-label">Files Analyzed</span>
            </div>
            <div class="stat-divider"></div>
            <div class="stat-item">
                <span class="stat-value">{{ scan_meta.total_source_lines | default('?') }}</span>
                <span class="stat-label">Source Lines</span>
            </div>
            <div class="stat-divider"></div>
            <div class="stat-item">
                <span class="stat-value">
                    {% if scan_meta.analyzers %}
                        {{ scan_meta.analyzers[0].patterns_checked | default('?') }}
                    {% else %}?{% endif %}
                </span>
                <span class="stat-label">Patterns</span>
            </div>
            <div class="stat-divider"></div>
            <div class="stat-item">
                <span class="stat-value">{{ total_findings }}</span>
                <span class="stat-label">Findings</span>
            </div>
        </div>

        <div class="analyzers-list">
            {% for analyzer in (scan_meta.analyzers or []) %}
            <div class="analyzer-item" data-status="{{ analyzer.status }}">
                <div class="analyzer-row" onclick="toggleAnalyzer(this)">
                    <span class="analyzer-status">
                        {% if analyzer.status == 'completed' %}&#10003;
                        {% elif analyzer.status == 'not_installed' %}&#9888;
                        {% elif analyzer.status == 'skipped' %}&#9711;
                        {% elif analyzer.status == 'timeout' %}&#9202;
                        {% else %}&#9711;{% endif %}
                    </span>
                    <span class="analyzer-name">{{ analyzer.name }}</span>
                    {% if analyzer.patterns_checked is defined %}
                    <span class="analyzer-patterns">{{ analyzer.patterns_checked }} patterns</span>
                    {% elif analyzer.status == 'not_installed' %}
                    <span class="analyzer-patterns not-installed">Not installed</span>
                    {% elif analyzer.status == 'timeout' %}
                    <span class="analyzer-patterns not-installed">Timed out</span>
                    {% elif analyzer.status == 'error' %}
                    <span class="analyzer-patterns not-installed">Error</span>
                    {% elif analyzer.status == 'completed' %}
                    <span class="analyzer-patterns">Generated</span>
                    {% elif analyzer.status == 'not_configured' %}
                    <span class="analyzer-patterns not-configured">Not configured</span>
                    {% else %}
                    <span class="analyzer-patterns">Skipped</span>
                    {% endif %}
                    <span class="analyzer-findings">{{ analyzer.findings_count }} found</span>
                    {% if analyzer.categories is defined %}
                    <span class="analyzer-toggle">&#9662;</span>
                    {% endif %}
                </div>
                {% if analyzer.categories is defined %}
                <div class="category-list" style="display:none;">
                    {% for cat_name, cat_data in analyzer.categories.items() %}
                    <div class="category-row">
                        <span class="category-connector">&#9507;</span>
                        <span class="category-name">{{ cat_name }}</span>
                        <span class="category-patterns">({{ cat_data.patterns }} patterns)</span>
                        <span class="category-findings {% if cat_data.findings > 0 %}has-findings{% endif %}">
                            {{ cat_data.findings }} found
                        </span>
                    </div>
                    {% endfor %}
                </div>
                {% endif %}
            </div>
            {% endfor %}
            {% if scan_meta.analyzers %}
            {% for a in scan_meta.analyzers %}
                {% if a.name == 'Slither Static Analysis' and a.status == 'not_installed' %}
            <div class="analyzer-note">
                Install Slither on the server for enhanced
                static analysis results
                (<a href="https://github.com/crytic/slither#installation" target="_blank">installation guide</a>)
            </div>
                {% endif %}
            {% endfor %}
            {% endif %}
        </div>
    </div>

    <!-- C. Risk Score & Severity Summary -->
    <div class="risk-severity-row">
        <div class="risk-score-card card">
            <div class="risk-score-label">Risk Score</div>
            <div class="risk-score-value risk-{{ 'critical' if risk_score >= 60 else 'high' if risk_score >= 30 else 'medium' if risk_score >= 10 else 'low' }}">
                {{ risk_score }}<span class="risk-score-max">/100</span>
            </div>
        </div>
        <div class="severity-summary">
            <div class="severity-pill critical" data-severity="CRITICAL">
                <span class="pill-count">{{ severity_counts.CRITICAL }}</span>
                <span class="pill-label">Critical</span>
            </div>
            <div class="severity-pill high" data-severity="HIGH">
                <span class="pill-count">{{ severity_counts.HIGH }}</span>
                <span class="pill-label">High</span>
            </div>
            <div class="severity-pill medium" data-severity="MEDIUM">
                <span class="pill-count">{{ severity_counts.MEDIUM }}</span>
                <span class="pill-label">Medium</span>
            </div>
            <div class="severity-pill low" data-severity="LOW">
                <span class="pill-count">{{ severity_counts.LOW }}</span>
                <span class="pill-label">Low</span>
            </div>
            <div class="severity-pill info" data-severity="INFO">
                <span class="pill-count">{{ severity_counts.INFO }}</span>
                <span class="pill-label">Info</span>
            </div>
        </div>
    </div>

    <!-- D. Download Reports -->
    <div class="download-section card">
        <h3>Download Reports</h3>
        <div class="download-buttons">
            {% if license_tier == 'pro' or license_tier == 'enterprise' %}
            <a href="/results/{{ audit_id }}/report/html" class="btn-download">
                <span class="icon">&#128196;</span> HTML Report
            </a>
            {% else %}
            <a href="/pricing" class="btn-download btn-pro-locked">
                <span class="icon">&#128196;</span> HTML Report <span class="pro-badge">DEV</span>
            </a>
            {% endif %}
            {% if license_tier == 'pro' or license_tier == 'enterprise' %}
            {% if pdf_report_exists %}
            <a href="/results/{{ audit_id }}/report/pdf" class="btn-download">
                <span class="icon">&#128209;</span> PDF Report
            </a>
            {% else %}
            <a href="/results/{{ audit_id }}/report/pdf" class="btn-download btn-pro-locked" title="Install xhtml2pdf to enable PDF export">
                <span class="icon">&#128209;</span> PDF Report <span class="pro-badge" style="background:#888;">N/A</span>
            </a>
            {% endif %}
            {% else %}
            <a href="/pricing" class="btn-download btn-pro-locked">
                <span class="icon">&#128209;</span> PDF Report <span class="pro-badge">DEV</span>
            </a>
            {% endif %}
            <a href="/results/{{ audit_id }}/report/md" class="btn-download">
                <span class="icon">&#128220;</span> Markdown
            </a>
            {% if license_tier == 'pro' or license_tier == 'enterprise' %}
            <a href="/results/{{ audit_id }}/report/sarif" class="btn-download">
                <span class="icon">&#128190;</span> SARIF
            </a>
            {% else %}
            <a href="/pricing" class="btn-download btn-pro-locked">
                <span class="icon">&#128190;</span> SARIF <span class="pro-badge">DEV</span>
            </a>
            {% endif %}
            <a href="/results/{{ audit_id }}/report/json" class="btn-download">
                <span class="icon">&#128203;</span> JSON
            </a>
            {% if license_tier == 'pro' or license_tier == 'enterprise' %}
            {% if attack_graph_exists %}
            <a href="/results/{{ audit_id }}/attack-graph" class="btn-download btn-attack-graph" target="_blank">
                <span class="icon">&#128200;</span> Attack Graph
            </a>
            {% endif %}
            {% endif %}
        </div>
    </div>

    <!-- E. Findings Section with Filter Tabs -->
    <div class="findings-section card">
        <div class="findings-header-row">
            <h3>Findings ({{ total_findings }})</h3>
            <div class="filter-tabs">
                <button class="filter-tab active" data-filter="ALL" onclick="filterFindings('ALL', this)">All</button>
                <button class="filter-tab" data-filter="CRITICAL" onclick="filterFindings('CRITICAL', this)">Critical</button>
                <button class="filter-tab" data-filter="HIGH" onclick="filterFindings('HIGH', this)">High</button>
                <button class="filter-tab" data-filter="MEDIUM" onclick="filterFindings('MEDIUM', this)">Medium</button>
                <button class="filter-tab" data-filter="LOW" onclick="filterFindings('LOW', this)">Low</button>
                <button class="filter-tab" data-filter="INFO" onclick="filterFindings('INFO', this)">Info</button>
            </div>
        </div>
        {% if findings %}
            <div class="findings-list">
                {% for finding in findings %}
                <div class="finding-card" data-severity="{{ finding.severity }}">
                    <div class="finding-header" onclick="toggleFinding(this)">
                        <div class="finding-title-section">
                            <span class="severity-badge severity-{{ finding.severity.lower() }}">
                                {{ finding.severity }}
                            </span>
                            <span class="finding-title">{{ finding.title }}</span>
                        </div>
                        <div class="finding-meta">
                            <span class="finding-location">{{ finding.file.split('/')[-1] }}:{{ finding.line_no }}</span>
                            <span class="finding-toggle">&#9662;</span>
                        </div>
                    </div>
                    <div class="finding-content">
                        <div class="finding-description">
                            <p>{{ finding.description }}</p>
                        </div>
                        {% if finding.code_snippet %}
                        <div class="code-block">
                            <pre><code>{{ finding.code_snippet }}</code></pre>
                        </div>
                        {% endif %}
                        {% if finding.remediation %}
                        <div class="remediation-box">
                            <h4>Remediation</h4>
                            <p>{{ finding.remediation }}</p>
                        </div>
                        {% endif %}
                        <div class="finding-details">
                            <span class="detail-item"><strong>Rule:</strong> {{ finding.rule_id }}</span>
                            <span class="detail-item"><strong>Category:</strong> {{ finding.category }}</span>
                            {% if finding.cwe %}
                            <span class="detail-item"><strong>CWE:</strong> {{ finding.cwe }}</span>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="no-findings">
                <div class="no-findings-icon">&#10003;</div>
                <p>No findings detected. This does not guarantee complete security.</p>
            </div>
        {% endif %}
    </div>

    <!-- F. AI Insights Section -->
    {% if license_tier == 'pro' or license_tier == 'enterprise' %}
    {% if ai_summary %}
    <div class="ai-insights card">
        <h2>AI Audit Copilot Insights</h2>
        <div class="ai-summary-card">
            <p>{{ ai_summary }}</p>
        </div>
    </div>
    {% endif %}
    {% else %}
    <!-- AI Copilot Pro Upgrade Card -->
    <div class="pro-upgrade-card">
        <div class="pro-upgrade-header">
            <div class="pro-upgrade-icon-wrap">
                <span class="pro-upgrade-icon">&#129302;</span>
            </div>
            <div class="pro-upgrade-title-wrap">
                <h3>Unlock AI Copilot</h3>
                <span class="pro-badge">PRO</span>
            </div>
        </div>
        <p class="pro-upgrade-desc">
            Get AI-powered vulnerability analysis with contextual remediation advice.
            The AI Copilot understands your contract's logic and provides targeted fix
            suggestions for every finding.
        </p>
        {% if total_findings and total_findings > 0 %}
        <div class="pro-teaser">
            <span class="pro-teaser-icon">&#128161;</span>
            Your scan found <strong>{{ total_findings }}</strong> vulnerabilit{{ 'y' if total_findings == 1 else 'ies' }}.
            With Pro, the AI Copilot would provide detailed remediation guidance for each finding.
        </div>
        {% endif %}
        <a href="/pricing" class="pro-upgrade-btn">
            Upgrade to Pro &mdash; $149/mo
        </a>
    </div>
    {% endif %}

    <!-- G. Attack Graph Section -->
    {% if license_tier == 'pro' or license_tier == 'enterprise' %}
    {% if attack_graph_exists %}
    <div class="attack-graph-section card">
        <h2>Attack Graph Visualization</h2>
        <a href="/results/{{ audit_id }}/attack-graph" class="btn-download btn-attack-graph" target="_blank">
            <span class="icon">&#128200;</span> View Attack Graph
        </a>
    </div>
    {% endif %}
    {% else %}
    <!-- Attack Graph Pro Upgrade Card -->
    <div class="pro-upgrade-card">
        <div class="pro-upgrade-header">
            <div class="pro-upgrade-icon-wrap">
                <span class="pro-upgrade-icon">&#128202;</span>
            </div>
            <div class="pro-upgrade-title-wrap">
                <h3>Unlock Attack Graph</h3>
                <span class="pro-badge">PRO</span>
            </div>
        </div>
        <p class="pro-upgrade-desc">
            Visualize attack paths and exploit chains in your contract.
            Interactive D3.js graphs reveal how vulnerabilities connect and compound,
            so you can prioritize the fixes that matter most.
        </p>
        <a href="/pricing" class="pro-upgrade-btn">
            Upgrade to Pro &mdash; $149/mo
        </a>
    </div>
    {% endif %}

    <!-- H. Get More with Pro Banner (bottom) -->
    {% if license_tier != 'pro' and license_tier != 'enterprise' %}
    <div class="pro-bottom-banner">
        <div class="pro-bottom-banner-content">
            <h2>Get More with Pro</h2>
            <div class="pro-feature-grid">
                <div class="pro-feature-item">
                    <span class="pro-feature-icon">&#129302;</span>
                    <div>
                        <strong>AI Audit Copilot</strong>
                        <p>AI-powered analysis &amp; remediation</p>
                    </div>
                </div>
                <div class="pro-feature-item">
                    <span class="pro-feature-icon">&#128202;</span>
                    <div>
                        <strong>Attack Graph Visualization</strong>
                        <p>Interactive exploit chain mapping</p>
                    </div>
                </div>
                <div class="pro-feature-item">
                    <span class="pro-feature-icon">&#128163;</span>
                    <div>
                        <strong>Exploit PoC Generator</strong>
                        <p>Auto-generated proof-of-concept exploits</p>
                    </div>
                </div>
                <div class="pro-feature-item">
                    <span class="pro-feature-icon">&#9203;</span>
                    <div>
                        <strong>Time-Travel Scanner</strong>
                        <p>Historical vulnerability tracking</p>
                    </div>
                </div>
                <div class="pro-feature-item">
                    <span class="pro-feature-icon">&#128300;</span>
                    <div>
                        <strong>Protocol Fingerprinting</strong>
                        <p>Identify known protocol patterns</p>
                    </div>
                </div>
                <div class="pro-feature-item">
                    <span class="pro-feature-icon">&#128196;</span>
                    <div>
                        <strong>HTML &amp; SARIF Reports</strong>
                        <p>Professional branded report formats</p>
                    </div>
                </div>
                <div class="pro-feature-item">
                    <span class="pro-feature-icon">&#127757;</span>
                    <div>
                        <strong>Solana Analyzer</strong>
                        <p>35 Solana-specific security rules</p>
                    </div>
                </div>
                <div class="pro-feature-item">
                    <span class="pro-feature-icon">&#128274;</span>
                    <div>
                        <strong>Web Pro Panels</strong>
                        <p>Full Pro dashboard in your browser</p>
                    </div>
                </div>
            </div>
            <div class="pro-bottom-cta">
                <a href="/pricing" class="pro-upgrade-btn pro-upgrade-btn-lg">
                    View Pricing Plans &mdash; Starting at $49/mo
                </a>
                <span class="pro-bottom-note">14-day money-back guarantee &bull; Cancel anytime</span>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<style>
    /* Pro Upgrade Cards */
    .pro-upgrade-card {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        border: 1px solid #e94560;
        border-radius: 12px;
        padding: 2rem;
        margin: 1.5rem 0;
        position: relative;
        overflow: hidden;
    }
    .pro-upgrade-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #e94560, #667eea);
    }
    .pro-upgrade-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
    }
    .pro-upgrade-icon-wrap {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: rgba(233, 69, 96, 0.12);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .pro-upgrade-icon {
        font-size: 1.5rem;
    }
    .pro-upgrade-title-wrap {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .pro-upgrade-card h3 {
        color: #fff;
        font-size: 1.25rem;
        margin: 0;
    }
    .pro-upgrade-desc {
        color: #a0a0b0;
        font-size: 0.95rem;
        line-height: 1.6;
        margin-bottom: 1.25rem;
    }
    .pro-teaser {
        background: rgba(102, 126, 234, 0.08);
        border: 1px solid rgba(102, 126, 234, 0.25);
        border-radius: 8px;
        padding: 0.75rem 1rem;
        margin-bottom: 1.25rem;
        font-size: 0.9rem;
        color: #c0c0c0;
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        line-height: 1.5;
    }
    .pro-teaser-icon {
        font-size: 1.1rem;
        flex-shrink: 0;
    }
    .pro-teaser strong {
        color: #667eea;
    }
    .pro-upgrade-btn {
        display: inline-block;
        background: linear-gradient(135deg, #e94560, #c23152);
        color: white;
        padding: 0.75rem 1.75rem;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 700;
        font-size: 1rem;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .pro-upgrade-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(233, 69, 96, 0.4);
    }
    .pro-upgrade-btn-lg {
        padding: 1rem 2.5rem;
        font-size: 1.1rem;
    }

    /* Get More with Pro Bottom Banner */
    .pro-bottom-banner {
        background: linear-gradient(135deg, #0f1629 0%, #16213e 100%);
        border: 1px solid #2a2a4e;
        border-top: 3px solid #e94560;
        border-radius: 16px;
        padding: 2.5rem;
        margin: 3rem 0 1rem;
    }
    .pro-bottom-banner h2 {
        color: #fff;
        font-size: 1.75rem;
        text-align: center;
        margin-bottom: 2rem;
    }
    .pro-feature-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1.25rem;
        margin-bottom: 2rem;
    }
    .pro-feature-item {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.75rem;
        border-radius: 8px;
        background: rgba(233, 69, 96, 0.04);
        border: 1px solid rgba(233, 69, 96, 0.12);
        transition: border-color 0.2s;
    }
    .pro-feature-item:hover {
        border-color: rgba(233, 69, 96, 0.3);
    }
    .pro-feature-icon {
        font-size: 1.5rem;
        flex-shrink: 0;
        margin-top: 0.15rem;
    }
    .pro-feature-item strong {
        color: #e0e0e0;
        font-size: 0.9rem;
        display: block;
        margin-bottom: 0.15rem;
    }
    .pro-feature-item p {
        color: #888;
        font-size: 0.8rem;
        margin: 0;
    }
    .pro-bottom-cta {
        text-align: center;
    }
    .pro-bottom-note {
        display: block;
        margin-top: 0.75rem;
        color: #666;
        font-size: 0.8rem;
    }

    @media (max-width: 768px) {
        .pro-upgrade-header {
            flex-direction: column;
            text-align: center;
        }
        .pro-upgrade-title-wrap {
            justify-content: center;
        }
        .pro-feature-grid {
            grid-template-columns: 1fr;
        }
        .pro-bottom-banner {
            padding: 1.5rem;
        }
    }
</style>

<script>
    // Toggle finding card expand/collapse with animation
    function toggleFinding(header) {
        const card = header.parentElement;
        const content = card.querySelector('.finding-content');
        const toggle = header.querySelector('.finding-toggle');

        if (content.style.maxHeight && content.style.maxHeight !== '0px') {
            content.style.maxHeight = '0px';
            content.style.overflow = 'hidden';
            toggle.innerHTML = '&#9662;';
            card.classList.remove('expanded');
        } else {
            content.style.maxHeight = content.scrollHeight + 'px';
            content.style.overflow = 'visible';
            toggle.innerHTML = '&#9652;';
            card.classList.add('expanded');
        }
    }

    // Toggle analyzer category breakdown
    function toggleAnalyzer(row) {
        const item = row.closest('.analyzer-item');
        const categoryList = item.querySelector('.category-list');
        const toggleIcon = row.querySelector('.analyzer-toggle');
        if (!categoryList) return;

        if (categoryList.style.display === 'none') {
            categoryList.style.display = 'block';
            if (toggleIcon) toggleIcon.innerHTML = '&#9652;';
        } else {
            categoryList.style.display = 'none';
            if (toggleIcon) toggleIcon.innerHTML = '&#9662;';
        }
    }

    // Severity filter tabs
    function filterFindings(severity, btn) {
        // Update active tab
        document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));
        btn.classList.add('active');

        // Show/hide findings
        document.querySelectorAll('.finding-card').forEach(card => {
            if (severity === 'ALL' || card.dataset.severity === severity) {
                card.style.display = '';
            } else {
                card.style.display = 'none';
            }
        });
    }

    // Initialize: all findings collapsed, categories collapsed
    document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('.finding-content').forEach(content => {
            content.style.maxHeight = '0px';
            content.style.overflow = 'hidden';
        });
    });
</script>
{% endblock %}