import {useState, useEffect} from '@wordpress/element';
import {__, _x} from '@wordpress/i18n';
import {Spinner} from '@wordpress/components';
import PositioningField from '../../../design/form-fields/PositioningField';
import Toggle from '../../../design/components/Toggle';
import Button from '../../../design/components/Button';
import ModalHeader from './ModalHeader';
import ModalFooter from './ModalFooter';

const ShortcodeBuilder = ( {context, closeModal, setModalTitle, setIsFullscreen, isFullscreen} ) => {
	const {entityType, entityId, navigableIds = []} = context;
	const [editingEntityId, setEditingEntityId] = useState( entityId );
	const [entityData, setEntityData] = useState( null );
	const [isLoading, setIsLoading] = useState( false );

	// Singular form ('ad', 'group', 'placement')
	const typeSingular = entityType === 'ads' ? 'ad' : (entityType === 'groups' ? 'group' : 'placement');

	const [alignment, setAlignment] = useState( 'none' );
	const [isInline, setIsInline] = useState( false );
	const [copied, setCopied] = useState( false );

	useEffect( () => {
		const fetchData = async () => {
			setIsLoading( true );
			try {
				const data = await wp.apiFetch( {path: `adpresso/v1/${entityType}/${editingEntityId}`} );
				setEntityData( data );
				setModalTitle( __( 'Shortcode: ', 'adpresso' ) + data.title );
			} catch ( error ) {
				console.error( 'Error fetching entity data:', error );
			} finally {
				setIsLoading( false );
			}
		};
		fetchData();
	}, [editingEntityId, entityType, setModalTitle] );

	// -------------------------------------------------------------------------
	// Mock the field object from our PHP structure.
	// -------------------------------------------------------------------------
	const positioningFieldMock = {
		id:                  'shortcode_alignment',
		label:               __( 'Positioning & Layout', 'adpresso' ),
		positioning_options: {
			'default': {
				title:       __( 'Theme Default', 'adpresso' ),
				description: __( 'Inherits alignment from your active website theme.', 'adpresso' ),
				options:     {
					'none': {title: __( 'None', 'adpresso' )}
				}
			},
			'float':   {
				title:       _x( 'Float', 'Layout options "Text Flow" heading', 'adpresso' ),
				description: __( 'The ad is embedded into the text, allowing content to wrap around it.', 'adpresso' ),
				options:     {
					'left_float':  {title: __( 'Left', 'adpresso' )},
					'right_float': {title: __( 'Right', 'adpresso' )}
				}
			},
			'block':   {
				title:       _x( 'Block', 'Layout options "Text Flow" heading', 'adpresso' ),
				description: __( 'The ad stands alone. The following content starts below.', 'adpresso' ),
				options:     {
					'left_nofloat':   {title: __( 'Left', 'adpresso' )},
					'center_nofloat': {title: __( 'Center', 'adpresso' )},
					'right_nofloat':  {title: __( 'Right', 'adpresso' )}
				}
			}
		}
	};

	// -------------------------------------------------------------------------
	// 2. Shortcode Live-Generation
	// -------------------------------------------------------------------------
	let shortcode = `[adpresso_${typeSingular} id="${editingEntityId}"`;
	if ( alignment !== 'none' ) {
		shortcode += ` align="${alignment}"`;
	}
	if ( isInline ) {
		shortcode += ` inline="true"`;
	}
	shortcode += `]`;

	const handleCopy = () => {
		navigator.clipboard.writeText( shortcode );
		setCopied( true );
		setTimeout( () => setCopied( false ), 2000 );
	};

	const handleNavigation = ( direction ) => {
		const currentIndex = navigableIds.indexOf( editingEntityId );
		if ( currentIndex === - 1 ) {
			return;
		}

		let newEntityId = null;
		if ( direction === 'prev' && currentIndex > 0 ) {
			newEntityId = navigableIds[currentIndex - 1];
		} else if ( direction === 'next' && currentIndex < navigableIds.length - 1 ) {
			newEntityId = navigableIds[currentIndex + 1];
		}

		if ( newEntityId ) {
			setEditingEntityId( newEntityId );
		}
	};

	const currentIndex = navigableIds.indexOf( editingEntityId );
	const isPrevDisabled = currentIndex <= 0;
	const isNextDisabled = currentIndex >= navigableIds.length - 1;

	if ( isLoading || !entityData ) {
		return (
			<div className="adpresso-modal-content adpresso-shortcode-builder" style={{minHeight: '200px'}}>
				<div className="adpresso-modal-spinner"><Spinner/></div>
			</div>
		);
	}

	return (
		<div className="adpresso-modal-content adpresso-shortcode-builder">
			<ModalHeader
				entityData={entityData}
				onTitleChange={() => {
				}} // Read-only in shortcode mode
				onNavigate={handleNavigation}
				onClose={closeModal}
				isPrevDisabled={isPrevDisabled}
				isNextDisabled={isNextDisabled}
				onNavigateBack={null}
				previousEntity={null}
				onRefresh={() => {
				}}
				setIsFullscreen={setIsFullscreen}
				isFullscreen={isFullscreen}
				showFullscreen={false}
			/>

			<div className="adpresso-modal-sections" style={{padding: '20px'}}>
				<div className="adpresso-modal-section">
					<h2>{__( 'Shortcode', 'adpresso' )}</h2>
					<div className="adpresso-section-fields">
						<div className="adpresso-field-control">
							<code className="adpresso-code">
								{shortcode}
							</code>
							<p style={{margin: '10px 0 0 0'}}>
								{__( 'Copy this shortcode and paste it anywhere in your content.', 'adpresso' )}
							</p>
						</div>
					</div>
				</div>

				{entityType !== 'placements' && (
					<div className="adpresso-modal-section">
						<h2>{__( 'Positioning & Layout', 'adpresso' )}</h2>
						<div className="adpresso-section-fields">
							<div className="adpresso-field-control">
								<PositioningField
									field={positioningFieldMock}
									value={alignment}
									onChange={setAlignment}
								/>
							</div>
						</div>
					</div>
				)}

				<div className="adpresso-modal-section">
					<h2>{__( 'Inline', 'adpresso' )}</h2>
					<div className="adpresso-section-fields">
						<div className="adpresso-field-control">
							<Toggle
								label={__( 'Inline', 'adpresso' )}
								enabled={isInline}
								setEnabled={setIsInline}
							/>
						</div>
					</div>
				</div>
			</div>

			<div className="adpresso-modal-footer">
				<div className="adpresso-footer-left"></div>
				<div className="adpresso-footer-center"></div>
				<div className="adpresso-footer-right">
					<Button variant="primary" className="adpresso-btn adpresso-btn-action" onClick={handleCopy}>
						{copied ? __( 'Copied to clipboard!', 'adpresso' ) : __( 'Copy Shortcode', 'adpresso' )}
					</Button>
				</div>
			</div>
		</div>
	);
};

export default ShortcodeBuilder;