import { __ } from '@wordpress/i18n';
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { PanelBody, TextControl, ToggleControl, ColorPalette } from '@wordpress/components';
import './editor.scss';

export default function Edit( props ) {
	const { attributes, setAttributes } = props;
	const {
		agentId,
		placeholder,
		showHeader,
		headerText,
		accentColor,
		height,
	} = attributes;

	return (
		<>
			<InspectorControls>
				<PanelBody title={ __( 'Agent Settings', 'wlc-search-integration-with-algolia' ) } initialOpen={ true }>
					<TextControl
						label={ __( 'Agent ID', 'wlc-search-integration-with-algolia' ) }
						value={ agentId }
						onChange={ ( v ) => setAttributes( { agentId: v } ) }
						help={ __( 'Enter your Algolia Agent Studio Agent ID', 'wlc-search-integration-with-algolia' ) }
					/>
					<TextControl
						label={ __( 'Input Placeholder', 'wlc-search-integration-with-algolia' ) }
						value={ placeholder }
						onChange={ ( v ) => setAttributes( { placeholder: v } ) }
					/>
					<ToggleControl
						label={ __( 'Show Header', 'wlc-search-integration-with-algolia' ) }
						checked={ showHeader !== false }
						onChange={ ( v ) => setAttributes( { showHeader: !! v } ) }
					/>
					{ showHeader !== false ? (
						<TextControl
							label={ __( 'Header Text', 'wlc-search-integration-with-algolia' ) }
							value={ headerText }
							onChange={ ( v ) => setAttributes( { headerText: v } ) }
						/>
					) : null }
					<TextControl
						label={ __( 'Height', 'wlc-search-integration-with-algolia' ) }
						value={ height }
						onChange={ ( v ) => setAttributes( { height: v } ) }
						help={ __( 'Chat container height (e.g., 600px, 80vh)', 'wlc-search-integration-with-algolia' ) }
					/>
					<div style={ { marginTop: 12 } }>
						<div style={ { marginBottom: 8, fontWeight: 600 } }>{ __( 'Accent Color', 'wlc-search-integration-with-algolia' ) }</div>
						<ColorPalette
							value={ accentColor }
							onChange={ ( v ) => setAttributes( { accentColor: v || '#DB002F' } ) }
						/>
					</div>
				</PanelBody>
			</InspectorControls>

			<div { ...useBlockProps() }>
				<div className="wp-block-wlc-algolia-agent-chat__editor">
					<h3>{ __( 'Algolia Agent Chat', 'wlc-search-integration-with-algolia' ) }</h3>
					<div className="wp-block-wlc-algolia-agent-chat__editor-preview">
						{ agentId ? (
							<>
								{ showHeader !== false ? (
									<div style={ { padding: '12px', background: '#f5f5f5', borderRadius: '8px 8px 0 0', fontWeight: 600 } }>
										{ headerText || __( 'AI Assistant', 'wlc-search-integration-with-algolia' ) }
									</div>
								) : null }
								<div style={ { 
									padding: '16px', 
									background: '#fff', 
									border: '1px solid #ddd', 
									borderRadius: showHeader !== false ? '0 0 8px 8px' : '8px',
									minHeight: height || '400px',
									display: 'flex',
									flexDirection: 'column',
									justifyContent: 'center',
									alignItems: 'center',
									color: '#666'
								} }>
									<div style={ { fontSize: 14, marginBottom: 8 } }>
										{ __( 'Agent ID:', 'wlc-search-integration-with-algolia' ) } <code>{ agentId }</code>
									</div>
									<div style={ { fontSize: 12, opacity: 0.7 } }>
										{ __( 'Chat interface will appear on the frontend', 'wlc-search-integration-with-algolia' ) }
									</div>
								</div>
							</>
						) : (
							<div style={ { padding: '16px', background: '#fff3cd', border: '1px solid #ffc107', borderRadius: '8px', color: '#856404' } }>
								{ __( 'Please configure Agent ID in the block settings', 'wlc-search-integration-with-algolia' ) }
							</div>
						) }
					</div>
				</div>
			</div>
		</>
	);
}
