( function( blocks, element, blockEditor, components, i18n ) {
	'use strict';

	if ( ! blocks || ! element || ! components || ! i18n ) {
		return;
	}

	var el = element.createElement;
	var Fragment = element.Fragment;
	var editorApi = blockEditor || window.wp.editor || {};
	var InspectorControls = editorApi.InspectorControls;
	var useBlockProps = editorApi.useBlockProps || function() {
		return {};
	};
	var Placeholder = components.Placeholder;
	var PanelBody = components.PanelBody;
	var SelectControl = components.SelectControl;
	var TextControl = components.TextControl;
	var ToggleControl = components.ToggleControl;
	var __ = i18n.__;
	var blockSettings = window.guardDogLoginFormBlockSettings || {};
	var defaults = blockSettings.defaults || {};
	var defaultStyle = typeof defaults.style === 'string' && defaults.style ? defaults.style : 'default';
	var defaultShowPasskey = typeof defaults.show_passkey === 'boolean' ? defaults.show_passkey : true;
	var defaultShowSocialLogin = typeof defaults.show_social_login === 'boolean' ? defaults.show_social_login : true;
	var defaultShowRememberMe = typeof defaults.show_remember_me === 'boolean' ? defaults.show_remember_me : true;
	var defaultShowLostPassword = typeof defaults.show_lost_password === 'boolean' ? defaults.show_lost_password : true;
	var defaultMaxWidth = typeof defaults.max_width === 'string' ? defaults.max_width : '';
	var maxWidthMin = parseInt( blockSettings.maxWidthMin, 10 ) || 280;
	var maxWidthMax = parseInt( blockSettings.maxWidthMax, 10 ) || 960;

	blocks.registerBlockType( 'guard-dog/login-form', {
		apiVersion: 2,
		title: __( 'Guard Dog Login Form', 'guard-dog' ),
		description: __( 'Adds the Guard Dog frontend login form with optional passkey and social sign-in controls.', 'guard-dog' ),
		icon: 'lock',
		category: 'widgets',
		keywords: [
			__( 'login', 'guard-dog' ),
			__( 'passkey', 'guard-dog' ),
			__( 'security', 'guard-dog' )
		],
		supports: {
			html: false
		},
		attributes: {
			style: {
				type: 'string',
				default: defaultStyle
			},
			redirect_to: {
				type: 'string',
				default: ''
			},
			show_passkey: {
				type: 'boolean',
				default: defaultShowPasskey
			},
			show_social_login: {
				type: 'boolean',
				default: defaultShowSocialLogin
			},
			show_remember_me: {
				type: 'boolean',
				default: defaultShowRememberMe
			},
			show_lost_password: {
				type: 'boolean',
				default: defaultShowLostPassword
			},
			max_width: {
				type: 'string',
				default: defaultMaxWidth
			}
		},
		edit: function( props ) {
			var attributes = props.attributes;
			var blockProps = useBlockProps( {
				className: 'guard-dog-block-preview guard-dog-block-preview--login-form'
			} );
			var enabledOptions = [];

			if ( attributes.show_passkey ) {
				enabledOptions.push( __( 'Passkey sign-in', 'guard-dog' ) );
			}
			if ( attributes.show_social_login ) {
				enabledOptions.push( __( 'Social login buttons', 'guard-dog' ) );
			}
			if ( attributes.show_remember_me ) {
				enabledOptions.push( __( 'Remember me', 'guard-dog' ) );
			}
			if ( attributes.show_lost_password ) {
				enabledOptions.push( __( 'Lost password link', 'guard-dog' ) );
			}

			return el(
				Fragment,
				{},
				InspectorControls ? el(
					InspectorControls,
					{},
					el(
						PanelBody,
						{
							title: __( 'Display Settings', 'guard-dog' ),
							initialOpen: true
						},
						el( SelectControl, {
							label: __( 'Style', 'guard-dog' ),
							value: attributes.style,
							options: [
								{ label: __( 'Default', 'guard-dog' ), value: 'default' },
								{ label: __( 'Minimal', 'guard-dog' ), value: 'minimal' },
								{ label: __( 'Compact', 'guard-dog' ), value: 'compact' }
							],
							onChange: function( value ) {
								props.setAttributes( { style: value } );
							}
						} ),
						el( TextControl, {
							label: __( 'Redirect To', 'guard-dog' ),
							help: __( 'Optional URL to send members to after a successful login.', 'guard-dog' ),
							value: attributes.redirect_to,
							onChange: function( value ) {
								props.setAttributes( { redirect_to: value } );
							}
						} ),
						el( TextControl, {
							label: __( 'Max Width (px)', 'guard-dog' ),
							type: 'number',
							min: maxWidthMin,
							max: maxWidthMax,
							help: __( 'Leave blank to use the Login Security default width.', 'guard-dog' ),
							value: attributes.max_width || '',
							onChange: function( value ) {
								props.setAttributes( { max_width: value ? String( value ) : '' } );
							}
						} )
					),
					el(
						PanelBody,
						{
							title: __( 'Visible Controls', 'guard-dog' ),
							initialOpen: false
						},
						el( ToggleControl, {
							label: __( 'Show passkey button', 'guard-dog' ),
							checked: !! attributes.show_passkey,
							onChange: function( value ) {
								props.setAttributes( { show_passkey: value } );
							}
						} ),
						el( ToggleControl, {
							label: __( 'Show social login buttons', 'guard-dog' ),
							checked: !! attributes.show_social_login,
							onChange: function( value ) {
								props.setAttributes( { show_social_login: value } );
							}
						} ),
						el( ToggleControl, {
							label: __( 'Show remember me', 'guard-dog' ),
							checked: !! attributes.show_remember_me,
							onChange: function( value ) {
								props.setAttributes( { show_remember_me: value } );
							}
						} ),
						el( ToggleControl, {
							label: __( 'Show lost password link', 'guard-dog' ),
							checked: !! attributes.show_lost_password,
							onChange: function( value ) {
								props.setAttributes( { show_lost_password: value } );
							}
						} )
					)
				) : null,
				el(
					'div',
					blockProps,
					el(
						Placeholder,
						{
							icon: 'lock',
							label: __( 'Guard Dog Login Form', 'guard-dog' ),
							instructions: __( 'Frontend output is rendered by the same Guard Dog login form used by the shortcode.', 'guard-dog' )
						},
						el( 'p', {}, __( 'Style:', 'guard-dog' ) + ' ' + attributes.style ),
						el(
							'p',
							{},
							enabledOptions.length
								? __( 'Enabled in this block:', 'guard-dog' ) + ' ' + enabledOptions.join( ', ' )
								: __( 'All optional controls are currently hidden for this block instance.', 'guard-dog' )
						),
						attributes.max_width
							? el( 'p', {}, __( 'Max width:', 'guard-dog' ) + ' ' + attributes.max_width + 'px' )
							: null,
						attributes.redirect_to
							? el( 'p', {}, __( 'Redirect target:', 'guard-dog' ) + ' ' + attributes.redirect_to )
							: null
					)
				)
			);
		},
		save: function() {
			return null;
		}
	} );
} )(
	window.wp && window.wp.blocks,
	window.wp && window.wp.element,
	window.wp && window.wp.blockEditor,
	window.wp && window.wp.components,
	window.wp && window.wp.i18n
);
