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

	var el            = element.createElement;
	var __            = i18n.__;
	var useBlockProps = blockEditor.useBlockProps;
	var InspectorControls = blockEditor.InspectorControls;
	var PanelBody     = components.PanelBody;

	blocks.registerBlockType( 'readjutsu/progress-bar', {

		edit: function () {
			var blockProps = useBlockProps( {
				style: {
					padding:      '10px 14px',
					background:   '#f0f4ff',
					borderRadius: '6px',
					border:       '1.5px dashed #0069FF',
					display:      'flex',
					alignItems:   'center',
					gap:          '8px',
				},
			} );

			return [
				el( InspectorControls, { key: 'inspector' },
					el( PanelBody, {
						key:         'panel',
						title:       __( 'ReadJutsu', 'readjutsu' ),
						initialOpen: true,
					},
						el( 'p', {
							key:   'desc',
							style: { fontSize: '13px', color: '#666', margin: '0 0 8px' },
						}, __( 'Activates the scroll progress bar on this page using your ReadJutsu settings.', 'readjutsu' ) ),
						el( 'a', {
							key:    'link',
							href:   'admin.php?page=readjutsu-options',
							target: '_blank',
							style:  { fontSize: '13px', color: '#0069FF' },
						}, __( 'Open ReadJutsu settings ↗', 'readjutsu' ) )
					)
				),

				el( 'div', Object.assign( { key: 'wrap' }, blockProps ),
					el( 'svg', {
						key:    'icon',
						width:  '16',
						height: '16',
						viewBox: '0 0 24 24',
						fill:   'none',
						stroke: '#0069FF',
						strokeWidth: '2',
						strokeLinecap: 'round',
						strokeLinejoin: 'round',
						'aria-hidden': 'true',
					},
						el( 'rect', { x: '3', y: '3', width: '18', height: '18', rx: '2' } ),
						el( 'path', { d: 'M3 9h18M9 21V9' } )
					),
					el( 'strong', {
						key:   'label',
						style: { fontSize: '13px', color: '#0069FF' },
					}, __( 'ReadJutsu — Progress Bar', 'readjutsu' ) ),
					el( 'span', {
						key:   'hint',
						style: { fontSize: '12px', color: '#888' },
					}, __( '(invisible on frontend — activates scroll progress)', 'readjutsu' ) )
				),
			];
		},

		save: function () {
			return null;
		},
	} );

}(
	window.wp.blocks,
	window.wp.element,
	window.wp.blockEditor,
	window.wp.components,
	window.wp.i18n
) );
