{% extends "base.html" %}
{% block title %}Benchmark Suite | USSU Algorithm Analyzer v4.0{% endblock %}
{% block content %}
<div class="page-header animate-in">
    <h1>⏱️ BENCHMARK SUITE</h1>
    <p>Cross-size performance profiling with statistical analysis and scaling charts.</p>
    <div class="header-line"></div>
</div>

<div class="grid grid-2">
    <div class="glass-card animate-in delay-1">
        <h3 style="font-family: 'Orbitron'; color: var(--bright-cyan); margin-bottom: 16px;">Run Benchmark</h3>
        <form method="POST">
            <div class="form-group">
                <label class="form-label">Benchmark Suite</label>
                <select name="suite" class="form-select" id="suiteSelect" onchange="updateSuiteFields()">
                    <option value="search" selected>Search Benchmark</option>
                    <option value="sort">Sort Benchmark</option>
                    <option value="graph">Graph Benchmark</option>
                    <option value="dp">DP Benchmark</option>
                    <option value="custom">Custom Speed Profile</option>
                </select>
            </div>
            <div id="suiteFields">
                <!-- Default empty, populated by JS if needed -->
            </div>
            <button type="submit" class="btn-liquid btn-liquid-glow">Run Benchmark</button>
        </form>
    </div>

    <div class="glass-card animate-in delay-2">
        <h3 style="font-family: 'Orbitron'; color: var(--bright-cyan); margin-bottom: 16px;">Benchmark Info</h3>
        <div class="algo-card">
            <h3>Search Benchmark</h3>
            <span class="badge badge-cyan">Linear | Binary | Jump | Interpolation</span>
            <p style="color: #94a3b8; font-size: 13px; margin-top: 8px;">Compare searching algorithms across array sizes 100 to 10,000 with statistical profiling.</p>
        </div>
        <div class="algo-card">
            <h3>Sort Benchmark</h3>
            <span class="badge badge-cyan">Merge | Quick | Heap | Shell | Timsort</span>
            <p style="color: #94a3b8; font-size: 13px; margin-top: 8px;">Cross-size scaling analysis from 100 to 2,000 elements. Slow algorithms skipped for large inputs.</p>
        </div>
        <div class="algo-card">
            <h3>Graph Benchmark</h3>
            <span class="badge badge-cyan">BFS | DFS | Dijkstra</span>
            <p style="color: #94a3b8; font-size: 13px; margin-top: 8px;">Random graph generation with varying vertex counts. Measures traversal and shortest path performance.</p>
        </div>
    </div>
</div>

{% if chart_img %}
<div class="glass-card animate-in" style="margin-top: 24px;">
    <h3 style="font-family: 'Orbitron'; color: var(--bright-cyan); margin-bottom: 12px;">Scaling Chart</h3>
    <img src="data:image/png;base64,{{ chart_img }}" style="width: 100%; border-radius: 12px; border: 1px solid rgba(255,255,255,0.06);">
</div>
{% endif %}

{% if result %}
<div class="glass-card animate-in" style="margin-top: 24px;">
    <h3 style="font-family: 'Orbitron'; color: var(--bright-cyan); margin-bottom: 12px;">Benchmark Results</h3>

    {# Custom Speed Profile returns a dict, not a list #}
    {% if result is mapping and result.trials is defined %}
        <div class="grid grid-4">
            <div class="metric-card"><div class="metric-label">Trials</div><div class="metric-value">{{ result.trials }}</div></div>
            <div class="metric-card"><div class="metric-label">Min (ms)</div><div class="metric-value">{{ "%.4f"|format(result.min_ms) }}</div></div>
            <div class="metric-card"><div class="metric-label">Max (ms)</div><div class="metric-value">{{ "%.4f"|format(result.max_ms) }}</div></div>
            <div class="metric-card"><div class="metric-label">Mean (ms)</div><div class="metric-value">{{ "%.4f"|format(result.mean_ms) }}</div></div>
        </div>
        <div class="grid grid-3" style="margin-top: 16px;">
            <div class="metric-card"><div class="metric-label">Median (ms)</div><div class="metric-value">{{ "%.4f"|format(result.median_ms) }}</div></div>
            <div class="metric-card"><div class="metric-label">Std Dev (ms)</div><div class="metric-value">{{ "%.4f"|format(result.std_ms) }}</div></div>
            <div class="metric-card"><div class="metric-label">All Times</div><div class="metric-value" style="font-size: 12px;">{{ result.all_times }}</div></div>
        </div>

    {# List-based benchmarks (search, sort, graph, dp) #}
    {% elif result is iterable and result is not string and result|length > 0 %}
        {% set first = result[0] %}
        {% if first.times is defined %}
            {# Search/Sort benchmark format #}
            <table class="cyber-table">
                <thead>
                    <tr>
                        <th>Size</th>
                        {% for key in first.times.keys() %}
                        <th>{{ key }}</th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for r in result %}
                    <tr class="animate-row" style="animation: fadeIn 0.4s ease-out {{ loop.index0 * 0.08 }}s forwards; opacity: 0;">
                        <td style="font-family: 'Orbitron'; color: var(--bright-cyan);">{{ r.size }}</td>
                        {% for key in r.times.keys() %}
                        <td>
                            {% set val = r.times[key] %}
                            {% if val is number %}
                                {% if val > 999999 %}
                                    Skipped
                                {% else %}
                                    {{ "%.4f"|format(val) }}
                                {% endif %}
                            {% else %}
                                {{ val }}
                            {% endif %}
                        </td>
                        {% endfor %}
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% elif first.bfs is defined %}
            {# Graph benchmark format #}
            <table class="cyber-table">
                <thead>
                    <tr><th>Size</th><th>BFS (ms)</th><th>DFS (ms)</th><th>Dijkstra (ms)</th></tr>
                </thead>
                <tbody>
                    {% for r in result %}
                    <tr class="animate-row" style="animation: fadeIn 0.4s ease-out {{ loop.index0 * 0.08 }}s forwards; opacity: 0;">
                        <td style="font-family: 'Orbitron'; color: var(--bright-cyan);">{{ r.size }}</td>
                        <td>{{ "%.4f"|format(r.bfs) }}</td>
                        <td>{{ "%.4f"|format(r.dfs) }}</td>
                        <td>{{ "%.4f"|format(r.dijkstra) }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% elif first.knapsack is defined %}
            {# DP benchmark format #}
            <table class="cyber-table">
                <thead>
                    <tr><th>Size</th><th>Knapsack (ms)</th><th>LCS (ms)</th></tr>
                </thead>
                <tbody>
                    {% for r in result %}
                    <tr class="animate-row" style="animation: fadeIn 0.4s ease-out {{ loop.index0 * 0.08 }}s forwards; opacity: 0;">
                        <td style="font-family: 'Orbitron'; color: var(--bright-cyan);">{{ r.size }}</td>
                        <td>{{ "%.4f"|format(r.knapsack) }}</td>
                        <td>{{ "%.4f"|format(r.lcs) }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% else %}
            <div class="code-block">{{ result|tojson_pretty }}</div>
        {% endif %}
    {% else %}
        <div class="code-block">{{ result|tojson_pretty }}</div>
    {% endif %}
</div>
{% endif %}
{% endblock %}
{% block extra_scripts %}
<script>
    const suiteFieldsMap = {
        custom: `
            <div class="form-group"><label class="form-label">Algorithm</label><select name="custom_algo" class="form-select"><option value="merge_sort">Merge Sort</option><option value="quick_sort">Quick Sort</option><option value="heap_sort">Heap Sort</option><option value="bubble_sort">Bubble Sort</option></select></div>
            <div class="form-group"><label class="form-label">Input Size</label><input type="number" name="size" value="1000" class="form-input"></div>`
    };
    function updateSuiteFields() {
        const suite = document.getElementById('suiteSelect').value;
        document.getElementById('suiteFields').innerHTML = suiteFieldsMap[suite] || '';
    }
</script>
{% endblock %}