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

	var __               = i18n.__;
	var el               = element.createElement;
	var useState         = element.useState;
	var useEffect        = element.useEffect;
	var registerBlockType = blocks.registerBlockType;
	var InspectorControls = blockEditor.InspectorControls;
	var useBlockProps    = blockEditor.useBlockProps;
	var PanelBody        = components.PanelBody;
	var TextControl      = components.TextControl;
	var SelectControl    = components.SelectControl;
	var ToggleControl    = components.ToggleControl;
	var RangeControl     = components.RangeControl;
	var PanelColorSettings = blockEditor.PanelColorSettings || null;

	var SIZE_STYLES = {
		small:  { padding: '8px 20px',  fontSize: '13px' },
		medium: { padding: '12px 28px', fontSize: '15px' },
		large:  { padding: '16px 36px', fontSize: '16px' },
	};

	var PRESET_STYLES = {
		primary: { background: '#0F172A', color: '#FFFFFF', border: 'none' },
		accent:  { background: '#3B82F6', color: '#FFFFFF', border: 'none' },
		outline: { background: 'transparent', color: '#0F172A', border: '2px solid #0F172A' },
	};

	function Edit( props ) {
		var attributes    = props.attributes;
		var setAttributes = props.setAttributes;
		var blockProps    = useBlockProps( { style: { textAlign: attributes.align, padding: '12px 0' } } );

		var _f = useState( [] );
		var fields    = _f[0];
		var setFields = _f[1];

		// Load fields for field-selector (used in modal mode)
		useEffect( function () {
			apiFetch( { path: '/playard/v1/admin/fields' } )
				.then( function ( res ) {
					var list = Array.isArray( res ) ? res : ( res && Array.isArray( res.data ) ? res.data : [] );
					setFields( list.filter( function (f) { return f.status === 'active'; } ) );
				} )
				.catch( function () {} );
		}, [] );

		// Build button style: custom colors override preset
		var sizeStyle   = SIZE_STYLES[ attributes.size ]  || SIZE_STYLES.large;
		var presetStyle = PRESET_STYLES[ attributes.style ] || PRESET_STYLES.primary;
		var radius      = attributes.borderRadius > 0 ? attributes.borderRadius : ( attributes.size === 'large' ? 10 : 8 );

		var btnStyle = Object.assign( {}, sizeStyle, presetStyle, {
			borderRadius:    radius + 'px',
			display:         attributes.fullWidth ? 'block' : 'inline-block',
			width:           attributes.fullWidth ? '100%' : 'auto',
			textAlign:       'center',
			fontWeight:      700,
			textDecoration:  'none',
			cursor:          'default',
			boxSizing:       'border-box',
		} );

		// Custom colors override the preset
		if ( attributes.bgColor )   btnStyle.background = attributes.bgColor;
		if ( attributes.textColor ) btnStyle.color       = attributes.textColor;

		// Field select options for modal mode
		var fieldOptions = [ { label: __( '— All fields (default) —', 'playard' ), value: '' } ].concat(
			fields.map( function (f) { return { label: f.name, value: String( f.id ) }; } )
		);

		var colorPanel = PanelColorSettings
			? el( PanelColorSettings, {
				title: __( 'Custom Colors', 'playard' ),
				initialOpen: false,
				colorSettings: [
					{
						label:    __( 'Button Background', 'playard' ),
						value:    attributes.bgColor,
						onChange: function (v) { setAttributes( { bgColor: v || '' } ); },
					},
					{
						label:    __( 'Button Text', 'playard' ),
						value:    attributes.textColor,
						onChange: function (v) { setAttributes( { textColor: v || '' } ); },
					},
				],
			} )
			: null;

		return el(
			'div', blockProps,

			el( InspectorControls, {},
				el( PanelBody, { title: __( 'Button Settings', 'playard' ), initialOpen: true },
					el( TextControl, {
						label:    __( 'Label', 'playard' ),
						value:    attributes.label,
						onChange: function (v) { setAttributes( { label: v } ); },
					} ),
					el( SelectControl, {
						label:    __( 'Style', 'playard' ),
						value:    attributes.style,
						options:  [
							{ label: __( 'Primary (dark)',  'playard' ), value: 'primary' },
							{ label: __( 'Accent (blue)',   'playard' ), value: 'accent'  },
							{ label: __( 'Outline',         'playard' ), value: 'outline' },
						],
						onChange: function (v) { setAttributes( { style: v } ); },
					} ),
					el( SelectControl, {
						label:    __( 'Size', 'playard' ),
						value:    attributes.size,
						options:  [
							{ label: __( 'Small',  'playard' ), value: 'small'  },
							{ label: __( 'Medium', 'playard' ), value: 'medium' },
							{ label: __( 'Large',  'playard' ), value: 'large'  },
						],
						onChange: function (v) { setAttributes( { size: v } ); },
					} ),
					el( SelectControl, {
						label:    __( 'Alignment', 'playard' ),
						value:    attributes.align,
						options:  [
							{ label: __( 'Left',   'playard' ), value: 'left'   },
							{ label: __( 'Center', 'playard' ), value: 'center' },
							{ label: __( 'Right',  'playard' ), value: 'right'  },
						],
						onChange: function (v) { setAttributes( { align: v } ); },
					} ),
					el( RangeControl, {
						label:    __( 'Border Radius (px)', 'playard' ),
						value:    attributes.borderRadius,
						onChange: function (v) { setAttributes( { borderRadius: v } ); },
						min: 0, max: 99,
						help: attributes.borderRadius === 0 ? __( '0 = use size default', 'playard' ) : null,
					} ),
					el( ToggleControl, {
						label:    __( 'Full width', 'playard' ),
						checked:  attributes.fullWidth,
						onChange: function (v) { setAttributes( { fullWidth: v } ); },
					} )
				),
				el( PanelBody, { title: __( 'Action', 'playard' ), initialOpen: true },
					el( ToggleControl, {
						label:    __( 'Open booking modal', 'playard' ),
						help:     attributes.openModal
							? __( 'Opens an inline booking modal — no page redirect.', 'playard' )
							: __( 'Navigates to the booking page URL.', 'playard' ),
						checked:  attributes.openModal,
						onChange: function (v) { setAttributes( { openModal: v } ); },
					} ),
					attributes.openModal
						? el( SelectControl, {
							label:    __( 'Pre-select field (Pro: multi-field)', 'playard' ),
							help:     __( 'Open the modal pre-filtered to a specific field. Useful when you have multiple fields (Pro).', 'playard' ),
							value:    attributes.fieldId,
							options:  fieldOptions,
							onChange: function (v) { setAttributes( { fieldId: v } ); },
						} )
						: el( TextControl, {
							label:    __( 'URL', 'playard' ),
							help:     __( 'Leave blank to use the current page URL.', 'playard' ),
							value:    attributes.url,
							onChange: function (v) { setAttributes( { url: v } ); },
						} )
				),
				colorPanel
			),

			el( 'span', { style: btnStyle }, attributes.label || __( 'Book a Field', 'playard' ) )
		);
	}

	registerBlockType( 'playard/book-now-button', {
		edit: Edit,
		save: function () { return null; },
	} );

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