(function(wp) {
    const { registerBlockType } = wp.blocks;
    const { createElement: el } = wp.element;
    const { InspectorControls } = wp.blockEditor || wp.editor;
    const { PanelBody, TextControl, SelectControl } = wp.components;

    registerBlockType('ansico/contact-form', {
        title: 'Ansico Contact Form',
        icon: 'email',
        category: 'common',
        attributes: {
            blockId: { type: 'string', default: '' },
            recipientEmail: { type: 'string', default: '' },
            successMessage: { type: 'string', default: 'Message has been sent' },
            spamErrorMessage: { type: 'string', default: 'Wrong spam protection answer.' },
            footerMessage: { type: 'string', default: 'Message has been sent on website' },
            emailFormat: { type: 'string', default: 'text' },
            labelName: { type: 'string', default: 'Name' },
            labelEmail: { type: 'string', default: 'E-mail' },
            labelSubject: { type: 'string', default: 'Subject' },
            labelMessage: { type: 'string', default: 'Message' },
            labelSpam: { type: 'string', default: 'Spam check:' },
            buttonText: { type: 'string', default: 'Send message' }
        },
        edit: function(props) {
            const { attributes, setAttributes } = props;

            if (!attributes.blockId) {
                setAttributes({ blockId: Math.random().toString(36).substr(2, 9) });
            }

            const sidebar = el(InspectorControls, null,
                el(PanelBody, { title: 'Email Settings', initialOpen: true },
                    el(TextControl, { label: 'Recipient Email (Blank = Site Admin)', value: attributes.recipientEmail, onChange: (val) => setAttributes({ recipientEmail: val }) }),
                    el(SelectControl, { label: 'Email Format', value: attributes.emailFormat, options: [{label: 'Plain Text', value: 'text'}, {label: 'HTML', value: 'html'}], onChange: (val) => setAttributes({ emailFormat: val }) }),
                    el(TextControl, { label: 'Success Message', value: attributes.successMessage, onChange: (val) => setAttributes({ successMessage: val }) }),
                    el(TextControl, { label: 'Spam Error Message', value: attributes.spamErrorMessage, onChange: (val) => setAttributes({ spamErrorMessage: val }) }),
                    el(TextControl, { label: 'Email Footer Text', value: attributes.footerMessage, onChange: (val) => setAttributes({ footerMessage: val }) })
                ),
                el(PanelBody, { title: 'Form Labels & Buttons', initialOpen: false },
                    el(TextControl, { label: 'Name Label', value: attributes.labelName, onChange: (val) => setAttributes({ labelName: val }) }),
                    el(TextControl, { label: 'Email Label', value: attributes.labelEmail, onChange: (val) => setAttributes({ labelEmail: val }) }),
                    el(TextControl, { label: 'Subject Label', value: attributes.labelSubject, onChange: (val) => setAttributes({ labelSubject: val }) }),
                    el(TextControl, { label: 'Message Label', value: attributes.labelMessage, onChange: (val) => setAttributes({ labelMessage: val }) }),
                    el(TextControl, { label: 'Spam Check Label', value: attributes.labelSpam, onChange: (val) => setAttributes({ labelSpam: val }) }),
                    el(TextControl, { label: 'Button Text', value: attributes.buttonText, onChange: (val) => setAttributes({ buttonText: val }) })
                )
            );

            const formPreview = el('div', { style: { maxWidth: '500px', fontFamily: 'inherit' } },
                el('div', { style: { marginBottom: '15px' } }, 
                    el('label', { style: { fontWeight: '600', display: 'block', marginBottom: '5px' } }, attributes.labelName),
                    el('input', { type: 'text', disabled: true, style: { width: '100%', padding: '10px', border: '1px solid #ccc', borderRadius: '4px' } })
                ),
                el('div', { style: { marginBottom: '15px' } }, 
                    el('label', { style: { fontWeight: '600', display: 'block', marginBottom: '5px' } }, attributes.labelEmail),
                    el('input', { type: 'email', disabled: true, style: { width: '100%', padding: '10px', border: '1px solid #ccc', borderRadius: '4px' } })
                ),
                el('div', { style: { marginBottom: '15px' } }, 
                    el('label', { style: { fontWeight: '600', display: 'block', marginBottom: '5px' } }, attributes.labelSubject),
                    el('input', { type: 'text', disabled: true, style: { width: '100%', padding: '10px', border: '1px solid #ccc', borderRadius: '4px' } })
                ),
                el('div', { style: { marginBottom: '15px' } }, 
                    el('label', { style: { fontWeight: '600', display: 'block', marginBottom: '5px' } }, attributes.labelMessage),
                    el('textarea', { disabled: true, rows: 4, style: { width: '100%', padding: '10px', border: '1px solid #ccc', borderRadius: '4px', resize: 'none' } })
                ),
                el('div', { style: { marginBottom: '20px' } }, 
                    el('label', { style: { fontWeight: '600', display: 'block', marginBottom: '5px' } }, attributes.labelSpam + ' 2 + 3 = ?'),
                    el('input', { type: 'text', disabled: true, style: { width: '100%', padding: '10px', border: '1px solid #ccc', borderRadius: '4px' } })
                ),
                el('button', { disabled: true, style: { padding: '12px 24px', background: '#007cba', color: '#fff', border: 'none', borderRadius: '4px', fontWeight: 'bold' } }, attributes.buttonText)
            );

            return el('div', null, sidebar, formPreview);
        },
        save: function() {
            return null; 
        }
    });
})(window.wp);