( 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 TextControl = components.TextControl;
	var ToggleControl = components.ToggleControl;
	var __ = i18n.__;

	blocks.registerBlockType( 'guard-dog/passkey-login', {
		apiVersion: 2,
		title: __( 'Guard Dog Passkey Login', 'guard-dog' ),
		description: __( 'Adds a standalone passkey sign-in button for custom login pages.', 'guard-dog' ),
		icon: 'privacy',
		category: 'widgets',
		keywords: [
			__( 'security', 'guard-dog' ),
			__( 'passkeys', 'guard-dog' ),
			__( 'login', 'guard-dog' )
		],
		supports: {
			html: false
		},
		attributes: {
			username_selector: {
				type: 'string',
				default: '#user_login'
			},
			redirect_to: {
				type: 'string',
				default: ''
			},
			show_icon: {
				type: 'boolean',
				default: true
			}
		},
		edit: function( props ) {
			var attributes = props.attributes;
			var blockProps = useBlockProps( {
				className: 'guard-dog-block-preview guard-dog-block-preview--passkey-login'
			} );

			return el(
				Fragment,
				{},
				InspectorControls ? el(
					InspectorControls,
					{},
					el(
						PanelBody,
						{
							title: __( 'Login Settings', 'guard-dog' ),
							initialOpen: true
						},
						el( TextControl, {
							label: __( 'Username field selector', 'guard-dog' ),
							value: attributes.username_selector,
							onChange: function( value ) {
								props.setAttributes( { username_selector: value } );
							}
						} ),
						el( TextControl, {
							label: __( 'Redirect URL', 'guard-dog' ),
							value: attributes.redirect_to,
							onChange: function( value ) {
								props.setAttributes( { redirect_to: value } );
							}
						} ),
						el( ToggleControl, {
							label: __( 'Show icon', 'guard-dog' ),
							checked: !! attributes.show_icon,
							onChange: function( value ) {
								props.setAttributes( { show_icon: value } );
							}
						} )
					)
				) : null,
				el(
					'div',
					blockProps,
					el(
						Placeholder,
						{
							icon: 'privacy',
							label: __( 'Guard Dog Passkey Login', 'guard-dog' ),
							instructions: __( 'Frontend output is rendered by the same Guard Dog passkey sign-in button used by custom login integrations.', 'guard-dog' )
						},
						el( 'p', {}, __( 'Username selector:', 'guard-dog' ) + ' ' + attributes.username_selector ),
						attributes.redirect_to
							? el( 'p', {}, __( 'Redirect:', 'guard-dog' ) + ' ' + attributes.redirect_to )
							: null,
						el(
							'p',
							{},
							__( 'The passkey login button only shows to logged-out visitors when passkeys are enabled globally.', 'guard-dog' )
						)
					)
				)
			);
		},
		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
);
