// shared.js - Unified utilities for all pages

// ── Root path patch — prepend ROOT_PATH to all relative fetch calls ───────
(function() {
    const _fetch = window.fetch.bind(window);
    window.fetch = function(url, ...args) {
        if (typeof url === 'string' && url.startsWith('/') && window.ROOT_PATH) {
            url = window.ROOT_PATH + url;
        }
        return _fetch(url, ...args);
    };
})();

// ── HTML escaping ─────────────────────────────────
function esc(s) {
    if (s == null) return '';
    return String(s)
        .replace(/&/g, '&')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');
}

// ── Date formatting ───────────────────────────────
function fmtDate(dateStr, includeSeconds) {
    if (!dateStr) return '-';
    try {
        const d = new Date(dateStr);
        const hasTime = dateStr.includes(':');
        if (hasTime) {
            const opts = { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' };
            if (includeSeconds) opts.second = '2-digit';
            return d.toLocaleString('ro-RO', opts);
        }
        return d.toLocaleDateString('ro-RO', { day: '2-digit', month: '2-digit', year: 'numeric' });
    } catch { return dateStr; }
}

// ── Unified Pagination ────────────────────────────
/**
 * Renders a full pagination bar with First/Prev/numbers/Next/Last.
 * @param {number} currentPage
 * @param {number} totalPages
 * @param {string} goToFnName - name of global function to call with page number
 * @param {object} [opts] - optional: { perPage, perPageFn, perPageOptions }
 * @returns {string} HTML string
 */
function renderUnifiedPagination(currentPage, totalPages, goToFnName, opts) {
    if (totalPages <= 1 && !(opts && opts.perPage)) {
        return '';
    }

    let html = '<div class="d-flex align-items-center gap-2 flex-wrap">';

    // Per-page selector
    if (opts && opts.perPage && opts.perPageFn) {
        const options = opts.perPageOptions || [25, 50, 100, 250];
        html += `<label class="per-page-label">Per pagina: <select class="select-compact ms-1" onchange="${opts.perPageFn}(this.value)">`;
        options.forEach(v => {
            html += `<option value="${v}"${v === opts.perPage ? ' selected' : ''}>${v}</option>`;
        });
        html += '</select></label>';
    }

    if (totalPages <= 1) {
        html += '</div>';
        return html;
    }

    html += '<div class="pagination-bar">';

    // First
    html += `<button class="page-btn" onclick="${goToFnName}(1)" ${currentPage <= 1 ? 'disabled' : ''}>&laquo;</button>`;
    // Prev
    html += `<button class="page-btn" onclick="${goToFnName}(${currentPage - 1})" ${currentPage <= 1 ? 'disabled' : ''}>&lsaquo;</button>`;

    // Page numbers with ellipsis
    const range = 2;
    let pages = [];
    for (let i = 1; i <= totalPages; i++) {
        if (i === 1 || i === totalPages || (i >= currentPage - range && i <= currentPage + range)) {
            pages.push(i);
        }
    }

    let lastP = 0;
    pages.forEach(p => {
        if (lastP && p - lastP > 1) {
            html += `<span class="page-btn disabled page-ellipsis">…</span>`;
        }
        html += `<button class="page-btn page-number${p === currentPage ? ' active' : ''}" onclick="${goToFnName}(${p})">${p}</button>`;
        lastP = p;
    });

    // Next
    html += `<button class="page-btn" onclick="${goToFnName}(${currentPage + 1})" ${currentPage >= totalPages ? 'disabled' : ''}>&rsaquo;</button>`;
    // Last
    html += `<button class="page-btn" onclick="${goToFnName}(${totalPages})" ${currentPage >= totalPages ? 'disabled' : ''}>&raquo;</button>`;

    html += '</div></div>';
    return html;
}

// ── Context Menu ──────────────────────────────────
let _activeContextMenu = null;

function closeAllContextMenus() {
    if (_activeContextMenu) {
        _activeContextMenu.remove();
        _activeContextMenu = null;
    }
}

document.addEventListener('click', closeAllContextMenus);
document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') closeAllContextMenus();
});

/**
 * Show a context menu at the given position.
 * @param {number} x - clientX
 * @param {number} y - clientY
 * @param {Array} items - [{label, action, danger}]
 */
function showContextMenu(x, y, items) {
    closeAllContextMenus();

    const menu = document.createElement('div');
    menu.className = 'context-menu';

    items.forEach(item => {
        const btn = document.createElement('button');
        btn.className = 'context-menu-item' + (item.danger ? ' text-danger' : '');
        btn.textContent = item.label;
        btn.addEventListener('click', (e) => {
            e.stopPropagation();
            closeAllContextMenus();
            item.action();
        });
        menu.appendChild(btn);
    });

    document.body.appendChild(menu);
    _activeContextMenu = menu;

    // Position menu, keeping it within viewport
    const rect = menu.getBoundingClientRect();
    const vw = window.innerWidth;
    const vh = window.innerHeight;
    let left = x;
    let top = y;
    if (left + 160 > vw) left = vw - 165;
    if (top + rect.height > vh) top = vh - rect.height - 5;
    menu.style.left = left + 'px';
    menu.style.top = top + 'px';
}

/**
 * Wire right-click on desktop + three-dots button on mobile for a table.
 * @param {string} rowSelector - CSS selector for clickable rows
 * @param {function} menuItemsFn - called with row element, returns [{label, action, danger}]
 */
function initContextMenus(rowSelector, menuItemsFn) {
    document.addEventListener('contextmenu', (e) => {
        const row = e.target.closest(rowSelector);
        if (!row) return;
        e.preventDefault();
        showContextMenu(e.clientX, e.clientY, menuItemsFn(row));
    });

    document.addEventListener('click', (e) => {
        const trigger = e.target.closest('.context-menu-trigger');
        if (!trigger) return;
        const row = trigger.closest(rowSelector);
        if (!row) return;
        e.stopPropagation();
        const rect = trigger.getBoundingClientRect();
        showContextMenu(rect.left, rect.bottom + 2, menuItemsFn(row));
    });
}

// ── Mobile segmented control ─────────────────────
/**
 * Render a Bootstrap btn-group segmented control for mobile.
 * @param {string} containerId - ID of the container div
 * @param {Array} pills - [{label, count, colorClass, value, active}]
 * @param {function} onSelect - callback(value)
 */
function renderMobileSegmented(containerId, pills, onSelect) {
    const container = document.getElementById(containerId);
    if (!container) return;

    const btnStyle = 'font-size:0.75rem;height:32px;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:0.25rem;flex:1;padding:0 0.25rem';

    container.innerHTML = `<div class="btn-group btn-group-sm w-100">${pills.map(p => {
        const cls = p.active ? 'btn seg-active' : 'btn btn-outline-secondary';
        const countColor = (!p.active && p.colorClass) ? ` class="${p.colorClass}"` : '';
        return `<button type="button" class="${cls}" style="${btnStyle}" data-seg-value="${esc(p.value)}">${esc(p.label)} <b${countColor}>${p.count}</b></button>`;
    }).join('')}</div>`;

    container.querySelectorAll('[data-seg-value]').forEach(btn => {
        btn.addEventListener('click', () => onSelect(btn.dataset.segValue));
    });
}

// ── Shared Quick Map Modal ────────────────────────
let _qmOnSave = null;
let _qmAcTimeout = null;

/**
 * Open the shared quick-map modal.
 * @param {object} opts
 * @param {string} opts.sku
 * @param {string} opts.productName
 * @param {Array}  [opts.prefill]    - [{codmat, cantitate, denumire}]
 * @param {boolean}[opts.isDirect]   - true if SKU=CODMAT direct
 * @param {object} [opts.directInfo] - {codmat, denumire} for direct SKU info
 * @param {function} opts.onSave     - callback(sku, mappings) after successful save
 */
function openQuickMap(opts) {
    _qmOnSave = opts.onSave || null;
    document.getElementById('qmSku').textContent = opts.sku;
    document.getElementById('qmProductName').textContent = opts.productName || '-';
    document.getElementById('qmPctWarning').style.display = 'none';

    const container = document.getElementById('qmCodmatLines');
    container.innerHTML = '';

    const directInfo = document.getElementById('qmDirectInfo');
    const saveBtn = document.getElementById('qmSaveBtn');

    if (opts.isDirect && opts.directInfo) {
        if (directInfo) {
            directInfo.innerHTML = `<i class="bi bi-info-circle"></i> SKU = CODMAT direct in nomenclator (<code>${esc(opts.directInfo.codmat)}</code> — ${esc(opts.directInfo.denumire || '')}).<br><small class="text-muted">Poti suprascrie cu un alt CODMAT daca e necesar (ex: reambalare).</small>`;
            directInfo.style.display = '';
        }
        if (saveBtn) saveBtn.textContent = 'Suprascrie mapare';
        addQmCodmatLine();
    } else {
        if (directInfo) directInfo.style.display = 'none';
        if (saveBtn) saveBtn.textContent = 'Salveaza';

        if (opts.prefill && opts.prefill.length > 0) {
            opts.prefill.forEach(d => addQmCodmatLine({ codmat: d.codmat, cantitate: d.cantitate, denumire: d.denumire }));
        } else {
            addQmCodmatLine();
        }
    }

    new bootstrap.Modal(document.getElementById('quickMapModal')).show();
}

function addQmCodmatLine(prefill) {
    const container = document.getElementById('qmCodmatLines');
    const idx = container.children.length;
    const codmatVal = prefill?.codmat || '';
    const cantVal = prefill?.cantitate || 1;
    const denumireVal = prefill?.denumire || '';
    const div = document.createElement('div');
    div.className = 'qm-line';
    div.innerHTML = `
        <div class="qm-row">
            <div class="qm-codmat-wrap position-relative">
                <input type="text" class="form-control form-control-sm qm-codmat" placeholder="CODMAT..." autocomplete="off" value="${esc(codmatVal)}">
                <div class="autocomplete-dropdown d-none qm-ac-dropdown"></div>
            </div>
            <input type="number" class="form-control form-control-sm qm-cantitate" value="${cantVal}" step="0.001" min="0.001" title="Cantitate ROA" style="width:70px">
            ${idx > 0 ? `<button type="button" class="btn btn-sm btn-outline-danger qm-rm-btn" onclick="this.closest('.qm-line').remove()"><i class="bi bi-x"></i></button>` : '<span style="width:30px"></span>'}
        </div>
        <div class="qm-selected text-muted" style="font-size:0.75rem;padding-left:2px">${esc(denumireVal)}</div>
    `;
    container.appendChild(div);

    const input = div.querySelector('.qm-codmat');
    const dropdown = div.querySelector('.qm-ac-dropdown');
    const selected = div.querySelector('.qm-selected');

    input.addEventListener('input', () => {
        clearTimeout(_qmAcTimeout);
        _qmAcTimeout = setTimeout(() => _qmAutocomplete(input, dropdown, selected), 250);
    });
    input.addEventListener('blur', () => {
        setTimeout(() => dropdown.classList.add('d-none'), 200);
    });
}

async function _qmAutocomplete(input, dropdown, selectedEl) {
    const q = input.value;
    if (q.length < 2) { dropdown.classList.add('d-none'); return; }

    try {
        const res = await fetch(`/api/articles/search?q=${encodeURIComponent(q)}`);
        const data = await res.json();
        if (!data.results || data.results.length === 0) { dropdown.classList.add('d-none'); return; }

        dropdown.innerHTML = data.results.map(r =>
            `<div class="autocomplete-item" onmousedown="_qmSelectArticle(this, '${esc(r.codmat)}', '${esc(r.denumire)}${r.um ? ' (' + esc(r.um) + ')' : ''}')">
                <span class="codmat">${esc(r.codmat)}</span> &mdash; <span class="denumire">${esc(r.denumire)}</span>${r.um ? ` <small class="text-muted">(${esc(r.um)})</small>` : ''}
            </div>`
        ).join('');
        dropdown.classList.remove('d-none');
    } catch { dropdown.classList.add('d-none'); }
}

function _qmSelectArticle(el, codmat, label) {
    const line = el.closest('.qm-line');
    line.querySelector('.qm-codmat').value = codmat;
    line.querySelector('.qm-selected').textContent = label;
    line.querySelector('.qm-ac-dropdown').classList.add('d-none');
}

async function saveQuickMapping() {
    const lines = document.querySelectorAll('#qmCodmatLines .qm-line');
    const mappings = [];

    for (const line of lines) {
        const codmat = line.querySelector('.qm-codmat').value.trim();
        const cantitate = parseFloat(line.querySelector('.qm-cantitate').value) || 1;
        if (!codmat) continue;
        mappings.push({ codmat, cantitate_roa: cantitate });
    }

    if (mappings.length === 0) { alert('Selecteaza cel putin un CODMAT'); return; }

    const sku = document.getElementById('qmSku').textContent;

    try {
        let res;
        if (mappings.length === 1) {
            res = await fetch('/api/mappings', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ sku, codmat: mappings[0].codmat, cantitate_roa: mappings[0].cantitate_roa })
            });
        } else {
            res = await fetch('/api/mappings/batch', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ sku, mappings })
            });
        }
        const data = await res.json();
        if (data.success) {
            bootstrap.Modal.getInstance(document.getElementById('quickMapModal')).hide();
            if (_qmOnSave) _qmOnSave(sku, mappings);
            // Check for SKIPPED orders that can now be imported
            try {
                const pendingRes = await fetch(`/api/orders/by-sku/${encodeURIComponent(sku)}/pending`);
                const pendingData = await pendingRes.json();
                if (pendingData.count > 0) {
                    const banner = document.createElement('div');
                    banner.className = 'alert alert-info d-flex align-items-center gap-2 mt-2';
                    banner.style.cssText = 'position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:1060;min-width:300px;max-width:500px;box-shadow:var(--card-shadow)';
                    banner.innerHTML = `<i class="bi bi-arrow-clockwise"></i> <span>${pendingData.count} comenzi SKIPPED pot fi importate acum</span> <button class="btn btn-sm btn-primary ms-auto" id="batchRetryBtn">Importa</button> <button class="btn btn-sm btn-outline-secondary" onclick="this.parentElement.remove()">✕</button>`;
                    document.body.appendChild(banner);

                    document.getElementById('batchRetryBtn').onclick = async function() {
                        this.disabled = true;
                        this.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';
                        try {
                            const retryRes = await fetch('/api/orders/batch-retry', {
                                method: 'POST',
                                headers: {'Content-Type': 'application/json'},
                                body: JSON.stringify({order_numbers: pendingData.order_numbers})
                            });
                            const retryData = await retryRes.json();
                            banner.className = retryData.errors > 0 ? 'alert alert-warning d-flex align-items-center gap-2 mt-2' : 'alert alert-success d-flex align-items-center gap-2 mt-2';
                            banner.style.cssText = 'position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:1060;min-width:300px;max-width:500px;box-shadow:var(--card-shadow)';
                            banner.innerHTML = `<i class="bi bi-check-circle"></i> ${esc(retryData.message)} <button class="btn btn-sm btn-outline-secondary ms-auto" onclick="this.parentElement.remove()">✕</button>`;
                            setTimeout(() => banner.remove(), 5000);
                            if (typeof loadDashOrders === 'function') loadDashOrders();
                        } catch(e) {
                            banner.innerHTML = `Eroare: ${esc(e.message)} <button class="btn btn-sm btn-outline-secondary ms-auto" onclick="this.parentElement.remove()">✕</button>`;
                        }
                    };

                    setTimeout(() => { if (banner.parentElement) banner.remove(); }, 15000);
                }
            } catch(e) { /* ignore */ }
        } else {
            alert('Eroare: ' + (data.error || 'Unknown'));
        }
    } catch (err) {
        alert('Eroare: ' + err.message);
    }
}

// ── Shared helpers (moved from dashboard.js/logs.js) ─

function fmtCost(v) {
    return v > 0 ? Number(v).toFixed(2) : '–';
}

function fmtNum(v) {
    return Number(v).toLocaleString('ro-RO', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

function orderStatusBadge(status) {
    switch ((status || '').toUpperCase()) {
        case 'IMPORTED':          return '<span class="badge bg-success">Importat</span>';
        case 'ALREADY_IMPORTED':  return '<span class="badge bg-info">Deja importat</span>';
        case 'SKIPPED':           return '<span class="badge bg-warning">Omis</span>';
        case 'ERROR':             return '<span class="badge bg-danger">Eroare</span>';
        case 'CANCELLED':         return '<span class="badge bg-secondary">Anulat</span>';
        case 'DELETED_IN_ROA':    return '<span class="badge bg-dark">Sters din ROA</span>';
        default:                  return `<span class="badge bg-secondary">${esc(status)}</span>`;
    }
}

function renderCodmatCell(item) {
    if (!item.codmat_details || item.codmat_details.length === 0) {
        return `<code>${esc(item.codmat || '-')}</code>`;
    }
    if (item.codmat_details.length === 1) {
        const d = item.codmat_details[0];
        if (d.direct) {
            return `<code>${esc(d.codmat)}</code> <span class="badge bg-secondary" style="font-size:0.6rem;vertical-align:middle">direct</span>`;
        }
        return `<code>${esc(d.codmat)}</code>`;
    }
    return item.codmat_details.map(d =>
        `<div class="small"><code>${esc(d.codmat)}</code> <span class="text-muted">\xd7${d.cantitate_roa}</span></div>`
    ).join('');
}

function computeDiscountSplit(items, order) {
    if (order.discount_split && typeof order.discount_split === 'object')
        return order.discount_split;

    const byRate = {};
    items.forEach(item => {
        const rate = item.vat != null ? Number(item.vat) : null;
        if (rate === null) return;
        if (!byRate[rate]) byRate[rate] = 0;
        byRate[rate] += Number(item.price || 0) * Number(item.quantity || 0);
    });
    const rates = Object.keys(byRate).sort((a, b) => Number(a) - Number(b));
    if (rates.length === 0) return null;

    const grandTotal = rates.reduce((s, r) => s + byRate[r], 0);
    if (grandTotal <= 0) return null;

    const split = {};
    let remaining = order.discount_total;
    rates.forEach((rate, i) => {
        if (i === rates.length - 1) {
            split[rate] = Math.round(remaining * 100) / 100;
        } else {
            const amt = Math.round(order.discount_total * byRate[rate] / grandTotal * 100) / 100;
            split[rate] = amt;
            remaining -= amt;
        }
    });
    return split;
}

function _renderReceipt(items, order) {
    const desktop = document.getElementById('detailReceipt');
    const mobile = document.getElementById('detailReceiptMobile');
    if (!desktop && !mobile) return;
    if (!items.length) {
        if (desktop) desktop.innerHTML = '';
        if (mobile) mobile.innerHTML = '';
        return;
    }

    const articole = items.reduce((s, i) => s + Number(i.price || 0) * Number(i.quantity || 0), 0);
    const discount = Number(order.discount_total || 0);
    const transport = Number(order.delivery_cost || 0);
    const total = order.order_total != null ? fmtNum(order.order_total) : '-';

    let dHtml = `<span class="text-muted">Articole: <strong class="text-body">${fmtNum(articole)}</strong></span>`;
    if (discount > 0) dHtml += `<span class="text-muted">Discount: <strong class="text-danger">\u2013${fmtNum(discount)}</strong></span>`;
    if (transport > 0) dHtml += `<span class="text-muted">Transport: <strong class="text-body">${fmtNum(transport)}</strong></span>`;
    dHtml += `<span>Total: <strong>${total} lei</strong></span>`;
    if (desktop) desktop.innerHTML = dHtml;

    let mHtml = `<span class="text-muted">Art: <strong class="text-body">${fmtNum(articole)}</strong></span>`;
    if (discount > 0) mHtml += `<span class="text-muted">Disc: <strong class="text-danger">\u2013${fmtNum(discount)}</strong></span>`;
    if (transport > 0) mHtml += `<span class="text-muted">Transp: <strong class="text-body">${fmtNum(transport)}</strong></span>`;
    mHtml += `<span>Total: <strong>${total} lei</strong></span>`;
    if (mobile) mobile.innerHTML = mHtml;
}

// ── Order Detail Modal (shared) ──────────────────
/**
 * Render and show the order detail modal.
 * @param {string} orderNumber
 * @param {object} opts
 * @param {function} opts.onQuickMap - (sku, productName, orderNumber, itemIdx) => void
 * @param {function} [opts.onAfterRender] - (order, items) => void
 */
async function renderOrderDetailModal(orderNumber, opts) {
    opts = opts || {};

    window._detailOrderNumber = orderNumber;

    // Reset modal state
    document.getElementById('detailOrderNumber').textContent = '#' + orderNumber;
    document.getElementById('detailCustomer').textContent = '...';
    document.getElementById('detailDate').textContent = '';
    document.getElementById('detailStatus').innerHTML = '';
    document.getElementById('detailIdComanda').textContent = '-';
    document.getElementById('detailIdPartener').textContent = '-';
    document.getElementById('detailItemsBody').innerHTML = '<tr><td colspan="9" class="text-center">Se incarca...</td></tr>';
    document.getElementById('detailError').style.display = 'none';
    const retryBtn = document.getElementById('detailRetryBtn');
    if (retryBtn) { retryBtn.style.display = 'none'; retryBtn.disabled = false; retryBtn.innerHTML = '<i class="bi bi-arrow-clockwise"></i> Reimporta'; retryBtn.className = 'btn btn-sm btn-outline-primary'; }
    const receiptEl = document.getElementById('detailReceipt');
    if (receiptEl) receiptEl.innerHTML = '';
    const receiptMEl = document.getElementById('detailReceiptMobile');
    if (receiptMEl) receiptMEl.innerHTML = '';
    const invInfo = document.getElementById('detailInvoiceInfo');
    if (invInfo) invInfo.style.display = 'none';
    const mobileContainer = document.getElementById('detailItemsMobile');
    if (mobileContainer) mobileContainer.innerHTML = '';
    const reconEl = document.getElementById('detailInvoiceRecon');
    if (reconEl) { reconEl.innerHTML = ''; reconEl.style.display = 'none'; }
    // Remove diff badge from previous render
    const prevDiffBadge = document.querySelector('.diff-badge');
    if (prevDiffBadge) prevDiffBadge.remove();
    // Reset compact header elements
    const partenerRoa = document.getElementById('detailPartenerRoa');
    if (partenerRoa) { partenerRoa.style.display = 'none'; partenerRoa.textContent = ''; }
    const cuiGomag = document.getElementById('detailCuiGomag');
    if (cuiGomag) cuiGomag.style.display = 'none';
    const cuiRoa = document.getElementById('detailCuiRoa');
    if (cuiRoa) {
        cuiRoa.style.display = 'none';
        // Restore original structure (may have been replaced by PF indicator)
        cuiRoa.innerHTML = '<small class="text-muted">CUI:</small> <span class="font-data" id="detailCuiRoaVal"></span><span id="detailPartnerAnafArea"></span>';
    }
    const denomMismatch = document.getElementById('detailDenomMismatch');
    if (denomMismatch) { denomMismatch.style.display = 'none'; denomMismatch.innerHTML = ''; }
    const addressBlock = document.getElementById('detailAddressBlock');
    if (addressBlock) addressBlock.style.display = 'none';
    const addressLines = document.getElementById('detailAddressLines');
    if (addressLines) addressLines.innerHTML = '';

    const modalEl = document.getElementById('orderDetailModal');
    const existing = bootstrap.Modal.getInstance(modalEl);
    if (existing) { existing.show(); } else { new bootstrap.Modal(modalEl).show(); }

    try {
        const res = await fetch(`/api/sync/order/${encodeURIComponent(orderNumber)}`);
        const data = await res.json();

        if (data.error) {
            document.getElementById('detailError').textContent = data.error;
            document.getElementById('detailError').style.display = '';
            return;
        }

        const order = data.order || {};
        document.getElementById('detailCustomer').textContent = order.customer_name || '-';
        document.getElementById('detailDate').textContent = fmtDate(order.order_date);
        document.getElementById('detailStatus').innerHTML = orderStatusBadge(order.status);

        document.getElementById('detailIdComanda').textContent = order.id_comanda || '-';
        document.getElementById('detailIdPartener').textContent = order.id_partener || '-';

        // Invoice info
        const inv = order.invoice;
        if (inv && inv.facturat) {
            const serie = inv.serie_act || '';
            const numar = inv.numar_act || '';
            document.getElementById('detailInvoiceNumber').textContent = serie ? `${serie} ${numar}` : numar;
            document.getElementById('detailInvoiceDate').textContent = inv.data_act ? fmtDate(inv.data_act) : '-';
            if (invInfo) invInfo.style.display = '';
        }

        // Invoice reconciliation
        const reconEl = document.getElementById('detailInvoiceRecon');
        if (reconEl && inv && inv.reconciliation) {
            const r = inv.reconciliation;
            if (r.match) {
                reconEl.innerHTML = `<span class="badge" style="background:var(--success-light);color:var(--success-text)">✓ Total factura OK (${fmtNum(r.invoice_total)} lei)</span>`;
            } else {
                const sign = r.difference > 0 ? '+' : '';
                reconEl.innerHTML = `<span class="badge" style="background:var(--error-light);color:var(--error-text)">Diferenta: ${sign}${fmtNum(r.difference)} lei</span>
            <small class="text-muted ms-2">Factura: ${fmtNum(r.invoice_total)} | Comanda: ${fmtNum(r.order_total)}</small>`;
            }
            reconEl.style.display = '';
        } else if (reconEl) {
            reconEl.style.display = 'none';
        }

        // Render compact header info (partner + addresses)
        _renderHeaderInfo(order);

        if (order.error_message) {
            document.getElementById('detailError').textContent = order.error_message;
            document.getElementById('detailError').style.display = '';
        }

        const items = data.items || [];
        if (items.length === 0) {
            document.getElementById('detailItemsBody').innerHTML = '<tr><td colspan="9" class="text-center text-muted">Niciun articol</td></tr>';
            return;
        }

        // Store items for quick map pre-population
        window._detailItems = items;

        const qmFn = opts.onQuickMap ? opts.onQuickMap.name || '_sharedQuickMap' : null;

        // Mobile article flat list
        if (mobileContainer) {
            let mobileHtml = items.map((item, idx) => {
                const codmatText = item.codmat_details?.length
                    ? item.codmat_details.map(d => `<code>${esc(d.codmat)}</code>${d.direct ? ' <span class="badge bg-secondary" style="font-size:0.55rem">direct</span>' : ''}`).join(' ')
                    : `<code>${esc(item.codmat || '–')}</code>`;
                const valoare = (Number(item.price || 0) * Number(item.quantity || 0));
                const clickAttr = opts.onQuickMap ? `onclick="_sharedModalQuickMap('${esc(item.sku)}','${esc(item.product_name||'')}','${esc(orderNumber)}',${idx})"` : '';
                const priceInfo = { pret_roa: item.pret_roa, match: item.price_match };
                const priceMismatchHtml = priceInfo.match === false
                    ? `<div class="text-danger" style="font-size:0.7rem">ROA: ${fmtNum(priceInfo.pret_roa)} lei</div>`
                    : '';
                return `<div class="dif-item">
                    <div class="dif-row">
                        <span class="dif-sku${opts.onQuickMap ? ' dif-codmat-link' : ''}" ${clickAttr}>${esc(item.sku)}</span>
                        ${codmatText}
                    </div>
                    <div class="dif-row">
                        <span class="dif-name">${esc(item.product_name || '–')}</span>
                        <span class="dif-qty">x${item.quantity || 0}</span>
                        <span class="dif-val">${fmtNum(valoare)} lei</span>
                        <span class="dif-vat text-muted" style="font-size:0.75rem">TVA ${item.vat != null ? Number(item.vat) : '?'}</span>
                    </div>
                    ${priceMismatchHtml}
                </div>`;
            }).join('');

            // Transport row (mobile)
            if (order.delivery_cost > 0) {
                const tVat = order.transport_vat || '21';
                mobileHtml += `<div class="dif-item" style="opacity:0.7">
                    <div class="dif-row">
                        <span class="dif-name text-muted">Transport</span>
                        <span class="dif-qty">x1</span>
                        <span class="dif-val">${fmtNum(order.delivery_cost)} lei</span>
                        <span class="dif-vat text-muted" style="font-size:0.75rem">TVA ${tVat}</span>
                    </div>
                </div>`;
            }

            // Discount rows (mobile)
            if (order.discount_total > 0) {
                const discSplit = computeDiscountSplit(items, order);
                if (discSplit) {
                    Object.entries(discSplit)
                        .sort(([a], [b]) => Number(a) - Number(b))
                        .forEach(([rate, amt]) => {
                            if (amt > 0) mobileHtml += `<div class="dif-item" style="opacity:0.7">
                                <div class="dif-row">
                                    <span class="dif-name text-muted">Discount</span>
                                    <span class="dif-qty">x\u20131</span>
                                    <span class="dif-val">${fmtNum(amt)} lei</span>
                                    <span class="dif-vat text-muted" style="font-size:0.75rem">TVA ${Number(rate)}</span>
                                </div>
                            </div>`;
                        });
                } else {
                    mobileHtml += `<div class="dif-item" style="opacity:0.7">
                        <div class="dif-row">
                            <span class="dif-name text-muted">Discount</span>
                            <span class="dif-qty">x\u20131</span>
                            <span class="dif-val">${fmtNum(order.discount_total)} lei</span>
                        </div>
                    </div>`;
                }
            }

            mobileContainer.innerHTML = '<div class="detail-item-flat">' + mobileHtml + '</div>';
        }

        // Desktop items table
        const clickAttrFn = (item, idx) => opts.onQuickMap
            ? `onclick="_sharedModalQuickMap('${esc(item.sku)}', '${esc(item.product_name || '')}', '${esc(orderNumber)}', ${idx})" title="Click pentru mapare"`
            : '';

        let tableHtml = items.map((item, idx) => {
            const valoare = Number(item.price || 0) * Number(item.quantity || 0);
            const priceInfo = { pret_roa: item.pret_roa, match: item.price_match };
            const pretRoaHtml = priceInfo.pret_roa != null ? fmtNum(priceInfo.pret_roa) : '–';
            let matchDot, rowStyle;
            if (item.kit) {
                matchDot = '<span class="badge" style="background:var(--info-light);color:var(--info-text);font-size:10px;padding:2px 6px">Kit</span>';
                rowStyle = '';
            } else if (priceInfo.pret_roa == null && priceInfo.match == null) {
                matchDot = '<span class="dot dot-gray"></span>';
                rowStyle = '';
            } else if (priceInfo.match === false) {
                matchDot = '<span class="dot dot-red"></span>';
                rowStyle = ' style="background:var(--error-light)"';
            } else {
                matchDot = '<span class="dot dot-green"></span>';
                rowStyle = '';
            }
            return `<tr${rowStyle}>
                <td><code class="${opts.onQuickMap ? 'codmat-link' : ''}" ${clickAttrFn(item, idx)}>${esc(item.sku)}</code></td>
                <td>${esc(item.product_name || '-')}</td>
                <td>${renderCodmatCell(item)}</td>
                <td class="text-end">${item.quantity || 0}</td>
                <td class="text-end font-data">${item.price != null ? fmtNum(item.price) : '-'}</td>
                <td class="text-end font-data">${pretRoaHtml}</td>
                <td class="text-end">${item.vat != null ? Number(item.vat) : '-'}</td>
                <td class="text-end font-data">${fmtNum(valoare)}</td>
                <td class="text-center">${matchDot}</td>
            </tr>`;
        }).join('');

        // Transport row
        if (order.delivery_cost > 0) {
            const tVat = order.transport_vat || '21';
            const tCodmat = order.transport_codmat || '';
            tableHtml += `<tr class="table-light">
                <td></td><td class="text-muted">Transport</td>
                <td>${tCodmat ? '<code>' + esc(tCodmat) + '</code>' : ''}</td>
                <td class="text-end">1</td><td class="text-end font-data">${fmtNum(order.delivery_cost)}</td>
                <td></td>
                <td class="text-end">${tVat}</td><td class="text-end font-data">${fmtNum(order.delivery_cost)}</td>
                <td></td>
            </tr>`;
        }

        // Discount rows (split by VAT rate)
        if (order.discount_total > 0) {
            const dCodmat = order.discount_codmat || '';
            const discSplit = computeDiscountSplit(items, order);
            if (discSplit) {
                Object.entries(discSplit)
                    .sort(([a], [b]) => Number(a) - Number(b))
                    .forEach(([rate, amt]) => {
                        if (amt > 0) tableHtml += `<tr class="table-light">
                            <td></td><td class="text-muted">Discount</td>
                            <td>${dCodmat ? '<code>' + esc(dCodmat) + '</code>' : ''}</td>
                            <td class="text-end">\u20131</td><td class="text-end font-data">${fmtNum(amt)}</td>
                            <td></td>
                            <td class="text-end">${Number(rate)}</td><td class="text-end font-data">\u2013${fmtNum(amt)}</td>
                            <td></td>
                        </tr>`;
                    });
            } else {
                tableHtml += `<tr class="table-light">
                    <td></td><td class="text-muted">Discount</td>
                    <td>${dCodmat ? '<code>' + esc(dCodmat) + '</code>' : ''}</td>
                    <td class="text-end">\u20131</td><td class="text-end font-data">${fmtNum(order.discount_total)}</td>
                    <td></td>
                    <td class="text-end">-</td><td class="text-end font-data">\u2013${fmtNum(order.discount_total)}</td>
                    <td></td>
                </tr>`;
            }
        }

        document.getElementById('detailItemsBody').innerHTML = tableHtml;
        _renderReceipt(items, order);

        // Retry button (only for ERROR/SKIPPED orders)
        const retryBtn = document.getElementById('detailRetryBtn');
        if (retryBtn) {
            const canRetry = ['ERROR', 'SKIPPED'].includes((order.status || '').toUpperCase());
            retryBtn.style.display = canRetry ? '' : 'none';
            if (canRetry) {
                retryBtn.onclick = async () => {
                    retryBtn.disabled = true;
                    retryBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Reimportare...';
                    try {
                        const res = await fetch(`/api/orders/${encodeURIComponent(orderNumber)}/retry`, { method: 'POST' });
                        const data = await res.json();
                        if (data.success) {
                            retryBtn.innerHTML = '<i class="bi bi-check-circle"></i> ' + (data.message || 'Reimportat');
                            retryBtn.className = 'btn btn-sm btn-success';
                            // Refresh modal after short delay
                            setTimeout(() => renderOrderDetailModal(orderNumber, opts), 1500);
                        } else {
                            retryBtn.innerHTML = '<i class="bi bi-exclamation-triangle"></i> ' + (data.message || 'Eroare');
                            retryBtn.className = 'btn btn-sm btn-danger';
                            setTimeout(() => {
                                retryBtn.innerHTML = '<i class="bi bi-arrow-clockwise"></i> Reimporta';
                                retryBtn.className = 'btn btn-sm btn-outline-primary';
                                retryBtn.disabled = false;
                            }, 3000);
                        }
                    } catch (err) {
                        retryBtn.innerHTML = 'Eroare: ' + err.message;
                        retryBtn.disabled = false;
                    }
                };
            }
        }

        if (opts.onAfterRender) opts.onAfterRender(order, items);
    } catch (err) {
        document.getElementById('detailError').textContent = err.message;
        document.getElementById('detailError').style.display = '';
    }
}

// Global quick map dispatcher — set by each page
let _sharedModalQuickMapFn = null;
function _sharedModalQuickMap(sku, productName, orderNumber, itemIdx) {
    if (_sharedModalQuickMapFn) _sharedModalQuickMapFn(sku, productName, orderNumber, itemIdx);
}

// ── Dot helper ────────────────────────────────────
function statusDot(status) {
    switch ((status || '').toUpperCase()) {
        case 'IMPORTED':
        case 'ALREADY_IMPORTED':
        case 'COMPLETED':
        case 'RESOLVED':
            return '<span class="dot dot-green"></span>';
        case 'SKIPPED':
        case 'UNRESOLVED':
        case 'INCOMPLETE':
            return '<span class="dot dot-yellow"></span>';
        case 'ERROR':
        case 'FAILED':
            return '<span class="dot dot-red"></span>';
        case 'CANCELLED':
        case 'DELETED_IN_ROA':
            return '<span class="dot dot-gray"></span>';
        default:
            return '<span class="dot dot-gray"></span>';
    }
}

// ── Address helpers (module scope) ───────────────

function fmtAddr(a) {
    if (!a) return '\u2014';
    if (typeof a === 'string') return a;
    const parts = [a.address || a.strada || '', a.numar || ''].filter(Boolean);
    const extras = [
        a.bloc ? 'Bl.' + a.bloc : '',
        a.scara ? 'Sc.' + a.scara : '',
        a.apart ? 'Ap.' + a.apart : '',
        a.etaj ? 'Et.' + a.etaj : '',
    ].filter(Boolean).join(' ');
    if (extras) parts.push(extras);
    const line1 = parts.join(' ').trim();
    const line2 = [a.city || a.localitate || '', a.region || a.judet || ''].filter(Boolean).join(', ');
    return [line1, line2].filter(Boolean).join(', ');
}

function addrMatch(gomag, roa) {
    if (!gomag || !roa) return true; // can't compare
    function norm(s) {
        return (s || '').normalize('NFD').replace(/[\u0300-\u036f]/g, '')
                        .toUpperCase()
                        .replace(/\b(STR|STRADA|NR|NUMAR|NUMARUL|BL|BLOC|SC|SCARA|AP|APART|APARTAMENT|ET|ETAJ|COM|COMUNA|SAT|MUN|MUNICIPIUL|JUD|JUDETUL|CARTIER|PARTER|SECTOR|SECTORUL|ORAS)(?:\b|(?=\d))/g, '')
                        .replace(/[^A-Z0-9]/g, '');
    }
    const gStreet = norm(gomag.address || gomag.strada || '');
    const rStreet = norm((roa.strada||'') + (roa.numar||'') + (roa.bloc||'') + (roa.scara||'') + (roa.apart||'') + (roa.etaj||''));
    const gCity   = norm(gomag.city || gomag.localitate || '');
    const rCity   = norm(roa.localitate || '');
    const gRegion = norm(gomag.region || gomag.judet || '');
    const rRegion = norm(roa.judet || '');
    return gStreet === rStreet && gCity === rCity && gRegion === rRegion;
}

function hasEfacturaRisk(roa) {
    if (!roa || typeof roa === 'string') return false;
    return !roa.judet || !roa.localitate;
}

// ── Compact Header Info Rendering ────────────────

function _renderHeaderInfo(order) {
    const pi = order.partner_info;
    const isPJ = pi && pi.cod_fiscal_gomag;

    // GoMag CUI (PJ only)
    if (isPJ) {
        const cuiGomagEl = document.getElementById('detailCuiGomag');
        if (cuiGomagEl) {
            document.getElementById('detailCuiGomagVal').textContent = pi.cod_fiscal_gomag;
            cuiGomagEl.style.display = '';
        }
    }

    // ROA column — show partner name for both PJ and PF
    if (pi && pi.denumire_roa) {
        const partenerRoa = document.getElementById('detailPartenerRoa');
        if (partenerRoa) {
            partenerRoa.textContent = pi.denumire_roa;
            partenerRoa.style.display = '';
        }
    }

    if (isPJ) {
        const cuiRoaEl = document.getElementById('detailCuiRoa');
        if (cuiRoaEl) {
            document.getElementById('detailCuiRoaVal').textContent = pi.cod_fiscal_roa || '\u2014';
            cuiRoaEl.style.display = '';

            // CUI correction badge: +RO (added prefix) or −RO (removed prefix)
            let cuiCorrHtml = '';
            if (pi.anaf_cod_fiscal_adjusted && pi.cod_fiscal_gomag && pi.cod_fiscal_roa) {
                const gomagHasRO = /^RO\s*/i.test(pi.cod_fiscal_gomag);
                const roaHasRO = /^RO\s*/i.test(pi.cod_fiscal_roa);
                if (!gomagHasRO && roaHasRO) {
                    cuiCorrHtml = ' <span class="anaf-badge anaf-badge-ok" aria-label="Prefix RO adaugat conform ANAF"><i class="bi bi-plus-circle"></i> +RO</span>';
                } else if (gomagHasRO && !roaHasRO) {
                    cuiCorrHtml = ' <span class="anaf-badge anaf-badge-warn" aria-label="Prefix RO eliminat conform ANAF"><i class="bi bi-dash-circle"></i> −RO</span>';
                }
            }

            // ANAF badge
            const anafArea = document.getElementById('detailPartnerAnafArea');
            if (anafArea) {
                let anafBadge;
                if (pi.anaf_platitor_tva === 1) {
                    anafBadge = '<span class="anaf-badge anaf-badge-ok" aria-label="Platitor TVA">Platitor TVA</span>';
                } else if (pi.anaf_platitor_tva === 0) {
                    anafBadge = '<span class="anaf-badge anaf-badge-warn" aria-label="Neplatitor TVA">Neplatitor TVA</span>';
                } else {
                    anafBadge = '<span class="anaf-badge anaf-badge-gray" aria-label="Status TVA necunoscut">?</span>';
                }
                anafArea.innerHTML = cuiCorrHtml + ' ' + anafBadge;
            }
        }
    } else {
        // PF indicator — show muted text in CUI area
        const cuiRoaEl = document.getElementById('detailCuiRoa');
        if (cuiRoaEl) {
            document.getElementById('detailCuiRoaVal').textContent = '';
            document.getElementById('detailPartnerAnafArea').innerHTML = '';
            cuiRoaEl.innerHTML = '<small class="text-muted" style="font-style:italic">Persoana fizica</small>';
            cuiRoaEl.style.display = '';
        }
    }

    // ERROR orders: muted dashes for ROA fields
    if (order.status === 'ERROR' && !order.id_comanda) {
        document.getElementById('detailIdComanda').innerHTML = '<span class="text-muted">\u2014</span>';
        document.getElementById('detailIdPartener').innerHTML = '<span class="text-muted">\u2014</span>';
    }

    // Denomination mismatch alert
    if (isPJ && pi.anaf_denumire_mismatch && pi.denumire_anaf) {
        const denomEl = document.getElementById('detailDenomMismatch');
        if (denomEl) {
            denomEl.innerHTML = `<div class="denom-mismatch">
                <span class="denom-mismatch-title"><i class="bi bi-exclamation-triangle"></i> Denumire diferita</span><br>
                <span style="font-size:13px">GoMag: <strong>${esc(order.customer_name || '')}</strong></span><br>
                <span style="font-size:13px">ANAF: <strong>${esc(pi.denumire_anaf)}</strong></span>
            </div>`;
            denomEl.style.display = '';
        }
    }

    // Compact address lines
    const addr = order.addresses;
    if (!addr || (!addr.livrare_gomag && !addr.facturare_gomag)) return;

    const addressBlock = document.getElementById('detailAddressBlock');
    const addressLines = document.getElementById('detailAddressLines');
    if (!addressBlock || !addressLines) return;

    addressBlock.style.display = '';
    let html = '';

    function addrLine(label, addrObj, matchIcon) {
        const text = fmtAddr(addrObj);
        const escaped = esc(text);
        let icon = '';
        if (matchIcon === 'match') {
            icon = ' <i class="bi bi-check-lg addr-line-match" title="Adrese identice" role="img" aria-label="Adrese identice"></i>';
        } else if (matchIcon === 'mismatch') {
            icon = ' <i class="bi bi-exclamation-triangle" title="Adrese diferite" role="img" aria-label="Adrese diferite"></i>';
        } else if (matchIcon === 'risk') {
            icon = ' <i class="bi bi-exclamation-octagon" title="Risc eFactura" role="img" aria-label="Risc eFactura" style="color:var(--error-text)"></i>';
        }
        return `<div class="addr-line">
            <span class="addr-line-label">${label}</span>
            <span class="addr-line-text" title="${escaped}">${escaped}</span>${icon}
        </div>`;
    }

    // Livrare
    if (addr.livrare_gomag || addr.livrare_roa) {
        html += addrLine('Livrare GoMag:', addr.livrare_gomag, null);
        const livrRisk = hasEfacturaRisk(addr.livrare_roa);
        const livrMatch = addrMatch(addr.livrare_gomag, addr.livrare_roa);
        let matchType = null;
        if (addr.livrare_roa) {
            matchType = livrRisk ? 'risk' : (livrMatch ? 'match' : 'mismatch');
        }
        html += addrLine('Livrare ROA:', addr.livrare_roa, matchType);
    }

    // Facturare
    if (addr.facturare_gomag || addr.facturare_roa) {
        html += addrLine('Facturare GoMag:', addr.facturare_gomag, null);
        const factRisk = hasEfacturaRisk(addr.facturare_roa);
        const factMatch = addrMatch(addr.facturare_gomag, addr.facturare_roa);
        let matchType = null;
        if (addr.facturare_roa) {
            matchType = factRisk ? 'risk' : (factMatch ? 'match' : 'mismatch');
        }
        html += addrLine('Facturare ROA:', addr.facturare_roa, matchType);
    }

    addressLines.innerHTML = html;

    // Typed diff badges in modal header
    const orderNumEl = document.getElementById('detailOrderNumber');
    if (orderNumEl) {
        orderNumEl.parentNode.querySelectorAll('.diff-badge').forEach(b => b.remove());
        const badges = [];
        if (isPJ && pi.anaf_cod_fiscal_adjusted) badges.push({label:'CUI', cls:'diff-badge-anaf', aria:'CUI ajustat conform ANAF'});
        if (isPJ && pi.anaf_denumire_mismatch) badges.push({label:'Denumire', cls:'diff-badge-denumire', aria:'Denumire diferita fata de ANAF'});
        if (isPJ && !pi.anaf_cod_fiscal_adjusted && pi.anaf_platitor_tva !== null && pi.anaf_platitor_tva !== undefined) {
            const gomagImpliesPlatitor = pi.cod_fiscal_gomag && /^RO/i.test(pi.cod_fiscal_gomag);
            const anafPlatitor = pi.anaf_platitor_tva === 1;
            if (gomagImpliesPlatitor !== anafPlatitor) badges.push({label:'TVA', cls:'diff-badge-anaf', aria: anafPlatitor ? 'Platitor TVA conform ANAF (GoMag fara RO)' : 'Neplatitor TVA conform ANAF (GoMag cu RO)'});
        }
        if (addr && addr.livrare_roa && !addrMatch(addr.livrare_gomag, addr.livrare_roa)) badges.push({label:'Adr. livr.', cls:'diff-badge-addr', aria:'Adresa livrare diferita'});
        if (addr && addr.facturare_roa && !addrMatch(addr.facturare_gomag, addr.facturare_roa)) badges.push({label:'Adr. fact.', cls:'diff-badge-addr', aria:'Adresa facturare diferita'});
        if (order.price_check && order.price_check.mismatches > 0) badges.push({label:'Preturi (' + order.price_check.mismatches + ')', cls:'diff-badge-price', aria:'Preturi diferite: ' + order.price_check.mismatches});
        let insertAfter = orderNumEl;
        badges.forEach(b => {
            const el = document.createElement('span');
            el.className = 'diff-badge ' + b.cls;
            el.setAttribute('aria-label', b.aria);
            el.textContent = b.label;
            insertAfter.parentNode.insertBefore(el, insertAfter.nextSibling);
            insertAfter = el;
        });
    }
}