/**
 * SEOvault Quick Answer block editor.
 *
 * Authors edit visible TL;DR / AEO content. This block never emits Schema.org.
 */

import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import {
	PanelBody,
	TextControl,
	TextareaControl,
	SelectControl,
	Notice,
} from '@wordpress/components';
import { useEffect } from '@wordpress/element';

const STYLE_OPTIONS = [
	{ label: __('Clean', 'seovault-ai'), value: 'clean' },
	{ label: __('Callout', 'seovault-ai'), value: 'callout' },
	{ label: __('Soft card', 'seovault-ai'), value: 'soft-card' },
	{ label: __('Bordered', 'seovault-ai'), value: 'bordered' },
	{ label: __('Minimal', 'seovault-ai'), value: 'minimal' },
	{ label: __('Editorial', 'seovault-ai'), value: 'editorial' },
];

const COLOR_OPTIONS = [
	{ label: __('Blue', 'seovault-ai'), value: 'blue' },
	{ label: __('Green', 'seovault-ai'), value: 'green' },
	{ label: __('Purple', 'seovault-ai'), value: 'purple' },
	{ label: __('Orange', 'seovault-ai'), value: 'orange' },
	{ label: __('Dark', 'seovault-ai'), value: 'dark' },
	{ label: __('Neutral', 'seovault-ai'), value: 'neutral' },
];

const DENSITY_OPTIONS = [
	{ label: __('Compact', 'seovault-ai'), value: 'compact' },
	{ label: __('Comfortable', 'seovault-ai'), value: 'comfortable' },
	{ label: __('Spacious', 'seovault-ai'), value: 'spacious' },
];

/**
 * @param {Object}   props
 * @param {Object}   props.attributes
 * @param {Function} props.setAttributes
 * @return {JSX.Element} Editor.
 */
export default function Edit({ attributes, setAttributes }) {
	const {
		label = '',
		answer = '',
		stylePreset = 'clean',
		colorPreset = 'blue',
		density = 'comfortable',
		schemaVersion = 1,
		source = '',
	} = attributes;

	useEffect(() => {
		if (schemaVersion !== 1) {
			setAttributes({ schemaVersion: 1 });
		}
	}, [schemaVersion, setAttributes]);

	const hasAnswer = String(answer || '').trim().length > 0;
	const blockProps = useBlockProps({
		className: [
			'seovault-quick-answer-block-editor',
			`seovault-quick-answer-block-editor--${stylePreset}`,
			hasAnswer ? 'is-setup-ready' : 'is-setup-incomplete',
		].join(' '),
	});

	return (
		<>
			<InspectorControls>
				<PanelBody title={__('Quick Answer settings', 'seovault-ai')} initialOpen>
					<TextControl
						label={__('Label', 'seovault-ai')}
						value={label}
						onChange={(value) => setAttributes({ label: value })}
						maxLength={80}
					/>
					<SelectControl
						label={__('Style', 'seovault-ai')}
						value={stylePreset}
						options={STYLE_OPTIONS}
						onChange={(value) => setAttributes({ stylePreset: value })}
					/>
					<SelectControl
						label={__('Color', 'seovault-ai')}
						value={colorPreset}
						options={COLOR_OPTIONS}
						onChange={(value) => setAttributes({ colorPreset: value })}
					/>
					<SelectControl
						label={__('Density', 'seovault-ai')}
						value={density}
						options={DENSITY_OPTIONS}
						onChange={(value) => setAttributes({ density: value })}
					/>
					{source ? (
						<p className="components-base-control__help">
							{__('Source (diagnostic):', 'seovault-ai')} {source}
						</p>
					) : null}
				</PanelBody>
			</InspectorControls>

			<div {...blockProps}>
				{!hasAnswer ? (
					<Notice status="warning" isDismissible={false}>
						{__(
							'Add a short answer. This block is visible content only and does not create schema.',
							'seovault-ai'
						)}
					</Notice>
				) : (
					<Notice status="info" isDismissible={false}>
						{__(
							'Visible Quick Answer — no Schema.org entity is created from this block.',
							'seovault-ai'
						)}
					</Notice>
				)}
				<p className="seovault-quick-answer-block-editor__label">
					<strong>{label || __('Quick answer', 'seovault-ai')}</strong>
				</p>
				<TextareaControl
					label={__('Answer', 'seovault-ai')}
					hideLabelFromVision
					value={answer}
					onChange={(value) => setAttributes({ answer: value })}
					rows={4}
					maxLength={600}
					placeholder={__(
						'Write a concise answer readers and answer engines can find reliably.',
						'seovault-ai'
					)}
				/>
			</div>
		</>
	);
}
