{% extends "base.html" %}

{% block title %}Metrics Dashboard - Energizados Web Console{% endblock %}

{% block extra_head %}
<style>
    .chart-container {
        height: 500px;
        margin: 20px 0;
        border: 1px solid var(--app-border);
        border-radius: var(--app-radius-lg);
        padding: 15px;
        background-color: var(--app-surface);
    }
    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: var(--app-muted);
    }
    .empty-state h3 {
        margin-bottom: 20px;
        color: var(--app-text);
    }
    .filter-section {
        margin-bottom: 20px;
        padding: 15px;
        background-color: var(--app-surface-2);
        border: 1px solid var(--app-border);
        border-radius: var(--app-radius-md);
    }
</style>
{% endblock %}

{% block content %}
<h2 class="app-hero__title mb-4">📈 Metrics Timeline Dashboard</h2>

{# Per-type run counts: the timeline is training-only (AUC/F1), so the mix of
   run types makes the chart's scope legible at a glance. #}
{% set type_meta = {
    "etl": {"icon": "bi-database", "label": "ETL"},
    "eda": {"icon": "bi-bar-chart", "label": "EDA"},
    "inference": {"icon": "bi-lightning", "label": "Inference"},
    "training": {"icon": "bi-cpu", "label": "Training"}
} %}
<div class="app-hero__stats mb-4">
    {% for bucket in run_type_buckets %}
    <div class="app-stat">
        <span class="app-stat__value" data-run-count="{{ bucket }}">{{ run_counts[bucket] }}</span>
        <span class="app-stat__label">{{ type_meta[bucket].label }}</span>
    </div>
    {% endfor %}
</div>

<!-- Filter Section -->
<div class="filter-section">
    <div class="row align-items-center">
        <div class="col-md-6">
            <label for="status-filter" class="form-label">Status Filter:</label>
            <select id="status-filter" class="form-select" onchange="updateDashboard()">
                <option value="">All Statuses</option>
                <option value="success" {% if status == 'success' %}selected{% endif %}>Success</option>
                <option value="partial" {% if status == 'partial' %}selected{% endif %}>Partial</option>
                <option value="failed" {% if status == 'failed' %}selected{% endif %}>Failed</option>
            </select>
        </div>
        <div class="col-md-6">
            <label for="limit-input" class="form-label">Show Last:</label>
            <input type="number" id="limit-input" class="form-control" value="{{ limit }}" min="1" max="100" onchange="updateDashboard()">
        </div>
    </div>
</div>

<!-- Timeline Chart -->
<div class="chart-container">
    <p class="text-muted small mb-3">Training runs — AUC/F1 over time</p>
    <div id="timeline-chart"></div>
    <div id="chart-loading" class="text-center text-muted mt-5">
        <div class="spinner-border" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <p class="mt-2">Loading timeline data...</p>
    </div>
    <div id="chart-empty" class="empty-state" style="display: none;">
        <h3>No runs available</h3>
        <p>There are no runs to display. Try adjusting your filters or run some experiments first.</p>
        <a href="/" class="btn btn-primary">Go to Home</a>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
{# Item A: scope the dashboard's fetch/click/redirect URLs to the project when
   project_id is present in context; otherwise keep the legacy Global URLs. #}
{% if project_id %}
    {% set dash_base = '/projects/' ~ project_id ~ '/dashboard' %}
    {% set timeline_url = '/projects/' ~ project_id ~ '/api/dashboard/timeline' %}
    {% set runs_base = '/projects/' ~ project_id ~ '/runs' %}
{% else %}
    {% set dash_base = '/dashboard' %}
    {% set timeline_url = '/api/dashboard/timeline' %}
    {% set runs_base = '/runs' %}
{% endif %}
<script>
const DASH_BASE = {{ dash_base | tojson }};
const TIMELINE_URL = {{ timeline_url | tojson }};
const RUNS_BASE = {{ runs_base | tojson }};

// Resolve a design token to its computed value, with a hex fallback so the
// chart still renders if the var is ever missing.
function readAppVar(name, fallback) {
    try {
        var v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
        return v || fallback;
    } catch (e) { return fallback; }
}

function updateDashboard() {
    const status = document.getElementById('status-filter').value;
    const limit = document.getElementById('limit-input').value;

    // Build URL with parameters
    const params = new URLSearchParams();
    if (status) params.append('status', status);
    if (limit) params.append('limit', limit);

    // Navigate to dashboard with new parameters (project-scoped or global)
    window.location.href = `${DASH_BASE}?${params.toString()}`;
}

function loadTimelineChart() {
    const status = {{ status | tojson }};
    const limit = {{ limit }};

    // Build API URL
    const params = new URLSearchParams();
    params.append('limit', limit);
    if (status) params.append('status', status);

    // Theme-aware chart palette (reads the active token set, so dark mode adapts).
    const colorAuc = readAppVar('--app-success', '#10b981');
    const colorF1 = readAppVar('--app-primary', '#6366f1');
    const colorText = readAppVar('--app-text', '#0f172a');
    const colorGrid = readAppVar('--app-border', '#e2e8f0');

    fetch(`${TIMELINE_URL}?${params.toString()}`)
        .then(response => response.json())
        .then(data => {
            // Hide loading indicator
            document.getElementById('chart-loading').style.display = 'none';

            // Check if we have data
            if (data.run_ids.length === 0) {
                document.getElementById('chart-empty').style.display = 'block';
                return;
            }

            // Prepare Plotly traces
            const traceAUC = {
                x: data.timestamps,
                y: data.auc,
                name: 'AUC',
                mode: 'lines+markers',
                line: {color: colorAuc},
                customdata: data.run_ids,
            };

            const traceF1 = {
                x: data.timestamps,
                y: data.f1,
                name: 'F1',
                mode: 'lines+markers',
                line: {color: colorF1},
                customdata: data.run_ids,
            };

            const layout = {
                title: 'Training runs — AUC/F1 over time',
                paper_bgcolor: 'rgba(0,0,0,0)',
                plot_bgcolor: 'rgba(0,0,0,0)',
                font: { color: colorText },
                xaxis: {
                    title: 'Timestamp',
                    automargin: true,
                    gridcolor: colorGrid,
                    linecolor: colorGrid,
                    zerolinecolor: colorGrid,
                },
                yaxis: {
                    title: 'Score',
                    range: [0, 1],
                    gridcolor: colorGrid,
                    linecolor: colorGrid,
                    zerolinecolor: colorGrid,
                },
                hovermode: 'closest',
                margin: {l: 50, r: 50, t: 50, b: 100},
            };

            const config = {
                responsive: true,
                displayModeBar: true,
            };

            Plotly.newPlot('timeline-chart', [traceAUC, traceF1], layout, config);

            // Add click handler to navigate to run detail (project-scoped or global)
            document.getElementById('timeline-chart').on('plotly_click', function(data) {
                const point = data.points[0];
                const runId = point.data.customdata[point.pointNumber];
                if (runId) {
                    window.open(`${RUNS_BASE}/${runId}`, '_blank');
                }
            });
        })
        .catch(error => {
            console.error('Error loading timeline data:', error);
            document.getElementById('chart-loading').innerHTML = `
                <div class="alert alert-danger">
                    <strong>Error:</strong> Failed to load timeline data. Please try again.
                </div>
            `;
        });
}

// Load chart when page is ready
document.addEventListener('DOMContentLoaded', function() {
    loadTimelineChart();
});
</script>
{% endblock %}