import React, { useEffect, useId, useRef, useState } from 'react';
import { __ } from '@wordpress/i18n';
import { Check, SquarePen } from 'lucide-react';
import { DEFAULT_PLUGIN_NOTIFICATION_SETTINGS } from '../lib/plugin-notifications.js';
import '../../styles/plugin-notifications.css';

const PluginNotificationPreferences = ( {
	question,
	description,
	value,
	onChange,
	error,
	disabled = false,
	onEditingChange,
} ) => {
	const settings = {
		...DEFAULT_PLUGIN_NOTIFICATION_SETTINGS,
		...value,
	};
	const baseId = useId();
	const defaultName = String( question.defaultName || '' ).trim();
	const defaultEmail = String( question.defaultEmail || '' ).trim();
	const effectiveName = String( settings.name || defaultName ).trim();
	const effectiveEmail = String( settings.email || defaultEmail ).trim();
	const [ isEditing, setIsEditing ] = useState( false );
	const [ draftName, setDraftName ] = useState( effectiveName );
	const [ draftEmail, setDraftEmail ] = useState( effectiveEmail );
	const [ draftError, setDraftError ] = useState( '' );
	const nameInputRef = useRef( null );

	useEffect( () => {
		onEditingChange?.( isEditing );
		return () => onEditingChange?.( false );
	}, [ isEditing, onEditingChange ] );

	useEffect( () => {
		if ( ! isEditing ) {
			setDraftName( effectiveName );
			setDraftEmail( effectiveEmail );
		}
	}, [ effectiveEmail, effectiveName, isEditing ] );

	useEffect( () => {
		if ( isEditing ) {
			nameInputRef.current?.focus();
			nameInputRef.current?.select();
		}
	}, [ isEditing ] );

	const startEditing = () => {
		setDraftName( effectiveName );
		setDraftEmail( effectiveEmail );
		setDraftError( '' );
		setIsEditing( true );
	};

	const saveContact = () => {
		if ( disabled ) return;
		const normalizedName = draftName.trim();
		const normalizedEmail = draftEmail.trim();
		const nextName =
			! normalizedName || normalizedName === defaultName
				? ''
				: normalizedName;
		const matchesDefault =
			normalizedEmail.toLowerCase() === defaultEmail.toLowerCase();
		const nextEmail = matchesDefault ? '' : normalizedEmail;
		const validationMessage = question.validate?.( {
			...settings,
			name: nextName,
			email: nextEmail,
		} );

		if ( validationMessage ) {
			setDraftError( validationMessage );
			return;
		}

		onChange( { ...settings, name: nextName, email: nextEmail } );
		setDraftError( '' );
		setIsEditing( false );
	};

	const handleContactKeyDown = ( event ) => {
		if ( event.key === 'Enter' ) {
			event.preventDefault();
			saveContact();
			return;
		}

		if ( event.key === 'Escape' ) {
			event.preventDefault();
			setDraftName( effectiveName );
			setDraftEmail( effectiveEmail );
			setDraftError( '' );
			setIsEditing( false );
		}
	};

	const toggleNotification = ( optionValue ) => {
		if ( disabled ) return;
		if (
			question.options?.some(
				( option ) => option.value === optionValue && option.required
			)
		) {
			return;
		}
		onChange( {
			...settings,
			[ optionValue ]: ! Boolean( settings[ optionValue ] ),
		} );
	};

	const label = (
		<span className="arrayfunnel-plugin-notifications__title">
			<span>{ question.label }</span>
			{ isEditing ? (
				<>
					<input
						ref={ nameInputRef }
						type="text"
						disabled={ disabled }
						className="arrayfunnel-plugin-notifications__name-input"
						value={ draftName }
						size={ Math.min(
							Math.max( draftName.length, 12 ),
							40
						) }
						maxLength={ 120 }
						aria-label={ __(
							'Notification recipient name',
							'arrayfunnel'
						) }
						onChange={ ( event ) => {
							setDraftName( event.target.value );
							setDraftError( '' );
						} }
						onKeyDown={ handleContactKeyDown }
					/>
					<span
						aria-hidden="true"
						className="arrayfunnel-plugin-notifications__separator"
					>
						—
					</span>
					<input
						type="email"
						disabled={ disabled }
						className="arrayfunnel-plugin-notifications__email-input"
						value={ draftEmail }
						size={ Math.min(
							Math.max( draftEmail.length, 20 ),
							40
						) }
						maxLength={ 254 }
						aria-label={ __(
							'Notification email address',
							'arrayfunnel'
						) }
						aria-invalid={
							draftError || error ? 'true' : undefined
						}
						aria-describedby={
							draftError || error
								? `${ baseId }-error`
								: undefined
						}
						onChange={ ( event ) => {
							setDraftEmail( event.target.value );
							setDraftError( '' );
						} }
						onKeyDown={ handleContactKeyDown }
					/>
				</>
			) : (
				<>
					<span className="arrayfunnel-plugin-notifications__name">
						{ effectiveName ||
							__( 'WordPress administrator', 'arrayfunnel' ) }
					</span>
					<span
						aria-hidden="true"
						className="arrayfunnel-plugin-notifications__separator"
					>
						—
					</span>
					<span className="arrayfunnel-plugin-notifications__email">
						{ effectiveEmail ||
							__( 'WordPress admin email', 'arrayfunnel' ) }
					</span>
				</>
			) }
			<button
				type="button"
				className="arrayfunnel-plugin-notifications__email-action"
				aria-label={
					isEditing
						? __( 'Save notification recipient', 'arrayfunnel' )
						: __( 'Edit notification recipient', 'arrayfunnel' )
				}
				disabled={ disabled }
				onClick={ isEditing ? saveContact : startEditing }
			>
				{ isEditing ? (
					<Check size={ 17 } aria-hidden="true" />
				) : (
					<SquarePen size={ 16 } aria-hidden="true" />
				) }
			</button>
		</span>
	);

	return (
		<div
			className="arrayfunnel-plugin-notifications"
			role="group"
			aria-labelledby={ `${ baseId }-label` }
			aria-describedby={
				draftError || error ? `${ baseId }-error` : undefined
			}
		>
			<div
				id={ `${ baseId }-label` }
				className="arrayfunnel-plugin-notifications__label"
			>
				{ label }
			</div>
			{ description && (
				<p className="arrayfunnel-plugin-notifications__description">
					{ description }
				</p>
			) }
			<fieldset
				className="arrayfunnel-plugin-notifications__options"
				disabled={ disabled }
			>
				{ ( question.options || [] ).map( ( option ) => (
					<div
						key={ option.value }
						className="arrayfunnel-plugin-notifications__option"
					>
						<label
							className="arrayfunnel-plugin-notifications__choice"
							htmlFor={ `${ baseId }-${ option.value }` }
						>
							<input
								id={ `${ baseId }-${ option.value }` }
								type="checkbox"
								value={ option.value }
								checked={ Boolean( settings[ option.value ] ) }
								disabled={ Boolean( option.required ) }
								required={ Boolean( option.required ) }
								onChange={ () =>
									toggleNotification( option.value )
								}
							/>
							<span className="arrayfunnel-plugin-notifications__copy">
								<span className="arrayfunnel-plugin-notifications__choice-label">
									{ option.label }
								</span>
							</span>
						</label>
					</div>
				) ) }
			</fieldset>
			{ ( draftError || error ) && (
				<div
					id={ `${ baseId }-error` }
					className="arrayfunnel-plugin-notifications__error"
					role="alert"
				>
					{ draftError || error }
				</div>
			) }
		</div>
	);
};

export default PluginNotificationPreferences;