/**
 * Newsletter Block
 *
 * @package kairo
 */

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

	registerBlockType( 'kairo/newsletter', {
		edit: function ( props ) {
			const { attributes, setAttributes } = props;
			const {
				heading,
				description,
				buttonText,
				placeholder,
				showNameField,
				namePlaceholder,
				privacyText,
				useJetpack,
				formAction,
				formLayout,
				backgroundStyle,
			} = attributes;

			const blockProps = useBlockProps( {
				className: `kairo-newsletter kairo-newsletter--${ backgroundStyle } kairo-newsletter--${ formLayout }`,
			} );

			return el(
				Fragment,
				null,
				el(
					InspectorControls,
					null,
					// Content Panel
					el(
						PanelBody,
						{ title: __( 'Content', 'kairo' ), initialOpen: true },
						el( TextControl, {
							__nextHasNoMarginBottom: true,
							label: __( 'Heading', 'kairo' ),
							value: heading,
							onChange: ( value ) => setAttributes( { heading: value } ),
							help: __( 'Leave empty to hide', 'kairo' ),
						} ),
						el( TextControl, {
							__nextHasNoMarginBottom: true,
							label: __( 'Description', 'kairo' ),
							value: description,
							onChange: ( value ) => setAttributes( { description: value } ),
							help: __( 'Leave empty to hide', 'kairo' ),
						} )
					),
					// Form Fields Panel
					el(
						PanelBody,
						{ title: __( 'Form Fields', 'kairo' ), initialOpen: false },
						el( ToggleControl, {
							__nextHasNoMarginBottom: true,
							label: __( 'Show Name Field', 'kairo' ),
							help: showNameField 
								? __( 'Name field is visible', 'kairo' ) 
								: __( 'Only email field is shown', 'kairo' ),
							checked: showNameField,
							onChange: ( value ) => setAttributes( { showNameField: value } ),
						} ),
						showNameField && el( TextControl, {
							__nextHasNoMarginBottom: true,
							label: __( 'Name Placeholder', 'kairo' ),
							value: namePlaceholder,
							onChange: ( value ) => setAttributes( { namePlaceholder: value } ),
						} ),
						el( TextControl, {
							__nextHasNoMarginBottom: true,
							label: __( 'Email Placeholder', 'kairo' ),
							value: placeholder,
							onChange: ( value ) => setAttributes( { placeholder: value } ),
						} ),
						el( TextControl, {
							__nextHasNoMarginBottom: true,
							label: __( 'Button Text', 'kairo' ),
							value: buttonText,
							onChange: ( value ) => setAttributes( { buttonText: value } ),
						} ),
						el( TextControl, {
							__nextHasNoMarginBottom: true,
							label: __( 'Privacy Text', 'kairo' ),
							value: privacyText,
							onChange: ( value ) => setAttributes( { privacyText: value } ),
							help: __( 'Leave empty to hide', 'kairo' ),
						} )
					),
					// Layout Panel
					el(
						PanelBody,
						{ title: __( 'Layout', 'kairo' ), initialOpen: false },
						el( SelectControl, {
							__nextHasNoMarginBottom: true,
							label: __( 'Style Preset', 'kairo' ),
							value: backgroundStyle,
							options: [
								{ label: __( 'Dark', 'kairo' ), value: 'dark' },
								{ label: __( 'Light', 'kairo' ), value: 'light' },
								{ label: __( 'Card', 'kairo' ), value: 'card' },
							],
							onChange: ( value ) => setAttributes( { backgroundStyle: value } ),
							help: __( 'Quick style presets. Use Styles tab for custom colors.', 'kairo' ),
						} ),
						el( SelectControl, {
							__nextHasNoMarginBottom: true,
							label: __( 'Form Layout', 'kairo' ),
							value: formLayout,
							options: [
								{ label: __( 'Inline (Horizontal)', 'kairo' ), value: 'inline' },
								{ label: __( 'Stacked (Vertical)', 'kairo' ), value: 'stacked' },
							],
							onChange: ( value ) => setAttributes( { formLayout: value } ),
						} )
					),
					// Newsletter Service Panel
					el(
						PanelBody,
						{ title: __( 'Newsletter Service', 'kairo' ), initialOpen: false },
						el( ToggleControl, {
							__nextHasNoMarginBottom: true,
							label: __( 'Use Jetpack Subscriptions', 'kairo' ),
							help: useJetpack
								? __( 'Uses Jetpack/WordPress.com subscriptions when available.', 'kairo' )
								: __( 'Use a custom newsletter service URL.', 'kairo' ),
							checked: useJetpack,
							onChange: ( value ) => setAttributes( { useJetpack: value } ),
						} ),
						! useJetpack && el( TextControl, {
							__nextHasNoMarginBottom: true,
							label: __( 'Form Action URL', 'kairo' ),
							value: formAction,
							onChange: ( value ) => setAttributes( { formAction: value } ),
							help: __( 'Paste your newsletter service form URL. Works with Mailchimp, ConvertKit, Buttondown, etc.', 'kairo' ),
						} )
					)
				),
				el(
					'div',
					blockProps,
					el(
						'div',
						{ className: 'kairo-newsletter__inner' },
						el( RichText, {
							tagName: 'h3',
							className: 'kairo-newsletter__heading',
							value: heading,
							onChange: ( value ) => setAttributes( { heading: value } ),
							placeholder: __( 'Newsletter heading...', 'kairo' ),
						} ),
						el( RichText, {
							tagName: 'p',
							className: 'kairo-newsletter__description',
							value: description,
							onChange: ( value ) => setAttributes( { description: value } ),
							placeholder: __( 'Description...', 'kairo' ),
						} ),
						el(
							'div',
							{ className: 'kairo-newsletter__form' },
							showNameField && el( 'input', {
								type: 'text',
								className: 'kairo-newsletter__input kairo-newsletter__input--name',
								placeholder: namePlaceholder,
								disabled: true,
							} ),
							el( 'input', {
								type: 'email',
								className: 'kairo-newsletter__input',
								placeholder: placeholder,
								disabled: true,
							} ),
							el(
								'button',
								{
									type: 'button',
									className: 'kairo-newsletter__button',
									disabled: true,
								},
								buttonText
							)
						),
						privacyText &&
							el(
								'p',
								{ className: 'kairo-newsletter__privacy' },
								privacyText
							)
					)
				)
			);
		},
	} );
} )(
	window.wp.blocks,
	window.wp.element,
	window.wp.blockEditor,
	window.wp.components,
	window.wp.i18n
);
