class MomentPay {
    constructor() {
        this.overlay = null;
        this.iframe = null;
        this.onCloseCallback = null;
        this.onResponseCallback = null;
        this.tabId = this.generateTabId();
    }

    generateTabId() {
        let tabId = sessionStorage.getItem('momentPayTabId');
        if (!tabId) {
            tabId = new Date().getTime().toString();
            sessionStorage.setItem('momentPayTabId', tabId);
        }
        return tabId;
    }

    init(params) {
        this.createOverlay();
        this.createCloseButton();
        this.createIframe(params);
    }

    createOverlay() {
        this.overlay = document.createElement('div');
        this.setStyle(this.overlay, {
            position: 'fixed', top: '0', left: '0', width: '100%', height: '100%',
            backgroundColor: 'rgba(0, 0, 0, 0.7)', zIndex: '10000', display: 'flex',
            justifyContent: 'center', alignItems: 'center', overflow: 'auto'
        });
        document.body.appendChild(this.overlay);
    }

    createCloseButton() {
        const closeButton = document.createElement('button');
        closeButton.innerHTML = '✕';
        this.setStyle(closeButton, {
            position: 'absolute', top: '20px', right: '20px', zIndex: '10001',
            cursor: 'pointer', border: '2px solid red', borderRadius: '50%',
            width: '30px', height: '30px', lineHeight: '24px', textAlign: 'center',
            backgroundColor: 'white', color: 'red', fontSize: '20px', padding: '0',
            display: 'flex', justifyContent: 'center', alignItems: 'center',
            outline: 'none',
        });
        closeButton.onclick = () => this.closeIframe();
        this.overlay.appendChild(closeButton);
    }

    createIframe(params) {
        this.iframe = document.createElement('iframe');
        this.iframe.id = 'paymentFrame';
        this.setStyle(this.iframe, {
            height: '90%', border: 'none', backgroundColor: 'white'
        });
        this.overlay.appendChild(this.iframe);

        window.requestAnimationFrame(() => this.setupFormInIframe(params));
    }

    setupFormInIframe(params) {
        const doc = this.iframe.contentDocument || this.iframe.contentWindow.document;
        doc.open();
        doc.close();

        const form = doc.createElement('form');
        form.method = 'post';
        form.action = params.actionUrl;
        doc.body.appendChild(form);

        const payload = params.version === 'HISV2' ? {
                credentials: {
                    user: params.credentialsuser,
                    key: params.credentialskey,
                    version: params.version
                },
                username: params.uname,
                customer_details: [{
                    customer_name: params.patientName,
                    customer_id: params.uhid,
                    payment_amount: params.chargerate,
                    customer_email: params.email,
                    customer_phone: params.mobileno
                }],
                processing_id: params.processingid,
                paymode: params.paymode,
                payment_fill: 'pre_full',
                transaction_location: params.transaction_location,
                callback_url: params.response_url,
                redirect_url: params.return_url,
                logo_url: params.logo_url,
                location_id: params.location_id
            } : {
                auth: {
                    user: params.authuser,
                    key: params.authkey
                },
                cashier_id: params.merchantid,
                accounts: [{
                    patient_name: params.patientName,
                    account_number: params.uhid,
                    amount: params.chargerate,
                    email: params.email,
                    phone: params.mobileno
                }],
                processing_id: params.processingid,
                paymode: params.paymode,
                payment_fill: 'pre_full',
                payment_location: params.hospitallocation,
                return_url: params.returnUrl,
                response_url: params.responseUrl,
                tabId: this.tabId
            };

        this.addHiddenInput(doc, form, 'token', JSON.stringify(payload));

        ['mid', 'check_sum_hash', 'tabId'].forEach(field => {
            this.addHiddenInput(doc, form, field, params[field] || '');
        });

        form.submit();
    }

    addHiddenInput(doc, form, name, value) {
        const input = doc.createElement('input');
        input.type = 'hidden';
        input.name = name;
        input.value = value;
        form.appendChild(input);
    }

    setStyle(element, styles) {
        Object.assign(element.style, styles);
    }

    closeIframe() {
        if (this.overlay) {
            document.body.removeChild(this.overlay);
            this.overlay = null;
            this.iframe = null;
            if (typeof this.onCloseCallback === 'function') {
                this.onCloseCallback();
            }
        }
    }

    onClose(callback) {
        this.onCloseCallback = () => {
            if (sessionStorage.getItem('momentPayTabId') === this.tabId) {
                callback();
            }
        };
    }

    onResponse(callback) {
        window.addEventListener('message', (event) => {
            if (typeof callback === 'function') {
                callback(event.data);
                this.closeIframe();
            }
        }, false);
        this.onResponseCallback = callback;
    }
}


            //actionUrl: 'https://testing.momentpay.in/ma/v2/extended-iframe-payment',
        // Initialize MomentPay instance
        const paymentMoment = new MomentPay();
        paymentMoment.init({
            actionUrl: 'https://testapp.ariticapp.com/ma/pgprovider/iframe',
            patientName: document.getElementById("name").value,
            uhid: '111',
            chargerate: document.getElementById("amount").value,
            email:  document.getElementById("email").value,
            mobileno:  document.getElementById("contactNumber").value,
            processingid: document.getElementById("orderId").value,
            uname:  document.getElementById("merchantId").value,
            paymode: 'momentpay-pg',
            location_id: '1',
            transaction_location: "",
            credentialsuser:  document.getElementById("merchantId").value,
            credentialskey: 'jRySCgGBUIIXJB1X8aEJ6KjAbtFDzjVd3eZ4GRXlDUbhxYWvE7',
            version: 'HISV2',
            logo_url: document.getElementById('logoPath').value,
            return_url: "",
            response_url: ""
	});      


	paymentMoment.onResponse((data) => {
		console.log("Received data from iframe");
		console.log('Received data from iframe:', data);
		console.log("----");
		console.log(data.response);

		console.log("----");
		const responseData = JSON.parse(data.response);
		console.log(responseData);
		console.log(responseData.status_code);
		if (responseData.status_code == 1200) {
			// Handle successful payment
			console.log('Payment successful:', responseData.payment_response.baseAmount);
			document.getElementById('amountField').value = responseData.payment_response.baseAmount;
			 document.getElementById('mmntpay_paymentid').value = responseData.transaction_id; // parse the response and add it 

			 document.getElementById('mmntpay_signature').value = responseData.processing_id; //Processing id 
			 document.getElementById('mmntpay_response_status').value = responseData.status_code;  
			document.getElementById("momentpay-paymentresponse").click();

		} else {
			 document.getElementById('mmntpay_response_status').value = responseData.status_code;  
			document.getElementById("momentpay-paymentresponse").click();
			alert('Your payment has failed. Please try again!');
		}
	});

	paymentMoment.onClose(() => {
			 document.getElementById('mmntpay_response_status').value = "1200";  
		//	 document.getElementById('mmntpay_response_status').value = "1404";  
			document.getElementById("momentpay-paymentresponse").click();
		console.log("Payment window closed");
	});