/**
 * AIEO Social Icons — block editor registration.
 * Pairs with the server render in includes/class-aieo-social-icons-block.php.
 */
(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 PanelColorSettings = wp.blockEditor.PanelColorSettings;

	var PanelBody     = wp.components.PanelBody;
	var SelectControl = wp.components.SelectControl;
	var TextControl   = wp.components.TextControl;
	var Button        = wp.components.Button;
	var Placeholder   = wp.components.Placeholder;

	var cfg      = (typeof window !== 'undefined' && window.aieoSocialIconsConfig) || {};
	var networks = cfg.networks || {};
	var slugs    = Object.keys(networks);
	var defaultItems = Array.isArray(cfg.defaultItems) ? cfg.defaultItems : [];

	function netOptions() {
		return slugs.map(function (s) { return { value: s, label: (networks[s] && networks[s].label) || s }; });
	}
	function cloneItems(items) {
		return (items || []).map(function (it) { return { network: it.network || slugs[0], url: it.url || '#' }; });
	}

	wp.blocks.registerBlockType('aieo/social-icons', {
		title:       __('AIEO Social Icons', 'ai-eshop-optimizer'),
		category:    'theme',
		icon:        'share',
		description: __('Social icon links with colour, shape and responsive spacing.', 'ai-eshop-optimizer'),
		keywords:    ['social', 'icons', 'follow', 'aieo'],
		supports:    { align: ['wide', 'full'], spacing: { margin: true, padding: true } },
		attributes:  {
			items:      { type: 'array',  default: defaultItems },
			bgColor:    { type: 'string', default: '#F46767' },
			iconColor:  { type: 'string', default: '#ffffff' },
			shape:      { type: 'string', default: 'round' },
			size:       { type: 'string', default: '40px' },
			gapDesktop: { type: 'string', default: '12px' },
			gapMobile:  { type: 'string', default: '12px' },
			align:      { type: 'string' }
		},

		edit: function (props) {
			var a = props.attributes;
			var setA = props.setAttributes;
			var items = Array.isArray(a.items) ? a.items : [];

			function setItems(next) { setA({ items: next }); }
			function updateItem(i, key, value) { var n = cloneItems(items); if (n[i]) { n[i][key] = value; setItems(n); } }
			function removeItem(i) { var n = cloneItems(items); n.splice(i, 1); setItems(n); }
			function addItem() { var n = cloneItems(items); n.push({ network: slugs[0], url: '#' }); setItems(n); }

			var itemRows = items.map(function (it, i) {
				return el('div', { key: i, style: { border: '1px solid #ddd', borderRadius: '4px', padding: '8px', marginBottom: '8px' } },
					el(SelectControl, {
						label: __('Network', 'ai-eshop-optimizer'),
						value: it.network,
						options: netOptions(),
						onChange: function (v) { updateItem(i, 'network', v); }
					}),
					el(TextControl, {
						label: __('URL', 'ai-eshop-optimizer'),
						value: it.url || '',
						onChange: function (v) { updateItem(i, 'url', v); }
					}),
					el(Button, { isDestructive: true, variant: 'tertiary', onClick: function () { removeItem(i); } }, __('Remove', 'ai-eshop-optimizer'))
				);
			});

			var controls = el(InspectorControls, {},
				el(PanelBody, { title: __('Networks', 'ai-eshop-optimizer'), initialOpen: true },
					itemRows,
					el(Button, { variant: 'primary', onClick: addItem }, __('+ Add network', 'ai-eshop-optimizer'))
				),
				el(PanelColorSettings, {
					title: __('Colours', 'ai-eshop-optimizer'),
					initialOpen: false,
					colorSettings: [
						{ value: a.bgColor,   onChange: function (v) { setA({ bgColor: v || '#F46767' }); },   label: __('Background', 'ai-eshop-optimizer') },
						{ value: a.iconColor, onChange: function (v) { setA({ iconColor: v || '#ffffff' }); }, label: __('Icon', 'ai-eshop-optimizer') }
					]
				}),
				el(PanelBody, { title: __('Shape & spacing', 'ai-eshop-optimizer'), initialOpen: false },
					el(SelectControl, {
						label: __('Shape', 'ai-eshop-optimizer'),
						value: a.shape || 'round',
						options: [
							{ value: 'round',  label: __('Round', 'ai-eshop-optimizer') },
							{ value: 'square', label: __('Square', 'ai-eshop-optimizer') }
						],
						onChange: function (v) { setA({ shape: v }); }
					}),
					el(TextControl, { label: __('Icon size', 'ai-eshop-optimizer'), value: a.size || '40px', onChange: function (v) { setA({ size: v }); } }),
					el(TextControl, { label: __('Gap — desktop', 'ai-eshop-optimizer'), value: a.gapDesktop || '12px', onChange: function (v) { setA({ gapDesktop: v }); } }),
					el(TextControl, { label: __('Gap — mobile', 'ai-eshop-optimizer'), value: a.gapMobile || '12px', onChange: function (v) { setA({ gapMobile: v }); } })
				)
			);

			return el(Fragment, {},
				controls,
				el('div', useBlockProps(),
					el(Placeholder, {
						icon: 'share',
						label: __('AIEO Social Icons', 'ai-eshop-optimizer'),
						instructions: __('Renders the social icon row on the front-end.', 'ai-eshop-optimizer')
					}, el('div', { style: { color: '#1e1e1e', fontWeight: 600 } },
						(items.map(function (it) { return (networks[it.network] && networks[it.network].label) || it.network; }).join('  ·  ')) || __('No networks — add one →', 'ai-eshop-optimizer')))
				)
			);
		},

		save: function () { return null; }
	});
})(window.wp);
