{% extends "base.html" %}
{% load static %}
{% load custom_tags_and_filters %}
{% block extrahead %}
    <script type="text/javascript" src="{% static 'NEMO_monitors/chart.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'NEMO_monitors/chartjs-adapter-moment.js' %}"></script>
    <script type="text/javascript" src="{% static 'NEMO_monitors/daterangepicker.js' %}"></script>
    <link rel="stylesheet" type="text/css" href="{% static 'NEMO_monitors/daterangepicker.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'NEMO_monitors/monitors.css' %}" />
{% endblock %}
{% block title %}{{ monitor.name }} data{% endblock %}
{% block content %}
    <div class="well well-monitors-dashboard">
        <ol class="breadcrumb breadcrumb-monitors-dashboard">
            <li>
                <a href="{% url 'monitors' %}">Dashboard</a>
            </li>
            {% if tool_category %}
                {% for ancestor in tool_category.ancestors %}
                    <li>
                        <a href="{% url 'monitors_category' ancestor.path %}">{{ ancestor.name }}</a>
                    </li>
                {% endfor %}
                <li>
                    <a href="{% url 'monitors_category' tool_category.path %}">{{ tool_category.name }}</a>
                </li>
            {% endif %}
            <li>
                <a href="{% url 'monitors_for_tool' monitor.tool.id %}">{{ monitor.tool.name }}</a>
            </li>
            <li class="active">{{ monitor.name }}</li>
        </ol>
        {% if monitor.description %}
            <div class="monitor-description">{{ monitor.description_html }}</div>
        {% endif %}
        <div class="panel-body">
            {% if messages %}
                <div class="monitor-messages" style="margin-bottom: 15px;">
                    {% for message in messages %}
                        <div class="alert {% if 'error' in message.tags %}alert-danger{% elif 'warning' in message.tags %}alert-warning{% elif 'success' in message.tags %}alert-success{% else %}alert-info{% endif %}"
                             role="alert">
                            {{ message }}
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
            <div style="margin-bottom: 15px">
                <div class="form-inline">
                    <label class="control-label" for="start">Date range:</label>
                    <div class="input-group" style="margin-right: 10px">
                        <input class="form-control text-center" type="text" onchange="refresh_page()" id="start" name="start">
                        <div id="picker-container"
                             class="invisible"
                             style="float: left;
                                    position: relative;
                                    height: 0;
                                    width: 100%"></div>
                        <span class="daterange-calendar input-group-btn">
                            <button type="button" class="btn btn-default btn-input-white" onclick="open_daterange_picker()">
                                <i class="glyphicon glyphicon-calendar"></i>
                            </button>
                        </span>
                    </div>
                    <label class="control-label" for="end" style="margin-right: 10px;">to</label>
                    <div class="input-group" style="margin-right: 5px;">
                        <input class="form-control text-center" type="text" onchange="refresh_page()" id="end" name="end">
                        <span class="daterange-calendar input-group-btn">
                            <button type="button" class="btn btn-default btn-input-white" onclick="open_daterange_picker()">
                                <i class="glyphicon glyphicon-calendar"></i>
                            </button>
                        </span>
                    </div>
                </div>
            </div>
            <ul class="nav nav-tabs" id="tabs">
                <li class="{% if tab == 'chart' %}active{% endif %}">
                    <a href="#chart-tab">Chart</a>
                </li>
                <li class="{% if tab == 'data' %}active{% endif %}">
                    <a href="#data-tab">Data</a>
                </li>
                <li class="{% if tab == 'alert' %}active{% endif %}">
                    <a href="#alert-tab">Alerts</a>
                </li>
                {% if can_upload %}
                    <li class="{% if tab == 'upload' %}active{% endif %}">
                        <a href="#upload-tab">Upload</a>
                    </li>
                {% endif %}
            </ul>
            <div id="no-monitor-data" class="tab-content panel panel-default panel-tab-content" style="display: none">
                <div class="panel-body">
                    <i>There is no data to display. Try selecting a different date range</i>
                </div>
            </div>
            <div id="monitor-data" class="tab-content panel panel-default panel-tab-content" style="margin-bottom: 0">
                <div class="tab-pane{% if tab == 'chart' %} active{% endif %}" id="chart-tab">
                    <div class="panel-body">
                        <div class="text-right">
                            <div class="form-inline">
                                <label class="control-label" for="chart-step">Display every</label>
                                <input class="form-control input-sm"
                                       id="chart-step"
                                       type="number"
                                       value="{{ chart_step }}"
                                       onchange="refresh_page()"
                                       min="1"
                                       max="1440" />
                                <label class="control-label">data point</label>
                            </div>
                        </div>
                        <div id="column-toggles" style="display:none; margin: 8px 0;"></div>
                        <div>
                            <canvas id="monitor-chart"></canvas>
                        </div>
                    </div>
                </div>
                <div class="tab-pane{% if tab == 'data' %} active{% endif %}" id="data-tab">
                    <div class="panel-body">
                        <div class="text-right">
                            <div>
                                {% url 'export_monitor_data' monitor.id as export_url %}
                                {% button type="export" value="Export" onclick="refresh_page();window.open(get_base_url('"|concat:export_url|concat:"'))" %}
                            </div>
                        </div>
                        <div>
                            <table id="monitor-table" class="table table-bordered table-hover table-striped" style="margin-top: 20px;">
                                <thead id="monitor-table-head">
                                    <tr class="info" style="pointer-events: none;">
                                        <th>Time</th>
                                        <th>Value</th>
                                        <th>Notes</th>
                                        <th>Uploaded by</th>
                                        <th>Uploaded on</th>
                                        <th>Last edited</th>
                                        {% if can_upload %}<th></th>{% endif %}
                                    </tr>
                                </thead>
                                <tbody id="monitor-table-body"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="tab-pane{% if tab == 'alert' %} active{% endif %}" id="alert-tab">
                    <div class="panel-body">
                        {% if can_configure_alerts %}
                            {% include "NEMO_monitors/monitor_alert_config.html" %}
                            <hr />
                        {% endif %}
                        <h4>Alert log</h4>
                        <div id="alert-div"></div>
                    </div>
                </div>
                {% if can_upload %}
                    <div class="tab-pane{% if tab == 'upload' %} active{% endif %}" id="upload-tab">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-5">
                                    <h4>Add a single data point</h4>
                                    <form method="POST" action="{% url 'add_monitor_data' monitor.id %}" class="form-horizontal">
                                        {% csrf_token %}
                                        {% if monitor.columns.exists %}
                                            {% for col in monitor.columns.all %}
                                                <div class="form-group">
                                                    <label class="control-label col-md-4" for="add-col-{{ col.id }}">{{ col.name }}</label>
                                                    <div class="col-md-7">
                                                        {% if col.data_type == "string" %}
                                                            <input class="form-control"
                                                                   type="text"
                                                                   id="add-col-{{ col.id }}"
                                                                   name="col_value_{{ col.id }}" />
                                                        {% elif col.data_type == "integer" %}
                                                            <input class="form-control"
                                                                   type="number"
                                                                   step="1"
                                                                   id="add-col-{{ col.id }}"
                                                                   name="col_value_{{ col.id }}" />
                                                        {% else %}
                                                            <input class="form-control"
                                                                   type="number"
                                                                   step="any"
                                                                   id="add-col-{{ col.id }}"
                                                                   name="col_value_{{ col.id }}" />
                                                        {% endif %}
                                                    </div>
                                                </div>
                                            {% endfor %}
                                            <p class="help-block col-md-offset-4 col-md-7" style="margin-bottom:8px;">
                                                Leave a field blank to omit it from this entry.
                                            </p>
                                        {% else %}
                                            <div class="form-group">
                                                <label class="control-label col-md-4" for="add-value">Value</label>
                                                <div class="col-md-7">
                                                    <input class="form-control"
                                                           type="number"
                                                           step="any"
                                                           id="add-value"
                                                           name="value"
                                                           required />
                                                </div>
                                            </div>
                                        {% endif %}
                                        <div class="form-group">
                                            <label class="control-label col-md-4" for="add-date">Timestamp</label>
                                            <div class="col-md-7">
                                                <input class="form-control"
                                                       type="text"
                                                       id="add-date"
                                                       name="created_date"
                                                       placeholder="leave blank for current time" />
                                                <span class="help-block">e.g. 2026-05-14 12:30 or 05/14/2026 12:30 PM</span>
                                            </div>
                                        </div>
                                        {% if use_legacy_notes %}
                                        <div class="form-group">
                                            <label class="control-label col-md-4" for="add-notes">Notes</label>
                                            <div class="col-md-7">
                                                <textarea class="form-control"
                                                          id="add-notes"
                                                          name="notes"
                                                          rows="2"
                                                          placeholder="Optional — e.g. run issue or context"></textarea>
                                            </div>
                                        </div>
                                        {% endif %}
                                        <div class="form-group">
                                            <div class="col-md-offset-4 col-md-7">
                                                <button type="submit" class="btn btn-success">Add data point</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="col-md-7">
                                    <h4>Bulk upload (CSV)</h4>
                                    <form method="POST"
                                          action="{% url 'upload_monitor_data_csv' monitor.id %}"
                                          enctype="multipart/form-data"
                                          class="form-horizontal">
                                        {% csrf_token %}
                                        {% if monitor.columns.exists %}
                                            <p class="help-block">
                                                This monitor has defined data entry fields. The first row must be a header matching
                                                the field names below. The first column must be the date/timestamp.
                                                Blank cells are skipped. Defined fields:
                                                <strong>{% for col in monitor.columns.all %}{{ col.name }}{% if not forloop.last %}, {% endif %}{% endfor %}</strong>.
                                            </p>
                                        {% else %}
                                            <p class="help-block">
                                                At least two columns: <code>timestamp,value</code>. Optional third column:
                                                <code>notes</code>. Header row is optional. If a note contains commas, wrap that
                                                field in double quotes in the CSV. Supported timestamp formats include
                                                <code>YYYY-MM-DD HH:MM</code>, <code>YYYY-MM-DDTHH:MM:SS</code>, and
                                                <code>MM/DD/YYYY HH:MM</code>.
                                            </p>
                                        {% endif %}
                                        <div class="form-group">
                                            <label class="control-label col-md-3" for="csv-file">CSV file</label>
                                            <div class="col-md-8">
                                                <input type="file" id="csv-file" name="csv_file" accept=".csv,text/csv" />
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-md-3" for="csv-text">or paste CSV</label>
                                            <div class="col-md-8">
                                                <textarea class="form-control"
                                                          id="csv-text"
                                                          name="csv_text"
                                                          rows="6"
                                                          placeholder="2026-05-14 09:00,42.7&#10;2026-05-14 10:00,43.1,probe replaced"></textarea>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-md-offset-3 col-md-8">
                                                <button type="submit" class="btn btn-primary">Upload</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    <script>
        const now_moment_date = moment();
        const can_upload = {% if can_upload %}true{% else %}false{% endif %};
        const csrf_token = '{{ csrf_token }}';

        function switch_tab(e)
        {
            e.preventDefault();
            const target = $(this).attr("href");
            if (!target || target.charAt(0) !== "#")
            {
                return;
            }
            $("#tabs li").removeClass("active");
            $(this).closest("li").addClass("active");
            $("#monitor-data > .tab-pane").removeClass("active");
            $(target).addClass("active");
        }

        let tab_jq = $("#tabs a");
        tab_jq.click(switch_tab);
        tab_jq.click(refresh_page);

        function set_dates(start, end)
        {
            $('#start').val(start.format('{{ datetime_input_js_format }}'));
            if (!end.isSame(now_moment_date))
            {
                $('#end').val(end.format('{{ datetime_input_js_format }}'));
            }
            else
            {
                $('#end').val('now');
            }
            refresh_page();
        }

        const daterange_presets =
        {
            'Last 24 hrs': [moment().subtract(1, 'days'), now_moment_date],
            'Last 72 hrs': [moment().subtract(3, 'days'), now_moment_date],
            'Last 7 Days': [moment().subtract(6, 'days'), now_moment_date],
            'Last 30 Days': [moment().subtract(29, 'days'), now_moment_date],
            'Today': [moment().startOf('day'), moment().endOf('day')],
            'Yesterday': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
            'This Week': [moment().startOf('week'), moment().endOf('week')],
            'Last Week': [moment().subtract(7, 'days').startOf('week'), moment().subtract(7, 'days').endOf('week')],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
            'This Year': [moment().startOf('year'), moment().endOf('year')],
            'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
        };
        {% if data_earliest_unix and data_latest_unix %}
        daterange_presets['All Time'] = [moment.unix({{ data_earliest_unix }}).utc(), moment.unix({{ data_latest_unix }}).utc()];
        {% endif %}

        let daterange_picker = $('#picker-container').daterangepicker(
        {
            alwaysShowCalendars: true,
            linkedCalendars: false,
            showDropdowns: true,
            timePicker: true,
            timePickerIncrement: 1,
            autoUpdateInput: false,
            ranges: daterange_presets,
        }, set_dates);

        function get_start_end_dates()
        {
            const start = moment.utc($("#start").val(), '{{ datetime_input_js_format }}').unix();
            const end_input = $("#end").val();
            const end = end_input && end_input !== 'now' ? moment.utc(end_input, '{{ datetime_input_js_format }}').unix() : '';
            return [start, end];
        }

        function get_base_url(url)
        {
            const chartStep = $("#chart-step").val() || 1;
            const dates = get_start_end_dates();
            const base_url = url ? url : $("#data-tab").hasClass("active") ? "{% url 'monitor_details' monitor.id 'data' %}" : $("#chart-tab").hasClass("active") ? "{% url 'monitor_details' monitor.id 'chart' %}" : $("#alert-tab").hasClass("active") ? "{% url 'monitor_details' monitor.id 'alert' %}" : "{% url 'monitor_details' monitor.id 'upload' %}";
            return base_url + "?start=" + dates[0] + "&end=" + dates[1] + "&chart_step=" + chartStep;
        }

        function filter_every_x_point(data)
        {
            let chartStep = $("#chart-step").val() || 1;
            return data.filter((element, index) => {return index % chartStep === 0;});
        }

        function build_xy_pairs(labels, values)
        {
            const filteredLabels = filter_every_x_point(labels || []);
            const filteredValues = filter_every_x_point(values || []);
            const pairs = [];
            const len = Math.min(filteredLabels.length, filteredValues.length);
            for (let i = 0; i < len; i++) {
                const y = filteredValues[i];
                if (y === null || y === undefined || y === '') {
                    continue;
                }
                pairs.push({x: filteredLabels[i], y: y});
            }
            return pairs;
        }

        function build_constant_xy_line(labels, yValue)
        {
            const filteredLabels = filter_every_x_point(labels || []);
            return filteredLabels.map(function(label) {
                return {x: label, y: yValue};
            });
        }

        // 10-color palette for multi-column series
        const SERIES_COLORS = [
            'rgb(75, 192, 192)',
            'rgb(255, 99, 132)',
            'rgb(54, 162, 235)',
            'rgb(255, 159, 64)',
            'rgb(153, 102, 255)',
            'rgb(255, 205, 86)',
            'rgb(201, 203, 207)',
            'rgb(0, 128, 0)',
            'rgb(220, 20, 60)',
            'rgb(0, 0, 205)',
        ];

        const monitorChart = $("#monitor-chart");
        let monitorChartObject = null;
        const MONITOR_TIME_FORMATS = ['MM/DD/YYYY HH:mm:ss', 'M/D/YYYY HH:mm:ss'];
        function column_unit(col)
        {
            return (col.unit_label || '').trim();
        }

        function y_axis_title_for_unit(unit)
        {
            return unit || '';
        }

        function build_chart_scales(datasets)
        {
            const unitToAxisId = {};
            const unitOrder = [];
            datasets.forEach(function(ds) {
                const unitKey = ds._unit || '';
                if (unitToAxisId[unitKey] === undefined) {
                    const axisId = unitOrder.length === 0 ? 'y' : 'y' + unitOrder.length;
                    unitToAxisId[unitKey] = axisId;
                    unitOrder.push(unitKey);
                }
                ds.yAxisID = unitToAxisId[unitKey];
            });

            const scales = {
                x: {
                    type: 'time',
                    time: {
                        parser: function(value) {
                            if (value === null || value === undefined) {
                                return null;
                            }
                            const parsed = moment(value, MONITOR_TIME_FORMATS, true);
                            return parsed.isValid() ? parsed.valueOf() : moment(value).valueOf();
                        },
                        tooltipFormat: 'll LTS',
                    },
                }
            };

            unitOrder.forEach(function(unitKey, idx) {
                const axisId = unitToAxisId[unitKey];
                const titleText = y_axis_title_for_unit(unitKey);
                scales[axisId] = {
                    type: 'linear',
                    display: false,
                    position: idx % 2 === 0 ? 'left' : 'right',
                    title: {
                        display: !!titleText,
                        text: titleText,
                    },
                    grid: {
                        drawOnChartArea: idx === 0,
                    },
                };
            });

            return scales;
        }

        function sync_y_axis_visibility(chart)
        {
            if (!chart) {
                return;
            }
            const visibleAxisIds = new Set();
            chart.data.datasets.forEach(function(ds) {
                if (!ds.hidden) {
                    visibleAxisIds.add(ds.yAxisID);
                }
            });
            Object.keys(chart.options.scales).forEach(function(scaleId) {
                if (scaleId === 'x') {
                    return;
                }
                const scale = chart.options.scales[scaleId];
                const hasVisible = visibleAxisIds.has(scaleId);
                scale.display = hasVisible;
                if (scale.title) {
                    scale.title.display = hasVisible && !!scale.title.text;
                }
            });
            chart.update();
        }

        function build_datasets(data)
        {
            // data.columns: [{name, type, unit_label?, control_limits?}, ...]
            // data.series: {colName: {labels, data, ...}, ...}
            const columns = data.columns || [{name: '', type: 'float'}];
            const series = data.series || {'': data};
            const isLegacy = columns.length === 1 && columns[0].name === '';
            let datasets = [];
            let colorIdx = 0;
            for (let i = 0; i < columns.length; i++) {
                const col = columns[i];
                if (col.type === 'string') continue;  // not plottable
                const bucket = series[col.name] || {};
                const label = isLegacy ? '{{ monitor.name|escapejs }}' : col.name;
                const color = SERIES_COLORS[colorIdx % SERIES_COLORS.length];
                colorIdx++;
                const seriesLabels = bucket.labels || [];
                datasets.push({
                    label: label,
                    borderColor: color,
                    backgroundColor: color,
                    data: build_xy_pairs(seriesLabels, bucket.data || []),
                    _labels: filter_every_x_point(seriesLabels),
                    _col_name: col.name,
                    _unit: column_unit(col),
                    hidden: colorIdx > 1,  // only the first plottable column is visible on load
                });
            }
            return datasets;
        }

        function build_control_limit_datasets(data, xLabels, seriesDatasets)
        {
            const columns = data.columns || [];
            const series = data.series || {};
            const visibilityByCol = {};
            seriesDatasets.forEach(function(ds) {
                if (!ds._is_limit_line) {
                    visibilityByCol[ds._col_name] = ds.hidden;
                }
            });
            const limitDatasets = [];
            const limitStyles = [
                {key: 'centerline', label: 'Centerline', color: 'rgb(90, 90, 90)'},
                {key: 'ucl', label: 'UCL', color: 'rgb(255, 140, 0)'},
                {key: 'lcl', label: 'LCL', color: 'rgb(70, 130, 220)'},
            ];
            if (!xLabels || xLabels.length === 0) {
                return limitDatasets;
            }
            columns.forEach(function(col) {
                const limits = col.control_limits;
                if (!limits) {
                    return;
                }
                const hidden = visibilityByCol[col.name] === true;
                const unit = column_unit(col);
                const prefix = col.name ? col.name + ' ' : '';
                const bucket = series[col.name] || {};
                const columnLabels = (bucket.labels && bucket.labels.length) ? bucket.labels : xLabels;
                limitStyles.forEach(function(style) {
                    if (limits[style.key] === undefined || limits[style.key] === null) {
                        return;
                    }
                    const lineData = build_constant_xy_line(columnLabels, limits[style.key]);
                    if (!lineData.length) {
                        return;
                    }
                    limitDatasets.push({
                        label: prefix + style.label,
                        borderColor: style.color,
                        backgroundColor: style.color,
                        data: lineData,
                        borderDash: [8, 4],
                        borderWidth: 2,
                        pointRadius: 0,
                        pointHoverRadius: 0,
                        fill: false,
                        _col_name: col.name,
                        _unit: unit,
                        _is_limit_line: true,
                        _limit_kind: style.key,
                        hidden: hidden,
                    });
                });
            });
            return limitDatasets;
        }

        function set_column_visibility(chart, colName, visible)
        {
            chart.data.datasets.forEach(function(ds) {
                if (ds._col_name === colName && !ds._is_limit_line) {
                    ds.hidden = !visible;
                }
            });
        }

        function set_limit_visibility(chart, colName, limitKind, visible)
        {
            chart.data.datasets.forEach(function(ds) {
                if (ds._is_limit_line && ds._col_name === colName && ds._limit_kind === limitKind) {
                    ds.hidden = !visible;
                }
            });
            chart.update();
        }

        function append_toggle_checkbox($toggles, id, ds, onChange)
        {
            const swatchStyle = ds._is_limit_line
                ? 'display:inline-block;width:18px;height:0;border-top:2px dashed ' + ds.borderColor + ';margin-right:4px;vertical-align:middle;'
                : 'display:inline-block;width:12px;height:12px;border-radius:50%;background:' + ds.borderColor + ';margin-right:4px;vertical-align:middle;';
            const swatch = '<span style="' + swatchStyle + '"></span>';
            const cb = $('<input type="checkbox" style="margin-right:4px;vertical-align:middle;" />')
                .prop('checked', !ds.hidden)
                .attr('id', id)
                .on('change', onChange);
            const label = $('<label style="margin-right:12px;font-weight:normal;cursor:pointer;"></label>')
                .attr('for', id)
                .append(cb)
                .append(swatch)
                .append(document.createTextNode(ds.label));
            $toggles.append(label);
        }

        function update_column_toggles(datasets)
        {
            const $toggles = $('#column-toggles');
            const seriesDatasets = datasets.filter(function(ds) { return !ds._is_limit_line; });
            const limitDatasets = datasets.filter(function(ds) { return ds._is_limit_line; });
            if (seriesDatasets.length <= 1 && limitDatasets.length === 0) {
                $toggles.hide().empty();
                return;
            }
            $toggles.empty();
            seriesDatasets.forEach(function(ds, idx) {
                append_toggle_checkbox($toggles, 'toggle-col-' + idx, ds, function() {
                    if (monitorChartObject) {
                        set_column_visibility(monitorChartObject, ds._col_name, this.checked);
                        sync_y_axis_visibility(monitorChartObject);
                    }
                });
            });
            limitDatasets.forEach(function(ds, idx) {
                append_toggle_checkbox($toggles, 'toggle-limit-' + idx, ds, function() {
                    if (monitorChartObject) {
                        set_limit_visibility(monitorChartObject, ds._col_name, ds._limit_kind, this.checked);
                    }
                });
            });
            $toggles.show();
        }

        function update_chart(data)
        {
            const columns = data.columns || [{name: '', type: 'float'}];
            const series = data.series || {'': data};
            const isLegacy = columns.length === 1 && columns[0].name === '';

            // Compute shared time labels (union of all plottable columns' labels, or first column's)
            let allLabels = [];
            if (isLegacy) {
                allLabels = filter_every_x_point((series[''] || data).labels || []);
            } else {
                // Use the first plottable column's labels as the x-axis (they all share the same dates)
                for (let i = 0; i < columns.length; i++) {
                    if (columns[i].type !== 'string') {
                        allLabels = filter_every_x_point((series[columns[i].name] || {}).labels || []);
                        break;
                    }
                }
            }

            let datasets = build_datasets(data);
            const limitDatasets = build_control_limit_datasets(data, allLabels, datasets);
            datasets = datasets.concat(limitDatasets);
            const chartScales = build_chart_scales(datasets);
            update_column_toggles(datasets);

            let ctx = monitorChart[0].getContext("2d");
            if (monitorChartObject) monitorChartObject.destroy();
            monitorChartObject = new Chart(ctx,
                {
                type: 'line',
                data:
                {
                    datasets: datasets,
                },
                options:
                {
                    parsing: true,
                    scales: chartScales,
                    responsive: true,
                    plugins: {
                        legend: {
                            display: false,
                        },
                        tooltip: {
                            filter: function(tooltipItem) {
                                const ds = tooltipItem.chart.data.datasets[tooltipItem.datasetIndex];
                                return !ds || !ds._is_limit_line;
                            },
                        },
                        title: {
                            display: true,
                            text: '{{ monitor.name|escapejs }} Chart',
                        },
                    },
                    animation:
                    {
                        duration: 0
                    },
                    datasets:
                    {
                        line:
                        {
                            borderWidth: 1,
                            pointRadius: 2
                        }
                    }
                }
            });
            sync_y_axis_visibility(monitorChartObject);
        }

        function escape_html(str)
        {
            return $('<div>').text(str === null || str === undefined ? '' : str).html();
        }

        // Stores colData arrays keyed by row index for multi-column edit/delete
        let _multiColRowData = {};

        const LEGACY_VALUE_LABEL = 'Value';

        function compare_monitor_times_desc(a, b)
        {
            const ma = moment(a, MONITOR_TIME_FORMATS, true);
            const mb = moment(b, MONITOR_TIME_FORMATS, true);
            if (ma.isValid() && mb.isValid())
            {
                return mb.valueOf() - ma.valueOf();
            }
            return b.localeCompare(a);
        }

        function render_row_legacy(bucket, i)
        {
            const id = (bucket.ids || [])[i] || '';
            const time = escape_html((bucket.labels || [])[i] || '');
            const raw_val = (bucket.data || [])[i];
            const string_val = (bucket.string_data || [])[i] || '';
            const display_val = escape_html(raw_val !== null && raw_val !== undefined ? raw_val : string_val);
            const created_by = escape_html((bucket.created_by || [])[i] || '');
            const created_on = escape_html((bucket.created_on || [])[i] || '');
            const updated_on = escape_html((bucket.updated_on || [])[i] || '');
            const notes = escape_html((bucket.notes || [])[i] || '');
            let actions = '';
            if (can_upload)
            {
                actions = '<td class="text-right" style="white-space:nowrap;">'
                    + '<button class="btn btn-default btn-xs js-edit" type="button">Edit</button> '
                    + '<button class="btn btn-danger btn-xs js-delete" type="button">Delete</button>'
                    + '</td>';
            }
            return '<tr data-id="' + id + '" data-value="' + escape_html(raw_val !== null && raw_val !== undefined ? String(raw_val) : '') + '" data-time="' + time + '">'
                + '<td class="cell-time">' + time + '</td>'
                + '<td class="cell-value">' + display_val + '</td>'
                + '<td class="cell-notes monitor-data-notes">' + notes + '</td>'
                + '<td>' + created_by + '</td>'
                + '<td>' + created_on + '</td>'
                + '<td>' + updated_on + '</td>'
                + actions
                + '</tr>';
        }

        function update_table(data)
        {
            window._lastChartData = data;
            const columns = data.columns || [{name: '', type: 'float'}];
            const series = data.series || {'': data};
            const isLegacy = columns.length === 1 && columns[0].name === '';
            const hasNotesField = columns.some(function(c) { return (c.name || '').toLowerCase() === 'notes'; });
            _multiColRowData = {};

            if (!isLegacy)
            {
                // Multi-column pivoted mode: one table row per timestamp
                // Pivot: timestamp -> { colName -> data-point }
                const groups = {};
                const timeOrder = [];
                for (let c = 0; c < columns.length; c++)
                {
                    const col = columns[c];
                    const bucket = series[col.name] || {};
                    const labels = bucket.labels || [];
                    for (let i = 0; i < labels.length; i++)
                    {
                        const ts = labels[i];
                        if (!groups[ts])
                        {
                            groups[ts] = {};
                            timeOrder.push(ts);
                        }
                        groups[ts][col.name] = {
                            id: (bucket.ids || [])[i],
                            value: (bucket.data || [])[i],
                            string_value: (bucket.string_data || [])[i] || '',
                            notes: (bucket.notes || [])[i] || '',
                            created_by: (bucket.created_by || [])[i] || '',
                            created_on: (bucket.created_on || [])[i] || '',
                            updated_on: (bucket.updated_on || [])[i] || '',
                        };
                    }
                }
                timeOrder.sort(compare_monitor_times_desc);

                // Rebuild header with one <th> per column
                let headerHtml = '<tr class="info" style="pointer-events: none;"><th>Time</th>';
                for (let c = 0; c < columns.length; c++)
                {
                    headerHtml += '<th>' + escape_html(columns[c].name) + '</th>';
                }
                if (!hasNotesField) headerHtml += '<th>Notes</th>';
                headerHtml += '<th>Uploaded by</th><th>Uploaded on</th><th>Last edited</th>';
                if (can_upload) headerHtml += '<th></th>';
                headerHtml += '</tr>';
                $('#monitor-table-head').html(headerHtml);

                // Build pivoted rows
                let rows = '';
                for (let ti = 0; ti < timeOrder.length; ti++)
                {
                    const ts = timeOrder[ti];
                    const group = groups[ts];
                    const allIds = [];
                    const colData = [];
                    let shared_notes = '', created_by = '', created_on = '', updated_on = '';

                    for (let c = 0; c < columns.length; c++)
                    {
                        const col = columns[c];
                        const dp = group[col.name];
                        if (dp)
                        {
                            allIds.push(dp.id);
                            colData.push({ id: dp.id, name: col.name, type: col.type, value: dp.value, string_value: dp.string_value, notes: dp.notes });
                            if (!shared_notes && dp.notes) shared_notes = dp.notes;
                            if (!created_by) created_by = dp.created_by;
                            if (!created_on) created_on = dp.created_on;
                            if (!updated_on) updated_on = dp.updated_on;
                        }
                        else
                        {
                            colData.push(null);
                        }
                    }
                    _multiColRowData[ti] = colData;

                    let valueCells = '';
                    for (let c = 0; c < columns.length; c++)
                    {
                        const dp = colData[c];
                        if (dp !== null)
                        {
                            const raw = dp.value !== null && dp.value !== undefined ? dp.value : dp.string_value;
                            valueCells += '<td>' + escape_html(raw !== null && raw !== undefined ? String(raw) : '') + '</td>';
                        }
                        else
                        {
                            valueCells += '<td class="text-muted">—</td>';
                        }
                    }

                    let actions = '';
                    if (can_upload)
                    {
                        actions = '<td class="text-right" style="white-space:nowrap;">'
                            + '<button class="btn btn-default btn-xs js-edit-multi" type="button">Edit</button> '
                            + '<button class="btn btn-danger btn-xs js-delete-multi" type="button">Delete</button>'
                            + '</td>';
                    }

                    rows += '<tr data-row-idx="' + ti + '"'
                        + ' data-ids="' + escape_html(allIds.join(',')) + '"'
                        + ' data-time="' + escape_html(ts) + '"'
                        + ' data-notes="' + escape_html(shared_notes) + '">'
                        + '<td class="cell-time">' + escape_html(ts) + '</td>'
                        + valueCells;
                    if (!hasNotesField)
                    {
                        rows += '<td class="cell-notes monitor-data-notes">' + escape_html(shared_notes) + '</td>';
                    }
                    rows += '<td>' + escape_html(created_by) + '</td>'
                        + '<td>' + escape_html(created_on) + '</td>'
                        + '<td>' + escape_html(updated_on) + '</td>'
                        + actions
                        + '</tr>';
                }
                $('#monitor-table-body').html(rows);
            }
            else
            {
                // Legacy single-value mode — restore simple header
                let headerHtml = '<tr class="info" style="pointer-events: none;">'
                    + '<th>Time</th>'
                    + '<th>' + escape_html(LEGACY_VALUE_LABEL) + '</th>'
                    + '<th>Notes</th><th>Uploaded by</th><th>Uploaded on</th><th>Last edited</th>';
                if (can_upload) headerHtml += '<th></th>';
                headerHtml += '</tr>';
                $('#monitor-table-head').html(headerHtml);

                const bucket = series[''] || {};
                let flatRows = [];
                const labels = bucket.labels || [];
                for (let i = 0; i < labels.length; i++)
                {
                    flatRows.push({ time: labels[i], idx: i });
                }
                flatRows.sort(function(a, b) { return compare_monitor_times_desc(a.time, b.time); });

                let rows = '';
                for (let r = 0; r < flatRows.length; r++)
                {
                    rows += render_row_legacy(bucket, flatRows[r].idx);
                }
                $('#monitor-table-body').html(rows);
            }
        }

        function has_any_data(data)
        {
            if (!data) return false;
            // New shape
            if (data.series) {
                return (data.total || 0) > 0;
            }
            // Legacy flat shape fallback
            return data.data && data.data.length > 0;
        }

        function refresh_page()
        {
            let data_url = get_base_url("{% url 'monitor_chart_data' monitor.id %}");
            let history_url = get_base_url();
            history.pushState('', "{{ monitor.name|escapejs }} data", history_url);
            if ($("#alert-tab").hasClass("active"))
            {
                $('#alert-div').load(get_base_url("{% url 'monitor_alert_log' monitor.id %}"));
                $('#monitor-data').show();
                $('#no-monitor-data').hide();
            }
            else if ($("#upload-tab").hasClass("active"))
            {
                $('#monitor-data').show();
                $('#no-monitor-data').hide();
            }
            else
            {
                $.ajax(
                {
                    url: data_url,
                    success: function (data)
                    {
                        if (has_any_data(data))
                        {
                            $('#monitor-data').show();
                            $('#no-monitor-data').hide();
                            update_chart(data);
                            update_table(data);
                        }
                        else
                        {
                            $('#monitor-data').hide();
                            $('#no-monitor-data').show();
                        }
                    }
                });
            }
        }

        function open_daterange_picker()
        {
            const dates = get_start_end_dates();
            daterange_picker.data('daterangepicker').setStartDate(moment.unix(dates[0]).utc());
            daterange_picker.data('daterangepicker').setEndDate(dates[1] ? moment.unix(dates[1]).utc() : now_moment_date);
            daterange_picker.data('daterangepicker').show();
        }

        if (can_upload)
        {
            // Legacy single-value handlers
            $('#monitor-table-body').on('click', '.js-edit', function ()
            {
                const $row = $(this).closest('tr');
                const id = $row.data('id');
                const currentValue = $row.find('.cell-value').text();
                const currentTime = $row.find('.cell-time').text();
                const newValue = prompt("New value:", currentValue);
                if (newValue === null) return;
                const newTime = prompt("New timestamp (blank = unchanged):", currentTime) || '';
                const currentNotes = $row.find('.cell-notes').text();
                const newNotes = prompt("Notes (optional, blank clears the note). Cancel aborts without saving:", currentNotes);
                if (newNotes === null) return;
                $.ajax(
                {
                    url: "/monitor/{{ monitor.id }}/data/" + id + "/edit/",
                    type: 'POST',
                    data: { value: newValue, created_date: newTime, notes: newNotes, csrfmiddlewaretoken: csrf_token },
                    headers: { 'X-Requested-With': 'XMLHttpRequest' },
                    success: function () { refresh_page(); },
                    error: function (xhr) { alert((xhr.responseJSON || {}).error || 'Update failed.'); }
                });
            });

            $('#monitor-table-body').on('click', '.js-delete', function ()
            {
                const $row = $(this).closest('tr');
                const id = $row.data('id');
                if (!confirm('Delete data point ' + id + '?')) return;
                $.ajax(
                {
                    url: "/monitor/{{ monitor.id }}/data/" + id + "/delete/",
                    type: 'POST',
                    data: { csrfmiddlewaretoken: csrf_token },
                    headers: { 'X-Requested-With': 'XMLHttpRequest' },
                    success: function () { refresh_page(); },
                    error: function (xhr) { alert((xhr.responseJSON || {}).error || 'Delete failed.'); }
                });
            });

            // Multi-column pivoted handlers
            $('#monitor-table-body').on('click', '.js-edit-multi', function ()
            {
                const $row = $(this).closest('tr');
                const rowIdx = parseInt($row.data('row-idx'));
                const colData = _multiColRowData[rowIdx] || [];
                const currentTime = $row.data('time') || '';
                const columns = (window._lastChartData && window._lastChartData.columns) || [];
                const hasNotesField = columns.some(function(c) { return (c.name || '').toLowerCase() === 'notes'; });
                const currentNotes = hasNotesField ? '' : $row.find('.cell-notes').text().trim();

                const newTime = prompt("New timestamp (blank = unchanged):", currentTime);
                if (newTime === null) return;
                let newNotes = null;
                if (!hasNotesField)
                {
                    newNotes = prompt("Notes (optional, blank clears):", currentNotes);
                    if (newNotes === null) return;
                }

                const updates = [];
                for (let c = 0; c < colData.length; c++)
                {
                    const dp = colData[c];
                    if (!dp) continue;
                    const currentVal = dp.value !== null && dp.value !== undefined ? String(dp.value) : dp.string_value;
                    const newVal = prompt("Value for '" + dp.name + "':", currentVal);
                    if (newVal === null) return;
                    updates.push({ id: dp.id, value: newVal });
                }

                if (!updates.length) return;
                let pending = updates.length;
                let anyError = false;
                updates.forEach(function (upd)
                {
                    const postData = { value: upd.value, csrfmiddlewaretoken: csrf_token };
                    if (newNotes !== null) postData.notes = newNotes;
                    if (newTime.trim()) postData.created_date = newTime.trim();
                    $.ajax(
                    {
                        url: "/monitor/{{ monitor.id }}/data/" + upd.id + "/edit/",
                        type: 'POST',
                        data: postData,
                        headers: { 'X-Requested-With': 'XMLHttpRequest' },
                        success: function ()
                        {
                            pending--;
                            if (pending === 0 && !anyError) refresh_page();
                        },
                        error: function (xhr)
                        {
                            if (!anyError) { anyError = true; alert((xhr.responseJSON || {}).error || 'Update failed.'); }
                            pending--;
                            if (pending === 0) refresh_page();
                        }
                    });
                });
            });

            $('#monitor-table-body').on('click', '.js-delete-multi', function ()
            {
                const $row = $(this).closest('tr');
                const ids = String($row.data('ids') || '').split(',').map(function (s) { return s.trim(); }).filter(Boolean);
                const ts = $row.data('time') || '';
                if (!ids.length) return;
                if (!confirm('Delete ' + ids.length + ' data point(s) at ' + ts + '?')) return;

                let pending = ids.length;
                let anyError = false;
                ids.forEach(function (id)
                {
                    $.ajax(
                    {
                        url: "/monitor/{{ monitor.id }}/data/" + id + "/delete/",
                        type: 'POST',
                        data: { csrfmiddlewaretoken: csrf_token },
                        headers: { 'X-Requested-With': 'XMLHttpRequest' },
                        success: function ()
                        {
                            pending--;
                            if (pending === 0 && !anyError) refresh_page();
                        },
                        error: function (xhr)
                        {
                            if (!anyError) { anyError = true; alert((xhr.responseJSON || {}).error || 'Delete failed.'); }
                            pending--;
                            if (pending === 0) refresh_page();
                        }
                    });
                });
            });
        }

        set_dates(moment('{{ start|input_date_format }}', '{{ datetime_input_js_format }}'), {% if end %}moment('{{ end|input_date_format }}', '{{ datetime_input_js_format }}'){% else %}now_moment_date{% endif %});
    </script>
{% endblock %}