var pxpayCopySVG = '<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2"></path></svg>';

/**
 * Escape a value before it's placed into innerHTML. The values passed into
 * pxpayShDet/pxpayShBank come from this site's own settings (admin-entered
 * account numbers, names, etc.) rather than site visitors, but we still
 * escape defensively rather than trust it end to end.
 */
function pxpayEscHtml(str) {
    return String(str)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');
}

function pxpaySwTab(e, id) {
    var b = document.getElementsByClassName("pxpay-body");
    var t = document.getElementsByClassName("pxpay-tab-btn");
    var title = document.getElementById("pxpay-intro-title");
    var desc = document.getElementById("pxpay-intro-desc");

    for (var i = 0; i < b.length; i++) {
        b[i].style.display = "none";
        b[i].classList.remove("active");
    }
    for (var i = 0; i < t.length; i++) {
        t[i].classList.remove("active");
    }

    var targetBody = document.getElementById(id);
    if (targetBody) {
        targetBody.style.display = "block";
        targetBody.classList.add("active");
    }

    if (e && e.currentTarget) {
        e.currentTarget.classList.add("active");
    }

    if (id === 'pxpay-mob') {
        if (title) title.innerHTML = pxpayI18n.mobTitle;
        if (desc) desc.innerHTML = pxpayI18n.mobDesc;
    } else if (id === 'pxpay-bank') {
        if (title) title.innerHTML = pxpayI18n.bankTitle;
        if (desc) desc.innerHTML = pxpayI18n.bankDesc;
    } else if (id === 'pxpay-intl') {
        if (title) title.innerHTML = pxpayI18n.cryptoTitle;
        if (desc) desc.innerHTML = pxpayI18n.cryptoDesc;
    }

    var panel = document.getElementById('pxpay-panel');
    if (panel) panel.style.display = 'none';

    document.querySelectorAll('.pxpay-card, .pxpay-bank-card').forEach(function (c) {
        c.classList.remove('selected');
        c.style.filter = "none";
        c.style.opacity = "1";
    });

    pxpayClearRequired();
    pxpayShowQr('', '');
}

function pxpayShDet(el, name, no, logoUrl, type, qrUrl) {
    var grid = el.closest('.pxpay-grid');
    grid.querySelectorAll('.pxpay-card').forEach(function (c) { c.classList.remove('selected'); });
    el.classList.add('selected');

    grid.classList.add('selection-active-grid');
    document.getElementById('pxpay-panel').style.display = 'block';

    var suffix = (type === 'crypto') ? pxpayI18n.emailIdLabel : pxpayI18n.personalLabel;

    var inputFields = '';
    if (type === 'crypto') {
        inputFields = '<input type="email" name="pxpay_sender_email" class="pxpay-input-trx" placeholder="' + pxpayI18n.cryptoEmailPh + '" required style="margin-bottom:10px;">';
        inputFields += '<input type="text" name="pxpay_trx" class="pxpay-input-trx" placeholder="' + pxpayI18n.trxPh + '" required>';
    } else {
        inputFields = '<input type="text" name="pxpay_sender_no" class="pxpay-input-trx" placeholder="' + pxpayI18n.senderNoPh + '" required style="margin-bottom:10px;">';
        inputFields += '<input type="text" name="pxpay_trx" class="pxpay-input-trx" placeholder="' + pxpayI18n.trxPh + '" required>';
    }

    var html = '<div class="pxpay-info-row">' +
        '<div class="pxpay-row-left">' +
        '<img src="' + logoUrl + '" style="width:30px; height:30px; object-fit:contain; border-radius:6px;">' +
        '<div><span class="pxpay-label">' + pxpayEscHtml(name) + ' (' + suffix + ')</span><div class="pxpay-value">' + pxpayEscHtml(no) + '</div></div>' +
        '</div>' +
        '<button type="button" class="pxpay-btn-copy" onclick="pxpayCopyVal(\'' + no.replace(/'/g, "\\'") + '\')">' + pxpayCopySVG + '</button>' +
        '</div>';

    document.getElementById('pxpay-dynamic-rows').innerHTML = html;
    document.getElementById('pxpay-input-area').innerHTML = inputFields;
    pxpayShowQr(qrUrl, name);
}

function pxpayShBank(el, bank, name, acc, br, rt, swift, qrUrl) {
    var body = el.closest('.pxpay-body');
    body.querySelectorAll('.pxpay-bank-card').forEach(function (c) { c.classList.remove('selected'); });
    el.classList.add('selected');
    document.getElementById('pxpay-panel').style.display = 'block';

    var fields = [
        { label: pxpayI18n.bankLabel, val: bank },
        { label: pxpayI18n.nameLabel, val: name },
        { label: pxpayI18n.accNoLabel, val: acc },
        { label: pxpayI18n.branchLabel, val: br },
        { label: pxpayI18n.routingLabel, val: rt },
        { label: pxpayI18n.swiftLabel, val: swift }
    ];
    var html = '';
    fields.forEach(function (f) {
        if (f.val) {
            html += '<div class="pxpay-info-row">' +
                '<div class="pxpay-row-left">' +
                '<div class="pxpay-icon-circle"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div>' +
                '<div><span class="pxpay-label">' + pxpayEscHtml(f.label) + '</span><div class="pxpay-value">' + pxpayEscHtml(f.val) + '</div></div>' +
                '</div>' +
                '<button type="button" class="pxpay-btn-copy" onclick="pxpayCopyVal(\'' + f.val.replace(/'/g, "\\'") + '\')">' + pxpayCopySVG + '</button>' +
                '</div>';
        }
    });

    document.getElementById('pxpay-dynamic-rows').innerHTML = html;

    document.getElementById('pxpay-input-area').innerHTML =
        '<div class="pxpay-slip-upload">' +
        '<span class="pxpay-label" style="display:block;margin-bottom:8px;">' + pxpayI18n.slipLabel + '</span>' +
        '<input type="file" name="pxpay_slip" accept="image/*" required style="margin-bottom:10px;">' +
        '<input type="text" name="pxpay_trx" class="pxpay-input-trx" placeholder="' + pxpayI18n.trxRefPh + '" required>' +
        '</div>';
    pxpayShowQr(qrUrl, bank);
}

function pxpayShowQr(qrUrl, methodName) {
    var wrap = document.getElementById('pxpay-qr-wrap');
    if (!wrap) return;
    if (!qrUrl) {
        wrap.innerHTML = '';
        return;
    }
    wrap.innerHTML =
        '<div class="pxpay-qr-block">' +
        '<img src="' + qrUrl + '" alt="' + pxpayEscHtml(methodName) + ' QR code">' +
        '<span>' + pxpayI18n.qrScanLabel + '</span>' +
        '</div>';
}

function pxpayCopyVal(val) {
    navigator.clipboard.writeText(val).then(function () {
        var t = document.getElementById("pxpay-toast");
        if (t) {
            t.className = "show";
            setTimeout(function () { t.className = ""; }, 2000);
        }
    });
}

function pxpayClearRequired() {
    var area = document.getElementById('pxpay-input-area');
    if (area) area.innerHTML = '';
}
