/* global owrfpBlockData, wp */
const { registerBlockType } = wp.blocks;
const { InspectorControls, useBlockProps } = wp.blockEditor;
const { PanelBody, SelectControl, RangeControl, Placeholder, Spinner } = wp.components;
const { useState, useEffect } = wp.element;

registerBlockType( 'omniwise-rocket-forms-pro/form-embed', {
	title: 'OmniWise Rocket Forms Pro',
	description: 'Embed a Rocket Forms Pro form on this page.',
	icon: 'feedback',
	category: 'embed',
	keywords: [ 'form', 'rocketforms', 'omniwise', 'embed' ],
	supports: { align: [ 'wide', 'full' ] },
	attributes: {
		formId:   { type: 'string', default: '' },
		formName: { type: 'string', default: '' },
		height:   { type: 'number', default: 500 },
	},

	edit( { attributes, setAttributes } ) {
		const { formId, formName, height } = attributes;
		const blockProps = useBlockProps();

		const [ forms, setForms ]     = useState( [] );
		const [ loading, setLoading ] = useState( false );
		const [ error, setError ]     = useState( null );

		useEffect( () => {
			if ( ! owrfpBlockData.hasKey ) return;
			setLoading( true );

			// Proxy via WP AJAX — API key is never exposed in browser JS
			const body = new FormData();
			body.append( 'action', 'owrfp_get_forms' );
			body.append( 'nonce', owrfpBlockData.ajaxNonce );

			fetch( owrfpBlockData.ajaxUrl, { method: 'POST', body } )
				.then( ( r ) => r.json() )
				.then( ( data ) => {
					if ( data.success && data.data.forms ) {
						setForms( data.data.forms );
					} else {
						setError( data.data?.message || 'Failed to load forms.' );
					}
				} )
				.catch( ( e ) => setError( e.message ) )
				.finally( () => setLoading( false ) );
		}, [] );

		if ( ! owrfpBlockData.hasKey ) {
			return (
				<div { ...blockProps }>
					<Placeholder icon="feedback" label="OmniWise Rocket Forms Pro">
						<p>
							API key not configured.{ ' ' }
							<a href={ owrfpBlockData.settingsUrl } target="_blank" rel="noreferrer">
								Configure now
							</a>
						</p>
					</Placeholder>
				</div>
			);
		}

		const formOptions = [
			{ value: '', label: '— Select a form —' },
			...forms.map( ( f ) => ( { value: f.id, label: f.name } ) ),
		];

		return (
			<div { ...blockProps }>
				<InspectorControls>
					<PanelBody title="Form Settings" initialOpen={ true }>
						{ loading && <Spinner /> }
						{ error && <p style={ { color: 'red' } }>{ error }</p> }
						{ ! loading && (
							<SelectControl
								label="Select Form"
								value={ formId }
								options={ formOptions }
								onChange={ ( val ) => {
									const f = forms.find( ( form ) => form.id === val );
									setAttributes( { formId: val, formName: f ? f.name : '' } );
								} }
							/>
						) }
						<RangeControl
							label="Minimum height (px)"
							value={ height }
							onChange={ ( val ) => setAttributes( { height: val } ) }
							min={ 200 }
							max={ 2000 }
							step={ 50 }
						/>
					</PanelBody>
				</InspectorControls>

				{ ! formId ? (
					<Placeholder icon="feedback" label="OmniWise Rocket Forms Pro">
						{ loading ? (
							<Spinner />
						) : (
							<SelectControl
								label="Select a form to embed"
								value={ formId }
								options={ formOptions }
								onChange={ ( val ) => {
									const f = forms.find( ( form ) => form.id === val );
									setAttributes( { formId: val, formName: f ? f.name : '' } );
								} }
							/>
						) }
					</Placeholder>
				) : (
					<div
						style={ {
							border: '2px dashed #7c3aed',
							padding: '24px',
							borderRadius: '8px',
							textAlign: 'center',
							background: '#f9f5ff',
						} }
					>
						<strong>OmniWise Rocket Forms Pro</strong>
						<p style={ { margin: '4px 0 0', color: '#6b7280', fontSize: '14px' } }>
							{ formName || formId }
						</p>
						<p style={ { margin: '4px 0 0', color: '#9ca3af', fontSize: '12px' } }>
							This form will be embedded as an iframe on your page.
						</p>
					</div>
				) }
			</div>
		);
	},

	// Server-side rendered — save returns null
	save() {
		return null;
	},
} );