/**
 * Editor for the acrwd/history block. Rendered server-side (render_callback
 * shares Shortcodes::render_history); the editor shows a static placeholder
 * because the real output depends on the logged-in customer, plus a control for
 * the "limit" attribute (how many rows). Vanilla JS, no build.
 */
( function ( wp ) {
	'use strict';

	var el = wp.element.createElement;
	var Fragment = wp.element.Fragment;
	var i18n = wp.i18n;
	var blockEditor = wp.blockEditor || {};
	var components = wp.components || {};
	var InspectorControls = blockEditor.InspectorControls;
	var PanelBody = components.PanelBody;
	var RangeControl = components.RangeControl;

	var placeholderStyle = {
		padding: '8px 12px',
		background: '#f6f7f8',
		border: '1px dashed #c3c4c7',
		borderRadius: '4px'
	};

	wp.blocks.registerBlockType( 'acrwd/history', {
		edit: function ( props ) {
			var placeholder = el(
				'div',
				{ className: 'acrwd-block-placeholder', style: placeholderStyle },
				i18n.__( 'Points history — shows the logged-in customer’s recent activity here.', 'australcode-points-rewards' )
			);

			if ( ! InspectorControls || ! PanelBody || ! RangeControl ) {
				return placeholder;
			}

			return el(
				Fragment,
				{},
				el(
					InspectorControls,
					{},
					el(
						PanelBody,
						{ title: i18n.__( 'Settings', 'australcode-points-rewards' ), initialOpen: true },
						el( RangeControl, {
							label: i18n.__( 'Rows to show', 'australcode-points-rewards' ),
							value: props.attributes.limit,
							min: 1,
							max: 100,
							onChange: function ( value ) {
								props.setAttributes( { limit: value } );
							}
						} )
					)
				),
				placeholder
			);
		},
		save: function () {
			return null;
		}
	} );
}( window.wp ) );
