/**
 * AgentForms Gutenberg Block — Editor Script
 *
 * Registers the block type with WordPress block editor.
 * Provides: Token field, Theme selector, Success message field.
 */

(function (blocks, element, components, editor) {
    var el = element.createElement;
    var Fragment = element.Fragment;
    var RichText = editor.RichText;
    var InspectorControls = blocks.InspectorControls || null;
    var BlockControls = blocks.BlockControls || null;
    var PanelBody = components.PanelBody;
    var TextControl = components.TextControl;
    var SelectControl = components.SelectControl;

    blocks.registerBlockType('agentforms/agentforms', {
        title: 'AgentForms',
        description: 'Embed an AI-powered form from AgentForms. Enter your form token.',
        icon: 'editor-forms',
        category: 'widgets',
        keywords: ['form', 'agentforms', 'contact', 'embed'],
        attributes: {
            token: { type: 'string', default: '' },
            theme: { type: 'string', default: '' },
            width: { type: 'string', default: '100%' },
            successMessage: { type: 'string', default: '' },
        },
        edit: function (props) {
            var _token = props.attributes.token;
            var _theme = props.attributes.theme;
            var _width = props.attributes.width;
            var _success = props.attributes.successMessage;

            return el(Fragment, null,
                InspectorControls !== null ? el(InspectorControls, null,
                    el(PanelBody, { title: 'Form Settings', initialOpen: true },
                        el(TextControl, {
                            label: 'Form Token',
                            value: _token,
                            onChange: function (value) { props.setAttributes({ token: value }); },
                            placeholder: 'e.g., abc123-def456',
                            help: 'Your form token from AgentForms dashboard.',
                        }),
                        el(SelectControl, {
                            label: 'Theme',
                            value: _theme || 'default',
                            options: [
                                { label: 'Default (from settings)', value: 'default' },
                                { label: 'Light', value: 'light' },
                                { label: 'Dark', value: 'dark' },
                            ],
                            onChange: function (value) {
                                props.setAttributes({ theme: value === 'default' ? '' : value });
                            },
                        }),
                        el(TextControl, {
                            label: 'Success Message',
                            value: _success,
                            onChange: function (value) { props.setAttributes({ successMessage: value }); },
                            placeholder: 'Use default from settings',
                        }),
                    )
                ) : null,
                el('div', { className: 'wp-block-agentforms' },
                    el('div', { className: 'agentforms-preview' },
                        _token ?
                            el('p', null, 'Form token: ', el('code', null, _token)) :
                            el('p', null, el('em', null, 'Enter your form token in the block settings.'))
                    )
                )
            );
        },
        save: function (props) {
            // Server-side rendering — nothing to save
            return null;
        },
    });
})(window.wp.blocks, window.wp.element, window.wp.components, window.wp.editor);