{% extends "dashboard/base.html" %}
{% block title %}1Hz Viewer — Run #{{ run.id }} — {{ sim.name }}{% endblock %}

{% block content %}

<div style="position: absolute; top: 0.9rem; left: 19rem; z-index: 1000;">
    <h2 style="color: #ffffff; font-weight: 100; font-size: 1.1rem; line-height:1.4;">
        <a href="{% url 'dashboard-simulations' %}" style="color: #ffffff; text-decoration: none;">Simulation</a>&ensp;&gt;&ensp;
        <a href="{% url 'dashboard-simulation-detail' sim_id=sim.id %}" style="color: #ffffff; text-decoration: none;">{{ sim.name }}</a>&ensp;&gt;&ensp;
        Run #{{ run.id }} 1Hz Viewer
    </h2>
</div>

<style>
.hz-page { display: flex; flex-direction: column; gap: 1rem; }
.hz-header-card {
    background: linear-gradient(135deg, #136b75 0%, #22a6b3 100%);
    border-radius: 10px;
    padding: 1.1rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: flex-start;
    box-shadow: 0 4px 16px rgba(34,166,179,0.25);
}
.hz-meta { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.hz-meta-item { display: flex; flex-direction: column; gap: 0.15rem; }
.hz-meta-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #d0f0f3;
}
.hz-meta-value { font-size: 0.9rem; font-weight: 500; color: #ffffff; }
.hz-actions {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 10rem;
}
.hz-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: rgba(255,255,255,0.18);
    border: 1.5px solid rgba(255,255,255,0.45);
    border-radius: 8px;
    padding: 0.45rem 1rem;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
}
.hz-action-btn:hover { background: rgba(255,255,255,0.28); color: #fff; }
.hz-action-btn .material-symbols-outlined { font-size: 1rem; padding: 0 !important; }
.hz-note {
    width: 100%;
    border-top: 1px solid rgba(255,255,255,0.18);
    padding-top: 0.55rem;
    font-size: 0.8rem;
    color: #f4fdff;
}
.hz-chart-card {
    background: #fff;
    border: 1.5px solid #b2e0e4;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(34,166,179,0.08);
    overflow: hidden;
}
.hz-chart-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1.05rem;
    background: #e8f8f9;
    border-bottom: 1.5px solid #b2e0e4;
    font-size: 0.88rem;
    font-weight: 600;
    color: #136b75;
}
.hz-chart-header .material-symbols-outlined { font-size: 1rem; padding: 0 !important; }
.hz-chart-body { padding: 0.4rem 0.2rem 0.1rem; }
.hz-empty {
    background: #fff;
    border: 1.5px dashed #b2e0e4;
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    color: #5f8a8f;
    font-size: 0.84rem;
}
</style>

<script src="https://cdn.plot.ly/plotly-2.32.0.min.js" charset="utf-8"></script>

<div class="hz-page">
    <div class="hz-header-card">
        <div class="hz-meta">
            <div class="hz-meta-item">
                <span class="hz-meta-label">Run</span>
                <span class="hz-meta-value">#{{ run.id }}</span>
            </div>
            <div class="hz-meta-item">
                <span class="hz-meta-label">Samples Shown</span>
                <span class="hz-meta-value" id="hz-points-meta">{{ points_shown }} / {{ points_total }}</span>
            </div>
            <div class="hz-meta-item">
                <span class="hz-meta-label">Channels</span>
                <span class="hz-meta-value">{{ plot_series|length }}</span>
            </div>
            <div class="hz-meta-item">
                <span class="hz-meta-label">Visible Window</span>
                <span class="hz-meta-value" id="hz-window-meta">{{ window_points }} samples</span>
            </div>
            <div class="hz-meta-item">
                <span class="hz-meta-label">Time Window</span>
                <span class="hz-meta-value">Hour {{ start_hour }} to {{ end_hour }}</span>
            </div>
            <div class="hz-meta-item">
                <span class="hz-meta-label">File</span>
                <span class="hz-meta-value">{{ output_name }}</span>
            </div>
        </div>
        <div class="hz-actions">
            <a class="hz-action-btn" href="{% url 'dashboard-simulation-detail' sim_id=sim.id %}">
                <span class="material-symbols-outlined">arrow_back</span>Back to Runs
            </a>
            <a class="hz-action-btn" href="{% url 'dashboard-download-run-output' sim_id=sim.id run_id=run.id %}">
                <span class="material-symbols-outlined">download</span>Download HDF5
            </a>
        </div>
        <div class="hz-note">
            <span id="hz-note-text">
            {% if downsample_step > 1 %}
            Showing every {{ downsample_step }}th sample for browser performance. Full-resolution data remains in the HDF5 output.
            {% else %}
            Showing the full 1Hz series for the selected default channels.
            {% endif %}
            </span>
        </div>
    </div>

    {% if plot_series %}
        {% for series in plot_series %}
        <section class="hz-chart-card">
            <div class="hz-chart-header">
                <span class="material-symbols-outlined">monitoring</span>{{ series.key }}
            </div>
            <div class="hz-chart-body">
                <div id="hz-chart-{{ forloop.counter0 }}" style="height:280px;"></div>
            </div>
        </section>
        {% endfor %}
    {% else %}
    <div class="hz-empty">
        No plottable 1Hz channels were found. Available datasets: {{ available_keys|join:", " }}
    </div>
    {% endif %}
</div>

{{ plot_x_values|json_script:"run-1hz-x-values" }}
{{ plot_series|json_script:"run-1hz-series" }}
{{ plot_keys|json_script:"run-1hz-plot-keys" }}

<script>
(function() {
    var xValues = JSON.parse(document.getElementById('run-1hz-x-values').textContent);
    var seriesData = JSON.parse(document.getElementById('run-1hz-series').textContent);
    var plotKeys = JSON.parse(document.getElementById('run-1hz-plot-keys').textContent);
    var pointsMeta = document.getElementById('hz-points-meta');
    var windowMeta = document.getElementById('hz-window-meta');
    var noteText = document.getElementById('hz-note-text');
    var dataUrl = "{% url 'dashboard-run-1hz-data' sim_id=sim.id run_id=run.id %}";
    var suppressRelayout = false;
    var pendingTimer = null;
    var activeRequestId = 0;

    function buildLayout(seriesKey, rangeStart, rangeEnd) {
        var xaxis = {
            title: 'Time',
            type: 'date',
            showgrid: true,
            gridcolor: '#e8f8f9'
        };
        if (rangeStart && rangeEnd) {
            xaxis.range = [rangeStart, rangeEnd];
        }
        return {
            margin: { l: 55, r: 20, t: 20, b: 45 },
            paper_bgcolor: '#ffffff',
            plot_bgcolor: '#ffffff',
            xaxis: xaxis,
            yaxis: {
                title: seriesKey,
                showgrid: true,
                gridcolor: '#e8f8f9',
                zerolinecolor: '#b2e0e4'
            },
            showlegend: false,
        };
    }

    function renderPayload(payload) {
        suppressRelayout = true;
        var renderPromises = [];

        plotKeys.forEach(function(key, index) {
            var plotDiv = document.getElementById('hz-chart-' + index);
            if (!plotDiv) return;
            var series = payload.series.find(function(item) { return item.key === key; }) || { key: key, y: [] };
            renderPromises.push(Plotly.react(plotDiv, [{
                x: payload.x_values,
                y: series.y,
                type: 'scattergl',
                mode: 'lines',
                name: key,
                line: { color: '#136b75', width: 1.2 }
            }], buildLayout(key, payload.window_start, payload.window_end), {
                responsive: true,
                displaylogo: false,
                modeBarButtonsToRemove: ['select2d', 'lasso2d']
            }));
        });

        Promise.all(renderPromises).finally(function() {
            suppressRelayout = false;
        });

        if (pointsMeta) {
            pointsMeta.textContent = payload.points_shown + ' / ' + payload.points_total;
        }
        if (windowMeta) {
            windowMeta.textContent = payload.window_points + ' samples';
        }
        if (noteText) {
            noteText.textContent = payload.is_full_resolution
                ? 'Showing the full 1Hz series for the current zoom window.'
                : 'Showing every ' + payload.downsample_step + 'th sample for this zoom window. Zoom further to reach full 1Hz resolution.';
        }
    }

    function requestWindow(rangeStart, rangeEnd) {
        activeRequestId += 1;
        var requestId = activeRequestId;
        var url = new URL(dataUrl, window.location.origin);
        if (rangeStart && rangeEnd) {
            url.searchParams.set('start', rangeStart);
            url.searchParams.set('end', rangeEnd);
        }

        fetch(url.toString(), { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function(response) {
                if (!response.ok) {
                    throw new Error('Failed to load 1Hz data.');
                }
                return response.json();
            })
            .then(function(payload) {
                if (requestId !== activeRequestId) return;
                renderPayload(payload);
            })
            .catch(function() {
                if (noteText) {
                    noteText.textContent = 'Could not refresh the zoomed 1Hz data. Reset the axes or reload the page.';
                }
            });
    }

    function scheduleWindowRequest(rangeStart, rangeEnd) {
        if (pendingTimer) {
            clearTimeout(pendingTimer);
        }
        pendingTimer = setTimeout(function() {
            requestWindow(rangeStart, rangeEnd);
        }, 120);
    }

    seriesData.forEach(function(series, index) {
        var plotDiv = document.getElementById('hz-chart-' + index);
        if (!plotDiv) return;
        Plotly.newPlot(plotDiv, [{
            x: xValues,
            y: series.y,
            type: 'scattergl',
            mode: 'lines',
            name: series.key,
            line: { color: '#136b75', width: 1.2 }
        }], buildLayout(series.key, '{{ window_start }}', '{{ window_end }}'), {
            responsive: true,
            displaylogo: false,
            modeBarButtonsToRemove: ['select2d', 'lasso2d']
        }).then(function() {
            plotDiv.on('plotly_relayout', function(eventData) {
                if (suppressRelayout) return;
                if (eventData['xaxis.autorange']) {
                    scheduleWindowRequest(null, null);
                    return;
                }
                if (eventData['xaxis.range[0]'] && eventData['xaxis.range[1]']) {
                    scheduleWindowRequest(eventData['xaxis.range[0]'], eventData['xaxis.range[1]']);
                }
            });
        });
    });
})();
</script>

{% endblock %}