( 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 CheckboxControl  = components.CheckboxControl;
	var ToggleControl    = components.ToggleControl;
	var SelectControl    = components.SelectControl;
	var Placeholder      = components.Placeholder;
	var Spinner          = components.Spinner;
	var PanelColorSettings = blockEditor.PanelColorSettings || null;

	function Edit( props ) {
		var attributes    = props.attributes;
		var setAttributes = props.setAttributes;
		var blockProps    = useBlockProps();

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

		var _l = useState( true );
		var loading    = _l[0];
		var setLoading = _l[1];

		// Parse selected IDs from comma-separated string
		var selectedIds = attributes.fieldIds
			? attributes.fieldIds.split( ',' ).map( function ( id ) { return parseInt( id.trim(), 10 ); } ).filter( Boolean )
			: [];

		useEffect( function () {
			apiFetch( { path: '/playard/v1/admin/fields' } )
				.then( function ( response ) {
					var list = Array.isArray( response ) ? response
					         : ( response && Array.isArray( response.data ) ? response.data : [] );
					setFields( list );
					setLoading( false );
				} )
				.catch( function () { setLoading( false ); } );
		}, [] );

		function toggleField( fieldId ) {
			var next;
			if ( selectedIds.indexOf( fieldId ) !== -1 ) {
				next = selectedIds.filter( function ( id ) { return id !== fieldId; } );
			} else {
				next = selectedIds.concat( [ fieldId ] );
			}
			setAttributes( { fieldIds: next.join( ',' ) } );
		}

		function getDisplayText() {
			if ( ! attributes.fieldIds ) return __( 'All active fields', 'playard' );
			var names = fields
				.filter( function ( f ) { return selectedIds.indexOf( f.id ) !== -1; } )
				.map( function ( f ) { return f.name; } );
			return names.length > 0 ? names.join( ', ' ) : __( 'All active fields', 'playard' );
		}

		var colorPanel = PanelColorSettings
			? el( PanelColorSettings, {
				title: __( 'Accent Color', 'playard' ),
				initialOpen: false,
				colorSettings: [ {
					label:    __( 'Accent / Brand Color', 'playard' ),
					value:    attributes.accentColor,
					onChange: function (v) { setAttributes( { accentColor: v || '' } ); },
				} ],
			} )
			: null;

		return el(
			'div', blockProps,

			el( InspectorControls, {},
				// ── Field selection ──────────────────────────────────────
				el( PanelBody, { title: __( 'Field Selection', 'playard' ), initialOpen: true },
					el( 'p', { style: { color: '#64748B', fontSize: '12px', marginBottom: '12px' } },
						__( 'Select which fields to show in the booking calendar. Leave all unchecked to show all active fields.', 'playard' )
					),
					loading
						? el( Spinner )
						: fields.length === 0
							? el( 'p', { style: { color: '#F59E0B', fontSize: '13px' } },
								__( 'No fields found. Add fields in Playard → Fields first.', 'playard' )
							)
							: fields.map( function ( field ) {
								return el( CheckboxControl, {
									key:      field.id,
									label:    field.name + ( field.sports && field.sports.length ? ' (' + field.sports.slice(0,3).join( ', ' ) + ')' : '' ),
									checked:  selectedIds.indexOf( field.id ) !== -1,
									onChange: function () { toggleField( field.id ); },
								} );
							} )
				),

				// ── Booking flow options ─────────────────────────────────
				el( PanelBody, { title: __( 'Booking Flow', 'playard' ), initialOpen: false },
					el( ToggleControl, {
						label:    __( 'Show field selection step', 'playard' ),
						help:     attributes.showFieldStep
							? __( 'Step 1 lets customers choose a field. Recommended when you have multiple fields.', 'playard' )
							: __( 'Field step is hidden — customers jump straight to the calendar.', 'playard' ),
						checked:  attributes.showFieldStep,
						onChange: function (v) { setAttributes( { showFieldStep: v } ); },
					} ),
					el( ToggleControl, {
						label:    __( 'Compact mode', 'playard' ),
						help:     __( 'Reduces padding for tighter layouts.', 'playard' ),
						checked:  attributes.compactMode,
						onChange: function (v) { setAttributes( { compactMode: v } ); },
					} ),
					el( SelectControl, {
						label:    __( 'Color theme', 'playard' ),
						value:    attributes.theme,
						options:  [
							{ label: __( 'Light', 'playard' ), value: 'light' },
							{ label: __( 'Dark',  'playard' ), value: 'dark'  },
						],
						onChange: function (v) { setAttributes( { theme: v } ); },
					} )
				),

				colorPanel
			),

			// ── Simple canvas placeholder ────────────────────────────────
			el( Placeholder, {
					icon: el( 'span', { className: 'dashicons dashicons-calendar-alt', style: { fontSize: '24px', color: '#3B82F6' } } ),
					label: __( 'Playard Booking Calendar', 'playard' ),
					instructions: loading
						? __( 'Loading…', 'playard' )
						: ( __( 'Showing: ', 'playard' ) + getDisplayText() ),
				},
				el( 'div', {
						style: {
							padding:      '12px 16px',
							background:   '#F8FAFC',
							borderRadius: '8px',
							border:       '1px solid #E2E8F0',
							fontSize:     '13px',
							color:        '#475569',
							textAlign:    'center',
						},
					},
					el( 'p', { style: { margin: 0 } },
						__( 'The full booking calendar will appear here on the frontend.', 'playard' )
					),
					el( 'p', { style: { margin: '8px 0 0', fontSize: '12px', color: '#94A3B8' } },
						__( 'Use the sidebar to select fields and configure the booking flow.', 'playard' )
					)
				)
			)
		);
	}

	registerBlockType( 'playard/booking-widget', {
		edit: Edit,
		save: function () { return null; },
	} );

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