{% extends 'base.html' %}
{% from "components/run_outcome.html" import outcome_badge %}

{% block title %}IvoryOS | Experiment Results{% endblock %}

{% block body %}
<style>
    .vis-time-axis .vis-text.vis-minor,
    .vis-time-axis .vis-text.vis-major {
        color: #666;
    }
    .vis-item.stop {
        background-color: #dc3545;
        color: white;
        border: none;
        font-weight: bold;
    }
    .vis-item.prep {
        background-color: #17a2b8;
        border-color: #138496;
    }
    .vis-item.script {
        background-color: #28a745;
        border-color: #1e7e34;
    }
    .vis-item.cleanup {
        background-color: #ffc107;
        border-color: #d39e00;
        color: #212529;
    }
    .vis-item.script.failed {
        background-color: #dc3545;
        border-color: #b02a37;
        color: white;
    }
    /* a failed row takes no time, so the next iteration starts on the same spot:
       drawn above its bar so it is not hidden */
    #config-results tr.batch-start > td {
        border-top: 2px solid #6c757d;
    }
    .vis-item.vis-point.script.failed {
        background-color: transparent;
        z-index: 2;
    }
    .vis-item.vis-point.script.failed .vis-dot {
        border-color: #dc3545;
        border-width: 6px;
        border-radius: 6px;
    }
    .vis-item.script.stopped {
        background-color: #ffc107;
        border-color: #d39e00;
        color: #212529;
    }
    /* run events: the user's pauses and stops, errors, table edits, rows not run */
    .vis-item.event .vis-dot { border-color: #6c757d; }
    .vis-item.event.stop_now .vis-dot,
    .vis-item.event.stop_after_iteration .vis-dot,
    .vis-item.event.error .vis-dot,
    .vis-item.event.rows_not_run .vis-dot { border-color: #dc3545; }
    .vis-item.event.paused .vis-dot,
    .vis-item.event.intervention .vis-dot { border-color: #fd7e14; }
    .vis-item.event.resumed .vis-dot,
    .vis-item.event.retried .vis-dot { border-color: #28a745; }
    #visualization {
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        background-color: #fff;
        min-height: 200px;
    }

    .section-header {
        border-bottom: 2px solid #dee2e6;
        padding-bottom: 0.5rem;
        margin-bottom: 1rem;
        color: #495057;
    }
    .loading-spinner {
        display: none;
    }
</style>

<div class="p-4" style="max-width: 1400px; margin: 0 auto;">
    
    <!-- PAGE HEADER -->
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4 pb-3 border-bottom">
        <div>
            <h1 class="h2 mb-1" style="font-weight: 700; color: #2c3e50; letter-spacing: -0.5px;">Workflow: {{ workflow.id }} - {{ workflow.name }}
                <span class="fs-6">{{ outcome_badge(workflow, running_run_id) }}</span></h1>
            <p class="text-muted mb-0">View execution timelines, download raw datasets and check detailed step information.</p>
        </div>
    </div>

    <div class="timeline-section" style="margin-bottom: 2rem;">

        <div class="alert alert-info d-flex align-items-center gap-2 px-3 py-2 border rounded" role="alert" style="font-size: 0.9rem; background-color: #e0f5f3; border-color: #b3dad9; color: #387e81;">
            <i class="bi bi-info-circle-fill"></i>
            <div>
                <strong>Tip:</strong> Click on timeline items to navigate to detailed views. Use <kbd class="bg-secondary">Ctrl</kbd> + scroll to zoom.
            </div>
        </div>
        <div id="visualization"></div>
    </div>

    <!-- The config table as the run worked through it, read from its iterations -->
    {% if config_results and config_results.rows %}
        {% set row_looks = {
            'done': ('text-bg-success', 'done'),
            'running': ('text-bg-primary', 'running'),
            'stopped': ('text-bg-warning', 'stopped mid-row'),
            'failed': ('text-bg-danger', 'failed'),
            'pending': ('text-bg-secondary', 'not run'),
        } %}
        <div id="config-results" style="margin-bottom: 2rem;">
            <h4 class="text-secondary mb-2">
                <i class="bi bi-table me-2"></i>Config table results
            </h4>
            <p class="text-muted small mb-2">
                Every row of the table and what became of it. Rows that ran show the values
                their last steps used and what they returned.
            </p>
            <div class="table-responsive border rounded mb-2" style="max-height: 420px; overflow-y: auto;">
                <table class="table table-sm table-bordered align-middle small mb-0">
                    <thead class="table-light sticky-top">
                        <tr>
                            <th>#</th><th>Status</th>
                            {% for column in config_results.columns %}<th>{{ column }}</th>{% endfor %}
                            {% for output in config_results.outputs %}<th class="table-info">{{ output }}</th>{% endfor %}
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in config_results.rows %}
                            {% set look = row_looks.get(row.status, ('text-bg-secondary', row.status)) %}
                            {# with batches, a line where each batch begins #}
                            <tr class="{{ '' if row.status == 'done' else 'text-muted' }}{{ ' batch-start' if config_results.batched and row.starts_batch and not loop.first }}">
                                <td>
                                    {# a row that ran links to its iteration's details below #}
                                    {% if row.iteration %}<a href="#card-iter{{ row.iteration }}" title="Iteration {{ row.iteration }}">{{ row.row }}</a>{% else %}{{ row.row }}{% endif %}
                                </td>
                                <td>
                                    <span class="badge {{ look[0] }}"{% if row.reason %} title="{{ row.reason }}"{% endif %}>{{ look[1] }}</span>
                                </td>
                                {# a value that cannot run is marked in red, the reason on hover #}
                                {% set invalid = row.invalid or {} %}
                                {% for column in config_results.columns %}
                                    {% if column in invalid %}
                                        <td class="text-danger fw-semibold" title="{{ invalid[column] }}">{{ row['values'].get(column, '') }}</td>
                                    {% else %}
                                        <td>{{ row['values'].get(column, '') }}</td>
                                    {% endif %}
                                {% endfor %}
                                {% for output in config_results.outputs %}<td>{{ row.outputs.get(output, '') }}</td>{% endfor %}
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% if config_changes %}
                <details class="small">
                    <summary>Edited during the run ({{ config_changes | length }})</summary>
                    <ul class="list-group my-2">
                        {% for time, change in config_changes %}
                            <li class="list-group-item py-1">
                                <span class="text-muted me-2">{{ time | replace('T', ' ') }}</span>{{ change }}
                            </li>
                        {% endfor %}
                    </ul>
                </details>
            {% endif %}
        </div>
    {% endif %}

    <!-- Phase Output Plot Section -->

    <div class="data-section" style="margin-bottom: 2rem;">
        <h3 class="section-header">
            <div class="col-md-6">
                <label for="output-select" class="form-label" style="font-size: 1rem;">Select Data Type:</label>
                <select id="output-select" class="form-select rounded-pill px-3">
                    <option value="">Loading data types...</option>
                </select>
            </div>
        </h3>

        <div class="plot-controls">
            <div>
                <div class="col-md-6 text-md-end">
                    <div class="loading-spinner text-secondary">
                        <div class="spinner-border spinner-border-sm text-secondary me-2" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        Loading plot data...
                    </div>
                </div>
            </div>
        </div>
        <div id="phase-plot" style="height:450px;" class="border rounded bg-white shadow-sm"></div>
    </div>

    <!-- Optimizer Plots Section -->
    <div class="mb-5 d-none" id="optimizer-plots-section">
        <h4 class="text-primary mb-3">
            <i class="fas fa-chart-area me-2"></i>Optimizer Plots
        </h4>
        <div id="optimizerPlotsContainer" class="w-100 d-flex flex-column gap-3"></div>
    </div>

    <!-- Workflow Details Section -->

    <div>

        <!-- Download Section -->
        <div class="d-flex flex-wrap gap-2 mb-4">
            {% if workflow.data_path %}
              <a href="{{ url_for('data.download_workflow_data_csv', workflow_id=workflow.id) }}"
               class="btn btn-sm rounded-pill px-3 border-teal-btn"
               onclick="return downloadDynamicCSV(event, this.href);">
                <i class="bi bi-download me-1"></i>
                Download workflow data
              </a>
            {% endif %}

            <a href="{{ url_for('data.download_workflow_steps_data_csv', workflow_id=workflow.id) }}"
               class="btn btn-sm rounded-pill px-3 border-teal-btn">
                <i class="bi bi-download me-1"></i>
                Download workflow steps
            </a>

            <a href="{{ url_for('data.download_workflow_logs', workflow_id=workflow.id) }}"
                class="btn btn-sm btn-outline-secondary rounded-pill px-3">
                <i class="bi bi-file-text me-1"></i>
                Download logs
            </a>
        </div>

        <!-- Prep Phase -->
        {% if grouped.prep %}
            <div class="mb-4">
                <h4 class="text-info mb-3">
                    <i class="fas fa-tools me-2"></i>Prep
                </h4>
                <div class="row">
                    {% for phase in grouped.prep %}
                        <div class="col-lg-6 mb-3">
                            {% include "components/step_card.html" %}
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endif %}

        <!-- Script Iterations -->
        {% for repeat_index, phase_list in grouped.script.items()|sort %}
            <div class="mb-4" id="card-iter{{ repeat_index }}">
                <h4 class="text-success mb-3">
                    <i class="fas fa-redo me-2"></i>Iteration {{ repeat_index }}
                </h4>
                <div class="row">
                    {% for phase in phase_list %}
                        <div class="col-lg-6 mb-3">
                            {% include "components/step_card.html" %}
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endfor %}

        <!-- Cleanup Phase -->
        {% if grouped.cleanup %}
            <div>
                <h4 class="text-warning mb-3">
                    <i class="fas fa-broom me-2"></i>Cleanup
                </h4>
                <div class="row">
                    {% for phase in grouped.cleanup %}
                        <div class="col-lg-6 mb-3">
                            {% include "components/step_card.html" %}
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% endif %}
    </div>

</div>

<!-- External Dependencies -->
<script src="https://unpkg.com/vis-timeline@8.5.4/standalone/umd/vis-timeline-graph2d.min.js"></script>
<link href="https://unpkg.com/vis-timeline@8.5.4/styles/vis-timeline-graph2d.min.css" rel="stylesheet"/>
{# plotly is already loaded globally from base.html #}

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        // ---------------- Timeline Setup ----------------
        const container = document.getElementById('visualization');
        const groups = [
            { id: 'all', content: 'Workflow Execution' },
            {% if run_events %}{ id: 'events', content: 'Events' },{% endif %}
        ];

        const items = [
            {% for event in run_events %}
                {
                    id: 'event-{{ loop.index }}',
                    content: {{ event.label | tojson }},
                    start: {{ event.time | tojson }},
                    type: 'point',
                    className: {{ ('event ' ~ event.kind) | tojson }},
                    group: 'events',
                    title: {{ (event.label ~ ' at ' ~ (event.time | replace('T', ' ')) ~ ((': ' ~ event.detail) if event.detail else '')) | tojson }},
                },
            {% endfor %}
            {% if grouped.prep %}
                {
                    id: 'prep',
                    content: 'Prep',
                    start: '{{ grouped.prep[0].start_time }}',
                    end: '{{ grouped.prep[-1].end_time }}',
                    className: 'prep',
                    group: 'all',
                },
            {% endif %}

            {% for repeat_index, step_list in grouped.script.items()|sort %}
                {% if step_list[0].status == 'failed' and step_list[0].start_time == step_list[-1].end_time %}
                {# a row that could not run took no time: a dot, its label on hover so it
                   does not sit on top of the next iteration #}
                {
                    id: 'iter{{ repeat_index }}',
                    content: '',
                    title: {{ ('Iteration ' ~ repeat_index ~ ' failed' ~ ((': ' ~ step_list[0].error.message) if step_list[0].error and step_list[0].error.message else '')) | tojson }},
                    start: '{{ step_list[0].start_time }}',
                    type: 'point',
                    className: 'script failed',
                    group: 'all',
                },
                {% else %}
                {
                    id: 'iter{{ repeat_index }}',
                    content: 'Iteration {{ repeat_index }}',
                    start: '{{ step_list[0].start_time }}',
                    end: '{{ step_list[-1].end_time }}',
                    className: 'script {{ step_list[0].status or '' }}',
                    group: 'all',
                },
                {% endif %}
                {% for step in step_list %}
                    {% if step.method_name == "stop" %}
                        {
                            id: 'stop-{{ step.id }}',
                            content: '🛑 Stop',
                            start: '{{ step.start_time }}',
                            type: 'point',
                            className: 'stop',
                            group: 'all',
                            title: 'Stop event at {{ step.start_time }}'
                        },
                    {% endif %}
                {% endfor %}
            {% endfor %}

            {% if grouped.cleanup %}
                {
                    id: 'cleanup',
                    content: 'Cleanup ',
                    start: '{{ grouped.cleanup[0].start_time }}',
                    end: '{{ grouped.cleanup[-1].end_time }}',
                    className: 'cleanup',
                    group: 'all',
                },
            {% endif %}
        ];

        var timeline = new vis.Timeline(container, items, groups, {
            clickToUse: true,
            stack: false,        // keep items from overlapping vertically
            horizontalScroll: true,
            zoomKey: 'ctrlKey'
        });
        // the default window is the week around today; open on the run itself
        timeline.fit({ animation: false });

        timeline.on('select', function (props) {
            const id = props.items[0];
            if (id && id.startsWith('iter')) {
                const card = document.getElementById('card-' + id);
                if (card) {
                    const yOffset = -80;
                    const y = card.getBoundingClientRect().top + window.pageYOffset + yOffset;
                    window.scrollTo({ top: y, behavior: 'smooth' });
                }
            }
        });

        // ---------------- Phase Data Plot ----------------
        const loadingSpinner = document.querySelector('.loading-spinner');
        const select = document.getElementById('output-select');

        loadingSpinner.style.display = 'block';


        fetch("{{ url_for('data.workflow_phase_data', workflow_id=workflow.id) }}")
            .then(res => {
                if (!res.ok) {
                    throw new Error(`HTTP error! status: ${res.status}`);
                }
                return res.json();
            })
            .then(data => {
                loadingSpinner.style.display = 'none';

                const repeatKeys = Object.keys(data).sort((a, b) => a - b);
                const dataSection = document.querySelector('.data-section'); // Get the entire section

                if (!repeatKeys.length) {
                    // Hide the entire data section if no data
                    dataSection.style.display = 'none';
                    return;
                }

                const allKeys = new Set();
                repeatKeys.forEach(k => {
                    Object.keys(data[k]).forEach(key => allKeys.add(key));
                });

                // If no keys found, also hide the section
                if (allKeys.size === 0) {
                    dataSection.style.display = 'none';
                    return;
                }

                // Show the data section since we have data
                dataSection.style.display = 'block';

                // Clear and populate select options
                select.innerHTML = '';
                allKeys.forEach(k => {
                    const option = new Option(k, k);
                    select.appendChild(option);
                });

                function plotData(selectedKey) {
                    const x = [];
                    const y = [];

                    repeatKeys.forEach(repeat_index => {
                        const arr = data[repeat_index][selectedKey];
                        if (arr && arr.length) {
                            const batchCount = arr.length;

                            arr.forEach((d, batchIdx) => {
                                // Compute fractional x for batch indexing: e.g. 1.1, 1.2, 1.3
                                const xVal = parseFloat(repeat_index) + (batchIdx + 1) / (batchCount + 1);

                                if (typeof d === 'object' && d.x !== undefined && d.y !== undefined) {
                                    x.push(xVal);
                                    y.push(d.y);
                                } else if (typeof d === 'number') {
                                    x.push(xVal);
                                    y.push(d);
                                }
                            });
                        }
                    });

                    const trace = {
                        x: x,
                        y: y,
                        mode: 'markers',
                        name: selectedKey,
                        marker: { size: 8 },
                        line: { shape: 'linear', width: 1 },
                    };

                    const layout = {
                        xaxis: {
                            title: 'Trial (Batch Sub-index)',
                            gridcolor: '#e9ecef',
                            tickvals: repeatKeys.map(k => parseFloat(k)),
                            ticktext: repeatKeys.map(k => `Trial ${k}`),
                        },
                        yaxis: {
                            title: selectedKey,
                            gridcolor: '#e9ecef'
                        },
                        plot_bgcolor: '#ffffff',
                        paper_bgcolor: '#ffffff',
                        margin: { t: 60, r: 40, b: 60, l: 80 }
                    };

                    const config = {
                        responsive: true,
                        displayModeBar: true,
                        modeBarButtonsToRemove: ['lasso2d', 'select2d']
                    };

                    Plotly.newPlot('phase-plot', [trace], layout, config);
                }

                select.addEventListener('change', e => {
                    if (e.target.value) {
                        plotData(e.target.value);
                    }
                });

                // Plot first available data type
                if (allKeys.size > 0) {
                    plotData([...allKeys][0]);
                }
            })
            .catch(error => {
                loadingSpinner.style.display = 'none';
                console.error('Error loading phase data:', error);

                const dataSection = document.querySelector('.data-section');
                // Hide the section on error as well
                dataSection.style.display = 'none';
            });

        // ---------------- Live Data CSV ----------------
        window.downloadDynamicCSV = function(event, url) {
            event.preventDefault();
            fetch(url)
                .then(response => {
                    if (response.status === 404) {
                        alert("No data available yet.");
                    } else if (response.ok) {
                        window.location.href = url; // Trigger normal browser download
                    } else {
                        alert("Error downloading data.");
                    }
                })
                .catch(err => {
                    console.error(err);
                    alert("Error downloading data.");
                });
            return false;
        };

        // ---------------- Optimizer Plots ----------------
        fetch("{{ url_for('data.get_optimizer_plots', workflow_id=workflow.id) }}")
            .then(res => res.ok ? res.json() : Promise.reject(res))
            .then(data => {
                const section = document.getElementById('optimizer-plots-section');
                const container = document.getElementById('optimizerPlotsContainer');
                section.classList.remove('d-none');
                
                if (data.type === 'image') {
                    // Nimo PNG image
                    container.innerHTML = `<img src="data:image/png;base64,${data.data}" class="img-fluid rounded shadow-sm d-block mx-auto" style="max-width:100%;">`;
                } else if (data.type === 'html') {
                    // Ax HTML snippets
                    for (const [plotName, htmlSnippet] of Object.entries(data.plots)) {
                        const plotWrapper = document.createElement('div');
                        plotWrapper.className = "card mb-3";
                        
                        const cardHeader = document.createElement('div');
                        cardHeader.className = "card-header fw-bold";
                        cardHeader.innerText = plotName;
                        
                        const cardBody = document.createElement('div');
                        cardBody.className = "card-body overflow-auto d-flex";
                        // Ax figures have fixed widths. Plain centering would push a figure wider
                        // than the card past its left edge, where it can't be scrolled to;
                        // "safe" left-aligns it instead (older browsers ignore this and left-align).
                        cardBody.style.justifyContent = "safe center";
                        cardBody.innerHTML = htmlSnippet;
                        
                        plotWrapper.appendChild(cardHeader);
                        plotWrapper.appendChild(cardBody);
                        container.appendChild(plotWrapper);
                        
                        Array.from(cardBody.querySelectorAll("script")).forEach(oldScript => {
                            const newScript = document.createElement("script");
                            Array.from(oldScript.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value));
                            newScript.appendChild(document.createTextNode(oldScript.innerHTML));
                            oldScript.parentNode.replaceChild(newScript, oldScript);
                        });
                    }
                }
            })
            .catch(err => console.log("No optimizer plots for this run"));

    });
</script>

{% endblock %}