{% extends "base.html" %}

{% block title %}Performance Benchmarks - HYDRA-24 Demo{% endblock %}

{% block content %}
<div class="performance-header">
    <h1>Performance & Scale Dashboard</h1>
    <p class="perf-subtitle">Real benchmarks proving HYDRA-24 is production-ready</p>
</div>

<div class="benchmark-section">
    <h2>Runtime Overhead</h2>
    <p class="section-description">HYDRA-24 adds &lt;5% overhead across all dataset sizes</p>
    <div class="chart-container">
        <table class="benchmark-table">
            <thead>
                <tr>
                    <th>Dataset Size</th>
                    <th>Baseline (ms)</th>
                    <th>With HYDRA-24 (ms)</th>
                    <th>Overhead</th>
                </tr>
            </thead>
            <tbody>
                {% for item in benchmarks.runtime_overhead.data %}
                <tr>
                    <td>{{ item.dataset_size }}</td>
                    <td>{{ item.baseline_ms }}</td>
                    <td>{{ item.hydra_ms }}</td>
                    <td class="highlight">{{ item.overhead_pct }}%</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<div class="benchmark-section">
    <h2>Memory Efficiency</h2>
    <p class="section-description">24-bit fingerprints = 3 bytes per value (30x more compact)</p>
    <div class="chart-container">
        <table class="benchmark-table">
            <thead>
                <tr>
                    <th>DAG Nodes</th>
                    <th>HYDRA-24 (MB)</th>
                    <th>Full Lineage (MB)</th>
                    <th>Savings</th>
                </tr>
            </thead>
            <tbody>
                {% for item in benchmarks.memory_overhead.data %}
                <tr>
                    <td>{{ item.dag_nodes }}</td>
                    <td class="highlight">{{ item.hydra_mb }}</td>
                    <td>{{ item.full_lineage_mb }}</td>
                    <td class="highlight">{{ ((1 - item.hydra_mb / item.full_lineage_mb) * 100) | round(0) | int }}%</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<div class="benchmark-section">
    <h2>Query Performance</h2>
    <p class="section-description">DAG reconstruction in milliseconds, even for deep graphs</p>
    <div class="chart-container">
        <table class="benchmark-table">
            <thead>
                <tr>
                    <th>DAG Depth</th>
                    <th>Reconstruction Time (ms)</th>
                </tr>
            </thead>
            <tbody>
                {% for item in benchmarks.query_performance.data %}
                <tr>
                    <td>{{ item.dag_depth }} layers</td>
                    <td class="highlight">{{ item.reconstruction_ms }} ms</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<div class="benchmark-section">
    <h2>Scale Testing Results</h2>
    <p class="section-description">Proven at production scale</p>
    <div class="scale-tests">
        {% for test in benchmarks.scale_tests.tests %}
        <div class="test-card">
            <div class="test-name">{{ test.test }}</div>
            <div class="test-result success">✓ {{ test.result }}</div>
            <div class="test-details">{{ test.details }}</div>
        </div>
        {% endfor %}
    </div>
</div>

<div class="benchmark-section">
    <h2>Competitive Comparison</h2>
    <p class="section-description">Why HYDRA-24 beats alternatives</p>
    <div class="comparison-grid">
        {% for comp in benchmarks.competitive_comparison.comparisons %}
        <div class="comparison-card">
            <h3>{{ comp.category }}</h3>
            <div class="comparison-row">
                <span class="label">HYDRA-24:</span>
                <span class="value hydra">{{ comp.hydra }}</span>
            </div>
            <div class="comparison-row">
                <span class="label">Alternative:</span>
                <span class="value alt">{{ comp.alternative }}</span>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<style>
.performance-header {
    text-align: center;
    margin-bottom: 50px;
}

.performance-header h1 {
    font-size: 3rem;
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 15px;
}

.perf-subtitle {
    font-size: 1.3rem;
    color: #9ca3af;
}

.benchmark-section {
    margin-bottom: 60px;
}

.benchmark-section h2 {
    font-size: 2rem;
    color: #fbbf24;
    margin-bottom: 10px;
}

.section-description {
    color: #9ca3af;
    margin-bottom: 25px;
}

.chart-container {
    background: #1f2937;
    border-radius: 12px;
    padding: 20px;
}

.benchmark-table {
    width: 100%;
    border-collapse: collapse;
}

.benchmark-table thead {
    background: #111827;
}

.benchmark-table th {
    padding: 15px;
    text-align: left;
    color: #fbbf24;
    font-weight: 600;
}

.benchmark-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #374151;
    color: #d1d5db;
}

.benchmark-table td.highlight {
    color: #fbbf24;
    font-weight: 600;
}

.scale-tests {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.test-card {
    background: #1f2937;
    border-radius: 12px;
    padding: 20px;
    border-left: 4px solid #10b981;
}

.test-name {
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 10px;
}

.test-result {
    font-size: 1.2rem;
    color: #10b981;
    margin-bottom: 8px;
}

.test-result.success::before {
    content: '✓ ';
    font-weight: bold;
}

.test-details {
    font-size: 0.9rem;
    color: #9ca3af;
}

.comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.comparison-card {
    background: #1f2937;
    border-radius: 12px;
    padding: 20px;
}

.comparison-card h3 {
    color: #fbbf24;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.comparison-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #374151;
}

.comparison-row:last-child {
    border-bottom: none;
}

.comparison-row .label {
    color: #9ca3af;
    font-weight: 500;
}

.comparison-row .value {
    font-weight: 600;
}

.comparison-row .value.hydra {
    color: #10b981;
}

.comparison-row .value.alt {
    color: #6b7280;
}
</style>
{% endblock %}