(function () {
    var timer = null;

    function fmtDist(v) {
        if (v === null || v === undefined) return '--';
        return v.toFixed(2);
    }

    function pollPrices() {
        var list = document.getElementById('plan-monitor-list');
        if (!list || !list.querySelector('.plan-item')) return;

        fetch('/api/plan_prices')
            .then(function (r) { return r.json(); })
            .then(function (rows) {
                rows.forEach(function (row) {
                    var el = list.querySelector('.plan-item[data-plan-id="' + row.id + '"]');
                    if (!el) return;
                    var priceEl = el.querySelector('.live-price');
                    var distEl = el.querySelector('.live-dist');
                    var upEl = el.querySelector('.dist-up');
                    var downEl = el.querySelector('.dist-down');
                    if (priceEl) {
                        priceEl.textContent = row.price != null ? row.price : '--';
                    }
                    if (row.in_zone && distEl) {
                        distEl.innerHTML = '<span class="text-profit" style="font-weight:600">在区间内</span>';
                    } else if (distEl) {
                        distEl.innerHTML =
                            '距上<span class="dist-up">' + fmtDist(row.dist_upper) + '</span> ' +
                            '距下<span class="dist-down">' + fmtDist(row.dist_lower) + '</span>';
                    }
                });
            })
            .catch(function () { /* ignore */ });
    }

    function startPolling() {
        if (timer) clearInterval(timer);
        pollPrices();
        timer = setInterval(pollPrices, 1000);
    }

    document.addEventListener('DOMContentLoaded', startPolling);
})();