/**
 * Payment due email editor: live preview.
 *
 * Posts the subject/body/item-line the admin is editing to the read-only preview
 * REST endpoint and swaps the rendered result into the preview panel, debounced
 * as they type. The server always renders from the same sample values, so this
 * mirrors exactly what a real billing scan would send. Purely a convenience — the
 * page already shows a server-rendered preview of the saved template without it.
 */
(function () {
    'use strict';

    const config = window.uscPaymentEmailPreview;
    if (!config || !config.url) return;

    const subjectEl  = document.getElementById('usc-pe-subject');
    const bodyEl      = document.getElementById('usc-pe-body');
    const itemLineEl  = document.getElementById('usc-pe-item-line');
    const outSubject  = document.getElementById('usc-pe-preview-subject');
    const outBody     = document.getElementById('usc-pe-preview-body');

    if (!subjectEl || !bodyEl || !itemLineEl || !outSubject || !outBody) return;

    let timer = null;

    function refresh() {
        fetch(config.url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-WP-Nonce': config.nonce
            },
            body: JSON.stringify({
                subject: subjectEl.value,
                body: bodyEl.value,
                item_line: itemLineEl.value
            })
        })
            .then(function (response) {
                if (!response.ok) throw new Error('preview failed');
                return response.json();
            })
            .then(function (data) {
                outSubject.textContent = data.subject || '';
                outBody.textContent = data.body || '';
            })
            .catch(function () {
                // Leave the last good preview in place on error.
            });
    }

    function schedule() {
        if (timer) window.clearTimeout(timer);
        timer = window.setTimeout(refresh, 300);
    }

    [subjectEl, bodyEl, itemLineEl].forEach(function (el) {
        el.addEventListener('input', schedule);
    });
})();