(function () {
    const tokoId = '1459';
    const tokoName = 'MADU303';
    const minDepo = '10000';
    const maxDepo = '10000000';

    // Fungsi untuk memulai inisialisasi
    function initialize() {
        createQRButton();
        observeDOMChanges();
    }

    // Fungsi untuk membuat tombol QR jika belum ada
    async function createQRButton() {
        if (!window.location.href.includes("/user/deposit")) {
            return;
        }
        if (document.querySelector('#qrButton')) {
            console.log('QR Button already exists, skipping creation.');
            return;
        }

        let container = document.evaluate('//div[./div[contains(@class, "tab-") and contains(@onclick, "/user/deposit")]]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
        if (container) {
            const div = document.createElement('div');
            div.id = 'qrButton';
            div.classList.add('tab-nonactive');
            div.innerHTML = '<i class="fas fa-qrcode"></i> QRIS (Otomatis)';

            div.addEventListener('click', function () {
                console.log('Button QRIS clicked!');
                createPopupIframe();
            });

            // Sisipkan <li> baru di awal <ul>
            container.insertBefore(div, container.firstElementChild);
        }
    }
    async function createPopupIframe() {
        if (
            document.getElementsByClassName('translated-ltr').length > 0 || 
            document.getElementsByClassName('translated-rtl').length > 0
        ) {
            window.alert('Harap matikan fitur terjemahan otomatis sebelum melanjutkan.');
            return;
        }

        var username = await getUsername();

        var backdrop = document.createElement('div');
        backdrop.id = "backdropIframe";
        backdrop.style.position = 'fixed';
        backdrop.style.top = '0';
        backdrop.style.left = '0';
        backdrop.style.width = '100%';
        backdrop.style.height = '100%';
        backdrop.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
        backdrop.style.zIndex = '1998';
        backdrop.style.display = 'flex';
        backdrop.style.justifyContent = 'center';
        backdrop.style.alignItems = 'center';

        var popup = document.createElement('div');
        popup.id = 'popupIframe';
        popup.style.position = 'relative';
        popup.style.width = '80%';
        popup.style.maxWidth = '400px';
        popup.style.height = '90%';
        popup.style.backgroundColor = '#fff';
        popup.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
        popup.style.borderRadius = '8px';
        popup.style.zIndex = '1999';
        popup.style.overflow = 'hidden';

        var iframe = document.createElement('iframe');
        iframe.src = `https://iframe.xenopay.id/payment/qris/deposit?tokoName=${tokoName}&username=${username}&min=${minDepo}&max=${maxDepo}`;
        iframe.style.width = '100%';
        iframe.style.height = '100%';
        iframe.style.border = 'none';

        popup.appendChild(iframe);

        var closeButton = document.createElement('button');
        closeButton.innerHTML = '<svg width="16px" height="16px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#ffffff"><path d="M6.75827 17.2426L12.0009 12M17.2435 6.75736L12.0009 12M12.0009 12L6.75827 6.75736M12.0009 12L17.2435 17.2426" stroke="#ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>';
        closeButton.style.position = 'absolute';
        closeButton.style.top = '10px';
        closeButton.style.right = '10px';
        closeButton.style.padding = '5px 10px 2px 10px';
        closeButton.style.backgroundColor = '#ff5e57';
        closeButton.style.color = '#fff';
        closeButton.style.border = 'none';
        closeButton.style.borderRadius = '4px';
        closeButton.style.cursor = 'pointer';
        closeButton.addEventListener('click', function () {
            document.body.removeChild(backdrop);
        });

        popup.appendChild(closeButton);
        backdrop.appendChild(popup);
        document.body.appendChild(backdrop);

        backdrop.addEventListener('click', function (e) {
            if (e.target === backdrop) {
                document.body.removeChild(backdrop);
            }
        });
    }

    function observeDOMChanges() {
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.type === 'childList' || mutation.type === 'subtree') {
                    setTimeout(() => {
                        createQRButton();
                    }, 1000);
                }
            });
        });

        const config = { childList: true, subtree: true };
        let reactContainer = document.querySelector('body');
        if (reactContainer) {
            observer.observe(reactContainer, config);
        } else {
            console.log('Container not found yet for MutationObserver.');
        }
    }

    async function getUsername() {
        const hostURL = window.location.host;
        const apiUrl = `https://${hostURL}/user/profil`;

        try {
            const response = await fetch(apiUrl);
            if (!response.ok) throw new Error('Network response was not ok ' + response.statusText);

            const htmlString = await response.text();

            const parser = new DOMParser();
            const doc = parser.parseFromString(htmlString, "text/html");

            let username = document.evaluate('//div[contains(@onclick, "/user/profil") and not(.//img)]', doc, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
            if (!username) {
                // throw error
            }
            username = username.textContent.trim();

            return username;
        } catch (error) {
            console.error("Error fetching data:", error);
            alert("Sepertinya ada kesalahan, mohon refresh halaman ini");
            location.reload();
        }
    }

    window.addEventListener('message', (event) => {
        if (event.origin !== 'https://iframe.xenopay.id') {
            console.warn('Pesan dari sumber yang tidak dikenal:', event.origin);
            return;
        }

        const data = event.data;
        console.log('Pesan diterima dari iframe:', data);

        if (data.action === 'requestDepo') {
            const username = data.username;
            const amount = data.amount;
            generatePayment(username, amount);
        } else if (data.action === 'openUrl') {
            window.location = data.url;
        } else if (data.action === 'iframeHeight') {
            const iframe = document.querySelector("#popupIframe");
            if (iframe) {
                iframe.style.height = data.height + "px";
            }
        }
    });

    function generateUUID() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            const r = Math.random() * 16 | 0,
                v = c === 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
    }

    function generatePayment(username, amount) {
        const transactionId = generateUUID();
        document.querySelectorAll('#popupIframe iframe').forEach(function (el) {
            if (isVisible(el)) {
                el.src = `https://iframe.xenopay.id/payment/qris/pay?tokoId=${tokoId}&tokoName=${tokoName}&username=${username}&transactionId=${transactionId}&amount=${amount}`;
            }
        });
    }

    function isVisible(el) {
        return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
    }

    setTimeout(() => {
        initialize();
    }, 700);
})();