/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import {
	BaseControl,
	PanelBody,
	RangeControl,
	ToggleControl,
	TextControl,
} from '@wordpress/components';

/**
 * Editor component for the AI Search block.
 *
 * Renders a non-interactive preview of the search widget in the editor
 * and sidebar controls for configuring shortcode attributes.
 *
 * @param {Object}   props               Block props.
 * @param {Object}   props.attributes    Block attributes.
 * @param {Function} props.setAttributes Attribute setter.
 * @return {import('react').JSX.Element} Block edit component.
 */
export default function Edit({ attributes, setAttributes }) {
	const {
		resultsPerPage,
		maxResults,
		displayAnswer,
		displayResults,
		placeholder,
		lazyLoad,
		displayFeaturedImage,
		displayTitle,
		displayExcerpt,
		displayDate,
		displayAuthor,
	} = attributes;

	const blockProps = useBlockProps({
		className: 'paca-ai-search',
	});

	const previewPlaceholder =
		placeholder ||
		(window.pacaAiSearchBlock?.defaultPlaceholder ||
			__('Ask AI about this site', 'paca-ai'));

	return (
		<>
			<InspectorControls>
				<PanelBody
					title={__('Search Settings', 'paca-ai')}
					initialOpen={true}
				>
					<TextControl
						__next40pxDefaultSize
						__nextHasNoMarginBottom
						label={__('Placeholder Text', 'paca-ai')}
						help={__(
							'Custom placeholder for the search input. Leave empty to use site name.',
							'paca-ai'
						)}
						value={placeholder}
						onChange={(value) =>
							setAttributes({ placeholder: value })
						}
					/>
					<ToggleControl
						__nextHasNoMarginBottom
						label={__('Display AI Answer', 'paca-ai')}
						help={__(
							'Show the AI-generated answer above the results.',
							'paca-ai'
						)}
						checked={displayAnswer}
						onChange={(value) =>
							setAttributes({ displayAnswer: value })
						}
					/>
					<ToggleControl
						__nextHasNoMarginBottom
						label={__('Display Results', 'paca-ai')}
						help={__(
							'Show matching post results below the answer.',
							'paca-ai'
						)}
						checked={displayResults}
						onChange={(value) =>
							setAttributes({ displayResults: value })
						}
					/>
				</PanelBody>
				{displayResults && (
					<PanelBody
						title={__('Results Settings', 'paca-ai')}
						initialOpen={true}
					>
						<RangeControl
							__next40pxDefaultSize
							__nextHasNoMarginBottom
							label={__('Results Per Page', 'paca-ai')}
							help={__(
								'Number of results shown before "Load more".',
								'paca-ai'
							)}
							value={resultsPerPage}
							onChange={(value) =>
								setAttributes({ resultsPerPage: value })
							}
							min={1}
							max={12}
						/>
						<RangeControl
							__next40pxDefaultSize
							__nextHasNoMarginBottom
							label={__('Max Results', 'paca-ai')}
							help={__(
								'Maximum total results returned by the search.',
								'paca-ai'
							)}
							value={maxResults}
							onChange={(value) =>
								setAttributes({ maxResults: value })
							}
							min={1}
							max={50}
						/>
						<ToggleControl
							__nextHasNoMarginBottom
							label={__('Lazy Load Results', 'paca-ai')}
							help={__(
								'Automatically load more results when the Load More button scrolls into view.',
								'paca-ai'
							)}
							checked={lazyLoad}
							onChange={(value) =>
								setAttributes({ lazyLoad: value })
							}
						/>
						<BaseControl.VisualLabel>
							{__('Fields', 'paca-ai')}
						</BaseControl.VisualLabel>
						<ToggleControl
							__nextHasNoMarginBottom
							label={__('Featured Image', 'paca-ai')}
							checked={displayFeaturedImage}
							onChange={(value) =>
								setAttributes({ displayFeaturedImage: value })
							}
						/>
						<ToggleControl
							__nextHasNoMarginBottom
							label={__('Title', 'paca-ai')}
							checked={displayTitle}
							onChange={(value) =>
								setAttributes({ displayTitle: value })
							}
						/>
						<ToggleControl
							__nextHasNoMarginBottom
							label={__('Excerpt', 'paca-ai')}
							checked={displayExcerpt}
							onChange={(value) =>
								setAttributes({ displayExcerpt: value })
							}
						/>
						<ToggleControl
							__nextHasNoMarginBottom
							label={__('Date', 'paca-ai')}
							checked={displayDate}
							onChange={(value) =>
								setAttributes({ displayDate: value })
							}
						/>
						<ToggleControl
							__nextHasNoMarginBottom
							label={__('Author', 'paca-ai')}
							checked={displayAuthor}
							onChange={(value) =>
								setAttributes({ displayAuthor: value })
							}
						/>
					</PanelBody>
				)}
			</InspectorControls>
			<div {...blockProps}>
				<div className="paca-ai-search-input-container">
					<textarea
						className="paca-ai-search-input"
						placeholder={previewPlaceholder}
						rows="1"
						disabled
					/>
					<div className="paca-ai-search-input-footer">
						<span className="paca-ai-search-input-hint">
							shift+enter new line
						</span>
						<div className="paca-ai-search-input-controls">
							<span className="paca-ai-search-input-counter">
								0/500
							</span>
							<button
								type="button"
								className="paca-ai-search-button"
								disabled
							>
								<svg
									xmlns="http://www.w3.org/2000/svg"
									viewBox="0 0 512 512"
								>
									<path d="M502.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l370.7 0-105.4 105.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z" />
								</svg>
							</button>
						</div>
					</div>
				</div>
				{displayAnswer && (
					<div className="paca-ai-search-answer">
						<div className="paca-ai-search-answer-skeleton">
							<div className="paca-ai-search-answer-skeleton--line" />
							<div className="paca-ai-search-answer-skeleton--line" />
							<div className="paca-ai-search-answer-skeleton--line" />
						</div>
					</div>
				)}
				{displayResults && (
					<div className="paca-ai-results">
						{Array.from({ length: resultsPerPage }).map(
							(_, i) => (
								<article
									className="paca-ai-search-result"
									key={i}
								>
									<div className="paca-ai-search-result--link">
										<div className="paca-ai-search-answer-skeleton--line" />
										<div className="paca-ai-search-answer-skeleton--line" />
									</div>
								</article>
							)
						)}
					</div>
				)}
			</div>
		</>
	);
}