/**
 * gridRenderer.js — Data-driven grid renderer for imported.php
 *
 * Reads window.gridData (array of row objects) and window.gridMeta (column defs, config).
 * Renders only visible rows into DOM. Propagate/edit operates on gridData array,
 * then re-renders visible rows. Save reads from gridData, not DOM.
 */
(function () {
    'use strict';

    const PAGE_SIZE = 20;
    let revealedCount = PAGE_SIZE;
    let dropdownOptionsCache = {}; // fieldId -> [{id, text}]
    let clientData = []; // loaded from get_clienti.php
    let fixedFieldCache = window.fixedFieldDataCache || {};
    window.fixedFieldDataCache = fixedFieldCache;

    const data = window.gridData || [];
    const meta = window.gridMeta || {};
    const columns = meta.columns || [];
    const totalRows = data.length;

    // ── DOM refs ────────────────────────────────────────────────────────────
    let rowContainer = null;
    let headerContainer = null;
    let topContainer = null;
    let statusEl = null;

    // ── Helpers ─────────────────────────────────────────────────────────────

    function esc(str) {
        if (str === null || str === undefined) return '';
        const d = document.createElement('div');
        d.textContent = String(str);
        return d.innerHTML;
    }

    function getDetailValue(rowIndex, mappingId) {
        return data[rowIndex].details[String(mappingId)] ?? '';
    }

    function setDetailValue(rowIndex, mappingId, value) {
        data[rowIndex].details[String(mappingId)] = value;
        data[rowIndex]._dirty = true;
    }

    function getFixedValue(rowIndex, key) {
        return data[rowIndex].fixedFields[key] ?? '';
    }

    function setFixedValue(rowIndex, key, value) {
        data[rowIndex].fixedFields[key] = value;
        data[rowIndex]._dirty = true;
    }

    // ── Client data loading ────────────────────────────────────────────────

    function formatClientLabel(client) {
        const nome = client.Nominativo || '';
        const id = client.IdCliente || '';
        const code = (client.CodiceCliente || '').toString().trim();
        const suffix = (code.split('_')[1] || '').trim();
        const short = suffix || (code ? code.charAt(0) : '--');
        return `${nome.trim()} - ${short} (ID: ${id})`;
    }

    function buildClientOptionsHTML(selectedId) {
        let html = '<option value="">Select a client...</option>';
        clientData.forEach(c => {
            const id = c.IdCliente || '';
            const sel = String(id) === String(selectedId) ? ' selected' : '';
            html += `<option value="${id}"${sel}>${esc(formatClientLabel(c))}</option>`;
        });
        return html;
    }

    async function loadClientData() {
        if (clientData.length > 0) return;
        try {
            const resp = await fetch('get_clienti.php');
            const json = await resp.json();
            clientData = json.value || [];
        } catch (e) {
            console.error('Failed to load clients:', e);
        }
    }

    // ── Fixed field data loading ───────────────────────────────────────────

    const fixedFieldApiConfig = {
        MoltiplicatorePrezzo: { endpoint: 'MoltiplicatorePrezzo', idKey: 'IdMoltiplicatorePrezzo', textKey: 'Descrizione' },
        AnagraficaCertestObject: { endpoint: 'AnagraficaCertestObject', idKey: 'IdAnagrafica', textKey: 'NomeAnagrafica' },
        AnagraficaCertestService: { endpoint: 'AnagraficaCertestService', idKey: 'IdAnagrafica', textKey: 'NomeAnagrafica' },
        ClienteResponsabile: { endpoint: 'ClienteResponsabile', idKey: 'IdClienteResponsabile', textKey: 'Nominativo', dependsOn: 'idclient', getParams: (cid) => ({ id_cliente: cid }) },
        ClienteFornitore: { source: 'clients' },
        ClienteAnalisi: { source: 'clients' },
    };

    let _pendingFixed = {};

    async function loadFixedFieldOptions(fieldKey, clientId) {
        const config = fixedFieldApiConfig[fieldKey];
        if (!config) return [];

        // Client-sourced fields
        if (config.source === 'clients') {
            await loadClientData();
            const results = clientData.map(c => ({ id: c.IdCliente, text: formatClientLabel(c) }));
            results.sort((a, b) => String(a.text).localeCompare(String(b.text), 'it', { sensitivity: 'base' }));
            fixedFieldCache[fieldKey] = results;
            return results;
        }

        const cacheKey = fieldKey + (clientId ? '_' + clientId : '');
        if (fixedFieldCache[cacheKey]) return fixedFieldCache[cacheKey];
        if (_pendingFixed[cacheKey]) return _pendingFixed[cacheKey];

        const params = { field: config.endpoint };
        if (config.dependsOn && clientId) {
            Object.assign(params, config.getParams(clientId));
        }

        _pendingFixed[cacheKey] = (async () => {
            try {
                const resp = await fetch('get_fixed_field_data.php?' + new URLSearchParams(params));
                const json = await resp.json();
                let items = (fieldKey === 'ClienteResponsabile') ? (json.Responsabili || []) : (json.value || json.d?.results || json || []);
                const results = items.map(item => ({
                    id: item[config.idKey],
                    text: (item.Codice ? item.Codice + ' - ' : '') + (item[config.textKey] || '')
                })).sort((a, b) => String(a.text).localeCompare(String(b.text), 'it', { sensitivity: 'base' }));
                fixedFieldCache[cacheKey] = results;
                delete _pendingFixed[cacheKey];
                return results;
            } catch (e) {
                delete _pendingFixed[cacheKey];
                console.error('Failed to load fixed field ' + fieldKey, e);
                return [];
            }
        })();

        return _pendingFixed[cacheKey];
    }

    // ── Custom field dropdown data loading ─────────────────────────────────

    async function loadDropdownOptions(fieldIds) {
        const missing = fieldIds.filter(id => !dropdownOptionsCache[id]);
        if (missing.length > 0) {
            try {
                const resp = await fetch('get_customfield_values.php?field_ids=' + missing.join(','));
                const json = await resp.json();
                // API returns { fieldId: [values] } directly (no success/data wrapper)
                const entries = json.data ? json.data : json;
                for (const [fid, values] of Object.entries(entries)) {
                    if (Array.isArray(values)) {
                        const sorted = values.sort((a, b) =>
                            String(a.Valore || '').localeCompare(String(b.Valore || ''), 'it', { sensitivity: 'base' })
                        );
                        dropdownOptionsCache[fid] = sorted;
                    }
                }
            } catch (e) {
                console.error('Failed to load dropdown options:', e);
            }
        }
    }

    // ── Preload all data ───────────────────────────────────────────────────

    async function preloadAllData() {
        // 1. Clients
        await loadClientData();

        // 2. Non-dependent fixed fields
        const nonDependent = Object.keys(fixedFieldApiConfig).filter(k => !fixedFieldApiConfig[k].dependsOn && !fixedFieldApiConfig[k].source);
        await Promise.all(nonDependent.map(k => loadFixedFieldOptions(k)));

        // Client-sourced fixed fields
        const clientSourced = Object.keys(fixedFieldApiConfig).filter(k => fixedFieldApiConfig[k].source === 'clients');
        await Promise.all(clientSourced.map(k => loadFixedFieldOptions(k)));

        // 3. Dependent fixed fields — collect unique clientIds
        const clientIds = new Set();
        data.forEach(row => {
            if (row.idclient) clientIds.add(String(row.idclient));
        });
        const dependent = Object.keys(fixedFieldApiConfig).filter(k => fixedFieldApiConfig[k].dependsOn);
        for (const fieldKey of dependent) {
            for (const cid of clientIds) {
                await loadFixedFieldOptions(fieldKey, cid);
            }
        }

        // 4. Custom field dropdowns
        const fieldIds = columns
            .filter(c => c.type === 'detail' && c.dataType === 'SceltaMultipla' && c.fieldId)
            .map(c => String(c.fieldId));
        const uniqueIds = [...new Set(fieldIds)];
        if (uniqueIds.length > 0) {
            await loadDropdownOptions(uniqueIds);
        }

        console.log('[gridRenderer] preload done:', {
            clients: clientData.length,
            fixedFieldCache: Object.keys(fixedFieldCache),
            dropdownOptionsCache: Object.keys(dropdownOptionsCache),
        });
    }

    // ── Cell rendering ─────────────────────────────────────────────────────

    function createCell(col, rowIndex, cellIndex) {
        const div = document.createElement('div');
        div.className = 'grid-cell editable-cell';
        div.dataset.col = col.key;
        div.dataset.colType = col.type;
        div.dataset.row = rowIndex;
        div.dataset.index = cellIndex;
        div.style.flex = `0 0 ${col.width}px`;

        const row = data[rowIndex];

        switch (col.type) {
            case 'main_field':
                div.innerHTML = createInputHTML(col, row.mainFieldValue || '', rowIndex);
                break;

            case 'status': {
                const st = row.status || 'i';
                const label = st === 'i' ? 'Imported' : (st === 'P' ? 'In Progress' : 'To LIMS');
                let html = `<span class="status-badge status-${esc(st)}">${label}</span>`;
                if (row.commessaweb) {
                    html += `<span class="commessaweb-code" style="display:block; font-size:0.75em; color:#555; margin-top:2px;">${esc(row.commessaweb)}</span>`;
                }
                div.innerHTML = html;
                div.classList.remove('editable-cell');
                break;
            }

            case 'idclient': {
                const sel = document.createElement('select');
                sel.className = 'cell-input dropdown-select client-select searchable-client';
                sel.dataset.currentValue = row.idclient || '';
                sel.innerHTML = buildClientOptionsHTML(row.idclient);
                div.appendChild(sel);
                break;
            }

            case 'cliente_fornitore_id': {
                const sel = document.createElement('select');
                sel.className = 'cell-input dropdown-select client-select searchable-client fornitore-select';
                sel.dataset.currentValue = row.cliente_fornitore_id || '';
                sel.innerHTML = buildClientOptionsHTML(row.cliente_fornitore_id);
                div.appendChild(sel);
                break;
            }

            case 'detail': {
                const val = getDetailValue(rowIndex, col.key);
                div.innerHTML = createInputHTML(col, val, rowIndex);
                break;
            }

            case 'tested_component':
                div.style.overflow = 'visible';
                div.innerHTML = `<div style="display:flex; align-items:center; gap:4px; width:100%; height:100%;"><input type="text" class="cell-input manual-input" style="flex:1; min-width:0; height:28px;"><button type="button" class="add-part-btn btn btn-sm btn-primary" data-row="${rowIndex}" data-iddatadb="${row.iddatadb}" style="display:inline-flex; align-items:center; justify-content:center; min-width:28px; width:28px; height:28px; padding:0; font-size:12px; flex-shrink:0; text-align:center;"><i class="fas fa-plus" style="margin:0; padding:0;"></i></button></div>`;
                break;

            case 'awb':
                div.innerHTML = `<select class="carrier-select"><option value="tnt-it">TNT Italy</option><option value="dhl">DHL</option><option value="gls">GLS</option><option value="sda">SDA</option><option value="ups">UPS</option></select>` +
                    `<input type="text" class="cell-input awb-input" placeholder="AWB Number">` +
                    `<button type="button" class="go-btn" data-row="${rowIndex}"><i class="fas fa-play"></i></button>`;
                break;

            case 'tracking':
                div.className = 'grid-cell tracking-info';
                div.dataset.row = rowIndex;
                div.innerHTML = '<span class="tracking-result">Shipment Info</span>';
                break;

            case 'fixed': {
                const val = getFixedValue(rowIndex, col.key);
                div.innerHTML = createFixedFieldHTML(col, val, rowIndex);
                break;
            }

            case 'static': {
                const val = row[col.key] || '';
                div.classList.remove('editable-cell');
                if (col.key === 'filename_import' && val) {
                    div.innerHTML = `<a href="imported_trf/${esc(val)}" target="_blank">File</a>`;
                } else {
                    div.innerHTML = `<span>${esc(val)}</span>`;
                }
                break;
            }
        }

        return div;
    }

    function createInputHTML(col, value, rowIndex) {
        const cls = col.isManual ? 'manual-input' : 'auto-input';
        const reqCls = col.isRequired ? ' required-input' : '';
        const req = col.isRequired ? ' required' : '';
        const v = esc(value);

        if (col.dataType === 'SceltaMultipla') {
            const options = buildDropdownOptionsHTML(col.fieldId, value);
            return `<select class="cell-input dropdown-select ${cls}${reqCls}" data-field-id="${col.fieldId}"${req}>${options}</select>`;
        }
        if (col.dataType === 'Data') {
            return `<input type="text" class="cell-input date-picker ${cls}${reqCls}" value="${v}"${req}>`;
        }
        if (col.dataType === 'INT') {
            return `<input type="number" class="cell-input ${cls}${reqCls}" value="${v}"${req}>`;
        }
        if (col.autoValue === 'import_time' || (meta.timeLabels || []).includes(col.label)) {
            return `<input type="time" class="cell-input ${cls}${reqCls}" value="${v}"${req}>`;
        }
        return `<input type="text" class="cell-input ${cls}${reqCls}" value="${v}"${req}>`;
    }

    function createFixedFieldHTML(col, value, rowIndex) {
        if (col.dataType === 'DATE') {
            const reqCls = col.isRequired ? ' required-input' : '';
            const req = col.isRequired ? ' required' : '';
            return `<input type="text" class="cell-input date-picker manual-input${reqCls} fixed-input" data-fixed-key="${col.key}" value="${esc(value)}"${req}>`;
        }

        // Select — build from cache
        const isApiField = !!fixedFieldApiConfig[col.key];
        const selectClass = isApiField ? 'api-fixed-select' : '';
        let options = '<option value="">Seleziona...</option>';
        const cacheKey = fixedFieldApiConfig[col.key]?.dependsOn
            ? col.key + '_' + (data[rowIndex].idclient || '')
            : col.key;
        const items = fixedFieldCache[cacheKey] || [];
        items.forEach(item => {
            const sel = String(item.id) === String(value) ? ' selected' : '';
            options += `<option value="${item.id}"${sel}>${esc(item.text)}</option>`;
        });

        const reqCls = col.isRequired ? ' required-input' : '';
        const req = col.isRequired ? ' required' : '';
        return `<select class="cell-input manual-input fixed-input ${selectClass}${reqCls}" data-fixed-key="${col.key}" data-current-value="${esc(value)}"${req}>${options}</select>`;
    }

    function buildDropdownOptionsHTML(fieldId, selectedValue) {
        let html = '<option value="">Seleziona...</option>';
        const items = dropdownOptionsCache[fieldId] || [];
        items.forEach(item => {
            const sel = String(item.IdCustomFieldsValue) === String(selectedValue) ? ' selected' : '';
            html += `<option value="${item.IdCustomFieldsValue}"${sel}>${esc(item.Valore)}</option>`;
        });
        return html;
    }

    // ── Row rendering ──────────────────────────────────────────────────────

    function renderActionButtons(rowIndex) {
        const row = data[rowIndex];
        const isExported = row.status === 'l';
        const div = document.createElement('div');
        div.className = 'grid-cell button-cell';
        div.style.flex = '0 0 auto';
        div.style.position = 'relative';

        let html = '';
        if (meta.isAdmin) {
            html += `<button type="button" class="export-lims-btn action-btn" data-row="${rowIndex}" data-iddatadb="${row.iddatadb}" title="${isExported ? 'Already exported' : 'Export to LIMS'}" style="background:${isExported ? '#ccc' : '#eb0b0b'}; color:white; border:none; border-radius:5px; cursor:${isExported ? 'not-allowed' : 'pointer'}; ${isExported ? 'opacity:0.5;' : ''}" ${isExported ? 'disabled' : ''}><i class="fas fa-upload"></i></button>`;
        }
        html += `<button type="button" class="save-btn action-btn" data-row="${rowIndex}" title="Save" style="background:#28a745; color:white; border:none; border-radius:5px; cursor:pointer;"><i class="fas fa-save"></i></button>`;
        html += `<button type="button" class="photos-btn action-btn" data-row="${rowIndex}" data-iddatadb="${row.iddatadb}" title="Photos" style="background:#007bff; color:white; border:none; border-radius:5px; cursor:pointer;"><i class="fas fa-camera"></i></button>`;
        html += `<button type="button" class="parts-btn action-btn" data-row="${rowIndex}" data-iddatadb="${row.iddatadb}" title="Parts" style="background:#ffc107; color:white; border:none; border-radius:5px; cursor:pointer;"><i class="fas fa-puzzle-piece"></i></button>`;
        html += `<button type="button" class="delete-btn action-btn" data-row="${rowIndex}" data-iddatadb="${row.iddatadb}" title="Delete" style="background:#dc3545; color:white; border:none; border-radius:5px; cursor:pointer;"><i class="fas fa-trash"></i></button>`;

        div.innerHTML = html;
        return div;
    }

    function renderRow(rowIndex) {
        const row = data[rowIndex];
        const rowDiv = document.createElement('div');
        rowDiv.className = 'grid-row';
        rowDiv.dataset.id = row.iddatadb;

        if (row._dirty) rowDiv.classList.add('row-dirty');

        // Action buttons
        rowDiv.appendChild(renderActionButtons(rowIndex));

        // All columns
        let cellIndex = 1;
        columns.forEach(col => {
            rowDiv.appendChild(createCell(col, rowIndex, cellIndex));
            cellIndex++;
        });

        // Restore validation errors if present
        if (row._validationErrors && row._validationErrors.length > 0) {
            rowDiv.classList.add('validation-row-error');
            const messages = [];
            row._validationErrors.forEach(err => {
                messages.push(err.message);
                if (!err.field) return;
                let cell = null;
                if (err.field.startsWith('field_label:')) {
                    const label = err.field.substring('field_label:'.length);
                    const headers = document.querySelectorAll('.grid-header');
                    let targetIndex = null;
                    headers.forEach(h => { if (h.textContent.trim() === label) targetIndex = h.getAttribute('data-index'); });
                    if (targetIndex) cell = rowDiv.querySelector(`.grid-cell[data-index="${targetIndex}"]`);
                } else {
                    cell = rowDiv.querySelector(`.grid-cell[data-col="${err.field}"]`);
                }
                if (cell) {
                    cell.classList.add('validation-error');
                    cell.querySelectorAll('input, select').forEach(el => el.classList.add('input-validation-error'));
                    let tooltip = cell.querySelector('.validation-tooltip');
                    if (!tooltip) { tooltip = document.createElement('div'); tooltip.className = 'validation-tooltip'; cell.appendChild(tooltip); }
                    tooltip.textContent = err.message;
                }
            });
            // Show error msg on button cell
            const btnCell2 = rowDiv.querySelector('.button-cell');
            if (btnCell2) {
                const errorEl = document.createElement('div');
                errorEl.className = 'batch-error-msg';
                errorEl.textContent = 'Warning — click for details';
                errorEl.addEventListener('click', () => {
                    document.getElementById('exportResponseMessage').innerHTML = messages.join('<br>');
                    document.getElementById('exportResponseModalLabel').textContent = 'Validation Error (id: ' + row.iddatadb + ')';
                    new bootstrap.Modal(document.getElementById('exportResponseModal'), { keyboard: false }).show();
                });
                btnCell2.appendChild(errorEl);
            }
        }

        // Restore export error indicator if present
        if (row._exportError) {
            rowDiv.classList.add('batch-row-error');
            const btnCell = rowDiv.querySelector('.button-cell');
            if (btnCell) {
                const errorEl = document.createElement('div');
                errorEl.className = 'batch-error-msg';
                errorEl.textContent = 'Warning — click for details';
                errorEl.addEventListener('click', () => {
                    document.getElementById('exportResponseMessage').innerHTML = row._exportError.replace(/\n/g, '<br>');
                    document.getElementById('exportResponseModalLabel').textContent = 'Error (id: ' + row.iddatadb + ')';
                    new bootstrap.Modal(document.getElementById('exportResponseModal'), { keyboard: false }).show();
                });
                btnCell.appendChild(errorEl);
            }
        }

        return rowDiv;
    }

    // ── Render visible rows ────────────────────────────────────────────────

    function renderVisibleRows() {
        if (!rowContainer) return;

        // Destroy Select2 on existing rows
        $(rowContainer).find('.select2-hidden-accessible').select2('destroy');

        rowContainer.innerHTML = '';
        const end = Math.min(revealedCount, totalRows);
        for (let i = 0; i < end; i++) {
            rowContainer.appendChild(renderRow(i));
        }

        // Init flatpickr on visible date pickers
        initFlatpickr();

        updateStatus();
        updateDirtyIndicator();
    }

    function renderSingleRow(rowIndex) {
        const existing = rowContainer.querySelector(`.grid-row[data-id="${data[rowIndex].iddatadb}"]`);
        if (!existing) return;

        // Destroy Select2 before removing
        $(existing).find('.select2-hidden-accessible').select2('destroy');

        const newRow = renderRow(rowIndex);
        existing.replaceWith(newRow);

        // Init flatpickr
        $(newRow).find('.date-picker').each(function () {
            flatpickr(this, { dateFormat: 'Y-m-d', allowInput: true });
        });
    }

    function revealNextBatch() {
        if (revealedCount >= totalRows) return;
        const start = revealedCount;
        revealedCount = Math.min(revealedCount + PAGE_SIZE, totalRows);
        for (let i = start; i < revealedCount; i++) {
            rowContainer.appendChild(renderRow(i));
        }
        initFlatpickr();
        updateStatus();
    }

    function initFlatpickr() {
        $(rowContainer).find('.date-picker:not(.flatpickr-input)').each(function () {
            flatpickr(this, { dateFormat: 'Y-m-d', allowInput: true });
        });
    }

    // ── Headers & Propagate row ────────────────────────────────────────────

    function renderHeaders() {
        if (!headerContainer) return;
        headerContainer.innerHTML = '';

        // Actions header
        const actH = document.createElement('div');
        actH.className = 'grid-header button-header';
        actH.style.flex = '0 0 380px';
        actH.textContent = 'Actions';
        headerContainer.appendChild(actH);

        let idx = 1;
        columns.forEach(col => {
            const h = document.createElement('div');
            h.className = 'grid-header';
            h.dataset.index = idx;
            h.style.flex = `0 0 ${col.width}px`;
            h.style.position = 'relative';
            h.innerHTML = esc(col.label) + '<div class="resizer"></div>';
            headerContainer.appendChild(h);
            idx++;
        });
    }

    function renderTopRow() {
        if (!topContainer) return;
        topContainer.innerHTML = '';

        // Empty cell for actions column
        const empty = document.createElement('div');
        empty.className = 'grid-cell save-all-cell';
        topContainer.appendChild(empty);

        columns.forEach((col, colIdx) => {
            const cell = document.createElement('div');
            cell.className = 'grid-cell grid-top-cell';
            cell.style.flex = `0 0 ${col.width}px`;

            if (col.editable === false || col.type === 'static' || col.type === 'tracking') {
                // Empty top cell
            } else if (col.type === 'idclient') {
                cell.innerHTML = `<select class="custom-field dropdown-select client-select searchable-client" data-column="idclient" id="clientSelect"><option value="">Select a client...</option></select>` +
                    `<button type="button" class="propagate-btn" data-column="idclient" data-col-index="${colIdx}"><i class="fas fa-arrow-down"></i></button>`;
            } else if (col.type === 'cliente_fornitore_id') {
                cell.innerHTML = `<select class="custom-field dropdown-select client-select searchable-client" data-column="cliente_fornitore_id" id="clienteFornitoreSelect"><option value="">Select a supplier...</option></select>` +
                    `<button type="button" class="propagate-btn" data-column="cliente_fornitore_id" data-col-index="${colIdx}"><i class="fas fa-arrow-down"></i></button>`;
            } else if (col.type === 'fixed' && col.dataType === 'DATE') {
                cell.innerHTML = `<input type="text" class="custom-field date-picker manual-input fixed-top" data-column="fixed_${col.key}" data-fixed-key="${col.key}" value="">` +
                    `<button type="button" class="propagate-btn" data-column="fixed_${col.key}" data-col-index="${colIdx}"><i class="fas fa-arrow-down"></i></button>`;
            } else if (col.type === 'fixed') {
                const isApiField = !!fixedFieldApiConfig[col.key];
                if (isApiField) {
                    cell.innerHTML = `<select class="custom-field dropdown-select api-fixed-select fixed-top" data-column="fixed_${col.key}" data-fixed-key="${col.key}"><option value="">Seleziona...</option></select>` +
                        `<button type="button" class="propagate-btn" data-column="fixed_${col.key}" data-col-index="${colIdx}"><i class="fas fa-arrow-down"></i></button>`;
                } else {
                    cell.innerHTML = `<input type="number" class="custom-field manual-input fixed-top" data-column="fixed_${col.key}" data-fixed-key="${col.key}" value="">` +
                        `<button type="button" class="propagate-btn" data-column="fixed_${col.key}" data-col-index="${colIdx}"><i class="fas fa-arrow-down"></i></button>`;
                }
            } else if (col.type === 'detail' || col.type === 'main_field') {
                if (col.dataType === 'SceltaMultipla') {
                    cell.innerHTML = `<select class="custom-field dropdown-select" data-column="col_${colIdx}" data-field-id="${col.fieldId}"><option value="">Seleziona...</option></select>` +
                        `<button type="button" class="propagate-btn" data-column="col_${colIdx}" data-col-index="${colIdx}"><i class="fas fa-arrow-down"></i></button>`;
                } else if (col.dataType === 'Data') {
                    cell.innerHTML = `<input type="text" class="custom-field date-picker" data-column="col_${colIdx}" value="">` +
                        `<button type="button" class="propagate-btn" data-column="col_${colIdx}" data-col-index="${colIdx}"><i class="fas fa-arrow-down"></i></button>`;
                } else {
                    cell.innerHTML = `<input type="text" class="custom-field" data-column="col_${colIdx}" value="">` +
                        `<button type="button" class="propagate-btn" data-column="col_${colIdx}" data-col-index="${colIdx}"><i class="fas fa-arrow-down"></i></button>`;
                }
            }

            topContainer.appendChild(cell);
        });

        // Populate top row selects
        populateTopRowSelects();
    }

    async function populateTopRowSelects() {
        // Client selects in top row
        const clientSel = document.getElementById('clientSelect');
        if (clientSel) {
            clientSel.innerHTML = buildClientOptionsHTML(meta.defaultIdclient);
            $(clientSel).select2({ placeholder: 'Select a client...', allowClear: true, width: '100%', minimumInputLength: 1 });
        }
        const fornitSel = document.getElementById('clienteFornitoreSelect');
        if (fornitSel) {
            fornitSel.innerHTML = buildClientOptionsHTML('');
            $(fornitSel).select2({ placeholder: 'Select a supplier...', allowClear: true, width: '100%', minimumInputLength: 1 });
        }

        // Fixed field selects in top row
        topContainer.querySelectorAll('.api-fixed-select').forEach(sel => {
            const fieldKey = sel.dataset.fixedKey;
            const config = fixedFieldApiConfig[fieldKey];

            if (config && config.dependsOn) {
                // For dependent fields: merge all cached values across all clientIds
                const allItems = new Map();
                for (const [key, items] of Object.entries(fixedFieldCache)) {
                    if (key.startsWith(fieldKey + '_')) {
                        items.forEach(item => allItems.set(String(item.id), item));
                    }
                }
                sel.innerHTML = '<option value="">Seleziona...</option>';
                [...allItems.values()]
                    .sort((a, b) => String(a.text).localeCompare(String(b.text), 'it', { sensitivity: 'base' }))
                    .forEach(item => sel.add(new Option(item.text, item.id)));
            } else {
                const items = fixedFieldCache[fieldKey] || [];
                sel.innerHTML = '<option value="">Seleziona...</option>';
                items.forEach(item => sel.add(new Option(item.text, item.id)));
            }
        });

        // Custom field dropdowns in top row
        topContainer.querySelectorAll('.dropdown-select[data-field-id]').forEach(sel => {
            const fieldId = sel.dataset.fieldId;
            const items = dropdownOptionsCache[fieldId] || [];
            sel.innerHTML = '<option value="">Seleziona...</option>';
            items.forEach(item => {
                sel.add(new Option(item.Valore, item.IdCustomFieldsValue));
            });
        });

        // Flatpickr in top row
        topContainer.querySelectorAll('.date-picker').forEach(el => {
            flatpickr(el, { dateFormat: 'Y-m-d', allowInput: true });
        });
    }

    // ── Event delegation ───────────────────────────────────────────────────

    function attachEvents() {
        if (!rowContainer) return;

        // Cell value changes → write to gridData
        rowContainer.addEventListener('change', function (e) {
            const cell = e.target.closest('.grid-cell');
            if (!cell || !cell.dataset.row) return;
            const rowIndex = parseInt(cell.dataset.row);
            const colType = cell.dataset.colType;
            const colKey = cell.dataset.col;
            const value = e.target.value;

            if (colType === 'detail' || colType === 'main_field') {
                if (colType === 'main_field') {
                    data[rowIndex].mainFieldValue = value;
                }
                setDetailValue(rowIndex, colKey, value);
            } else if (colType === 'fixed') {
                setFixedValue(rowIndex, colKey, value);
            } else if (colType === 'idclient') {
                data[rowIndex].idclient = value;
                data[rowIndex]._dirty = true;
            } else if (colType === 'cliente_fornitore_id') {
                data[rowIndex].cliente_fornitore_id = value;
                data[rowIndex]._dirty = true;
                console.log('[gridRenderer] cliente_fornitore_id changed:', rowIndex, value);
            }

            // Visual feedback
            cell.classList.add('cell-changed');
            updateDirtyIndicator();
        });

        // Propagate buttons
        document.addEventListener('click', function (e) {
            const btn = e.target.closest('.propagate-btn');
            if (!btn) return;

            const colIndex = parseInt(btn.dataset.colIndex);
            const column = btn.dataset.column;
            if (isNaN(colIndex) && !column) return;

            // Get value from the input/select in the same cell
            const cell = btn.closest('.grid-cell') || btn.closest('.grid-top-cell');
            if (!cell) return;
            const input = cell.querySelector('select, input');
            if (!input) return;
            const value = $(input).hasClass('select2-hidden-accessible') ? $(input).val() : input.value;

            const col = columns[colIndex] || null;

            if (column === 'idclient') {
                data.forEach(row => { row.idclient = value; row._dirty = true; });
            } else if (column === 'cliente_fornitore_id') {
                data.forEach(row => { row.cliente_fornitore_id = value; row._dirty = true; });
            } else if (column && column.startsWith('fixed_')) {
                const fixedKey = column.replace('fixed_', '');
                data.forEach(row => { row.fixedFields[fixedKey] = value; row._dirty = true; });
            } else if (col) {
                if (col.type === 'detail' || col.type === 'main_field') {
                    data.forEach(row => {
                        row.details[col.key] = value;
                        if (col.type === 'main_field') row.mainFieldValue = value;
                        row._dirty = true;
                    });
                }
            }

            renderVisibleRows();
        });

        // Select2 change events (don't bubble via native addEventListener)
        $(rowContainer).on('change', '.searchable-client', function () {
            const cell = this.closest('.grid-cell');
            if (!cell || !cell.dataset.row) return;
            const rowIndex = parseInt(cell.dataset.row);
            const colType = cell.dataset.colType;
            const value = $(this).val() || '';

            if (colType === 'idclient') {
                data[rowIndex].idclient = value;
                data[rowIndex]._dirty = true;
            } else if (colType === 'cliente_fornitore_id') {
                data[rowIndex].cliente_fornitore_id = value;
                data[rowIndex]._dirty = true;
            }
            cell.classList.add('cell-changed');
            updateDirtyIndicator();
        });

        // Select2 change on fixed field selects
        $(rowContainer).on('change', '.api-fixed-select', function () {
            const cell = this.closest('.grid-cell');
            if (!cell || !cell.dataset.row) return;
            const rowIndex = parseInt(cell.dataset.row);
            const key = this.dataset.fixedKey || cell.dataset.col;
            const value = $(this).val() || '';

            if (key) {
                data[rowIndex].fixedFields[key] = value;
                data[rowIndex]._dirty = true;
                cell.classList.add('cell-changed');
                updateDirtyIndicator();
            }
        });

        // Scroll
        function onScroll() {
            if (revealedCount >= totalRows) return;
            const docEl = document.documentElement;
            const scrollBottom = Math.max(docEl.scrollTop + docEl.clientHeight, document.body.scrollTop + window.innerHeight);
            if (scrollBottom >= docEl.scrollHeight - 300) {
                revealNextBatch();
            }
        }
        window.addEventListener('scroll', onScroll, { passive: true });
        document.querySelector('.page-wrapper')?.addEventListener('scroll', onScroll, { passive: true });
    }

    // ── Save ───────────────────────────────────────────────────────────────

    window.buildSavePayload = function (rowIndex) {
        const row = data[rowIndex];
        const formData = new FormData();
        formData.append('iddatadb', row.iddatadb);

        // Details
        for (const [mappingId, value] of Object.entries(row.details)) {
            formData.append(`details${mappingId}field_value`, value);
        }

        // Client
        if (row.idclient) formData.append('idclient', row.idclient);
        formData.append('cliente_fornitore_id', row.cliente_fornitore_id || '');

        // Fixed fields → real column names
        const aliasMap = meta.fixedAliasMap || {};
        for (const [logicalKey, value] of Object.entries(row.fixedFields)) {
            const realKey = aliasMap[logicalKey] || logicalKey;
            formData.append(realKey, value);
        }

        return formData;
    };

    // ── Dirty indicator ────────────────────────────────────────────────────

    function updateDirtyIndicator() {
        const dirtyCount = data.filter(r => r._dirty).length;
        const indicator = document.getElementById('unsavedChanges');
        const changedEl = document.getElementById('changedRows');
        if (indicator) {
            indicator.style.display = dirtyCount > 0 ? '' : 'none';
        }
        if (changedEl) {
            changedEl.textContent = dirtyCount > 0 ? `(${dirtyCount} rows)` : '';
        }
    }

    function updateStatus() {
        if (!statusEl) return;
        const shown = Math.min(revealedCount, totalRows);
        if (shown >= totalRows) {
            statusEl.textContent = `All ${totalRows} rows loaded`;
            setTimeout(() => statusEl.style.display = 'none', 2000);
        } else {
            statusEl.textContent = `Showing ${shown} of ${totalRows} rows — scroll down for more`;
        }
    }

    // ── Lazy Select2 for row selects ───────────────────────────────────────

    function initLazySelect2() {
        $(document).on('mouseenter', '.grid-row .grid-cell', function () {
            $(this).find('.searchable-client:not(.select2-hidden-accessible)').each(function () {
                $(this).select2({
                    placeholder: 'Select a client...',
                    allowClear: true,
                    width: '100%',
                    dropdownCssClass: 'select2-dropdown-smaller',
                    minimumInputLength: 1
                });
            });
            $(this).find('select[data-field-id]:not(.select2-hidden-accessible)').each(function () {
                if ((this.options || []).length > 12) {
                    $(this).select2({ placeholder: 'Seleziona...', allowClear: true, width: '100%' });
                }
            });
        });
    }

    // ── Init ───────────────────────────────────────────────────────────────

    async function init() {
        rowContainer = document.getElementById('gridRowContainer');
        headerContainer = document.getElementById('gridHeaderContainer');
        topContainer = document.getElementById('gridTopContainer');

        if (!rowContainer) {
            console.error('gridRenderer: #gridRowContainer not found');
            return;
        }

        // Status bar
        statusEl = document.createElement('div');
        statusEl.style.cssText = 'text-align:center; padding:8px; color:#666; font-size:12px;';
        if (totalRows > PAGE_SIZE) {
            statusEl.textContent = `Loading data...`;
            rowContainer.parentElement.appendChild(statusEl);
        }

        // Preload all dropdown/field data
        await preloadAllData();

        // Render
        renderHeaders();
        renderTopRow();
        renderVisibleRows();

        // Events
        attachEvents();
        initLazySelect2();
    }

    // Start when DOM ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }

    // ── Public API ─────────────────────────────────────────────────────────
    window.gridRenderer = {
        renderVisibleRows,
        renderSingleRow,
        revealNextBatch,
        buildSavePayload: window.buildSavePayload,
        getData: () => data,
        getMeta: () => meta,
        getClientData: () => clientData,
        getDirtyRows: () => data.filter(r => r._dirty).map((r, i) => i),
        clearDirty: (rowIndex) => { data[rowIndex]._dirty = false; updateDirtyIndicator(); },
    };

})();