/**
 * Accessibility Page Component
 *
 * Full accessibility features settings (Readabler-style)
 *
 * @package Everyone_Accessibility_Suite
 */

import { useState, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { getAccessibilitySettings, updateAccessibilitySettings } from '../services/settings-api';
import { PageHeader, Notice, Loading, Section, Toggle, SelectField } from '../components/ui';
import useIsMounted from '../hooks/use-is-mounted';

const POSITION_OPTIONS = [
	{ value: 'top-left', label: __( 'Top Left', 'everyone-accessibility-suite' ) },
	{ value: 'top-right', label: __( 'Top Right', 'everyone-accessibility-suite' ) },
	{ value: 'bottom-left', label: __( 'Bottom Left', 'everyone-accessibility-suite' ) },
	{ value: 'bottom-right', label: __( 'Bottom Right', 'everyone-accessibility-suite' ) },
	{ value: 'left', label: __( 'Left Center', 'everyone-accessibility-suite' ) },
	{ value: 'right', label: __( 'Right Center', 'everyone-accessibility-suite' ) },
];

function AccessibilityPage() {
	const { i18n, modules = [] } = window.evasAdmin || {};
	const isMounted = useIsMounted();
	// Both settings name the same screen edge, so only one may own it. The
	// Customizer wins while it is on; showing two live controls for one value
	// is what made this confusing before.
	const customizerEnabled = modules.some((m) => m.id === 'customizer' && m.enabled);
	const [settings, setSettings] = useState({});
	const [loading, setLoading] = useState(true);
	const [saving, setSaving] = useState(false);
	const [message, setMessage] = useState({ text: '', type: '' });

	useEffect(() => {
		loadSettings();
	}, []);

	const loadSettings = async () => {
		try {
			setLoading(true);
			const data = await getAccessibilitySettings();
			if (!isMounted()) return;
			setSettings(data);
		} catch (error) {
			console.error('Error loading settings:', error);
		} finally {
			if (isMounted()) setLoading(false);
		}
	};

	const handleChange = (key, value) => {
		setSettings((prev) => ({
			...prev,
			[key]: value,
		}));
	};

	const handleSave = async (e) => {
		e.preventDefault();
		try {
			setSaving(true);
			setMessage({ text: '', type: '' });
			const response = await updateAccessibilitySettings(settings);

			if (response.success) {
				setMessage({ text: i18n?.saved || __( 'Settings saved successfully!', 'everyone-accessibility-suite' ), type: 'success' });
				setTimeout(() => setMessage({ text: '', type: '' }), 3000);
			}
		} catch (error) {
			console.error('Error saving settings:', error);
			setMessage({ text: i18n?.error || __( 'Error saving settings', 'everyone-accessibility-suite' ), type: 'error' });
		} finally {
			setSaving(false);
		}
	};

	if (loading) {
		return (
			<div className="evas-accessibility-page">
				<PageHeader
					title={i18n?.accessibility || __( 'Accessibility', 'everyone-accessibility-suite' )}
					description={__( 'Configure accessibility features for your website', 'everyone-accessibility-suite' )}
				/>
				<Loading text={i18n?.loading || __( 'Loading...', 'everyone-accessibility-suite' )} />
			</div>
		);
	}

	return (
		<div className="evas-accessibility-page">
			<PageHeader
				title={i18n?.accessibility || __( 'Accessibility', 'everyone-accessibility-suite' )}
				description={__( 'Configure accessibility features for your website', 'everyone-accessibility-suite' )}
			/>

			{message.text && (
				<Notice type={message.type}>
					<p>{message.text}</p>
				</Notice>
			)}

			<form onSubmit={handleSave} className="evas-settings-form">
				{/* Panel Settings */}
				<Section
					title={__( 'Panel Settings', 'everyone-accessibility-suite' )}
					description={__( 'Configure the accessibility panel appearance', 'everyone-accessibility-suite' )}
				>
					<Toggle
						id="enabled"
						label={__( 'Enable Accessibility Panel', 'everyone-accessibility-suite' )}
						checked={settings.enabled === true || settings.enabled === 'on'}
						onChange={(v) => handleChange('enabled', v)}
						description={__( 'Display the floating accessibility panel on the frontend', 'everyone-accessibility-suite' )}
					/>

					<SelectField
					id="panel_position"
					label={__( 'Panel Position', 'everyone-accessibility-suite' )}
					value={settings.panel_position || 'bottom-right'}
					options={POSITION_OPTIONS}
					onChange={(v) => handleChange('panel_position', v)}
					disabled={customizerEnabled}
					description={customizerEnabled
						? __( 'Controlled by Customizer → Open Button → Position while that module is enabled.', 'everyone-accessibility-suite' )
						: undefined}
				/>
				</Section>

				{/* Accessibility Profiles */}
				<Section
					title={__( 'Accessibility Profiles', 'everyone-accessibility-suite' )}
					description={__( 'Enable pre-configured accessibility modes', 'everyone-accessibility-suite' )}
					collapsible
				>
					<Toggle
						id="accessibility_profiles_heading"
						label={__( 'Show Section Heading', 'everyone-accessibility-suite' )}
						checked={settings.accessibility_profiles_heading === 'on'}
						onChange={(v) => handleChange('accessibility_profiles_heading', v ? 'on' : 'off')}
					/>
					<div className="evas-toggle-grid">
						<Toggle
							id="profile_epilepsy"
							label={__( 'Epilepsy Safe Mode', 'everyone-accessibility-suite' )}
							checked={settings.profile_epilepsy === 'on'}
							onChange={(v) => handleChange('profile_epilepsy', v ? 'on' : 'off')}
							description={__( 'Eliminates the risk of seizures from flashing or blinking animations and risky color combinations', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="profile_visually_impaired"
							label={__( 'Visually Impaired Mode', 'everyone-accessibility-suite' )}
							checked={settings.profile_visually_impaired === 'on'}
							onChange={(v) => handleChange('profile_visually_impaired', v ? 'on' : 'off')}
							description={__( 'Adjusts the website for users with visual impairments such as Degrading Eyesight, Tunnel Vision, Cataract, Glaucoma', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="profile_cognitive_disability"
							label={__( 'Cognitive Disability Mode', 'everyone-accessibility-suite' )}
							checked={settings.profile_cognitive_disability === 'on'}
							onChange={(v) => handleChange('profile_cognitive_disability', v ? 'on' : 'off')}
							description={__( 'Helps users with cognitive impairments such as Dyslexia, Autism, CVA focus on essential elements more easily', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="profile_adhd_friendly"
							label={__( 'ADHD Friendly Mode', 'everyone-accessibility-suite' )}
							checked={settings.profile_adhd_friendly === 'on'}
							onChange={(v) => handleChange('profile_adhd_friendly', v ? 'on' : 'off')}
							description={__( 'Helps users with ADHD and Neurodevelopmental disorders read and browse more easily while reducing distractions', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="profile_blind_users"
							label={__( 'Blindness Mode', 'everyone-accessibility-suite' )}
							checked={settings.profile_blind_users === 'on'}
							onChange={(v) => handleChange('profile_blind_users', v ? 'on' : 'off')}
							description={__( 'Configures the website to be compatible with screen-readers such as JAWS, NVDA, VoiceOver, and TalkBack', 'everyone-accessibility-suite' )}
						/>
					</div>
				</Section>

				{/* Readable Experience */}
				<Section
					title={__( 'Readable Experience', 'everyone-accessibility-suite' )}
					description={__( 'Tools enable users to adjust how the content is displayed for better readability', 'everyone-accessibility-suite' )}
					collapsible
				>
					<Toggle
						id="readable_experience_heading"
						label={__( 'Show Section Heading', 'everyone-accessibility-suite' )}
						checked={settings.readable_experience_heading === 'on'}
						onChange={(v) => handleChange('readable_experience_heading', v ? 'on' : 'off')}
					/>
					<div className="evas-toggle-grid">
						<Toggle
							id="content_scaling"
							label={__( 'Content Scaling', 'everyone-accessibility-suite' )}
							checked={settings.content_scaling === 'on'}
							onChange={(v) => handleChange('content_scaling', v ? 'on' : 'off')}
							description={__( 'Allows scaling the website content', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="readable_font"
							label={__( 'Readable Font', 'everyone-accessibility-suite' )}
							checked={settings.readable_font === 'on'}
							onChange={(v) => handleChange('readable_font', v ? 'on' : 'off')}
							description={__( 'Converts the content font to a more readable one', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="dyslexia_font"
							label={__( 'Dyslexia Friendly Font', 'everyone-accessibility-suite' )}
							checked={settings.dyslexia_font === 'on'}
							onChange={(v) => handleChange('dyslexia_font', v ? 'on' : 'off')}
							description={__( 'Adapts the font to be more convenient for Dyslexic users', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="text_magnifier"
							label={__( 'Text Magnifier', 'everyone-accessibility-suite' )}
							checked={settings.text_magnifier === 'on'}
							onChange={(v) => handleChange('text_magnifier', v ? 'on' : 'off')}
							description={__( 'Display specific text in the magnifier on hover', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="highlight_titles"
							label={__( 'Highlight Titles', 'everyone-accessibility-suite' )}
							checked={settings.highlight_titles === 'on'}
							onChange={(v) => handleChange('highlight_titles', v ? 'on' : 'off')}
							description={__( 'Highlights the titles with borders for all site content', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="highlight_links"
							label={__( 'Highlight Links', 'everyone-accessibility-suite' )}
							checked={settings.highlight_links === 'on'}
							onChange={(v) => handleChange('highlight_links', v ? 'on' : 'off')}
							description={__( 'Highlights the links with borders for all site content', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="font_sizing"
							label={__( 'Font Sizing', 'everyone-accessibility-suite' )}
							checked={settings.font_sizing === 'on'}
							onChange={(v) => handleChange('font_sizing', v ? 'on' : 'off')}
							description={__( 'Change the text font size as a percentage', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="line_height"
							label={__( 'Line Height', 'everyone-accessibility-suite' )}
							checked={settings.line_height === 'on'}
							onChange={(v) => handleChange('line_height', v ? 'on' : 'off')}
							description={__( 'Change the font line-height as a percentage', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="letter_spacing"
							label={__( 'Letter Spacing', 'everyone-accessibility-suite' )}
							checked={settings.letter_spacing === 'on'}
							onChange={(v) => handleChange('letter_spacing', v ? 'on' : 'off')}
							description={__( 'Change the text letter spacing as a percentage', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="align_left"
							label={__( 'Align Left', 'everyone-accessibility-suite' )}
							checked={settings.align_left === 'on'}
							onChange={(v) => handleChange('align_left', v ? 'on' : 'off')}
							description={__( 'Aligns the website content to the left', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="align_center"
							label={__( 'Align Center', 'everyone-accessibility-suite' )}
							checked={settings.align_center === 'on'}
							onChange={(v) => handleChange('align_center', v ? 'on' : 'off')}
							description={__( 'Aligns the website content to the center', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="align_right"
							label={__( 'Align Right', 'everyone-accessibility-suite' )}
							checked={settings.align_right === 'on'}
							onChange={(v) => handleChange('align_right', v ? 'on' : 'off')}
							description={__( 'Aligns the website content to the right', 'everyone-accessibility-suite' )}
						/>
					</div>
				</Section>

				{/* Visually Pleasing Experience */}
				<Section
					title={__( 'Visually Pleasing Experience', 'everyone-accessibility-suite' )}
					description={__( 'Tools relating to the colorization of your website', 'everyone-accessibility-suite' )}
					collapsible
				>
					<Toggle
						id="visually_pleasing_heading"
						label={__( 'Show Section Heading', 'everyone-accessibility-suite' )}
						checked={settings.visually_pleasing_heading === 'on'}
						onChange={(v) => handleChange('visually_pleasing_heading', v ? 'on' : 'off')}
					/>
					<div className="evas-toggle-grid">
						<Toggle
							id="dark_contrast"
							label={__( 'Dark Contrast', 'everyone-accessibility-suite' )}
							checked={settings.dark_contrast === 'on'}
							onChange={(v) => handleChange('dark_contrast', v ? 'on' : 'off')}
							description={__( 'Sets a dark contrast for the content of the entire site', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="light_contrast"
							label={__( 'Light Contrast', 'everyone-accessibility-suite' )}
							checked={settings.light_contrast === 'on'}
							onChange={(v) => handleChange('light_contrast', v ? 'on' : 'off')}
							description={__( 'Sets a light contrast for the content of the entire site', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="monochrome"
							label={__( 'Monochrome', 'everyone-accessibility-suite' )}
							checked={settings.monochrome === 'on'}
							onChange={(v) => handleChange('monochrome', v ? 'on' : 'off')}
							description={__( 'Applies a monochrome color scheme for the entire site', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="high_saturation"
							label={__( 'High Saturation', 'everyone-accessibility-suite' )}
							checked={settings.high_saturation === 'on'}
							onChange={(v) => handleChange('high_saturation', v ? 'on' : 'off')}
							description={__( 'Adds color saturation for the entire site content', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="high_contrast"
							label={__( 'High Contrast', 'everyone-accessibility-suite' )}
							checked={settings.high_contrast === 'on'}
							onChange={(v) => handleChange('high_contrast', v ? 'on' : 'off')}
							description={__( 'Increases color contrast for the entire site content', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="low_saturation"
							label={__( 'Low Saturation', 'everyone-accessibility-suite' )}
							checked={settings.low_saturation === 'on'}
							onChange={(v) => handleChange('low_saturation', v ? 'on' : 'off')}
							description={__( 'Minimizes color saturation for the entire site content', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="text_colors"
							label={__( 'Adjust Text Colors', 'everyone-accessibility-suite' )}
							checked={settings.text_colors === 'on'}
							onChange={(v) => handleChange('text_colors', v ? 'on' : 'off')}
							description={__( 'Display a color picker to adjust the text color of website content', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="title_colors"
							label={__( 'Adjust Title Colors', 'everyone-accessibility-suite' )}
							checked={settings.title_colors === 'on'}
							onChange={(v) => handleChange('title_colors', v ? 'on' : 'off')}
							description={__( 'Display a color picker to adjust the title color of website content', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="background_colors"
							label={__( 'Adjust Background Colors', 'everyone-accessibility-suite' )}
							checked={settings.background_colors === 'on'}
							onChange={(v) => handleChange('background_colors', v ? 'on' : 'off')}
							description={__( 'Display a color picker to adjust the background color of website content', 'everyone-accessibility-suite' )}
						/>
					</div>
				</Section>

				{/* Easy Orientation */}
				<Section
					title={__( 'Easy Orientation', 'everyone-accessibility-suite' )}
					description={__( 'Tools for people with visual impairments, cognitive disabilities, or motor impairments to orient better at the site', 'everyone-accessibility-suite' )}
					collapsible
				>
					<Toggle
						id="easy_orientation_heading"
						label={__( 'Show Section Heading', 'everyone-accessibility-suite' )}
						checked={settings.easy_orientation_heading === 'on'}
						onChange={(v) => handleChange('easy_orientation_heading', v ? 'on' : 'off')}
					/>
					<div className="evas-toggle-grid">
						<Toggle
							id="mute_sounds"
							label={__( 'Mute Sounds', 'everyone-accessibility-suite' )}
							checked={settings.mute_sounds === 'on'}
							onChange={(v) => handleChange('mute_sounds', v ? 'on' : 'off')}
							description={__( 'Mutes all sounds on the site', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="hide_images"
							label={__( 'Hide Images', 'everyone-accessibility-suite' )}
							checked={settings.hide_images === 'on'}
							onChange={(v) => handleChange('hide_images', v ? 'on' : 'off')}
							description={__( 'Hides all images on the site', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="hide_emoji"
							label={__( 'Hide Emoji', 'everyone-accessibility-suite' )}
							checked={settings.hide_emoji === 'on'}
							onChange={(v) => handleChange('hide_emoji', v ? 'on' : 'off')}
							description={__( 'Hides all emojis on the site', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="reading_guide"
							label={__( 'Reading Guide', 'everyone-accessibility-suite' )}
							checked={settings.reading_guide === 'on'}
							onChange={(v) => handleChange('reading_guide', v ? 'on' : 'off')}
							description={__( 'Displays a guideline that follows the cursor and helps concentrate on specific text', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="stop_animations"
							label={__( 'Stop Animations', 'everyone-accessibility-suite' )}
							checked={settings.stop_animations === 'on'}
							onChange={(v) => handleChange('stop_animations', v ? 'on' : 'off')}
							description={__( 'Allows disabling animations on the site', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="reading_mask"
							label={__( 'Reading Mask', 'everyone-accessibility-suite' )}
							checked={settings.reading_mask === 'on'}
							onChange={(v) => handleChange('reading_mask', v ? 'on' : 'off')}
							description={__( 'Creates a horizontal mask of a certain height that follows the cursor to focus on specific content', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="highlight_hover"
							label={__( 'Highlight Hover', 'everyone-accessibility-suite' )}
							checked={settings.highlight_hover === 'on'}
							onChange={(v) => handleChange('highlight_hover', v ? 'on' : 'off')}
							description={__( 'Highlights the hover area by borders', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="highlight_focus"
							label={__( 'Highlight Focus', 'everyone-accessibility-suite' )}
							checked={settings.highlight_focus === 'on'}
							onChange={(v) => handleChange('highlight_focus', v ? 'on' : 'off')}
							description={__( 'Highlights the focus area by borders', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="big_black_cursor"
							label={__( 'Big Dark Cursor', 'everyone-accessibility-suite' )}
							checked={settings.big_black_cursor === 'on'}
							onChange={(v) => handleChange('big_black_cursor', v ? 'on' : 'off')}
							description={__( 'Enables a large black cursor instead of the regular one', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="big_white_cursor"
							label={__( 'Big Light Cursor', 'everyone-accessibility-suite' )}
							checked={settings.big_white_cursor === 'on'}
							onChange={(v) => handleChange('big_white_cursor', v ? 'on' : 'off')}
							description={__( 'Enables a large white cursor instead of the regular one', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="cognitive_reading"
							label={__( 'Cognitive Reading', 'everyone-accessibility-suite' )}
							checked={settings.cognitive_reading === 'on'}
							onChange={(v) => handleChange('cognitive_reading', v ? 'on' : 'off')}
							description={__( 'Turn on the cognitive reading mode for quick understanding of text based on word recognition by the brain', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="keyboard_navigation"
							label={__( 'Keyboard Navigation', 'everyone-accessibility-suite' )}
							checked={settings.keyboard_navigation === 'on'}
							onChange={(v) => handleChange('keyboard_navigation', v ? 'on' : 'off')}
							description={__( 'Enables a keyboard navigation feature', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="useful_links"
							label={__( 'Useful Links Navigator', 'everyone-accessibility-suite' )}
							checked={settings.useful_links === 'on'}
							onChange={(v) => handleChange('useful_links', v ? 'on' : 'off')}
							description={__( 'Displays a select list of useful site links to get the necessary info without site research', 'everyone-accessibility-suite' )}
						/>
					</div>
				</Section>

				{/* Module Features */}
				<Section
					title={__( 'Module Features', 'everyone-accessibility-suite' )}
					description={__( 'Features provided by additional modules', 'everyone-accessibility-suite' )}
					collapsible
				>
					<div className="evas-toggle-grid">
						<Toggle
							id="text_to_speech"
							label={__( 'Text to Speech', 'everyone-accessibility-suite' )}
							checked={settings.text_to_speech === 'on'}
							onChange={(v) => handleChange('text_to_speech', v ? 'on' : 'off')}
							description={__( 'Enables Text-to-Speech feature. Audio is generated when the user highlights text. Requires Google API key', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="voice_navigation"
							label={__( 'Voice Navigation', 'everyone-accessibility-suite' )}
							checked={settings.voice_navigation === 'on'}
							onChange={(v) => handleChange('voice_navigation', v ? 'on' : 'off')}
							description={__( 'The user can navigate through the site using voice commands', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="virtual_keyboard"
							label={__( 'Virtual Keyboard', 'everyone-accessibility-suite' )}
							checked={settings.virtual_keyboard === 'on'}
							onChange={(v) => handleChange('virtual_keyboard', v ? 'on' : 'off')}
							description={__( 'Enables the virtual keyboard when any one of the input fields is active', 'everyone-accessibility-suite' )}
						/>
						<Toggle
							id="online_dictionary"
							label={__( 'Online Dictionary', 'everyone-accessibility-suite' )}
							checked={settings.online_dictionary === 'on'}
							onChange={(v) => handleChange('online_dictionary', v ? 'on' : 'off')}
							description={__( 'Allows searching for phrases, abbreviations and concepts for Cognitive Disorders', 'everyone-accessibility-suite' )}
						/>
					</div>
				</Section>

				{/* Online Dictionary Settings */}
				<Section
					title={__( 'Online Dictionary', 'everyone-accessibility-suite' )}
					description={__( 'Wikipedia search settings', 'everyone-accessibility-suite' )}
					collapsible
				>
					<Toggle
						id="online_dictionary_heading"
						label={__( 'Show Section Heading', 'everyone-accessibility-suite' )}
						checked={settings.online_dictionary_heading === 'on'}
						onChange={(v) => handleChange('online_dictionary_heading', v ? 'on' : 'off')}
					/>
				</Section>

				<div className="evas-form-actions">
					<button
						type="submit"
						className="button button-primary"
						disabled={saving}
					>
						{saving ? i18n?.saving || __( 'Saving...', 'everyone-accessibility-suite' ) : i18n?.save || __( 'Save Changes', 'everyone-accessibility-suite' )}
					</button>
				</div>
			</form>
		</div>
	);
}

export default AccessibilityPage;