/**
 * Campaign Grid — editor script.
 *
 * Registers the block in the block editor with an InspectorControls panel
 * for configuring columns, ordering, max items, and visibility toggles.
 *
 * No frontend JS required — fully server-side rendered.
 *
 * @package AmbassadorHub\Campaigns\Blocks\CampaignGrid
 */
( function ( wp ) {
	'use strict';

	var __                = wp.i18n.__;
	var el                = wp.element.createElement;
	var Fragment          = wp.element.Fragment;
	var InspectorControls = wp.blockEditor.InspectorControls;
	var PanelBody         = wp.components.PanelBody;
	var RangeControl      = wp.components.RangeControl;
	var SelectControl     = wp.components.SelectControl;
	var TextControl       = wp.components.TextControl;
	var ToggleControl     = wp.components.ToggleControl;
	var ServerSideRender  = wp.serverSideRender;

	wp.blocks.registerBlockType( 'ambassadorhub/campaign-grid', {

		edit: function ( props ) {
			var attrs         = props.attributes;
			var set           = props.setAttributes;
			var columns       = attrs.columns       || 3;
			var maxItems      = typeof attrs.maxItems === 'number' ? attrs.maxItems : 0;
			var orderBy       = attrs.orderBy       || 'date';
			var showEnded     = attrs.showEnded     || false;
			var showProgress  = attrs.showProgress  !== false;
			var showStatus    = attrs.showStatusBadge !== false;
			var blockProps    = wp.blockEditor.useBlockProps();

			return el(
				Fragment,
				null,

				el( InspectorControls, null,

					el( PanelBody, { title: __( 'Display', 'ambassadorhub' ), initialOpen: true },

						el( RangeControl, {
							label:    __( 'Columns', 'ambassadorhub' ),
							value:    columns,
							min:      1,
							max:      6,
							step:     1,
							onChange: function ( v ) { set( { columns: v || 3 } ); },
						} ),

						el( TextControl, {
							label:    __( 'Max items (0 = show all)', 'ambassadorhub' ),
							type:     'number',
							value:    String( maxItems ),
							min:      '0',
							step:     '1',
							onChange: function ( v ) {
								set( { maxItems: Math.max( 0, parseInt( v, 10 ) || 0 ) } );
							},
						} ),

						el( SelectControl, {
							label:    __( 'Sort order', 'ambassadorhub' ),
							value:    orderBy,
							options: [
								{ label: __( 'Newest first',    'ambassadorhub' ), value: 'date'   },
								{ label: __( 'Alphabetical',    'ambassadorhub' ), value: 'title'  },
								{ label: __( 'Most raised',     'ambassadorhub' ), value: 'raised' },
							],
							onChange: function ( v ) { set( { orderBy: v } ); },
						} )
					),

					el( PanelBody, { title: __( 'Visibility', 'ambassadorhub' ), initialOpen: false },

						el( ToggleControl, {
							label:    __( 'Show ended campaigns', 'ambassadorhub' ),
							checked:  showEnded,
							onChange: function ( v ) { set( { showEnded: v } ); },
						} ),

						el( ToggleControl, {
							label:    __( 'Show progress bar', 'ambassadorhub' ),
							checked:  showProgress,
							onChange: function ( v ) { set( { showProgress: v } ); },
						} ),

						el( ToggleControl, {
							label:    __( 'Show status badge', 'ambassadorhub' ),
							checked:  showStatus,
							onChange: function ( v ) { set( { showStatusBadge: v } ); },
						} )
					)
				),

				el( 'div', blockProps,
					el( ServerSideRender, {
						block:      'ambassadorhub/campaign-grid',
						attributes: attrs,
					} )
				)
			);
		},

		save: function () {
			return null; // Server-side rendered.
		},
	} );

} )( window.wp );
