{% extends "pos/base.html" %}
{% load static %}

{% block title %}Stock History Reconciliation — Sale / Return{% endblock %}
{% block heading %}Stock History Reconciliation{% endblock %}

{% block stylesheets %}
<style>
    /* ── Badges ── */
    .badge-ok     { background:#d1fae5; color:#065f46; padding:3px 9px; border-radius:4px; font-weight:600; font-size:.82rem; }
    .badge-add    { background:#dbeafe; color:#1e40af; padding:3px 9px; border-radius:4px; font-weight:600; font-size:.82rem; }
    .badge-update { background:#fef3c7; color:#92400e; padding:3px 9px; border-radius:4px; font-weight:600; font-size:.82rem; }
    .badge-delete { background:#fee2e2; color:#991b1b; padding:3px 9px; border-radius:4px; font-weight:600; font-size:.82rem; }
    .badge-sale   { background:#ede9fe; color:#5b21b6; padding:2px 7px; border-radius:3px; font-size:.78rem; font-weight:600; }
    .badge-return { background:#fce7f3; color:#9d174d; padding:2px 7px; border-radius:3px; font-size:.78rem; font-weight:600; }

    /* ── Row colours (detail table) ── */
    .row-add    { background:#eff6ff !important; }
    .row-update { background:#fffbeb !important; }
    .row-delete { background:#fef2f2 !important; }
    .row-ok     { background:#f0fdf4 !important; }

    /* ── Item summary row colours ── */
    .ism-issue { background:#fff7ed !important; }
    .ism-ok    { background:#f0fdf4 !important; }
    .diff-neg  { color:#dc2626; font-weight:700; }
    .diff-zero { color:#16a34a; font-weight:600; }
    .diff-pos  { color:#2563eb; font-weight:700; }

    /* ── Summary cards ── */
    .summary-card { background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:14px 18px; }
    .summary-card .num   { font-size:1.6rem; font-weight:700; line-height:1; }
    .summary-card .label { font-size:.8rem; color:#64748b; margin-top:4px; }
    .num-primary { color:#2563eb; }
    .num-danger  { color:#dc2626; }
    .num-success { color:#16a34a; }
    .num-warning { color:#d97706; }
    .num-muted   { color:#6b7280; }

    /* ── Filter card ── */
    .filter-card { background:#fff; border:1px solid #e2e8f0; border-radius:8px; padding:16px 20px; }

    /* ── Tables ── */
    .tbl-recon thead th, .tbl-ism thead th { background:#f2f6fc; font-size:.8rem; white-space:nowrap; }
    .tbl-ism thead th   { background:#f0f4ff; }
    .tbl-recon td, .tbl-ism td { font-size:.82rem; vertical-align:middle; }
    .val-mismatch { color:#dc2626; font-weight:700; }
    .badge-signbug { background:#fef9c3; color:#713f12; padding:3px 9px; border-radius:4px; font-weight:700; font-size:.82rem; border:1px solid #fde047; }
    .row-signbug   { background:#fefce8 !important; }

    /* ── Progress ── */
    #progressArea { display:none; }
    .progress { height:22px; border-radius:6px; }
    .progress-bar { transition: width .3s ease; font-size:.8rem; }

    /* ── Collapsible section header ── */
    .section-header {
        background:#f1f5f9; border:1px solid #e2e8f0; border-radius:8px;
        padding:10px 16px; cursor:pointer; user-select:none;
        display:flex; align-items:center; justify-content:space-between;
        margin-bottom:8px;
    }
    .section-header:hover { background:#e8edf5; }
    .section-header .chevron { transition: transform .2s; }
    .section-header.collapsed .chevron { transform: rotate(-90deg); }
</style>
{% endblock %}

{% block content %}

{# ── Date Range Filter ─────────────────────────────────────────────────────── #}
<div class="filter-card mb-3">
    <div class="row g-2 align-items-end">
        <div class="col-auto">
            <label class="form-label mb-1 small fw-semibold">Start Date</label>
            <input type="date" id="startDate" class="form-control form-control-sm" style="min-width:160px;">
        </div>
        <div class="col-auto">
            <label class="form-label mb-1 small fw-semibold">End Date</label>
            <input type="date" id="endDate" class="form-control form-control-sm" style="min-width:160px;">
        </div>
        <div class="col-auto">
            <button class="btn btn-primary btn-sm" onclick="runDryRun()">
                <i class="fas fa-search me-1"></i>Run Dry-Run
            </button>
        </div>
        <div class="col-auto ms-auto" id="rangeLabel" style="display:none;">
            <span class="text-muted small">
                Results for <strong id="rangeTxt"></strong>
            </span>
        </div>
    </div>
</div>

{# ── Progress Bar ──────────────────────────────────────────────────────────── #}
<div id="progressArea" class="mb-3">
    <div class="d-flex align-items-center gap-3">
        <div class="flex-grow-1">
            <div class="progress">
                <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated"
                     role="progressbar" style="width:0%">0%</div>
            </div>
        </div>
        <span id="progressMsg" class="text-muted small" style="min-width:200px;"></span>
    </div>
</div>

{# ── Alert ─────────────────────────────────────────────────────────────────── #}
<div id="alertArea" class="mb-2" style="display:none;"></div>

{# ── Summary Cards ─────────────────────────────────────────────────────────── #}
<div id="summaryArea" style="display:none;">
    <div class="row g-2 mb-3">
        <div class="col">
            <div class="summary-card">
                <div class="num num-muted" id="sInv">—</div>
                <div class="label">Invoices Checked</div>
            </div>
        </div>
        <div class="col">
            <div class="summary-card">
                <div class="num num-danger" id="sDel">—</div>
                <div class="label">Orphan Rows (DELETE)</div>
            </div>
        </div>
        <div class="col">
            <div class="summary-card">
                <div class="num num-primary" id="sAdd">—</div>
                <div class="label">Missing Rows (ADD)</div>
            </div>
        </div>
        <div class="col">
            <div class="summary-card">
                <div class="num num-warning" id="sUpd">—</div>
                <div class="label">Mismatched (UPDATE)</div>
            </div>
        </div>
        <div class="col">
            <div class="summary-card">
                <div class="num" id="sSig" style="color:#a16207;">—</div>
                <div class="label">Wrong Sign (SIGN_BUG)</div>
            </div>
        </div>
        <div class="col">
            <div class="summary-card">
                <div class="num num-success" id="sOk">—</div>
                <div class="label">Correct (OK)</div>
            </div>
        </div>
        <div class="col d-flex align-items-center justify-content-center">
            <button id="btnExecute" class="btn btn-danger" onclick="doExecute()" style="display:none;">
                <i class="fas fa-tools me-1"></i>Execute Fix
                <small id="btnExecuteHint" class="ms-1"></small>
            </button>
            <span id="allOkMsg" class="text-success fw-bold" style="display:none;">
                <i class="fas fa-check-circle me-1"></i>All entries correct!
            </span>
        </div>
    </div>
</div>

{# ════════════════════════════════════════════════════════════════════════════ #}
{# Item-wise Summary Section                                                    #}
{# ════════════════════════════════════════════════════════════════════════════ #}
<div id="itemSummaryArea" style="display:none;" class="mb-3">
    <div class="section-header" onclick="toggleSection('ismBody', this)">
        <span class="fw-semibold">
            <i class="fas fa-layer-group me-2 text-primary"></i>
            Item-wise Summary
            <small class="text-muted ms-2 fw-normal">sale qty vs stock_history — per product</small>
        </span>
        <i class="fas fa-chevron-down chevron"></i>
    </div>
    <div id="ismBody">
        <div class="card shadow-sm">
            <div class="card-body p-0">
                <div class="table-responsive" style="max-height:340px; overflow-y:auto;">
                    <table class="table table-bordered table-hover table-sm mb-0 tbl-ism">
                        <thead style="position:sticky; top:0; z-index:2;">
                            <tr>
                                <th>Product</th>
                                <th>Code</th>
                                <th class="text-end" title="Total (qty+bonus) from sale_product in this range">
                                    Src Sale ▾</th>
                                <th class="text-end" title="Total (qty+bonus) from sale_return in this range">
                                    Src Ret ▾</th>
                                <th class="text-end" title="Src Sale − Src Ret">
                                    Src Net</th>
                                <th class="text-end" title="|changed_stock| sum for sale rows in stock_history">
                                    SH Sale ▾</th>
                                <th class="text-end" title="|changed_stock| sum for return rows in stock_history">
                                    SH Ret ▾</th>
                                <th class="text-end" title="SH Sale − SH Ret">
                                    SH Net</th>
                                <th class="text-end" title="Src Net − SH Net  (0 = perfect)">
                                    Diff</th>
                                <th class="text-center">Issues</th>
                            </tr>
                        </thead>
                        <tbody id="ismRows"></tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="mt-1 small text-muted">
            <strong>▾</strong> = values in this date range only. &nbsp;
            <strong>Diff</strong> = Src Net − SH Net:
            <span class="diff-pos">blue (+) SH short</span> &nbsp;|&nbsp;
            <span class="diff-neg">red (−) SH excess</span> &nbsp;|&nbsp;
            <span class="diff-zero">green 0 = aligned</span>
        </div>
    </div>
</div>

{# ════════════════════════════════════════════════════════════════════════════ #}
{# Line-wise Detail Section                                                     #}
{# ════════════════════════════════════════════════════════════════════════════ #}
<div id="detailArea" style="display:none;">
    <div class="section-header" onclick="toggleSection('detailBody', this)">
        <span class="fw-semibold">
            <i class="fas fa-list-alt me-2 text-secondary"></i>
            Line-wise Detail
            <small class="text-muted ms-2 fw-normal">every invoice line classified</small>
        </span>
        <i class="fas fa-chevron-down chevron"></i>
    </div>
    <div id="detailBody">
        <div class="card shadow-sm">
            <div class="card-body p-0">
                {# Filter tabs #}
                <div class="px-3 pt-2 d-flex gap-2 flex-wrap border-bottom">
                    <button class="btn btn-sm btn-outline-secondary mb-2 active"
                            onclick="filterRows('ALL',this)">All</button>
                    <button class="btn btn-sm btn-outline-danger mb-2"
                            onclick="filterRows('DELETE',this)">
                        DELETE <span id="tabDel" class="badge bg-danger ms-1">0</span></button>
                    <button class="btn btn-sm btn-outline-primary mb-2"
                            onclick="filterRows('ADD',this)">
                        ADD <span id="tabAdd" class="badge bg-primary ms-1">0</span></button>
                    <button class="btn btn-sm btn-outline-warning mb-2"
                            onclick="filterRows('UPDATE',this)">
                        UPDATE <span id="tabUpd" class="badge bg-warning text-dark ms-1">0</span></button>
                    <button class="btn btn-sm btn-outline-success mb-2"
                            onclick="filterRows('OK',this)">
                        OK <span id="tabOk" class="badge bg-success ms-1">0</span></button>
                    <button class="btn btn-sm mb-2" style="border:1px solid #ca8a04;color:#92400e;"
                            onclick="filterRows('SIGN_BUG',this)">
                        SIGN_BUG <span id="tabSig" class="badge ms-1" style="background:#ca8a04;">0</span></button>
                </div>

                <div class="table-responsive" style="max-height:60vh; overflow-y:auto;">
                    <table class="table table-bordered table-hover table-sm mb-0 tbl-recon">
                        <thead style="position:sticky; top:0; z-index:2;">
                            <tr>
                                <th>Invoice</th>
                                <th>Type</th>
                                <th>Product</th>
                                <th>Code</th>
                                <th>Date</th>
                                <th class="text-end">Sale Qty</th>
                                <th class="text-end">Bonus</th>
                                <th class="text-end">SH Changed</th>
                                <th class="text-end">SH Bonus</th>
                                <th class="text-end">Expected</th>
                                <th class="text-end">Exp Bonus</th>
                                <th class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody id="detailRows"></tbody>
                    </table>
                </div>
            </div>
        </div>
        {# Legend #}
        <div class="mt-2 small text-muted d-flex gap-3 flex-wrap">
            <span><span class="badge-delete">DELETE</span> SH row exists but no sale/return line</span>
            <span><span class="badge-add">ADD</span> Sale/return line exists but no SH row</span>
            <span><span class="badge-update">UPDATE</span> Both exist but values differ</span>
            <span><span class="badge-ok">OK</span> Perfectly aligned</span>
            <span><span class="badge-signbug">SIGN_BUG</span> Return with −qty or Sale with +qty in SH (sign flipped)</span>
        </div>
    </div>
</div>

{% endblock %}


{% block javascripts %}
<script>
/* ══════════════════════════════════════════════════════════════════════════ */
/*  Globals                                                                   */
/* ══════════════════════════════════════════════════════════════════════════ */
let _executePayload = null;
let _progressTimer  = null;

const DRYRUN_URL  = "{% url 'reports:sale_stock_reconcile_dryrun' %}";
const EXECUTE_URL = "{% url 'reports:sale_stock_reconcile_execute' %}";

/* ── Utilities ─────────────────────────────────────────────────────────── */
function getCookie(name) {
    let c = null;
    document.cookie.split(';').forEach(v => {
        v = v.trim();
        if (v.startsWith(name + '=')) c = decodeURIComponent(v.slice(name.length + 1));
    });
    return c;
}

function fmt(v) {
    if (v === null || v === undefined) return '<span class="text-muted">—</span>';
    return v;
}

function showAlert(html, type = 'danger') {
    const a = document.getElementById('alertArea');
    a.innerHTML = `<div class="alert alert-${type} py-2">${html}</div>`;
    a.style.display = '';
    a.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
function clearAlert() {
    const a = document.getElementById('alertArea');
    a.style.display = 'none';
    a.innerHTML = '';
}

/* ── Progress ──────────────────────────────────────────────────────────── */
function setProgress(pct, msg) {
    const bar = document.getElementById('progressBar');
    bar.style.width  = pct + '%';
    bar.textContent  = pct + '%';
    document.getElementById('progressMsg').textContent = msg;
    document.getElementById('progressArea').style.display = '';
}
function hideProgress() {
    clearInterval(_progressTimer);
    document.getElementById('progressArea').style.display = 'none';
}
/* Animated fake progress crawling toward maxPct */
function startFakeProgress(label, maxPct = 85) {
    document.getElementById('progressArea').style.display = '';
    let cur = 0;
    clearInterval(_progressTimer);
    _progressTimer = setInterval(() => {
        if (cur < maxPct) {
            cur = Math.min(cur + (maxPct - cur) * 0.07 + 0.4, maxPct);
            setProgress(Math.floor(cur), label);
        }
    }, 180);
}
function finishProgress(msg) {
    clearInterval(_progressTimer);
    setProgress(100, msg);
    setTimeout(hideProgress, 1400);
}

/* ── Section toggle ─────────────────────────────────────────────────────── */
function toggleSection(bodyId, header) {
    const body = document.getElementById(bodyId);
    const collapsed = header.classList.contains('collapsed');
    body.style.display = collapsed ? '' : 'none';
    header.classList.toggle('collapsed', !collapsed);
}

/* ── Detail table filter tabs ───────────────────────────────────────────── */
function filterRows(action, btn) {
    document.querySelectorAll('#detailBody .btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    document.querySelectorAll('#detailRows tr').forEach(tr => {
        tr.style.display = (action === 'ALL' || tr.dataset.action === action) ? '' : 'none';
    });
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  DRY-RUN                                                                   */
/* ══════════════════════════════════════════════════════════════════════════ */
function runDryRun() {
    const start = document.getElementById('startDate').value;
    const end   = document.getElementById('endDate').value;

    if (!start || !end)  { showAlert('Please select both Start and End dates.'); return; }
    if (start > end)     { showAlert('Start date must be ≤ End date.'); return; }

    clearAlert();
    ['summaryArea', 'itemSummaryArea', 'detailArea'].forEach(id =>
        document.getElementById(id).style.display = 'none'
    );
    _executePayload = null;

    startFakeProgress('Running dry-run analysis…');

    fetch(DRYRUN_URL, {
        method:  'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRFToken': getCookie('csrftoken') },
        body:    JSON.stringify({ start_date: start, end_date: end }),
    })
    .then(r => r.json())
    .then(data => {
        if (data.status !== 'ok') {
            finishProgress('');
            hideProgress();
            showAlert('Error: ' + (data.message || 'Unknown error'));
            return;
        }
        finishProgress('Analysis complete');
        renderResults(data, start, end);
    })
    .catch(err => {
        hideProgress();
        showAlert('Request failed: ' + err);
    });
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  RENDER RESULTS                                                            */
/* ══════════════════════════════════════════════════════════════════════════ */
function renderResults(data, start, end) {
    const s = data.summary;

    /* Range label */
    document.getElementById('rangeTxt').textContent = `${start}  →  ${end}`;
    document.getElementById('rangeLabel').style.display = '';

    /* Summary numbers */
    document.getElementById('sInv').textContent = s.invoices_checked;
    document.getElementById('sDel').textContent = s.to_delete;
    document.getElementById('sAdd').textContent = s.to_add;
    document.getElementById('sUpd').textContent = s.to_update;
    document.getElementById('sSig').textContent = s.sign_bug  || 0;
    document.getElementById('sOk').textContent  = s.ok;

    /* Tab badges */
    document.getElementById('tabDel').textContent = s.to_delete;
    document.getElementById('tabAdd').textContent = s.to_add;
    document.getElementById('tabUpd').textContent = s.to_update;
    document.getElementById('tabOk').textContent  = s.ok;
    document.getElementById('tabSig').textContent = s.sign_bug || 0;

    const hasChanges = (s.to_delete + s.to_add + s.to_update + (s.sign_bug||0)) > 0;
    const btnExec  = document.getElementById('btnExecute');
    const allOkMsg = document.getElementById('allOkMsg');

    if (hasChanges) {
        document.getElementById('btnExecuteHint').textContent =
            `(${s.to_delete}D / ${s.to_add}A / ${s.to_update}U / ${s.sign_bug||0}S)`;
        btnExec.style.display  = '';
        allOkMsg.style.display = 'none';
        _executePayload = data.execute_payload;
    } else {
        btnExec.style.display  = 'none';
        allOkMsg.style.display = '';
    }

    document.getElementById('summaryArea').style.display = '';
    renderItemSummary(data.item_summary || []);
    renderDetailTable(data.rows || []);
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  ITEM SUMMARY                                                              */
/* ══════════════════════════════════════════════════════════════════════════ */
function renderItemSummary(items) {
    const tbody = document.getElementById('ismRows');

    if (!items.length) {
        tbody.innerHTML = '<tr><td colspan="10" class="text-center text-muted py-3">No items found.</td></tr>';
    } else {
        tbody.innerHTML = items.map(it => {
            const d = parseFloat(it.diff);
            const diffCls   = d >  0.001 ? 'diff-pos' : d < -0.001 ? 'diff-neg' : 'diff-zero';
            const diffLabel = d >  0.001 ? '+' + d    : d < -0.001 ? String(d)  : '0';
            const rowCls    = it.has_issue ? 'ism-issue' : 'ism-ok';

            /* Issue badge group */
            let issueParts = [];
            if (it.n_delete) issueParts.push(`<span class="badge-delete">${it.n_delete}×DEL</span>`);
            if (it.n_add)    issueParts.push(`<span class="badge-add ms-1">${it.n_add}×ADD</span>`);
            if (it.n_update) issueParts.push(`<span class="badge-update ms-1">${it.n_update}×UPD</span>`);
            const issueHtml = issueParts.length
                ? issueParts.join('')
                : '<span class="badge-ok">OK</span>';

            return `<tr class="${rowCls}">
                <td>${it.product_name}</td>
                <td class="text-muted small">${it.product_code}</td>
                <td class="text-end">${it.src_sale}</td>
                <td class="text-end">${it.src_ret}</td>
                <td class="text-end fw-semibold">${it.src_net}</td>
                <td class="text-end">${it.sh_sale}</td>
                <td class="text-end">${it.sh_ret}</td>
                <td class="text-end fw-semibold">${it.sh_net}</td>
                <td class="text-end ${diffCls}">${diffLabel}</td>
                <td class="text-center">${issueHtml}</td>
            </tr>`;
        }).join('');
    }

    document.getElementById('itemSummaryArea').style.display = '';
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  DETAIL TABLE                                                              */
/* ══════════════════════════════════════════════════════════════════════════ */
function renderDetailTable(rows) {
    const tbody = document.getElementById('detailRows');

    if (!rows.length) {
        tbody.innerHTML = '<tr><td colspan="12" class="text-center text-muted py-4">No results.</td></tr>';
    } else {
        tbody.innerHTML = rows.map(r => {
            const rowCls = { ADD:'row-add', UPDATE:'row-update',
                             DELETE:'row-delete', OK:'row-ok',
                             SIGN_BUG:'row-signbug' }[r.action] || '';

            const badgeHtml = {
                OK:       '<span class="badge-ok">OK</span>',
                ADD:      '<span class="badge-add">ADD</span>',
                UPDATE:   '<span class="badge-update">UPDATE</span>',
                DELETE:   '<span class="badge-delete">DELETE</span>',
                SIGN_BUG: '<span class="badge-signbug">SIGN_BUG</span>',
            }[r.action] || r.action;

            const typeBadge = r.txn_type === 'Return'
                ? '<span class="badge-return">Return</span>'
                : '<span class="badge-sale">Sale</span>';

            const shChCls  = (r.action === 'UPDATE' && r.sh_changed !== r.exp_changed) ? 'val-mismatch' : '';
            const shBonCls = (r.action === 'UPDATE' && r.sh_bonus   !== r.exp_bonus)   ? 'val-mismatch' : '';

            return `<tr class="${rowCls}" data-action="${r.action}">
                <td class="fw-semibold">${r.invoice_no}</td>
                <td>${typeBadge}</td>
                <td>${r.product_name}</td>
                <td class="text-muted small">${r.product_code}</td>
                <td>${r.date}</td>
                <td class="text-end">${fmt(r.sale_qty)}</td>
                <td class="text-end">${fmt(r.sale_bonus)}</td>
                <td class="text-end ${shChCls}">${fmt(r.sh_changed)}</td>
                <td class="text-end ${shBonCls}">${fmt(r.sh_bonus)}</td>
                <td class="text-end fw-semibold">${fmt(r.exp_changed)}</td>
                <td class="text-end">${fmt(r.exp_bonus)}</td>
                <td class="text-center">${badgeHtml}</td>
            </tr>`;
        }).join('');
    }

    document.getElementById('detailArea').style.display = '';
}

/* ══════════════════════════════════════════════════════════════════════════ */
/*  EXECUTE                                                                   */
/* ══════════════════════════════════════════════════════════════════════════ */
function doExecute() {
    if (!_executePayload) { alert('Please run dry-run first.'); return; }

    const p     = _executePayload;
    const nDel  = (p.delete_ids     || []).length;
    const nAdd  = (p.add_entries    || []).length;
    const nUpd  = (p.update_entries || []).length;
    const nSig  = (p.sign_bug_ids    || []).length;
    const total = nDel + nAdd + nUpd + nSig;

    if (!total) { alert('Nothing to change.'); return; }

    const msg = `Apply the following changes to stock_history?\n\n`
              + `  DELETE (orphan rows):  ${nDel}\n`
              + `  ADD (missing rows):    ${nAdd}\n`
              + `  UPDATE (mismatched):   ${nUpd}\n`
              + `  SIGN_BUG (flip sign):  ${nSig}`;

    if (!confirm(msg)) return;

    const btn = document.getElementById('btnExecute');
    btn.disabled = true;

    startFakeProgress('Applying fixes to stock_history…', 80);

    fetch(EXECUTE_URL, {
        method:  'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRFToken': getCookie('csrftoken') },
        body:    JSON.stringify(p),
    })
    .then(r => r.json())
    .then(data => {
        btn.disabled = false;
        if (data.status === 'ok') {
            finishProgress('Done!');

            let resultHtml = `<strong>✅ Reconciliation complete!</strong><br>`
                           + `Deleted: <strong>${data.deleted}</strong> &nbsp; `
                           + `Added: <strong>${data.added}</strong> &nbsp; `
                           + `Updated: <strong>${data.updated}</strong> &nbsp; `
                           + `Sign-Fixed: <strong>${data.sign_fixed||0}</strong>`;

            if (data.errors && data.errors.length) {
                resultHtml += `<br><span class="text-danger">⚠️ ${data.errors.length} error(s):</span><br>`
                            + data.errors.slice(0, 10).map(e => `<code>${e}</code>`).join('<br>');
            }
            showAlert(resultHtml, 'success');

            // Re-run dry-run so results refresh automatically
            setTimeout(() => runDryRun(), 900);
        } else {
            hideProgress();
            showAlert('Error: ' + (data.message || 'Unknown error'));
        }
    })
    .catch(err => {
        btn.disabled = false;
        hideProgress();
        showAlert('Request failed: ' + err);
    });
}
</script>
{% endblock %}