/**
 * AIEO Menu — block editor registration.
 *
 * Pairs with the server-side render in includes/class-aieo-menu-block.php.
 * PHP-only registration is invisible to the editor UI — this file provides the
 * inserter listing + a menu-picker edit component. The canvas preview is a
 * static Placeholder (the real menu renders server-side via render_callback).
 */
(function (wp) {
	if (!wp || !wp.blocks || !wp.blockEditor || !wp.components || !wp.element) { return; }

	var el       = wp.element.createElement;
	var Fragment = wp.element.Fragment;
	var __       = (wp.i18n && wp.i18n.__) ? wp.i18n.__ : function (s) { return s; };

	var InspectorControls = wp.blockEditor.InspectorControls;
	var useBlockProps     = wp.blockEditor.useBlockProps;

	var PanelBody      = wp.components.PanelBody;
	var SelectControl  = wp.components.SelectControl;
	var ToggleControl  = wp.components.ToggleControl;
	var Placeholder    = wp.components.Placeholder;

	var cfg   = (typeof window !== 'undefined' && window.aieoMenuConfig) || { menus: [] };
	var menus = Array.isArray(cfg.menus) ? cfg.menus : [];

	function menuOptions() {
		var opts = [{ value: '0', label: __('— Pick a menu —', 'ai-eshop-optimizer') }];
		menus.forEach(function (m) { opts.push({ value: m.value, label: m.label }); });
		return opts;
	}

	function menuLabel(id) {
		for (var i = 0; i < menus.length; i++) { if (menus[i].value === String(id)) { return menus[i].label; } }
		return id ? ('#' + id) : __('none', 'ai-eshop-optimizer');
	}

	wp.blocks.registerBlockType('aieo/menu', {
		title:       __('AIEO Menu', 'ai-eshop-optimizer'),
		category:    'theme',
		icon:        'menu',
		description: __('Render a WordPress menu — inline strip (header) or accordion (footer).', 'ai-eshop-optimizer'),
		keywords:    ['menu', 'nav', 'navigation', 'header', 'footer', 'aieo'],
		supports:    { align: ['wide', 'full'], spacing: { margin: true, padding: true } },
		attributes:  {
			menuId:             { type: 'number',  default: 0 },
			mode:               { type: 'string',  default: 'inline' },
			showCatalogTrigger: { type: 'boolean', default: true }
		},

		edit: function (props) {
			var a = props.attributes;
			var setA = props.setAttributes;
			var blockProps = useBlockProps();

			var controls = el(InspectorControls, {},
				el(PanelBody, { title: __('Menu', 'ai-eshop-optimizer'), initialOpen: true },
					el(SelectControl, {
						label: __('WordPress menu', 'ai-eshop-optimizer'),
						value: String(a.menuId || 0),
						options: menuOptions(),
						onChange: function (v) { setA({ menuId: parseInt(v, 10) || 0 }); }
					}),
					el(SelectControl, {
						label: __('Display mode', 'ai-eshop-optimizer'),
						value: a.mode || 'inline',
						options: [
							{ value: 'inline',    label: __('Inline strip (header)', 'ai-eshop-optimizer') },
							{ value: 'accordion', label: __('Accordion (footer)', 'ai-eshop-optimizer') }
						],
						onChange: function (v) { setA({ mode: v }); }
					}),
					(a.mode !== 'accordion') && el(ToggleControl, {
						label: __('Show catalogue (Navigator) trigger', 'ai-eshop-optimizer'),
						help: __('Prepends the ΚΑΤΑΛΟΓΟΣ button that opens the AIEO Navigator palette.', 'ai-eshop-optimizer'),
						checked: !!a.showCatalogTrigger,
						onChange: function (v) { setA({ showCatalogTrigger: v }); }
					})
				)
			);

			var body = el('div', { style: { textAlign: 'left' } },
				el('strong', {}, __('AIEO Menu', 'ai-eshop-optimizer')),
				el('div', { style: { marginTop: '4px', color: '#50575e', fontSize: '13px' } },
					(a.mode === 'accordion' ? __('Accordion (footer)', 'ai-eshop-optimizer') : __('Inline strip (header)', 'ai-eshop-optimizer'))
					+ ' — ' + menuLabel(a.menuId)
				),
				(!a.menuId) && el('div', { style: { marginTop: '6px', color: '#b32d2e', fontSize: '12px' } },
					__('Pick a menu in the block sidebar →', 'ai-eshop-optimizer'))
			);

			return el(Fragment, {},
				controls,
				el('div', blockProps,
					el(Placeholder, {
						icon: 'menu',
						label: __('AIEO Menu', 'ai-eshop-optimizer'),
						instructions: __('Renders the chosen menu on the front-end.', 'ai-eshop-optimizer')
					}, body)
				)
			);
		},

		// Server-rendered — nothing stored in post content.
		save: function () { return null; }
	});
})(window.wp);
