/**
 * Magic Login Gutenberg Block
 *
 * @package Switchboard
 */

(function (wp) {
    var registerBlockType = wp.blocks.registerBlockType;
    var InspectorControls = wp.blockEditor.InspectorControls;
    var PanelBody = wp.components.PanelBody;
    var TextControl = wp.components.TextControl;
    var SelectControl = wp.components.SelectControl;
    var ToggleControl = wp.components.ToggleControl;
    var createElement = wp.element.createElement;
    var __ = wp.i18n.__;

    registerBlockType('switchboard/magic-login', {
        title: __('Magic Login', 'wpswitchboard'),
        description: __('Add a passwordless magic login form to your page.', 'wpswitchboard'),
        icon: 'admin-network',
        category: 'widgets',
        keywords: [__('login', 'wpswitchboard'), __('magic', 'wpswitchboard'), __('passwordless', 'wpswitchboard'), __('email', 'wpswitchboard')],

        attributes: {
            mode: {
                type: 'string',
                default: 'auto'
            },
            title: {
                type: 'string',
                default: ''
            },
            description: {
                type: 'string',
                default: ''
            },
            buttonText: {
                type: 'string',
                default: ''
            },
            redirect: {
                type: 'string',
                default: ''
            },
            showPasswordLink: {
                type: 'boolean',
                default: true
            }
        },

        edit: function (props) {
            var attributes = props.attributes;
            var setAttributes = props.setAttributes;

            return createElement(
                'div',
                { className: props.className },
                [
                    // Inspector Controls (sidebar)
                    createElement(
                        InspectorControls,
                        { key: 'inspector' },
                        createElement(
                            PanelBody,
                            { title: __('Form Settings', 'wpswitchboard'), initialOpen: true },
                            [
                                createElement(SelectControl, {
                                    key: 'mode',
                                    label: __('Mode', 'wpswitchboard'),
                                    value: attributes.mode,
                                    options: [
                                        { label: __('Auto (Login or Register)', 'wpswitchboard'), value: 'auto' },
                                        { label: __('Login Only', 'wpswitchboard'), value: 'login' },
                                        { label: __('Register Only', 'wpswitchboard'), value: 'register' }
                                    ],
                                    onChange: function (value) {
                                        setAttributes({ mode: value });
                                    }
                                }),
                                createElement(TextControl, {
                                    key: 'title',
                                    label: __('Title', 'wpswitchboard'),
                                    help: __('Leave empty to use default from settings.', 'wpswitchboard'),
                                    value: attributes.title,
                                    onChange: function (value) {
                                        setAttributes({ title: value });
                                    }
                                }),
                                createElement(TextControl, {
                                    key: 'description',
                                    label: __('Description', 'wpswitchboard'),
                                    help: __('Leave empty to use default from settings.', 'wpswitchboard'),
                                    value: attributes.description,
                                    onChange: function (value) {
                                        setAttributes({ description: value });
                                    }
                                }),
                                createElement(TextControl, {
                                    key: 'buttonText',
                                    label: __('Button Text', 'wpswitchboard'),
                                    help: __('Leave empty to use default from settings.', 'wpswitchboard'),
                                    value: attributes.buttonText,
                                    onChange: function (value) {
                                        setAttributes({ buttonText: value });
                                    }
                                }),
                                createElement(TextControl, {
                                    key: 'redirect',
                                    label: __('Redirect URL', 'wpswitchboard'),
                                    help: __('URL to redirect after login/registration.', 'wpswitchboard'),
                                    value: attributes.redirect,
                                    onChange: function (value) {
                                        setAttributes({ redirect: value });
                                    }
                                }),
                                createElement(ToggleControl, {
                                    key: 'showPasswordLink',
                                    label: __('Show "Use password instead" link', 'wpswitchboard'),
                                    checked: attributes.showPasswordLink,
                                    onChange: function (value) {
                                        setAttributes({ showPasswordLink: value });
                                    }
                                })
                            ]
                        )
                    ),

                    // Block Preview
                    createElement(
                        'div',
                        {
                            key: 'preview',
                            style: {
                                maxWidth: '400px',
                                margin: '0 auto',
                                fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
                            }
                        },
                        createElement(
                            'div',
                            {
                                style: {
                                    background: '#ffffff',
                                    border: '1px solid #e2e8f0',
                                    borderRadius: '12px',
                                    padding: '32px',
                                    textAlign: 'center'
                                }
                            },
                            [
                                createElement('h3', {
                                    key: 'title',
                                    style: {
                                        fontSize: '24px',
                                        fontWeight: '600',
                                        color: '#1e293b',
                                        margin: '0 0 8px'
                                    }
                                }, attributes.title || (
                                    attributes.mode === 'register' ? __('Create an account', 'wpswitchboard') :
                                    attributes.mode === 'auto' ? __('Continue with email', 'wpswitchboard') :
                                    __('Sign in with email', 'wpswitchboard')
                                )),
                                createElement('p', {
                                    key: 'description',
                                    style: {
                                        color: '#64748b',
                                        fontSize: '14px',
                                        margin: '0 0 24px'
                                    }
                                }, attributes.description || (
                                    attributes.mode === 'register' ? __("Enter your email and we'll send you a link to create your account.", 'wpswitchboard') :
                                    attributes.mode === 'auto' ? __("Enter your email to sign in or create an account.", 'wpswitchboard') :
                                    __("Enter your email and we'll send you a link to sign in instantly.", 'wpswitchboard')
                                )),
                                createElement('div', {
                                    key: 'email-input',
                                    style: {
                                        background: '#f9fafb',
                                        border: '1px solid #d1d5db',
                                        borderRadius: '8px',
                                        padding: '12px 16px',
                                        marginBottom: '16px',
                                        color: '#9ca3af',
                                        textAlign: 'left'
                                    }
                                }, __('Email address', 'wpswitchboard')),
                                createElement('div', {
                                    key: 'button',
                                    style: {
                                        background: '#3b82f6',
                                        color: '#ffffff',
                                        padding: '12px 24px',
                                        borderRadius: '8px',
                                        fontWeight: '600',
                                        cursor: 'pointer'
                                    }
                                }, attributes.buttonText || (
                                    attributes.mode === 'register' ? __('Send Registration Link', 'wpswitchboard') :
                                    attributes.mode === 'auto' ? __('Continue', 'wpswitchboard') :
                                    __('Send Login Link', 'wpswitchboard')
                                )),
                                attributes.showPasswordLink && createElement('div', {
                                    key: 'password-link',
                                    style: {
                                        marginTop: '16px',
                                        color: '#64748b',
                                        fontSize: '13px'
                                    }
                                }, __('Use password instead →', 'wpswitchboard'))
                            ]
                        )
                    )
                ]
            );
        },

        // Server-side rendering - we use the shortcode
        save: function () {
            return null; // Dynamic block
        }
    });
})(window.wp);
