/**
 * Settings Page Component
 *
 * General plugin settings
 *
 * @package Everyone_Accessibility_Suite
 */

import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { updateSettings } from '../services/settings-api';
import { PageHeader, Notice, Section, Field, SelectField, Toggle } from '../components/ui';

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: __( 'Middle Left', 'everyone-accessibility-suite' ) },
	{ value: 'right', label: __( 'Middle Right', 'everyone-accessibility-suite' ) },
];

const THEME_OPTIONS = [
	{ value: 'light', label: __( 'Light', 'everyone-accessibility-suite' ) },
	{ value: 'dark', label: __( 'Dark', 'everyone-accessibility-suite' ) },
	{ value: 'high-contrast', label: __( 'High Contrast', 'everyone-accessibility-suite' ) },
];

function SettingsPage() {
	const { i18n } = window.evasAdmin || {};
	const [settings, setSettings] = useState(window.evasAdmin?.settings || {});
	const [saving, setSaving] = useState(false);
	const [message, setMessage] = useState({ text: '', type: '' });

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

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

			const response = await updateSettings(settings);

			if (response.success) {
				setMessage({
					text: response.message || 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);
		}
	};

	return (
		<div className="evas-settings-page">
			<PageHeader
				title={i18n?.settings || __( 'Settings', 'everyone-accessibility-suite' )}
				description={__( 'Configure general plugin settings', 'everyone-accessibility-suite' )}
			/>

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

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

					<SelectField
						id="panel_position"
						label={__( 'Panel Position', 'everyone-accessibility-suite' )}
						description={__( 'Choose where the panel trigger button appears', 'everyone-accessibility-suite' )}
						value={settings.panel_position || 'bottom-right'}
						options={POSITION_OPTIONS}
						onChange={(v) => handleChange('panel_position', v)}
					/>
				</Section>

				<Section title={__( 'Font Size Settings', 'everyone-accessibility-suite' )}>
					<Field id="min_font_size" label={__( 'Minimum Font Size (%)', 'everyone-accessibility-suite' )}>
						<input
							type="number"
							id="min_font_size"
							value={settings.min_font_size || 80}
							onChange={(e) => handleChange('min_font_size', parseInt(e.target.value, 10))}
							min="50"
							max="100"
							step="5"
						/>
					</Field>

					<Field id="max_font_size" label={__( 'Maximum Font Size (%)', 'everyone-accessibility-suite' )}>
						<input
							type="number"
							id="max_font_size"
							value={settings.max_font_size || 200}
							onChange={(e) => handleChange('max_font_size', parseInt(e.target.value, 10))}
							min="100"
							max="300"
							step="5"
						/>
					</Field>

					<Field id="default_font_size" label={__( 'Default Font Size (%)', 'everyone-accessibility-suite' )}>
						<input
							type="number"
							id="default_font_size"
							value={settings.default_font_size || 100}
							onChange={(e) => handleChange('default_font_size', parseInt(e.target.value, 10))}
							min="50"
							max="300"
							step="5"
						/>
					</Field>
				</Section>

				<Section title={__( 'Theme Settings', 'everyone-accessibility-suite' )}>
					<SelectField
						id="default_theme"
						label={__( 'Default Theme', 'everyone-accessibility-suite' )}
						value={settings.default_theme || 'light'}
						options={THEME_OPTIONS}
						onChange={(v) => handleChange('default_theme', v)}
					/>
				</Section>

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

export default SettingsPage;