/**
 * Module Settings Page Component
 *
 * Universal settings page for modules
 *
 * @package Everyone_Accessibility_Suite
 */

import { useState, useEffect } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import { useLocation } from 'react-router-dom';
import { settingsApi } from '../services/settings-api';
import { PageHeader, Notice, Loading, Toggle } from '../components/ui';
import useIsMounted from '../hooks/use-is-mounted';

function ModuleSettingsPage() {
	const location = useLocation();
	const isMounted = useIsMounted();
	const [module, setModule] = useState(null);
	const [settings, setSettings] = useState({});
	const [loading, setLoading] = useState(true);
	const [saving, setSaving] = useState(false);
	const [error, setError] = useState(null);
	const [success, setSuccess] = useState(false);

	const { routes = [] } = window.evasAdmin || {};

	// Find current route config
	const currentRoute = routes.find(r => r.path === location.pathname);
	const moduleId = currentRoute?.module;

	useEffect(() => {
		if (moduleId) {
			loadModuleSettings();
		}
	}, [moduleId]);

	const loadModuleSettings = async () => {
		setLoading(true);
		setError(null);

		try {
			// Load module info
			const modulesResponse = await settingsApi.getModules();
			if (!isMounted()) return;
			const moduleData = modulesResponse.modules?.find(m => m.id === moduleId);
			setModule(moduleData);

			// Load module-specific settings
			const settingsResponse = await settingsApi.getSettings();
			if (!isMounted()) return;
			setSettings(settingsResponse.settings?.[moduleId] || {});
		} catch (err) {
			if (!isMounted()) return;
			setError(err.message || __( 'Failed to load settings', 'everyone-accessibility-suite' ));
		} finally {
			if (isMounted()) setLoading(false);
		}
	};

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

	const handleSave = async () => {
		setSaving(true);
		setError(null);
		setSuccess(false);

		try {
			await settingsApi.updateSettings({
				[moduleId]: settings
			});
			setSuccess(true);
		} catch (err) {
			setError(err.message || __( 'Failed to save settings', 'everyone-accessibility-suite' ));
		} finally {
			setSaving(false);
		}
	};

	if (loading) {
		return (
			<div className="evas-module-settings-page">
				<Loading text={__( 'Loading settings...', 'everyone-accessibility-suite' )} />
			</div>
		);
	}

	if (!currentRoute) {
		return (
			<div className="evas-module-settings-page">
				<Notice type="error">
					<p>{__( 'Module settings page not found', 'everyone-accessibility-suite' )}</p>
				</Notice>
			</div>
		);
	}

	return (
		<div className="evas-module-settings-page">
			<PageHeader title={currentRoute.title} description={currentRoute.description} />

			{error && (
				<Notice type="error">
					<p>{error}</p>
				</Notice>
			)}

			{success && (
				<Notice type="success">
					<p>{__( 'Settings saved successfully!', 'everyone-accessibility-suite' )}</p>
				</Notice>
			)}

			<div className="evas-module-settings__content">
				{module ? (
					<>
						<div className="evas-module-settings__info">
							<div className="evas-module-settings__status">
								<span className="evas-label">{__( 'Status:', 'everyone-accessibility-suite' )}</span>
								<span className={`evas-badge ${module.enabled ? 'evas-badge--success' : 'evas-badge--warning'}`}>
									{module.enabled ? __( 'Active', 'everyone-accessibility-suite' ) : __( 'Inactive', 'everyone-accessibility-suite' )}
								</span>
							</div>
							{module.version && (
								<div className="evas-module-settings__version">
									<span className="evas-label">{__( 'Version:', 'everyone-accessibility-suite' )}</span>
									<span>{module.version}</span>
								</div>
							)}
						</div>

						<div className="evas-module-settings__form">
							{renderModuleSettings(moduleId, settings, handleSettingChange)}
						</div>

						<div className="evas-module-settings__actions">
							<button
								type="button"
								className="button button-primary"
								onClick={handleSave}
								disabled={saving}
							>
								{saving ? __( 'Saving...', 'everyone-accessibility-suite' ) : __( 'Save Settings', 'everyone-accessibility-suite' )}
							</button>
						</div>
					</>
				) : (
					<div className="evas-module-settings__empty">
						<p>{__( 'No settings available for this module.', 'everyone-accessibility-suite' )}</p>
						<p>{__( 'The module may need to be activated first from the Components page.', 'everyone-accessibility-suite' )}</p>
					</div>
				)}
			</div>
		</div>
	);
}

/**
 * Render module-specific settings
 */
function renderModuleSettings(moduleId, settings, onChange) {
	switch (moduleId) {
		case 'text_to_speech':
			return (
				<div className="evas-settings-section">
					<h3>{__( 'Text-to-Speech Settings', 'everyone-accessibility-suite' )}</h3>

					<div className="evas-field">
						<label htmlFor="tts-api-key">{__( 'Google Cloud API Key', 'everyone-accessibility-suite' )}</label>
						<input
							type="password"
							id="tts-api-key"
							value={settings.api_key || ''}
							onChange={(e) => onChange('api_key', e.target.value)}
							placeholder={__( 'Enter your Google Cloud API key', 'everyone-accessibility-suite' )}
							className="regular-text"
						/>
						<p className="evas-field-description">
							{__( 'Required for text-to-speech functionality. Get your key from Google Cloud Console.', 'everyone-accessibility-suite' )}
						</p>
					</div>

					<div className="evas-field">
						<label htmlFor="tts-language">{__( 'Default Language', 'everyone-accessibility-suite' )}</label>
						<select
							id="tts-language"
							value={settings.language || 'en-US'}
							onChange={(e) => onChange('language', e.target.value)}
						>
							<option value="en-US">{__( 'English (US)', 'everyone-accessibility-suite' )}</option>
							<option value="en-GB">{__( 'English (UK)', 'everyone-accessibility-suite' )}</option>
							<option value="de-DE">{__( 'German', 'everyone-accessibility-suite' )}</option>
							<option value="fr-FR">{__( 'French', 'everyone-accessibility-suite' )}</option>
							<option value="es-ES">{__( 'Spanish', 'everyone-accessibility-suite' )}</option>
							<option value="it-IT">{__( 'Italian', 'everyone-accessibility-suite' )}</option>
							<option value="ru-RU">{__( 'Russian', 'everyone-accessibility-suite' )}</option>
						</select>
					</div>

					<div className="evas-field">
						<label htmlFor="tts-rate">{__( 'Speaking Rate', 'everyone-accessibility-suite' )}</label>
						<input
							type="range"
							id="tts-rate"
							min="0.5"
							max="2"
							step="0.1"
							value={settings.speaking_rate || 1}
							onChange={(e) => onChange('speaking_rate', parseFloat(e.target.value))}
						/>
						<span className="evas-field__value">{settings.speaking_rate || 1}x</span>
					</div>

					<Toggle
						id="cache-enabled"
						label={__( 'Enable audio caching', 'everyone-accessibility-suite' )}
						description={__( 'Cache generated audio to reduce API calls.', 'everyone-accessibility-suite' )}
						checked={settings.cache_enabled !== false}
						onChange={(v) => onChange('cache_enabled', v)}
					/>
				</div>
			);

		case 'voice_navigation':
			return (
				<div className="evas-settings-section">
					<h3>{__( 'Voice Navigation Settings', 'everyone-accessibility-suite' )}</h3>

					<div className="evas-field">
						<label htmlFor="vn-language">{__( 'Recognition Language', 'everyone-accessibility-suite' )}</label>
						<select
							id="vn-language"
							value={settings.language || 'en-US'}
							onChange={(e) => onChange('language', e.target.value)}
						>
							<option value="en-US">{__( 'English (US)', 'everyone-accessibility-suite' )}</option>
							<option value="en-GB">{__( 'English (UK)', 'everyone-accessibility-suite' )}</option>
							<option value="de-DE">{__( 'German', 'everyone-accessibility-suite' )}</option>
							<option value="fr-FR">{__( 'French', 'everyone-accessibility-suite' )}</option>
							<option value="es-ES">{__( 'Spanish', 'everyone-accessibility-suite' )}</option>
							<option value="ru-RU">{__( 'Russian', 'everyone-accessibility-suite' )}</option>
						</select>
					</div>

					<Toggle
						id="continuous"
						label={__( 'Continuous listening mode', 'everyone-accessibility-suite' )}
						checked={settings.continuous !== false}
						onChange={(v) => onChange('continuous', v)}
					/>

					<Toggle
						id="show-indicator"
						label={__( 'Show listening indicator', 'everyone-accessibility-suite' )}
						checked={settings.show_indicator !== false}
						onChange={(v) => onChange('show_indicator', v)}
					/>

					<Toggle
						id="feedback-sound"
						label={__( 'Play feedback sounds', 'everyone-accessibility-suite' )}
						checked={settings.feedback_sound !== false}
						onChange={(v) => onChange('feedback_sound', v)}
					/>
				</div>
			);

		case 'virtual_keyboard':
			return (
				<div className="evas-settings-section">
					<h3>{__( 'Virtual Keyboard Settings', 'everyone-accessibility-suite' )}</h3>

					<div className="evas-field">
						<label htmlFor="vk-layout">{__( 'Default Layout', 'everyone-accessibility-suite' )}</label>
						<select
							id="vk-layout"
							value={settings.default_layout || 'qwerty'}
							onChange={(e) => onChange('default_layout', e.target.value)}
						>
							<option value="qwerty">{__( 'QWERTY (English)', 'everyone-accessibility-suite' )}</option>
							<option value="qwertz">{__( 'QWERTZ (German)', 'everyone-accessibility-suite' )}</option>
							<option value="azerty">{__( 'AZERTY (French)', 'everyone-accessibility-suite' )}</option>
							<option value="russian">{__( 'Russian', 'everyone-accessibility-suite' )}</option>
							<option value="spanish">{__( 'Spanish', 'everyone-accessibility-suite' )}</option>
						</select>
					</div>

					<div className="evas-field">
						<label htmlFor="vk-theme">{__( 'Theme', 'everyone-accessibility-suite' )}</label>
						<select
							id="vk-theme"
							value={settings.theme || 'default'}
							onChange={(e) => onChange('theme', e.target.value)}
						>
							<option value="default">{__( 'Default', 'everyone-accessibility-suite' )}</option>
							<option value="dark">{__( 'Dark', 'everyone-accessibility-suite' )}</option>
							<option value="light">{__( 'Light', 'everyone-accessibility-suite' )}</option>
							<option value="minimal">{__( 'Minimal', 'everyone-accessibility-suite' )}</option>
						</select>
					</div>

					<Toggle
						id="show-on-focus"
						label={__( 'Show keyboard on input focus', 'everyone-accessibility-suite' )}
						checked={settings.show_on_focus !== false}
						onChange={(v) => onChange('show_on_focus', v)}
					/>

					<Toggle
						id="sound-enabled"
						label={__( 'Enable key press sounds', 'everyone-accessibility-suite' )}
						checked={settings.sound_enabled !== false}
						onChange={(v) => onChange('sound_enabled', v)}
					/>
				</div>
			);

		// accessibility_analyzer has no case here: /analyzer routes to its
		// own AnalyzerPage (see App.jsx), so this switch never sees it.

		// accessibility_extras is handled by its own StatementPage (see
		// App.jsx). This screen wrote to evas_settings[moduleId], which the
		// statement generator never read - the form silently saved nothing.

		case 'accessibility_features':
			return (
				<div className="evas-settings-section">
					<h3>{__( 'Accessibility Features Configuration', 'everyone-accessibility-suite' )}</h3>
					<p className="evas-field-description">
						{__( 'Configure which accessibility features are available in the frontend panel.', 'everyone-accessibility-suite' )}
					</p>

					<div className="evas-features-grid">
						{['profiles', 'typography', 'colors', 'media', 'tools'].map(group => (
							<div key={group} className="evas-features-group">
								<h4>{group.charAt(0).toUpperCase() + group.slice(1)}</h4>
								<Toggle
									id={`${group}-enabled`}
									label={sprintf( /* translators: %s: feature group name, e.g. "Profiles", "Typography" */ __( 'Enable %s features', 'everyone-accessibility-suite' ), group )}
									checked={settings[`${group}_enabled`] !== false}
									onChange={(v) => onChange(`${group}_enabled`, v)}
								/>
							</div>
						))}
					</div>
				</div>
			);

		default:
			return (
				<div className="evas-settings-section">
					<p>{__( 'Settings for this module are not yet configured.', 'everyone-accessibility-suite' )}</p>
				</div>
			);
	}
}

export default ModuleSettingsPage;