{% extends "base.html" %}
{% block title %}Benchmarks{% endblock %}
{% block content %}
<div class="container">
    <h1>LDR Benchmarks</h1>

    <div class="card mb-4">
        <div class="card-header">
            <h2>Run Benchmark</h2>
        </div>
        <div class="card-body">
            <form id="benchmarkForm">
                <div class="form-group">
                    <label for="benchmarkType">Benchmark</label>
                    <select class="form-control" id="benchmarkType" required>
                        {% for benchmark in benchmarks %}
                            <option value="{{ benchmark.id }}">{{ benchmark.name }} - {{ benchmark.description }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="form-group">
                    <label for="numExamples">Number of Examples</label>
                    <input type="number" class="form-control" id="numExamples" value="10" min="1" max="1000">
                    <small class="form-text text-muted">Higher numbers give more accurate results but take longer</small>
                </div>

                <div class="form-group">
                    <label for="searchIterations">Search Iterations</label>
                    <input type="number" class="form-control" id="searchIterations" value="3" min="1" max="10">
                </div>

                <div class="form-group">
                    <label for="questionsPerIteration">Questions Per Iteration</label>
                    <input type="number" class="form-control" id="questionsPerIteration" value="3" min="1" max="10">
                </div>

                <div class="form-group">
                    <label for="searchTool">Search Tool</label>
                    <select class="form-control" id="searchTool">
                        <option value="searxng">SearXNG</option>
                        <option value="wikipedia">Wikipedia</option>
                        <option value="auto">Auto (Multiple Engines)</option>
                    </select>
                </div>

                <button type="submit" class="btn btn-primary">Start Benchmark</button>
            </form>
        </div>
    </div>

    <div class="card mb-4" id="benchmarkStatus" style="display: none;">
        <div class="card-header">
            <h2>Benchmark Status</h2>
        </div>
        <div class="card-body">
            <div class="ldr-progress mb-3">
                <div class="ldr-progress-bar" id="benchmarkProgress" role="progressbar" style="width: 0%"></div>
            </div>
            <p id="statusMessage">Initializing benchmark...</p>
            <button class="btn btn-secondary" id="viewResults" style="display: none;">View Results</button>
        </div>
    </div>

    <div class="card" id="benchmarkResults" style="display: none;">
        <div class="card-header">
            <h2>Benchmark Results</h2>
        </div>
        <div class="card-body" id="resultsContent">
        </div>
    </div>
</div>

<script>
    let currentJobId = null;
    let statusInterval = null;

    document.getElementById('benchmarkForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const benchmarkType = document.getElementById('benchmarkType').value;
        const numExamples = document.getElementById('numExamples').value;
        const searchIterations = document.getElementById('searchIterations').value;
        const questionsPerIteration = document.getElementById('questionsPerIteration').value;
        const searchTool = document.getElementById('searchTool').value;

        // Show status card
        document.getElementById('benchmarkStatus').style.display = 'block';
        document.getElementById('benchmarkResults').style.display = 'none';
        document.getElementById('viewResults').style.display = 'none';

        // Start benchmark
        fetch('/benchmark/run', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                benchmark_type: benchmarkType,
                num_examples: parseInt(numExamples),
                search_iterations: parseInt(searchIterations),
                questions_per_iteration: parseInt(questionsPerIteration),
                search_tool: searchTool
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.job_id) {
                currentJobId = data.job_id;
                document.getElementById('statusMessage').textContent = data.message;

                // Start polling for status updates
                statusInterval = setInterval(checkStatus, 2000);
            } else {
                document.getElementById('statusMessage').textContent = 'Error: ' + data.error;
            }
        })
        .catch(error => {
            document.getElementById('statusMessage').textContent = 'Error: ' + error;
        });
    });

    function checkStatus() {
        if (!currentJobId) return;

        fetch('/benchmark/status/' + currentJobId)
            .then(response => response.json())
            .then(data => {
                if (data.status === 'running') {
                    const runtime = data.runtime || 0;
                    document.getElementById('statusMessage').textContent = `Running benchmark... (${Math.round(runtime)}s elapsed)`;
                    document.getElementById('benchmarkProgress').style.width = '50%';
                } else if (data.status === 'completed') {
                    clearInterval(statusInterval);
                    document.getElementById('statusMessage').textContent = 'Benchmark completed successfully!';
                    document.getElementById('benchmarkProgress').style.width = '100%';
                    document.getElementById('viewResults').style.display = 'inline-block';
                    document.getElementById('viewResults').onclick = function() {
                        showResults(currentJobId);
                    };
                } else if (data.status === 'error') {
                    clearInterval(statusInterval);
                    document.getElementById('statusMessage').textContent = 'Error: ' + data.error;
                    document.getElementById('benchmarkProgress').style.width = '100%';
                    document.getElementById('benchmarkProgress').classList.add('bg-danger');
                }
            })
            .catch(error => {
                document.getElementById('statusMessage').textContent = 'Error checking status: ' + error;
            });
    }

    function showResults(jobId) {
        fetch('/benchmark/results/' + jobId)
            .then(response => response.json())
            .then(data => {
                document.getElementById('benchmarkResults').style.display = 'block';

                let html = '';

                if (data.metrics) {
                    html += `<h3>Summary</h3>`;
                    html += `<p><strong>Accuracy:</strong> ${(data.metrics.accuracy * 100).toFixed(1)}%</p>`;
                    html += `<p><strong>Examples:</strong> ${data.metrics.total_examples}</p>`;
                    html += `<p><strong>Correct:</strong> ${data.metrics.correct}</p>`;

                    if (data.metrics.average_processing_time) {
                        html += `<p><strong>Average Processing Time:</strong> ${data.metrics.average_processing_time.toFixed(2)}s</p>`;
                    }

                    html += `<p><a href="${data.report_path}" target="_blank" class="btn btn-info">View Full Report</a></p>`;
                } else {
                    html += `<p>No metrics available. Check the results file for details.</p>`;
                    html += `<p><a href="${data.results_path}" target="_blank" class="btn btn-info">View Results File</a></p>`;
                }

                document.getElementById('resultsContent').innerHTML = html;
            })
            .catch(error => {
                document.getElementById('resultsContent').innerHTML = `<p>Error loading results: ${error}</p>`;
            });
    }
</script>
{% endblock %}