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

	blocks.registerBlockType( 'guard-dog/account-security', {
		apiVersion: 2,
		title: __( 'Guard Dog Account Security', 'guard-dog' ),
		description: __( 'Adds the logged-in account security widget with two-factor controls and optional passkey management.', 'guard-dog' ),
		icon: 'shield',
		category: 'widgets',
		keywords: [
			__( 'security', 'guard-dog' ),
			__( '2fa', 'guard-dog' ),
			__( 'passkeys', 'guard-dog' )
		],
		supports: {
			html: false
		},
		attributes: {
			style: {
				type: 'string',
				default: 'default'
			},
				show_2fa: {
					type: 'boolean',
					default: true
				},
				show_passkeys: {
					type: 'boolean',
					default: true
				},
				show_sessions: {
					type: 'boolean',
					default: false
				}
			},
		edit: function( props ) {
			var attributes = props.attributes;
			var blockProps = useBlockProps( {
				className: 'guard-dog-block-preview guard-dog-block-preview--account-security'
			} );

			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( ToggleControl, {
								label: __( 'Show two-factor authentication', 'guard-dog' ),
								checked: !! attributes.show_2fa,
								onChange: function( value ) {
									props.setAttributes( { show_2fa: value } );
								}
							} ),
							el( ToggleControl, {
								label: __( 'Show passkey management', 'guard-dog' ),
								checked: !! attributes.show_passkeys,
								onChange: function( value ) {
									props.setAttributes( { show_passkeys: value } );
								}
							} ),
							el( ToggleControl, {
								label: __( 'Show active sessions', 'guard-dog' ),
								checked: !! attributes.show_sessions,
								onChange: function( value ) {
									props.setAttributes( { show_sessions: value } );
								}
							} )
						)
					) : null,
				el(
					'div',
					blockProps,
					el(
						Placeholder,
						{
							icon: 'shield',
							label: __( 'Guard Dog Account Security', 'guard-dog' ),
							instructions: __( 'Frontend output is rendered by the same Guard Dog account-security widget used by the shortcode.', 'guard-dog' )
						},
						el( 'p', {}, __( 'Style:', 'guard-dog' ) + ' ' + attributes.style ),
							el(
								'p',
								{},
								attributes.show_2fa
									? __( 'Two-factor authentication controls will be shown.', 'guard-dog' )
									: __( 'This block instance hides the two-factor authentication controls.', 'guard-dog' )
							),
							el(
								'p',
								{},
								attributes.show_passkeys
									? __( 'Passkey management will be shown when passkeys are enabled globally.', 'guard-dog' )
									: __( 'This block instance hides the passkey management section.', 'guard-dog' )
							),
							el(
								'p',
								{},
								attributes.show_sessions
									? __( 'Active session management will be shown when session tracking is enabled.', 'guard-dog' )
									: __( 'This block instance hides the active session management section.', 'guard-dog' )
							),
						el(
							'p',
							{},
							__( 'The account-security widget only shows to logged-in members on the frontend.', '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
);
