const settings = window.wc.wcSettings.getSetting('red_envelope_data', {});
const label = window.wp.htmlEntities.decodeEntities(settings.title) || 'Red Envelope Payment';
const description = window.wp.htmlEntities.decodeEntities(settings.description) || '';
const icon = settings.icon || '';

// One-time CSS injection: themes like Divi apply `!important` rules to
// .wc-block-components-checkout-payment-method-* descendants (especially
// `-webkit-text-fill-color: transparent` for gradient text). Inline React
// styles cannot beat `!important`, so we inject a stylesheet with stronger
// specificity + `!important` to keep the reward badge text legible.
(function injectAb2bcBadgeCSS() {
    if (typeof document === 'undefined') return;
    if (document.getElementById('ab2bc-rew-badge-style')) return;
    var s = document.createElement('style');
    s.id = 'ab2bc-rew-badge-style';
    s.textContent = [
        '.ab2bc-rew-badge,',
        '.wc-block-components-payment-methods .ab2bc-rew-badge,',
        '.wp-block-woocommerce-checkout .ab2bc-rew-badge {',
        '  color: #1a1a1a !important;',
        '  -webkit-text-fill-color: #1a1a1a !important;',
        '  text-fill-color: #1a1a1a !important;',
        '  background: linear-gradient(135deg, #f39c12, #e74c3c) !important;',
        '  -webkit-background-clip: border-box !important;',
        '  background-clip: border-box !important;',
        '  font-weight: 800 !important;',
        '  font-size: 15px !important;',
        '  text-shadow: 0 1px 0 rgba(255,255,255,0.85), 0 0 6px rgba(255,255,255,0.55) !important;',
        '  opacity: 1 !important;',
        '  filter: none !important;',
        '  mix-blend-mode: normal !important;',
        '}',
    ].join('\n');
    (document.head || document.documentElement).appendChild(s);
})();

const Content = () => {
    return window.wp.element.createElement(
        'div',
        { 
            style: { 
                background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)',
                borderRadius: '8px',
                padding: '20px',
                color: '#fff',
                marginTop: '10px'
            } 
        },
        // Description
        window.wp.element.createElement('p', { style: { margin: '0 0 15px 0', color: '#e0e0e0' } }, description),
        
        // How it works section
        window.wp.element.createElement(
            'div',
            { 
                style: { 
                    background: 'rgba(255,255,255,0.1)',
                    padding: '15px',
                    borderRadius: '6px',
                    marginBottom: '15px'
                } 
            },
            window.wp.element.createElement('p', { style: { margin: '0 0 10px 0', color: '#fff', fontWeight: 'bold' } }, '📱 How It Works:'),
            window.wp.element.createElement(
                'ol',
                { style: { margin: 0, paddingLeft: '20px', color: '#e0e0e0', fontSize: '14px' } },
                window.wp.element.createElement('li', null, 'Complete your order'),
                window.wp.element.createElement('li', null, 'Scan QR code with Red Envelope Wallet'),
                window.wp.element.createElement('li', null, 'Pay in USDC on AQY Chain'),
                window.wp.element.createElement('li', null, 'Receive AQY Coins rewards instantly!')
            )
        ),
        
        // QR code info
        window.wp.element.createElement(
            'div',
            { 
                style: { 
                    display: 'flex',
                    alignItems: 'center',
                    gap: '10px',
                    background: 'rgba(255,255,255,0.05)',
                    padding: '12px',
                    borderRadius: '6px',
                    marginBottom: '15px'
                } 
            },
            window.wp.element.createElement('span', { style: { fontSize: '24px' } }, '📷'),
            window.wp.element.createElement(
                'div',
                null,
                window.wp.element.createElement('p', { style: { margin: 0, color: '#fff', fontWeight: 'bold', fontSize: '14px' } }, 'QR Code Payment'),
                window.wp.element.createElement('p', { style: { margin: 0, color: '#aaa', fontSize: '12px' } }, 'QR code with order & seller details will appear after checkout')
            )
        ),

        // Reward badge
        window.wp.element.createElement(
            'div',
            {
                className: 'ab2bc-rew-badge',
                style: { 
                    display: 'inline-block',
                    background: 'linear-gradient(135deg, #f39c12, #e74c3c)',
                    color: '#1a1a1a',
                    WebkitTextFillColor: '#1a1a1a',
                    padding: '10px 22px',
                    borderRadius: '20px',
                    fontWeight: '800',
                    fontSize: '15px',
                    letterSpacing: '0.2px',
                    textShadow: '0 1px 0 rgba(255,255,255,0.85), 0 0 6px rgba(255,255,255,0.55)',
                    border: '1px solid rgba(0,0,0,0.25)',
                    boxShadow: '0 2px 6px rgba(0,0,0,0.25)'
                } 
            },
            '🧧 Earn AQY Coins Rewards!'
        )
    );
};

const Label = () => {
    return window.wp.element.createElement(
        'span',
        { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
        icon && window.wp.element.createElement('img', { src: icon, alt: '', style: { width: '24px', height: '24px' } }),
        label
    );
};

const RedEnvelopePaymentMethod = {
    name: 'red_envelope',
    label: window.wp.element.createElement(Label, null),
    content: window.wp.element.createElement(Content, null),
    edit: window.wp.element.createElement(Content, null),
    canMakePayment: () => true,
    ariaLabel: label,
    supports: {
        features: settings.supports || [],
    },
};

window.wc.wcBlocksRegistry.registerPaymentMethod(RedEnvelopePaymentMethod);
