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

	var __               = i18n.__;
	var el               = element.createElement;
	var registerBlockType = blocks.registerBlockType;
	var InspectorControls = blockEditor.InspectorControls;
	var useBlockProps    = blockEditor.useBlockProps;
	var PanelBody        = components.PanelBody;
	var ToggleControl    = components.ToggleControl;
	var SelectControl    = components.SelectControl;

	// PanelColorSettings is available in WP 6+
	var PanelColorSettings = blockEditor.PanelColorSettings || null;

	// SVG paths for info icons
	var PATH_PIN   = el( 'g', {},
		el( 'path', { strokeLinecap:'round', strokeLinejoin:'round', d:'M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z' } ),
		el( 'path', { strokeLinecap:'round', strokeLinejoin:'round', d:'M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z' } )
	);
	var PATH_PHONE = el( 'path', { strokeLinecap:'round', strokeLinejoin:'round', d:'M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z' } );
	var PATH_EMAIL = el( 'path', { strokeLinecap:'round', strokeLinejoin:'round', d:'M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75' } );
	var PATH_CLOCK = el( 'path', { strokeLinecap:'round', strokeLinejoin:'round', d:'M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z' } );

	function InfoItem( iconPath, labelText, valueText, attrs ) {
		var iconBg    = attrs.iconBg    || '#EFF6FF';
		var iconColor = attrs.iconColor || '#3B82F6';
		var textColor = attrs.textColor || '#0F172A';
		var lblColor  = attrs.labelColor || '#94A3B8';

		return el( 'div', { style: { display:'flex', alignItems:'flex-start', gap:'10px' } },
			el( 'div', { style: {
				flexShrink: 0,
				width: '36px', height: '36px',
				borderRadius: '8px',
				background: iconBg,
				display: 'flex', alignItems: 'center', justifyContent: 'center',
			} },
				el( 'svg', { width:18, height:18, fill:'none', viewBox:'0 0 24 24', stroke: iconColor, strokeWidth:2 },
					iconPath
				)
			),
			el( 'div', {},
				el( 'p', { style: { margin:'0 0 2px', fontSize:'11px', fontWeight:600, textTransform:'uppercase', letterSpacing:'.04em', color: lblColor } }, labelText ),
				el( 'p', { style: { margin:0, fontSize:'14px', fontWeight:500, color: textColor } }, valueText )
			)
		);
	}

	function Edit( props ) {
		var attributes    = props.attributes;
		var setAttributes = props.setAttributes;
		var blockProps    = useBlockProps();
		var horiz         = attributes.layout === 'horizontal';

		var cardStyle = {
			background:   attributes.bgColor     || '#FFFFFF',
			border:       '1px solid ' + ( attributes.borderColor || '#E2E8F0' ),
			borderRadius: '12px',
			padding:      '20px 24px',
			fontFamily:   'inherit',
		};

		var wrapStyle = {
			display:    'flex',
			flexWrap:   'wrap',
			gap:        horiz ? '32px' : '12px',
			flexDirection: horiz ? 'row' : 'column',
			alignItems: horiz ? 'flex-start' : 'stretch',
		};

		var preview = el( 'div', { style: cardStyle },
			el( 'p', { style: { fontSize:'20px', fontWeight:700, color: attributes.titleColor || '#0F172A', margin:'0 0 14px' } },
				__( 'Facility Name', 'playard' )
			),
			el( 'div', { style: wrapStyle },
				attributes.showAddress ? InfoItem( PATH_PIN,   __( 'Address', 'playard' ), '123 Sport Street, City', attributes ) : null,
				attributes.showPhone   ? InfoItem( PATH_PHONE, __( 'Phone',   'playard' ), '+1 234 567 890',          attributes ) : null,
				attributes.showEmail   ? InfoItem( PATH_EMAIL, __( 'Email',   'playard' ), 'hello@facility.com',     attributes ) : null,
				attributes.showHours   ? InfoItem( PATH_CLOCK, __( 'Hours',   'playard' ), '9:00 AM – 10:00 PM (Mon, Tue, Wed)', attributes ) : null
			)
		);

		var colorPanel = PanelColorSettings
			? el( PanelColorSettings, {
				title: __( 'Colors', 'playard' ),
				initialOpen: false,
				colorSettings: [
					{ label: __( 'Card Background',  'playard' ), value: attributes.bgColor,    onChange: function (v) { setAttributes( { bgColor:    v || '' } ); } },
					{ label: __( 'Card Border',       'playard' ), value: attributes.borderColor,onChange: function (v) { setAttributes( { borderColor:v || '' } ); } },
					{ label: __( 'Icon Background',   'playard' ), value: attributes.iconBg,     onChange: function (v) { setAttributes( { iconBg:     v || '' } ); } },
					{ label: __( 'Icon Color',         'playard' ), value: attributes.iconColor,  onChange: function (v) { setAttributes( { iconColor:  v || '' } ); } },
					{ label: __( 'Title Color',        'playard' ), value: attributes.titleColor, onChange: function (v) { setAttributes( { titleColor: v || '' } ); } },
					{ label: __( 'Text Color',         'playard' ), value: attributes.textColor,  onChange: function (v) { setAttributes( { textColor:  v || '' } ); } },
					{ label: __( 'Label Color',        'playard' ), value: attributes.labelColor, onChange: function (v) { setAttributes( { labelColor: v || '' } ); } },
				]
			} )
			: null;

		return el(
			'div', blockProps,

			el( InspectorControls, {},
				el( PanelBody, { title: __( 'Display', 'playard' ), initialOpen: true },
					el( SelectControl, {
						label:    __( 'Layout', 'playard' ),
						value:    attributes.layout,
						options:  [
							{ label: __( 'Horizontal (row)',   'playard' ), value: 'horizontal' },
							{ label: __( 'Vertical (stacked)', 'playard' ), value: 'vertical'   },
						],
						onChange: function (v) { setAttributes( { layout: v } ); },
					} ),
					el( ToggleControl, {
						label:    __( 'Show address', 'playard' ),
						checked:  attributes.showAddress,
						onChange: function (v) { setAttributes( { showAddress: v } ); },
					} ),
					el( ToggleControl, {
						label:    __( 'Show phone', 'playard' ),
						checked:  attributes.showPhone,
						onChange: function (v) { setAttributes( { showPhone: v } ); },
					} ),
					el( ToggleControl, {
						label:    __( 'Show email', 'playard' ),
						checked:  attributes.showEmail,
						onChange: function (v) { setAttributes( { showEmail: v } ); },
					} ),
					el( ToggleControl, {
						label:    __( 'Show opening hours', 'playard' ),
						checked:  attributes.showHours,
						onChange: function (v) { setAttributes( { showHours: v } ); },
					} )
				),
				colorPanel
			),

			preview
		);
	}

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

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