/**
 * Northfield Theatre — Gutenberg Block Editor Registration
 *
 * Registers custom blocks for the editor using ServerSideRender
 * for preview. No build step required.
 *
 * Blocks: hero-gallery, event-grid, alert-banner
 *
 * @package Northfield_Theatre
 * @since 1.0.0
 */

(function () {
	'use strict';

	var registerBlockType = wp.blocks.registerBlockType;
	var createElement = wp.element.createElement;
	var Fragment = wp.element.Fragment;
	var InspectorControls = wp.blockEditor.InspectorControls;
	var PanelBody = wp.components.PanelBody;
	var TextControl = wp.components.TextControl;
	var TextareaControl = wp.components.TextareaControl;
	var SelectControl = wp.components.SelectControl;
	var RangeControl = wp.components.RangeControl;
	var ToggleControl = wp.components.ToggleControl;
	var ServerSideRender = wp.serverSideRender;
	var useBlockProps = wp.blockEditor.useBlockProps;

	/* ==================================================================
	   1. HERO GALLERY
	   ================================================================== */

	registerBlockType('northfield/hero-gallery', {
		edit: function (props) {
			var attributes = props.attributes;
			var setAttributes = props.setAttributes;
			var blockProps = useBlockProps();

			return createElement(
				Fragment,
				null,
				createElement(
					InspectorControls,
					null,
					createElement(
						PanelBody,
						{ title: 'Hero Settings', initialOpen: true },
						createElement(TextareaControl, {
							label: 'Heading',
							value: attributes.heading,
							onChange: function (val) { setAttributes({ heading: val }); },
						}),
						createElement(TextControl, {
							label: 'Subtitle',
							value: attributes.subtitle,
							onChange: function (val) { setAttributes({ subtitle: val }); },
						}),
						createElement(TextControl, {
							label: 'Button Text',
							value: attributes.ctaText,
							onChange: function (val) { setAttributes({ ctaText: val }); },
						}),
						createElement(TextControl, {
							label: 'Button URL',
							value: attributes.ctaUrl,
							onChange: function (val) { setAttributes({ ctaUrl: val }); },
						})
					)
				),
				createElement(
					'div',
					blockProps,
					createElement(ServerSideRender, {
						block: 'northfield/hero-gallery',
						attributes: attributes,
					})
				)
			);
		},
	});

	/* ==================================================================
	   2. EVENT GRID
	   ================================================================== */

	registerBlockType('northfield/event-grid', {
		edit: function (props) {
			var attributes = props.attributes;
			var setAttributes = props.setAttributes;
			var blockProps = useBlockProps();

			return createElement(
				Fragment,
				null,
				createElement(
					InspectorControls,
					null,
					createElement(
						PanelBody,
						{ title: 'Grid Settings', initialOpen: true },
						createElement(TextControl, {
							label: 'Heading',
							value: attributes.heading,
							onChange: function (val) { setAttributes({ heading: val }); },
						}),
						createElement(RangeControl, {
							label: 'Number of Events',
							value: attributes.count,
							onChange: function (val) { setAttributes({ count: val }); },
							min: 1,
							max: 12,
						}),
						createElement(RangeControl, {
							label: 'Columns',
							value: attributes.columns,
							onChange: function (val) { setAttributes({ columns: val }); },
							min: 1,
							max: 4,
						}),
						createElement(SelectControl, {
							label: 'Category',
							value: attributes.category,
							options: [
								{ label: 'All Categories', value: '' },
								{ label: 'Drama', value: 'Drama' },
								{ label: 'Comedy', value: 'Comedy' },
								{ label: 'Music', value: 'Music' },
								{ label: 'Dance', value: 'Dance' },
								{ label: 'Family', value: 'Family' },
								{ label: 'Other', value: 'Other' },
							],
							onChange: function (val) { setAttributes({ category: val }); },
						}),
						createElement(SelectControl, {
							label: 'Venue',
							value: attributes.venue,
							options: [
								{ label: 'All Venues', value: '' },
								{ label: 'Main Auditorium', value: 'Main Auditorium' },
								{ label: 'Studio', value: 'Studio' },
								{ label: 'Foyer', value: 'Foyer' },
							],
							onChange: function (val) { setAttributes({ venue: val }); },
						}),
						createElement(ToggleControl, {
							label: 'Featured Only',
							checked: attributes.featured,
							onChange: function (val) { setAttributes({ featured: val }); },
						}),
						createElement(ToggleControl, {
							label: 'Show "View All" Button',
							checked: attributes.showViewAll,
							onChange: function (val) { setAttributes({ showViewAll: val }); },
						})
					)
				),
				createElement(
					'div',
					blockProps,
					createElement(ServerSideRender, {
						block: 'northfield/event-grid',
						attributes: attributes,
					})
				)
			);
		},
	});

	/* ==================================================================
	   3. ALERT BANNER
	   ================================================================== */

	registerBlockType('northfield/alert-banner', {
		edit: function (props) {
			var attributes = props.attributes;
			var setAttributes = props.setAttributes;
			var blockProps = useBlockProps();

			return createElement(
				Fragment,
				null,
				createElement(
					InspectorControls,
					null,
					createElement(
						PanelBody,
						{ title: 'Banner Settings', initialOpen: true },
						createElement(TextareaControl, {
							label: 'Message',
							help: 'HTML links are supported.',
							value: attributes.message,
							onChange: function (val) { setAttributes({ message: val }); },
						}),
						createElement(SelectControl, {
							label: 'Type',
							value: attributes.type,
							options: [
								{ label: 'Info (gold)', value: 'info' },
								{ label: 'Warning (orange)', value: 'warning' },
								{ label: 'Urgent (red)', value: 'urgent' },
							],
							onChange: function (val) { setAttributes({ type: val }); },
						}),
						createElement(ToggleControl, {
							label: 'Dismissible',
							checked: attributes.dismissible,
							onChange: function (val) { setAttributes({ dismissible: val }); },
						})
					)
				),
				createElement(
					'div',
					blockProps,
					attributes.message
						? createElement(ServerSideRender, {
							block: 'northfield/alert-banner',
							attributes: attributes,
						})
						: createElement(
							'div',
							{ style: { padding: '20px', background: '#fef3c7', textAlign: 'center', borderRadius: '4px' } },
							'Alert Banner — Enter a message in the sidebar settings.'
						)
				)
			);
		},
	});
})();
