{% extends "base.html" %}

{% block title %}Result Details - MHA Flow{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url_for('dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item active">Result #{{ result.id }}</li>
            </ol>
        </nav>
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <div class="card shadow">
            <div class="card-header bg-primary text-white">
                <h5><i class="fas fa-info-circle"></i> Details</h5>
            </div>
            <div class="card-body">
                <p><strong>Algorithm:</strong><br>{{ result.algorithm_name }}</p>
                <p><strong>Objective Function:</strong><br>{{ result.objective_function }}</p>
                <p><strong>Status:</strong><br>
                    <span class="badge bg-{{ 'success' if result.status == 'completed' else 'danger' }}">
                        {{ result.status }}
                    </span>
                </p>
                <hr>
                <p><strong>Population Size:</strong> {{ result.population_size }}</p>
                <p><strong>Max Iterations:</strong> {{ result.max_iterations }}</p>
                <p><strong>Dimensions:</strong> {{ result.dimensions }}</p>
                <p><strong>Bounds:</strong> [{{ result.lower_bound }}, {{ result.upper_bound }}]</p>
                <hr>
                <p><strong>Best Fitness:</strong><br>
                    <span class="text-success fs-5">{{ "%.6e"|format(result.best_fitness) }}</span>
                </p>
                <p><strong>Execution Time:</strong><br>{{ "%.4f"|format(result.execution_time) }} seconds</p>
                <p><strong>Created:</strong><br>{{ result.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</p>
            </div>
        </div>
    </div>
    
    <div class="col-md-8">
        <div class="card shadow">
            <div class="card-header bg-success text-white">
                <h5><i class="fas fa-chart-line"></i> Visualization</h5>
            </div>
            <div class="card-body">
                <div id="convergencePlot" style="height:500px;"></div>
                
                <div class="mt-4">
                    <h6>Best Position Found:</h6>
                    <pre class="bg-light p-3 rounded">{{ result.get_best_position() | tojson(indent=2) }}</pre>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
const convergenceData = {{ result.get_convergence_data() | tojson }};

const trace = {
    y: convergenceData,
    type: 'scatter',
    mode: 'lines+markers',
    name: 'Best Fitness',
    line: {color: '#198754', width: 2},
    marker: {size: 4}
};

const layout = {
    title: 'Convergence Curve - {{ result.algorithm_name }}',
    xaxis: {title: 'Iteration'},
    yaxis: {title: 'Fitness Value', type: 'log'},
    showlegend: true
};

Plotly.newPlot('convergencePlot', [trace], layout);
</script>
{% endblock %}