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

	blocks.registerBlockType( 'guard-dog/sessions', {
		apiVersion: 2,
		title: __( 'Guard Dog Sessions', 'guard-dog' ),
		description: __( 'Adds frontend active-session management for logged-in users.', 'guard-dog' ),
		icon: 'admin-users',
		category: 'widgets',
		keywords: [
			__( 'security', 'guard-dog' ),
			__( 'sessions', 'guard-dog' ),
			__( 'devices', 'guard-dog' )
		],
		supports: {
			html: false
		},
		attributes: {
			style: {
				type: 'string',
				default: 'default'
			}
		},
		edit: function( props ) {
			var attributes = props.attributes;
			var blockProps = useBlockProps( {
				className: 'guard-dog-block-preview guard-dog-block-preview--sessions'
			} );

			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 } );
							}
						} )
					)
				) : null,
				el(
					'div',
					blockProps,
					el(
						Placeholder,
						{
							icon: 'admin-users',
							label: __( 'Guard Dog Sessions', 'guard-dog' ),
							instructions: __( 'Frontend output is rendered by the same Guard Dog active-session management UI used by the shortcode.', 'guard-dog' )
						},
						el( 'p', {}, __( 'Style:', 'guard-dog' ) + ' ' + attributes.style ),
						el(
							'p',
							{},
							__( 'Active-session management only shows to logged-in users when session tracking is enabled.', '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
);
