{% extends "base.html" %} {% block content %} {% load static %} {% load material_form %} {% load wx_filters%}

<div class="srf-container">
    <!-- Heading -->
    <div class="srf-flex flex-row align-items-center justify-content-between srf-padding">
        <span class="srf-display-1 text-uppercase">Data Capture</span><br /><br />
        <span class="srf-display-2 text-uppercase">Monthly Capture</span>
    </div>

    <div class="srf-flex justify-content-between srf-padding" id="app" v-cloak>
        <v-app>
            <!-- station and date picker -->
            <form enctype="multipart/form-data" method="POST" class="mb-10">
                {% csrf_token %}
                <div class="fieldWrapper">
                    <v-row>
                        <!-- station selector -->
                        <v-flex sm1 md3  lg3 class="d-flex justify-between mr-5">
                            <v-autocomplete
                                label="Manual Station"
                                :items="stationList"
                                item-value="id"
                                item-text="name"
                                v-model="requestData.stationId"
                                :disabled="draft"
                                required
                                hint="*Required"
                                persistent-hint
                            >
                            </v-autocomplete> 
                        </v-flex>    

                        <!-- date picker -->
                        <v-flex sm1 md3 lg3 class="d-flex justify-between">                
                            <v-menu
                                :close-on-content-click="false"
                                :disabled="draft"
                                v-model="datepicker_menu"
                                :nudge-right="40"
                                transition="scale-transition"
                                offset-y
                                class="max-50"
                            >
                                <template v-slot:activator="{ on }">
                                    <v-text-field
                                        :disabled="draft"
                                        v-model="requestData.date"
                                        label="Date"
                                        prepend-icon="event"
                                        v-on="on"
                                        required
                                        hint="*Required"
                                        persistent-hint
                                        :rules="textFieldsRules"
                                    >
                                    </v-text-field>
                                </template>

                                <v-date-picker
                                    name="date"
                                    v-model="requestData.date"
                                    @input="datepicker_menu = false"
                                    :allowed-dates="allowedDates"
                                    type="month"
                                >
                                </v-date-picker>
                            </v-menu>
                        </v-flex>
                    </v-row>

                    <v-row class="mt-5">
                        <v-btn class="ml-2" :disabled="draft" outlined @click="fetchData()" class="btn-outline-default" color="blue"> Load </v-btn>
                        <v-btn class="ml-2" :disabled="!draft" outlined @click="fetchData()" class="btn-outline-default" color="red"> Cancel </v-btn>
                    </v-row>
                </div>
            </form>

            <!-- The buttons -->
            <div class="mt-5">
                <!-- save button -->
                {% if request|has_any_feature_permission:"monthly-form:write" %}
                <v-btn 
                    v-show="!hideTable && !isBack"
                    class="ml-2" 
                    :disabled="!(draft && valid)" 
                    outlined @click="updateData()" 
                    class="btn-outline-default" 
                    color="green"
                    style="margin-bottom: 10px;"
                > 
                    Save 
                    <v-icon right dark>save</v-icon>
                </v-btn>
                {% endif %}

                <!-- delete rows btn -->
                {% if request|has_any_feature_permission:"monthly-form:delete" %}
                <v-btn
                    v-show="!hideTable && !isBack"
                    class="ml-2" 
                    :disabled="!hasSelection || loading"
                    outlined 
                    @click="deleteSelectedRows" 
                    class="btn-outline-default"
                    color="red"
                    style="margin-bottom: 10px;"
                >
                    Delete Selected
                    <v-icon right dark>mdi-delete</v-icon>
                </v-btn>
                {% endif %}

                <!-- theme switch button -->
                <v-btn
                    v-show="!hideTable && !isBack"
                    class="ml-2"
                    outlined
                    @click="toggleTheme"
                    color="purple"
                    style="margin-bottom: 10px;"
                >
                    Table Style
                    <v-icon right dark>sync</v-icon>
                </v-btn>

                <!-- show graph button -->
                <!--
                <v-btn 
                    v-show="!hideTable && !isBack"
                    class="ml-2" 
                    outlined 
                    @click="nextSlide"
                    class="btn-outline-default" 
                    color="black"
                    style="margin-bottom: 10px;"
                > 
                    Show Graph

                    <v-icon
                        right
                        dark
                    >
                        timeline
                    </v-icon>
                </v-btn>
                -->

                <!-- export csv button -->
                {% if request|has_any_feature_permission:"monthly-form:write" %}
                <v-btn 
                    v-show="!hideTable && !isBack"
                    class="ml-2" 
                    outlined 
                    @click="exportToCSV()"
                    class="btn-outline-default" 
                    color="black"
                    style="margin-bottom: 10px;"
                > 
                    Export CSV

                    <v-icon
                        right
                        dark
                    >
                        mdi-download
                    </v-icon>
                </v-btn>
                {% endif %}

                <!-- show graph back button -->
                <v-btn 
                    v-show="isBack"
                    class="ml-2" 
                    outlined 
                    @click="nextSlide"
                    class="btn-outline-default" 
                    color="black"
                    style="margin-bottom: 10px;"
                > 
                    <v-icon
                        left
                        dark
                    >
                        arrow_back
                    </v-icon>

                    Back
                </v-btn>

            </div>

            <!-- deletion confirmation dialog -->
            <v-dialog
                v-model="confirmDeleteDialog"
                max-width="400"
            >
                <v-card>
                    <v-card-title class="headline"> Confirm Deletion </v-card-title>
                    
                    <v-card-text>
                        Are you sure you want to delete data?
                        <!-- <strong>[[ pendingDeleteDays.join(', ') ]]</strong>? -->
                    </v-card-text>

                    <v-card-actions>
                        <v-spacer></v-spacer>

                        <v-btn text color="grey" @click="confirmDeleteDialog = false">
                            Cancel
                        </v-btn>

                        <v-btn text color="red" @click="confirmDelete">
                            Delete
                        </v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>

            <!-- in production dialog -->
            <v-dialog
                v-model="inProduction"
                max-width="400"
            >
                <v-card>
                    <v-card-title class="headline"> Alert! </v-card-title>
                    
                    <v-card-text style="color: red;">
                        This feature is in production...
                    </v-card-text>

                    <v-card-actions>
                        <v-spacer></v-spacer>

                        <v-btn text color="grey" @click="inProduction = false">
                            Cancel
                        </v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>


            <!-- control for publishing status and logs -->
            <v-carousel 
                v-model="currentSlide" 
                hide-delimiters
                :show-arrows="false"
                height="100%" 
            >
                <!-- ag grid -->
                <v-carousel-item>

                    <!-- Monthly table grid container -->
                    <!-- Non Sticky header -->
                    <ag-grid-vue
                        v-show="!hideTable"
                        :row-data="rowData"
                        :column-defs="colDefs"
                        :default-col-def="defaultColDef"
                        :grid-options="gridOptions"
                        style="width: 100%;"
                        :class="tableTheme"
                        @grid-ready="onGridReady"
                        @cell-editing-started="onCellEditingStarted"
                        @cell-editing-stopped="onCellEditingStopped"
                        dom-layout="autoHeight"
                    >
                    </ag-grid-vue>

                    <!-- Sticky header -->
                    <!-- <ag-grid-vue
                        v-show="!hideTable"
                        :row-data="rowData"
                        :column-defs="colDefs"
                        :default-col-def="defaultColDef"
                        :grid-options="gridOptions"
                        style="height: 100%;"
                        :class="tableTheme"
                        @grid-ready="onGridReady"
                        @cell-editing-started="onCellEditingStarted"
                        @cell-editing-stopped="onCellEditingStopped"
                    >
                    </ag-grid-vue> -->


                </v-carousel-item>

                <!-- graph -->
                <v-carousel-item>
                    <!-- Overlay with Spinner -->
                    <v-overlay v-show="" absolute opacity="0.3" style="border-radius: 4px;">
                        <v-progress-circular indeterminate size="70"></v-progress-circular>
                    </v-overlay>

                    <!-- tab header titles -->
                    <v-tabs 
                        v-model="activeTab"
                        show-arrows
                        centered
                        center-active
                    >
                        {% for item in ag_grid_config %}
                            {% if item.var_type == 'numeric' %}
                                <v-tab key="{{ item.id }}">
                                    {{ item.name }}
                                </v-tab>
                            {% endif %}
                        {% endfor %}
                    </v-tabs>
                </v-carousel-item>
            </v-carousel>

        </v-app>


        <!-- Loading overlay -->
        <v-overlay absolute :value="loading">
            <span>LOADING</span>
            <v-progress-circular indeterminate color="primary"></v-progress-circular>
        </v-overlay>


        <!-- snack bar status -->
        <v-snackbar v-model="snackbar.show" :timeout="5000" :color="snackbar.color">
            [[ snackbar.message ]]
        </v-snackbar>
    </div>
</div>


{% endblock %} 
{% block localjavascript %}

<style>
    .ag-header-group-text {
        white-space: normal !important;
        line-height: 1.2;
        text-align: center !important;
        word-break: break-word;
    }

    .ag-grid-header-center {
        display: flex;
        justify-content: center !important; /* centers horizontally */
        align-items: center !important;     /* centers vertically */
        text-align: center !important;      /* fallback text align */
    }

    .misc-cols-group, .wind-cols-group, .temp-cols-group, 
    .soil-cols-group, .precip-cols-group, .hum-cols-group {
        justify-content: center !important;
        text-align: center !important;      /* fallback text align */
    }

    .obs-cols-group {color: red;}

    /* minimizing the padding from the header cells */
    .ag-header-cell {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .ag-header-group-cell-with-group {padding: 3px !important;}
    .ag-header-group-cell {padding: 3px !important;}

</style>

<script>
    // parse the offset string
    function parseOffsetToMinutes(offsetStr) {
        const match = offsetStr.match(/(-?\d+) day[s]?,\s*(\d{2}):(\d{2}):(\d{2})/);

        if (!match) return 0;

        const days = parseInt(match[1], 10);
        const hours = parseInt(match[2], 10);
        const minutes = parseInt(match[3], 10);

        return (days * 24 * 60) + (hours * 60) + minutes;
    }

    // initialize the timezone details
    const timezoneDetails = {
        offsetMinutes: parseOffsetToMinutes("{{ timezone_offset }}"), 
        offsetStr: "{{ timezone_offset }}"
    }

    function formatMonthDay(day) {
        if (['SUM', 'AVG', 'MAX', 'MIN', 'STDDEV', 'COUNT'].includes(day)) {
            return day;
        }

        if (day === null || day === undefined || day === '') {
            return '';
        }

        return String(parseInt(day));
    }

    // AG Grid Contants
    // holds column definition
    const columnDefinitions = [
        // Pinned select column
        {
            headerName: '',
            headerClass: "misc-cols-group",
            colId: 'select',
            width: 50,
            pinned: 'left',
            // show a checkbox in each row
            checkboxSelection: params => params.node.rowPinned !== 'bottom',
            headerCheckboxSelection: false,
            lockPosition: true,
            sortable: false,
            filter: false
        },

        // Pinned "Day Column"
        {
            width: 100,
            headerName: "Day",
            cellClass: "day-col",
            headerClass: "misc-cols-group",
            field: "day",
            resizable: true,
            valueFormatter: params => formatMonthDay(params.value),
            colId: "day",
            pinned: "left",
            editable: false,
            wrapHeaderText: true,
        },

        // Dynamically generated weather columns
        {% for item in ag_grid_config %}
        
            {% if item.synoptic_code %}
                {
                    headerName: "{{item.name | safe}}",
                    headerClass: "{{item.col_class | safe}}",
                    children: [
                        {
                            headerName: "{{item.synoptic_code | safe}}", 
                            wrapHeaderText: true, // Wrap Text
                            autoHeaderHeight: true, // Adjust Cell Height to Fit Wrapped Text
                            resizable: true,
                            field: "{{item.id | safe}}",
                            colId: "{{ item.id | safe}}", // explicityly setting the column id
                            width: {{item.col_width}},

                            {% if item.var_type == "code" %}
                                cellEditor: 'agSelectCellEditor',
                                cellEditorParams: {
                                    values: {{ item.dropdown_codes | safe}},
                                    valueListMaxHeight: 240,
                                }
                            {% endif %}
                        },
                    ]
                },
            {% else %}

                {% if item.id == "observer" %}

                    // setting the observer column to uneditable
                    {
                        headerName: "{{item.id | safe}}",
                        wrapHeaderText: true, // Wrap Text
                        resizable: true,
                        editable: false, // no text-editing or selection
                        headerClass: "{{item.col_class | safe}}",
                        cellClass: "obs-cols-group",
                        field: "{{item.id | safe}}",
                        colId: "{{ item.id | safe}}", // explicityly setting the column id
                        width: {{item.col_width}},
                    },

                {% else %}

                    // if no synoptic code is found use the following
                    {
                        headerName: "{{item.name | safe}}",
                        wrapHeaderText: true, // Wrap Text
                        resizable: true,
                        headerClass: "{{item.col_class | safe}}",
                        field: "{{item.id | safe}}",
                        colId: "{{ item.id | safe}}", // explicityly setting the column id
                        width: {{item.col_width}},

                        {% if item.var_type == "code" %}
                            cellEditor: 'agSelectCellEditor',
                            cellEditorParams: {
                                values: {{ item.dropdown_codes | safe}},
                                valueListMaxHeight: 240,
                            }
                        {% endif %}
                    },

                {% endif %}

            {% endif %}

        {% endfor %}

    ];


    // holds all station information (active & manual stations only)
    const stationArr = [
        {% for station in station_list %}
            {id: {{station.id}}, name: "{{station.name | safe }} - {{station.code}}"},
        {% endfor %}
    ]; 


    // custom 'smart' tooltip
    // 1) Register a single Vue component that AG-Grid will mount for every cell tooltip
    Vue.component('custom-tooltip', {
        // declare a reactive place to store AG-Grid’s params
        data() {
            return {
            params: null
            };
        },
        // AG-Grid will call init() with the tooltip params object
        init(params) {
            this.params = params;
        },
        computed: {
            // Decide if this is an error or just “info”
            isError() {
                const errs = this.params.data.__errors || {};
                return !!errs[this.params.colDef.colId];
            },

            // Pick icon
            iconClass() {
                return this.isError
                    ? 'fas fa-exclamation-triangle'
                    : 'fas fa-info-circle';
            },

            // Build the actual text to display
            message() {
                const errs = this.params.data.__errors || {};
                if (this.isError) {
                    return errs[this.params.colDef.colId];
                }
                // fallback to any “info” stored on rowData.info[colId]
                return (this.params.data.info || {})[this.params.colDef.colId] || '';
            }
        },
        template: 
        `
            <div :class="[ isError ? 'error-tooltip' : 'info-tooltip' ]"
                style="display:flex; align-items:center;">
            <i :class="iconClass" style="margin-right:6px;"></i>
            <span v-text="message"></span>
            </div>
        `
    });



    // main vue component
    Vue.component('ag-grid-vue', window['ag-grid-vue'].AgGridVue);
    Vue.use(window.vuelidate.default);
    const { required, minLength } = window.validators;


    (function() {
        new Vue({
            el: "#app",
            vuetify: new Vuetify(),
            delimiters: ["[[", "]]"],
            validations: {
                requestData: {
                    date: { required },
                }
            },
            data() {
                return {
                    statistics: null,
                    activeTab: 0,
                    isBack: false, // control for the carousel
                    currentSlide: 0,
                    snackbar: { show: false, message: '', color: '' },
                    hideTable: true,
                    colDefs: columnDefinitions,
                    stationList: stationArr, 
                    requestData: {
                        date: "{{date|safe}}",
                        stationId: {{ station_id }},
                    },
                    draft: false,
                    valid: false,
                    datepicker_menu: false,
                    textFieldsRules: [v => (v !== undefined && v !== "") || "This field is required"],
                    now: moment.utc().add(timezoneDetails.offsetMinutes, 'minutes').format('YYYY-MM-DD'),
                    loading: false,
                    requestedData: {},
                    // AG GRID DATA
                    // Possible themes: (**can append '-dark' to any option) [ag-theme-quartz, ag-theme-balham, ag-theme-material]
                    tableTheme: "ag-theme-balham",
                    // grid settings as a whole
                    gridOptions: {
                        suppressMenuHide: true,       // keeps menu icon always visible
                        groupHeaderHeight: 60, // Increase col height specifically for group headers
                        rowHeight: 30, // custom row height
                        rowClassRules: { // tag last 6 rows (statistics) with the CSS class 'grey-row'
                        'grey-row': params => params.node.rowPinned === 'bottom'
                        }, 
                        onCellValueChanged: this.onCellValueChanged, // execute on cell value change
                        enableBrowserTooltips: false,   // turn OFF title-based tooltips
                        tooltipShowDelay: 0,    // show tooltip immediately
                        tooltipHideDelay: 20000, // hide tooltip after 20 seconds
                        // singleClickEdit: true, // clicking once on a cell opens edit
                        context: {
                            selectedStationData: null,
                            snackbar: this.setSnackbar.bind(this),
                            markAsDraft: this.markAsDraft.bind(this),
                        },
                        // wire up the editing hook:
                        onCellEditingStopped: this.onCellEditingStopped,
                        rowSelection:"multiple",
                        // tell us whenever selection changes
                        onSelectionChanged: this.onSelectionChanged,

                        // modifyin the default arrow navigation to skip the first two columns.
                        navigateToNextCell: (params) => {
                            const { nextCellPosition, previousCellPosition, key, api } = params;
                            const visibleCols = api.getAllDisplayedColumns();
                            const displayedRowCount = api.getDisplayedRowCount();
                            let { rowIndex, column } = previousCellPosition;

                            const colIndex = visibleCols.findIndex(c => c.getColId() === column.getColId());
                            if (colIndex === -1) return nextCellPosition; // fallback

                            // --- LEFT/RIGHT handling with skip rules ---
                            if (key === 'ArrowRight') {
                            if (colIndex < visibleCols.length - 1) {
                                column = visibleCols[colIndex + 1];
                            } else {
                                // wrap to next row, skip columns before index 2
                                rowIndex++;
                                if (rowIndex >= displayedRowCount) rowIndex = 0;
                                column = visibleCols[2]; // skip first two columns
                            }
                            } else if (key === 'ArrowLeft') {
                            if (colIndex > 2) {
                                column = visibleCols[colIndex - 1];
                            } else {
                                // wrap to previous row's last column
                                rowIndex--;
                                if (rowIndex < 0) rowIndex = displayedRowCount - 1;
                                column = visibleCols[visibleCols.length - 1];
                            }
                            } else {
                            return nextCellPosition; // other keys -> default behavior
                            }

                            // ensure target is in bounds
                            if (rowIndex < 0 || rowIndex >= displayedRowCount) return nextCellPosition;

                            return { rowIndex, column };
                        },
                    },                
                    // default cell settings
                    defaultColDef: {
                        sortable: true,
                        filter: true,
                        resizable: false,
                        suppressSizeToFit: true, // Allows overflow
                        cellClassRules: {
                            'invalid-cell': (params) => {
                            const errs = params.data.__errors || {};
                            return !!errs[params.colDef.colId];
                            },

                            // grey out any cell in a pinned-bottom row
                            'ag-grey': params => params.node.rowPinned === 'bottom'
                        },

                        // pick up error/info text
                        tooltipValueGetter: params => {
                            const errs = params.data.__errors || {};

                            if (errs[params.colDef.colId]) {
                                return errs[params.colDef.colId];
                            }

                            return (params.data.info || {})[params.colDef.colId] || '';
                        },

                        // only allow edits on non-pinned rows (non statistic rows):
	                    editable: params => params.node.rowPinned !== 'bottom',

                        // tell AG-Grid to use custom component
                        tooltipComponent: 'custom-tooltip',

                        valueFormatter: (params) => {
                            const value = params.value;
                            
                            if (value === null || value === undefined) return "";

                            if (typeof value === 'object') {
                                // If it's an empty object, return empty string
                                if (Object.keys(value).length === 0) return "";
                                return JSON.stringify(value);
                            }

                            return value;
                        },
                    },

                    rowData: [],
                    gridData: [],
                    gridApi: null,
                    gridColumnApi: null,
                    colIdsNumType: {{ num_validate_ids | safe }},
                    variableIds: {{ variable_ids | safe }},
                    MISSING_VALUE: null,
                    updatedDays: new Set(),
                    daysInMonth: 31,
                    
                    selectedCount: 0,
                    confirmDeleteDialog: false,
                    pendingDeleteDays: [],
                    inProduction: false,
                    useUTC: false,

                    editorListeners: new Map(), // Map to track active editor listeners (keyed by "rowIndex-colId")
                    
                    columnRanges: {},
                    
                    // next var....
                };
            },
            methods: {
                /**
                * Create a unique key for a cell using its rowIndex and colId.
                * Used to map editor DOM elements to their event listeners.
                */
                _editorKey(rowIndex, colId) {
                    return `${rowIndex}-${colId}`;
                },
 
                // helper to build the days of the month
                buildMonthlyGridData(daysInMonth) {
                    this.daysInMonth = daysInMonth;

                    this.gridData = Array.from({ length: daysInMonth }, (_, index) => ({
                        day: index + 1
                    }));
                },


                /**
                * Called when a cell enters editing mode.
                * Attaches a keydown listener on the editor GUI that:
                *  - moves to the next editable cell on ArrowRight (wraps to next row)
                *  - moves to the previous editable cell on ArrowLeft (wraps to previous row)
                *  - respects colDef.editable (function or boolean)
                */
                onCellEditingStarted(params) {
                    const api = params.api;
                    const rowIndex = params.node.rowIndex;
                    const colId = params.column.getColId();
                    const key = this._editorKey(rowIndex, colId);

                    // Get the editor instances reliably
                    const editors = api.getCellEditorInstances
                    ? api.getCellEditorInstances({ rowNodes: [params.node], columns: [params.column] })
                    : [];

                    if (!editors || editors.length === 0) return;

                    const editor = editors[0];
                    const gui = typeof editor.getGui === "function" ? editor.getGui() : null;

                    if (!gui) return;

                    // Remove any previous listener for this same cell
                    if (this.editorListeners.has(key)) {
                        const prev = this.editorListeners.get(key);
                        try { prev.gui.removeEventListener("keydown", prev.handler, true); } catch (_) {}
                        this.editorListeners.delete(key);
                    }

                    const handler = (e) => {
                        const k = e.key;

                        // Only handle left/right arrows (add 'ArrowUp' or 'ArrowDown' if you want up/down too)
                        if (!["ArrowLeft", "ArrowRight"].includes(k)) return;

                        // Prevent cursor movement inside the editor and stop grid default
                        e.preventDefault();
                        e.stopPropagation();

                        const visibleCols = api.getAllDisplayedColumns() || [];

                        if (visibleCols.length === 0) return;

                        // Current column index among visible columns
                        const colIndex = visibleCols.findIndex(c => c.getColId() === colId);

                        if (colIndex === -1) return;

                        const displayedRowCount = api.getDisplayedRowCount();
                        let nextRow = rowIndex;
                        let nextColIndex = colIndex;

                        // Horizontal movement + wrap across rows
                        if (k === "ArrowLeft") {
                            if (colIndex > 2) { // the '> 2' causes the focus to skip the day and tick box column when going back up the row
                                nextColIndex = colIndex - 1;
                            } 
                            else {
                                // wrap to previous row's last visible column
                                nextColIndex = visibleCols.length - 1;
                                nextRow = rowIndex - 1;
                            }
                        } 
                        else if (k === "ArrowRight") {
                            if (colIndex < visibleCols.length - 1) {
                                nextColIndex = colIndex + 1;
                            } 
                            else {
                                // wrap to next row's first visible column
                                nextColIndex = 2; // causes the focus to skip the day and tick box column when gong down the row
                                nextRow = rowIndex + 1;
                            }
                        }

                        // Bounds check: stop if nextRow outside grid (no infinite loop)
                        if (nextRow < 0 || nextRow >= displayedRowCount) return;

                        let nextCol = visibleCols[nextColIndex];

                        if (!nextCol) return;

                        // --- Check editability (skip non-editable columns) ---
                        // We'll advance in the same direction until we find an editable col or hit bounds.
                        const moveForward = k === "ArrowRight";
                        let attempts = 0;
                        while (true) {
                            attempts++;
                            if (attempts > visibleCols.length) {
                                // safety: avoid infinite loop (shouldn't happen)
                                return;
                            }

                            // Evaluate editable flag (colDef.editable may be function or boolean)
                            const colDef = nextCol.getColDef ? nextCol.getColDef() : (nextCol.colDef || {});
                            let isEditable = colDef.editable;

                            if (typeof isEditable === "function") {
                                try {
                                    const targetNode = api.getDisplayedRowAtIndex(nextRow);
                                    isEditable = isEditable({
                                        node: targetNode,
                                        data: targetNode ? targetNode.data : undefined,
                                        colDef,
                                        column: nextCol,
                                        api,
                                        context: params.context,
                                        rowIndex: nextRow,
                                    });
                                } 
                                catch (_) {
                                    isEditable = true; // fail-open
                                }
                            }

                            if (isEditable !== false) break; // found editable column

                            // move to next candidate (respecting wrap rules)
                            if (moveForward) {
                                nextColIndex++;

                                if (nextColIndex >= visibleCols.length) {
                                    nextColIndex = 0;
                                    nextRow = nextRow + 1;
                                }
                            } else {
                                nextColIndex--;

                                if (nextColIndex < 0) {
                                    nextColIndex = visibleCols.length - 1;
                                    nextRow = nextRow - 1;
                                }
                            }

                            // bounds check again after moving
                            if (nextRow < 0 || nextRow >= displayedRowCount) return;

                            nextCol = visibleCols[nextColIndex];

                            if (!nextCol) return;
                        }
                        // --- end editability loop ---

                        // Stop current editing — will trigger onCellEditingStopped and remove this listener
                        api.stopEditing();

                        // Ensure target cell is visible & focused, then start editing
                        api.ensureIndexVisible(nextRow);
                        api.ensureColumnVisible(nextCol);

                        // Focus the cell first (some AG Grid setups require focus before startEditingCell)
                        api.setFocusedCell(nextRow, nextCol.getColId());

                        // Start editing after a microtask so AG Grid is ready
                        setTimeout(() => {
                            api.startEditingCell({
                                rowIndex: nextRow,
                                colKey: nextCol.getColId(),
                            });
                        }, 0);
                    };

                    // Capture keydown on the editor GUI (capture=true to catch keys inside inputs)
                    gui.addEventListener("keydown", handler, true);

                    // Remember this listener for removal later
                    this.editorListeners.set(key, { gui, handler });
                },


                // Called when the user exits editing mode (even if value didn't change)
                onCellEditingStopped(params) {
                    // Build a unique key for this cell
                    const key = this._editorKey(params.node.rowIndex, params.column.getColId());

                    // Retrieve stored listener for this cell, if any
                    const rec = this.editorListeners.get(key);

                    if (rec) {
                        try {
                            // Remove the keydown listener attached during editing
                            rec.gui.removeEventListener("keydown", rec.handler, true);
                        } catch (_) {
                            // Safe cleanup: ignore removal errors
                        }

                        // Remove reference from map to avoid memory leaks
                        this.editorListeners.delete(key);
                    }

                    // AG Grid may not always trigger onCellValueChanged
                    // in the way we expect when a cell is cleared.
                    // So this acts as a safe fallback.
                    const oldValue = params.oldValue == null
                        ? ''
                        : params.oldValue.toString().trim();

                    const newValue = params.value == null
                        ? ''
                        : params.value.toString().trim();

                    // Only mark as draft if the value actually changed
                    if (oldValue !== newValue) {
                        this.updatedDays.add(params.node.rowIndex);
                        this.markAsDraft();
                    }
                },


                onGridReady(params) {
                    // Capture the APIs for later use
                    this.gridApi = params.api;
                    this.gridColumnApi = params.columnApi;
                },


                // allow other components to access main vue app snackbar
                setSnackbar(new_snack, isError) {
                    if(isError) {
                        this.snackbar = { show: true, message: new_snack, color: 'orange' };
                    }
                    else {
                        this.snackbar = { show: true, message: new_snack, color: 'blue' };
                    }
                },


                // allow other components to access markAsDraft
                markAsDraft() {
                    this.draft = true;

                    // look for any rows that still have errors
                    const hasErrors = this.rowData.some(row =>
                        row.__errors && Object.keys(row.__errors).length > 0
                    );

                    // if hasErrors the users shouldn't be allowed to access the save option
                    if(hasErrors){
                        this.valid = false;
                    }
                    else {
                        this.valid = true;
                    }
                },


                // calculates allowed dates
                allowedDates(date){
                    return this.now >= date;
                },


                resetData(daysInMonth = 31) {
                    this.buildMonthlyGridData(daysInMonth);

                    this.rowData = this.gridData;

                    if (this.gridApi) {
                        this.gridApi.setGridOption('rowData', this.rowData);
                        this.gridApi.setGridOption('pinnedBottomRowData', []);
                    }
                },


                // load the data onto the table
                loadGridData() {
                    this.rowData = this.gridData;

                    if (this.gridApi) {
                        this.gridApi.setGridOption('rowData', this.rowData);
                    }

                    // Compute stats and prepare pinned rows
                    const statsObj = this.calculateStatistics();
                    const order = ['sum', 'avg', 'min', 'max', 'count', 'stddev'];
                    const pinned = order.map(key => ({ ...statsObj[key] }));

                    if (this.gridApi) {
                        this.gridApi.setGridOption('pinnedBottomRowData', pinned);
                    }
                },


                // load the data unto the table
                fetchData() {
                    this.loading = true;

                    const { stationId, date } = this.requestData;

                    if (stationId === null || !date) {
                        this.loading = false;
                        return;
                    }

                    const url = `/wx/data/capture/monthly/load/?station_id=${stationId}&date=${date}`;

                    axios.get(url).then(response => {
                        this.requestedData = Object.assign({}, this.requestData);

                        const response_data = response.data[0];
                        timezoneDetails.offsetMinutes = response.data[1];
                        timezoneDetails.offsetStr = response.data[2];

                        const daysInMonth = response.data[3];

                        // Build the correct number of rows for the selected month
                        this.resetData(daysInMonth);

                        // Fill the monthly rows
                        for (let i = 0; i < response_data.length; i++) {
                            const day = parseInt(response_data[i][0]);
                            const variableId = response_data[i][1];
                            const measured = response_data[i][2];
                            const remarks = response_data[i][3];
                            const observer = response_data[i][4];

                            const rowIndex = day - 1;

                            if (rowIndex >= 0 && rowIndex < this.gridData.length) {
                                this.gridData[rowIndex][variableId] = measured;

                                // Same idea as Synop:
                                // remarks and observer are row-level fields.
                                if (remarks !== null && remarks !== undefined) {
                                    this.gridData[rowIndex]['remarks'] = remarks;
                                }

                                if (observer !== null && observer !== undefined) {
                                    this.gridData[rowIndex]['observer'] = observer;
                                }
                            }
                        }

                        this.loadGridData();

                        this.gridOptions.context.selectedStationData = this.requestData;

                        if (this.gridApi) {
                            this.gridApi.refreshCells({ force: true });
                        }

                        this.hideTable = false;
                        this.draft = false;
                        this.valid = false;
                        this.updatedDays.clear();
                        this.loading = false;

                    }).catch(error => {
                        console.error(error);

                        if (this.gridApi) {
                            this.gridApi.showNoRowsOverlay();
                        }

                        this.snackbar = {
                            show: true,
                            message: 'Error fetching monthly table data',
                            color: 'red'
                        };

                        this.draft = false;
                        this.loading = false;
                    });

                    // Load global QC range thresholds
                    axios.get(`/api/range_threshold/`).then(response => {
                        this.columnRanges = response.data;
                    });

                },


                // validation for each cell
                validateCell(params) {
                    const { colDef, newValue, data } = params;
                    const val = newValue;

                    // allow empty cells (skip all validation)
                    if (val === null || val === undefined || val.toString().trim() === '') {
                        return null;
                    }

                    // numeric fields
                    if (this.colIdsNumType.includes(colDef.colId)) {
                        const num = Number(val);

                        // is numeric check
                        if(isNaN(num)) {
                            return 'Must be a number';
                        }

                        // QC values check
                        if(this.columnRanges[colDef.colId]) {
                            // Get the allowed range for the current column (by column ID)
                            const range = this.columnRanges[colDef.colId];

                            // Safety check: if no range is defined for this column,
                            // do not allow the value to pass validation
                            if (!range) {
                                return 'No Global Threshold defined for this variable';
                            }

                            // don't allow only setting one part of the check to pass either
                            if(!Number.isFinite(range.max)) {
                                return 'Partial Global Range Threshold: Max NOT defined'
                            }
                            if(!Number.isFinite(range.min)) {
                                return 'Partial Global Range Threshold: Min NOT defined'
                            }

                            // Checks whether a value is within an inclusive numeric range.
                            const isBetween = (value, min, max) => {
                                const v = Number(value);
                                const lo = Number(min);
                                const hi = Number(max);

                                // If any value is not a valid number, fail validation
                                if (Number.isNaN(v) || Number.isNaN(lo) || Number.isNaN(hi)) {
                                    return false;
                                }

                                // Inclusive range check
                                return v >= lo && v <= hi;
                            };

                            // Validate the value against the column's allowed range
                            if (!isBetween(val, range.min, range.max)) {
                                return `Value must be between ${range.min} and ${range.max}`;
                            }

                        }
                    }

                    // Future-date check for monthly rows
                    const selectedMonth = this.requestData.date; // YYYY-MM
                    const day = data.day;

                    const rowMoment = moment(
                        `${selectedMonth}-${String(day).padStart(2, '0')}`,
                        'YYYY-MM-DD'
                    ).utcOffset(timezoneDetails.offsetMinutes, true);

                    const nowMoment = moment.utc().utcOffset(timezoneDetails.offsetMinutes);

                    if (rowMoment.isAfter(nowMoment, 'day')) {
                        return 'Cannot edit future days';
                    }

                    // No error
                    return null;
                },


                // hide / show errors based on cell validataion
                onCellValueChanged(params) {
                    // Record that this day row was changed
                    this.updatedDays.add(params.node.rowIndex);

                    const { colDef, newValue, data } = params;

                    const raw = newValue == null
                        ? ''
                        : newValue.toString().trim();

                    // If user cleared the cell, remove the property entirely
                    if (raw === '') {
                        this.$delete(data, colDef.field);
                    } else {
                        this.$set(data, colDef.field, raw);
                    }

                    // Run validation
                    const errorMessage = this.validateCell(params);

                    if (!data.__errors) {
                        this.$set(data, '__errors', {});
                    }

                    if (errorMessage) {
                        this.$set(data.__errors, colDef.colId, errorMessage);
                    } else {
                        this.$delete(data.__errors, colDef.colId);
                    }

                    params.api.refreshCells({
                        rowNodes: [params.node],
                        force: true,
                    });

                    const statsObj = this.calculateStatistics();
                    const order = ['sum', 'avg', 'min', 'max', 'count', 'stddev'];
                    const pinned = order.map(key => ({ ...statsObj[key] }));

                    if (this.gridApi) {
                        this.gridApi.setGridOption('pinnedBottomRowData', pinned);
                        this.gridApi.refreshCells({ force: true });
                    }

                    this.markAsDraft();
                },


                // next slide control for the carousel
                nextSlide() {              
                    this.isBack = !this.isBack; // update the control var
                    this.currentSlide = (this.currentSlide + 1) % 2; // update the carousel

                    // if the user hits the back button don't attempt to fetch station publish logs
                    if (!this.isBack) {
                        return
                    }
                },


                // calculate the relevant statistics for the table
                calculateStatistics() {
                    const stats = {
                        sum:    { day: 'SUM'    },
                        avg:    { day: 'AVG'    },
                        min:    { day: 'MIN'    },
                        max:    { day: 'MAX'    },
                        count:  { day: 'COUNT'  },
                        stddev: { day: 'STDDEV' }
                    };

                    this.colIdsNumType.forEach(colId => {
                        // 1) Filter OUT empty strings, undefined, null, your -99.9 sentinel
                        const rawValues = this.rowData
                            .map(row => row[colId]);

                        const validNumbers = rawValues
                            .filter(raw =>
                                raw !== undefined &&
                                raw !== null &&
                                raw !== '' &&
                                raw !== -99.9
                            )
                            .map(Number)                    // now safe to coerce
                            .filter(v => Number.isFinite(v));

                        const count = validNumbers.length;

                        // 2) Defaults if no valid data
                        let sum    = 0;
                        let min    = null;
                        let max    = null;
                        let avg    = null;
                        let stddev = null;

                        if (count > 0) {
                            // 3) sum, min, max
                            sum = validNumbers.reduce((a, v) => a + v, 0);
                            min = Math.min(...validNumbers);
                            max = Math.max(...validNumbers);

                            // 4) average
                            avg = sum / count;

                            // 5) sample standard deviation
                            if (count > 1) {
                                const variance = validNumbers
                                    .reduce((a, v) => a + (v - avg) ** 2, 0)
                                    / (count - 1);
                                stddev = Math.sqrt(variance);
                            } else {
                                stddev = 0;
                            }

                            // 6) round sums & averages
                            sum    = Number(sum.toFixed(2));
                            avg    = Number(avg.toFixed(2));
                            stddev = Number(stddev.toFixed(2));
                        }

                        // 7) Stash into your stats
                        stats.sum[colId]    = sum;
                        stats.min[colId]    = min;
                        stats.max[colId]    = max;
                        stats.count[colId]  = count;
                        stats.avg[colId]    = avg;
                        stats.stddev[colId] = stddev;
                    });

                    return stats;
                },

                // save the form
                async updateData() {
                    if (!this.valid) return;

                    this.loading = true;

                    const formattedData = {};
                    const formattedEmptyCols = {};

                    this.updatedDays.forEach(rowIndex => {
                        const original = this.rowData[rowIndex];
                        const cleanRow = {};
                        const emptyCols = [];

                        this.variableIds.forEach(colId => {
                            const isNumeric = this.colIdsNumType.includes(colId);
                            const rawVal = original[colId];

                            if (rawVal == null || rawVal === "") {
                                if (!isNumeric) {
                                    cleanRow[colId] = "/";
                                } else {
                                    emptyCols.push(colId);
                                }
                            } else {
                                let val = rawVal;

                                if (isNumeric && typeof val === "string") {
                                    const n = Number(val);
                                    val = Number.isFinite(n) ? n : this.MISSING_VALUE;
                                }

                                cleanRow[colId] = val;
                            }
                        });

                        // Important for monthly save
                        cleanRow.day = original.day;

                        cleanRow.remarks = original.remarks;

                        cleanRow.observer = "{{ request.user.username|escapejs }} - {{ request.user.first_name|escapejs }} {{ request.user.last_name|escapejs }}";

                        // Store under actual day number, not row index
                        formattedData[original.day] = cleanRow;

                        formattedEmptyCols[original.day] = emptyCols;
                    });

                    const { stationId, date } = this.requestedData;

                    // You should create a monthly update endpoint for this
                    const url = `/wx/data/capture/monthly/update/?station_id=${stationId}&date=${date}`;

                    try {
                        const response = await axios.post(url, {
                            date: date,
                            table: formattedData
                        });

                        const taskId = response.data.taskId;

                        if (!taskId) {
                            this.snackbar = {
                                show: true,
                                message: response.data.message || 'No measurement records to save.',
                                color: 'orange'
                            };

                            this.draft = false;
                            this.updatedDays.clear();
                            this.loading = false;

                            await this.fetchData();

                            return;
                        }

                        this.pollUpdateData(taskId, stationId, date, formattedEmptyCols);

                    } catch (err) {
                        console.error("Save operation failed:", err);

                        this.snackbar = {
                            show: true,
                            message: 'Save operation failed',
                            color: 'red'
                        };

                        this.loading = false;
                    }
                },


                // poll update task
                pollUpdateData(taskId, stationId, date, formattedEmptyCols) {
                    const interval = setInterval(async () => {
                        try {
                            const res = await axios.get(`/api/task/${taskId}/`);

                            if (res.data.status === "completed") {
                                clearInterval(interval);

                                const url_empty_col = `/wx/data/capture/monthly/update/empty_cols` + `?station_id=${stationId}` + `&date=${date}`;

                                const hasEmptyCols = Object.values(formattedEmptyCols).some(cols => cols.length > 0);

                                if (hasEmptyCols) {
                                    await axios.post(url_empty_col, {
                                        empty_cols_data: formattedEmptyCols
                                    });
                                }

                                this.draft = false;
                                this.updatedDays.clear();

                                await this.fetchData();

                                this.snackbar = {
                                    show: true,
                                    message: 'Save operation successful',
                                    color: 'green'
                                };

                                this.loading = false;
                            } else if (res.data.status === "failed") {
                                clearInterval(interval);

                                this.snackbar = {
                                    show: true,
                                    message: 'Save operation failed',
                                    color: 'red'
                                };

                                this.loading = false;
                            }

                        } catch (err) {
                            clearInterval(interval);
                            console.error(err);

                            this.snackbar = {
                                show: true,
                                message: 'Polling failed',
                                color: 'red'
                            };

                            this.loading = false;
                        }
                    }, 500);
                },

                // execute on selection change
                onSelectionChanged() {
                    // pull the count into a reactive var
                    this.selectedCount = this.gridApi.getSelectedNodes().length;
                },


                // for row deletion
                deleteSelectedRows() {
                    const nodes = this.gridApi.getSelectedNodes();

                    if (!nodes.length) return;

                    this.pendingDeleteDays = nodes.map(n => Number(n.data.day));

                    this.confirmDeleteDialog = true;
                },

                
                async confirmDelete() {
                    this.confirmDeleteDialog = false;
                    this.loading = true;

                    const { stationId, date } = this.requestedData;

                    try {
                        const calls = this.pendingDeleteDays.map(day => {
                            const url = `/wx/data/capture/monthly/delete/`
                                + `?station_id=${stationId}`
                                + `&date=${date}`
                                + `&day=${day}`;

                            return axios.post(url, {
                                variable_ids: this.variableIds
                            });
                        });

                        const results = await Promise.all(calls);

                        console.log("Monthly delete results:", results.map(r => r.data));

                        const totalDeletedRows = results.reduce((total, result) => {
                            return total + (result.data.deleted_rows || 0);
                        }, 0);

                        if (totalDeletedRows > 0) {
                            this.snackbar = {
                                show: true,
                                message: `Deleted ${totalDeletedRows} database row(s).`,
                                color: 'green'
                            };
                        } else {
                            this.snackbar = {
                                show: true,
                                message: 'No matching data was deleted.',
                                color: 'orange'
                            };
                        }

                        if (this.gridApi) {
                            this.gridApi.deselectAll();
                        }

                        await this.fetchData();

                    } catch (err) {
                        console.error("Bulk delete error:", err);

                        this.snackbar = {
                            show: true,
                            message: "Error deleting rows. Check console",
                            color: 'red'
                        };

                    } finally {
                        this.loading = false;
                    }
                },

                // toggle themes (compact, open)
                toggleTheme() {
                    this.tableTheme =
                    this.tableTheme === 'ag-theme-quartz'
                        ? 'ag-theme-balham'
                        : 'ag-theme-quartz';
                },


                // for production show dialog
                showProduction() {
                    // open confirmation dialog
                    this.inProduction = true;
                },


                exportToCSV() {
                    this.gridApi.exportDataAsCsv({
                        fileName: `monthly-capture-file-${this.requestData.date}.csv`,
                        allColumns: false,
                        onlySelected: false,
                        suppressQuotes: false,
                    });
                },

                // more methods
            },
            computed: {
                // computed stuff go here
                // selection for delete feature
                hasSelection() {
                    return this.selectedCount > 0;
                }
            },
            watch: {
                // watch the station selector and if it changes immediately call fetch data
                'requestData.stationId': function (newValue, oldValue) {

                    this.hideTable = newValue==null
                    this.fetchData();
                },

            },
            beforeDestroy () {
                this.gridApi.destroy() // release event listeners if stored
            },
        });
    })();



    $(document).ready(function(){
        function getCookie(c_name) {
            if(document.cookie.length > 0) {
                c_start = document.cookie.indexOf(c_name + "=");
                if(c_start != -1) {
                    c_start = c_start + c_name.length + 1;
                    c_end = document.cookie.indexOf(";", c_start);
                    if(c_end == -1) c_end = document.cookie.length;
                    return unescape(document.cookie.substring(c_start,c_end));
                }
            }
            return "";
        }
        $(function () {
        axios.defaults.headers.common["X-CSRFToken"] = getCookie("csrftoken");
        axios.defaults.headers.common["Content-Type"] = 'application/json';
        });
    });
</script>

<!-- CSS Styling -->
<style>
    /* VERTICAL COLUMN DEVIDER (Light gray vertical line) */
    .ag-theme-quartz .ag-cell {
        border-right: 1px solid #ccc;
    }
    /* .ag-theme-quartz .ag-cell:last-child {
        border-right: none;
    } */
    .ag-theme-balham .ag-cell {
        border-right: 1px solid #ccc;
    }
    /* .ag-theme-balham .ag-cell:last-child {
        border-right: none;
    } */
    
    /* add a border to the cell headers */
    .ag-header-cell, .ag-header-group-cell  {
        border-right: 1px solid #ccc !important;
    }


    /* other styles */

    /* styling for error and info tooltip */
    /* error look: red background, dark red text */
    .error-tooltip {
        background: #fff;
        color: red;
        padding: 8px 10px;
        border-radius: 4px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.25);
        border: 1px solid red;
    }

    /* info look: light‐blue background, dark blue text */
    .info-tooltip {
        background: #fff;
        color: blue;
        padding: 8px 10px;
        border-radius: 4px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.25);
        border: 1px solid blue;
    }

    /* time column cell styling */
    .day-col {
        text-align: center;
        font-weight: bold;
        background-color: rgba(224, 224, 224, 0.498);
    }

    /* observer column cell styling */
    .obs-cols-group {
        text-align: center;
        color: red;
        /* background-color: rgba(224, 224, 224, 0.498); */
    }

    /* ON EDIT: centering the entry when you edit a cell */
    .ag-text-field-input {
        border: none !important;
        outline: none !important;
        margin-bottom: 0 !important;
    }

    /* ON EDIT: center the icon */
    .ag-picker-field-icon {
        position: relative !important;
        height: 100% !important;
    }

    .ag-icon-small-down::before {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;              /* if you also want perfect horizontal centering */
        transform: translate(-50%, -50%) !important;
        display: block !important;         /* so top/left actually apply */
    }

    /* to center the column names */
    .ag-header-group-cell-with-group {
        justify-content: center !important;
    }
    .ag-header-cell-label {
        justify-content: center !important;
    }

    /* error cell code */
    .invalid-cell {
        /* a light red background for visibility */
        background-color: rgba(255, 0, 0, 0.2) !important;
    }


    /* ag grid col header colours */
    .temp-cols-group,
    .temp-cols-group.ag-header-active,
    .temp-cols-group:hover,
    .temp-cols-group:focus {
        background-color: #FFB3B3 !important; /* Light Red/Coral */
    }
    .wind-cols-group,
    .wind-cols-group.ag-header-active,
    .wind-cols-group:hover,
    .wind-cols-group:focus {
        background-color: #B3FFB3 !important; /* Light Blue */
    }
    .soil-cols-group,
    .soil-cols-group.ag-header-active,
    .soil-cols-group:hover,
    .soil-cols-group:focus {
        background-color: #D1B3FF !important; /* Light Purple */
    }
    .precip-cols-group,
    .precip-cols-group.ag-header-active,
    .precip-cols-group:hover,
    .precip-cols-group:focus {
        background-color: #B3E0FF !important; /* Light Green */
    }
    .hum-cols-group,
    .hum-cols-group.ag-header-active,
    .hum-cols-group:hover,
    .hum-cols-group:focus {
        background-color: #FFD9B3 !important; /* Light Orange */
    }
    .misc-cols-group,
    .misc-cols-group.ag-header-active,
    .misc-cols-group:hover,
    .misc-cols-group:focus {
        background-color: rgba(224, 224, 224, 0.626) !important; /* Light Gray (default) */
    }

    /* make the entire last 6 rows light grey */
    .ag-row.grey-row .ag-cell {
        background-color: rgba(224, 224, 224, 0.498) !important;
        /* optional: dim the text, too */
        color: #648cdb !important;
    }
      
</style>



{% endblock %}