import React from 'react';
import { createRoot } from 'react-dom/client';

const settings = window.wc.wcSettings.getSetting('walletUpCheckout', {});
const label = window.wp.htmlEntities.decodeEntities(settings.title) || 'WalletUpPro Pay';

const Content = () => {
    // Ensure the container is either found or created
    let container = document.getElementById('wallet-up-checkout-container');
    if (!container) {
        container = document.createElement('div');
        container.id = 'wallet-up-checkout-container';
        container.className = 'wallet-up-modern-wrapper';
        document.body.appendChild(container); // Append to the body or a more appropriate parent element
    }
    return container;
};

const Block_Gateway = {
    name: 'wallet_up', // Must match your gateway ID
    label: label,
    content: Object(window.wp.element.createElement)(Content, null),
    edit: Object(window.wp.element.createElement)(Content, null),
    canMakePayment: () => true,
    ariaLabel: label,
    supports: settings.supports || {},
};

window.wc.wcBlocksRegistry.registerPaymentMethod(Block_Gateway);

// Standalone React component
const CheckoutPaymentDisplay = () => {
    return React.createElement('div', { className: 'wallet-up-checkout-display' }, 'Payment Display Here');
};

// Store root reference for clean unmounting
let rootInstance = null;

const initializeCheckout = () => {
    const checkoutContainer = document.getElementById('wallet-up-checkout-container');
    
    if (checkoutContainer) {
        // Clean up existing root instance if it exists
        if (rootInstance) {
            rootInstance.unmount();
            rootInstance = null;
        }
        
        // Using createRoot for React 18 compatibility
        rootInstance = createRoot(checkoutContainer);
        rootInstance.render(
            React.createElement(React.StrictMode, null,
                React.createElement(CheckoutPaymentDisplay)
            )
        );
    } else {
        console.error("❌ wallet-up-checkout-container not found in checkout page.");
    }
};

const initialize = () => {
    // Ensure this runs on DOMContentLoaded or after blocks have rendered
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initializeCheckout);
    } else {
        // Check if the container exists, if not, create it
        if (!document.getElementById('wallet-up-checkout-container')) {
            Content(); // Call Content to create the container
        }
        initializeCheckout();
    }

    // Listen for WooCommerce's updated_checkout event for dynamic updates
    if (window.jQuery) {
        window.jQuery(document.body).on('updated_checkout', () => {
            if (window.removeWalletUpProCheckout) {
                window.removeWalletUpProCheckout();
            }
            initializeCheckout();
        });
    }
};

window.removeWalletUpProCheckout = () => {
    if (rootInstance) {
        rootInstance.unmount();
        rootInstance = null;
    }
};

// Initialize the checkout process
initialize();

// Provide compatibility layer for older code that might expect these globals
// but ensure we're using modern APIs underneath
if (!window.React) {
    window.React = React;
}

if (!window.ReactDOM) {
    window.ReactDOM = {
        createRoot: createRoot,
        // Legacy render method wrapped to use createRoot internally
        render: function(element, container) {
            const root = createRoot(container);
            root.render(element);
            // Return a mock object to maintain compatibility
            return {
                unmount: function() {
                    root.unmount();
                }
            };
        }
    };
}