/**
 * Captcha Field Block - Multi-provider (Turnstile, reCAPTCHA v2/v3, hCaptcha)
 */

(function (blocks, element, blockEditor, components, i18n) {
	const { registerBlockType } = blocks;
	const { createElement: el, Fragment, useEffect } = element;
	const { InspectorControls, useBlockProps } = blockEditor;
	const { PanelBody, SelectControl } = components;
	const { __ } = i18n;

	var providerLabels = {
		turnstile: 'Cloudflare Turnstile',
		recaptcha_v2: 'Google reCAPTCHA v2',
		recaptcha_v3: 'Google reCAPTCHA v3',
		hcaptcha: 'hCaptcha',
	};

	registerBlockType('giraforms/captcha-field', {
		icon: {
			src: 'shield',
			foreground: '#3858e9'
		},
		edit: function (props) {
			const { attributes, setAttributes } = props;
			const { fieldId, provider, theme, size } = attributes;

			// Generate field ID if not set
			useEffect(() => {
				if (!fieldId) {
					setAttributes({
						fieldId: 'captcha_' + Math.random().toString(36).substring(2, 11),
					});
				}
			}, []);

			const blockProps = useBlockProps({
				className: 'giraforms-field giraforms-field-captcha',
			});

			var isInvisible = provider === 'recaptcha_v3';

			return el(
				Fragment,
				null,
				el(
					InspectorControls,
					null,
					el(
						PanelBody,
						{ title: __('Captcha Settings', 'giraforms'), initialOpen: true },
						el(SelectControl, {
							label: __('Provider', 'giraforms'),
							value: provider,
							options: [
								{ label: 'Cloudflare Turnstile', value: 'turnstile' },
								{ label: 'Google reCAPTCHA v2', value: 'recaptcha_v2' },
								{ label: 'Google reCAPTCHA v3 (invisible)', value: 'recaptcha_v3' },
								{ label: 'hCaptcha', value: 'hcaptcha' },
							],
							onChange: function (value) { setAttributes({ provider: value }); },
						}),
						el(SelectControl, {
							label: __('Theme', 'giraforms'),
							value: theme,
							options: [
								{ label: __('Light', 'giraforms'), value: 'light' },
								{ label: __('Dark', 'giraforms'), value: 'dark' },
								{ label: __('Auto', 'giraforms'), value: 'auto' },
							],
							onChange: function (value) { setAttributes({ theme: value }); },
						}),
						!isInvisible && el(SelectControl, {
							label: __('Size', 'giraforms'),
							value: size,
							options: [
								{ label: __('Normal', 'giraforms'), value: 'normal' },
								{ label: __('Compact', 'giraforms'), value: 'compact' },
							],
							onChange: function (value) { setAttributes({ size: value }); },
						})
					)
				),
				el(
					'div',
					blockProps,
					el(
						'div',
						{
							className: 'giraforms-captcha-preview',
							style: {
								border: '2px dashed #ccc',
								padding: '20px',
								textAlign: 'center',
								background: theme === 'dark' ? '#222' : '#f5f5f5',
								color: theme === 'dark' ? '#fff' : '#333',
							},
						},
						el('span', { className: 'dashicons dashicons-shield' }),
						el('p', null,
							el('strong', null, providerLabels[provider] || 'Captcha'),
							isInvisible && el('span', { style: { display: 'block', fontSize: '12px', fontStyle: 'italic', marginTop: '4px' } }, __('Invisible - no widget displayed', 'giraforms')),
							el('br', null),
							el('small', null, __('Configure your keys in Forms > Integrations', 'giraforms'))
						)
					)
				)
			);
		},

		save: function (props) {
			const { attributes } = props;
			const { fieldId, provider, theme, size } = attributes;

			const blockProps = useBlockProps.save({
				className: 'giraforms-field giraforms-field-captcha',
			});

			if (provider === 'recaptcha_v3') {
				return el(
					'div',
					blockProps,
					el('input', {
						type: 'hidden',
						name: 'g-recaptcha-response',
						className: 'giraforms-recaptcha-v3',
						'data-sitekey': '',
					})
				);
			}

			var widgetProps = {
				id: fieldId,
				'data-sitekey': '',
				'data-theme': theme,
				'data-size': size,
			};

			if (provider === 'turnstile') {
				widgetProps.className = 'cf-turnstile';
			} else if (provider === 'recaptcha_v2') {
				widgetProps.className = 'g-recaptcha';
			} else if (provider === 'hcaptcha') {
				widgetProps.className = 'h-captcha';
			}

			return el(
				'div',
				blockProps,
				el('div', widgetProps)
			);
		},
	});
})(
	window.wp.blocks,
	window.wp.element,
	window.wp.blockEditor,
	window.wp.components,
	window.wp.i18n
);
