/**
 * Customizer Page Component
 *
 * Customize panel appearance and button design
 *
 * @package Everyone_Accessibility_Suite
 */

import { useState, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { getModules } from '../services/settings-api';
import OpenButtonSettings from '../components/customizer/OpenButtonSettings';
import ModalPopupSettings from '../components/customizer/ModalPopupSettings';
import { PageHeader, Notice, Loading } from '../components/ui';
import useIsMounted from '../hooks/use-is-mounted';

function CustomizerPage() {
	const isMounted = useIsMounted();
	const [activeTab, setActiveTab] = useState('open-button');
	const [settings, setSettings] = useState(null);
	const [loading, setLoading] = useState(true);
	const [saving, setSaving] = useState(false);
	const [message, setMessage] = useState({ text: '', type: '' });
	const [moduleEnabled, setModuleEnabled] = useState(false);
	const [presets, setPresets] = useState([]);
	// Both tab components seed their form state from props once, via useState,
	// and never re-read them. Applying a preset changes settings behind their
	// back, so this counter is used as their `key`: React remounts them and the
	// form re-seeds from the new values.
	const [settingsVersion, setSettingsVersion] = useState(0);

	const moduleDisabledText = __( 'The Customizer module is not enabled. Please enable it in the Components page.', 'everyone-accessibility-suite' );

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

	const checkModule = async () => {
		try {
			const modulesData = await getModules();
			if (!isMounted()) return;
			if (modulesData?.modules) {
				const customizerModule = modulesData.modules.find(m => m.id === 'customizer');
				if (customizerModule?.enabled) {
					setModuleEnabled(true);
					loadSettings();
				} else {
					setLoading(false);
					setMessage({ text: moduleDisabledText, type: 'error' });
				}
			} else {
				setLoading(false);
				setMessage({ text: moduleDisabledText, type: 'error' });
			}
		} catch (error) {
			console.error('Error checking module:', error);
			if (!isMounted()) return;
			setLoading(false);
			setMessage({ text: __( 'Error checking module status.', 'everyone-accessibility-suite' ), type: 'error' });
		}
	};

	const loadSettings = async () => {
		setLoading(true);
		try {
			const response = await fetch('/wp-json/evas/v1/customizer/settings', {
				headers: {
					'X-WP-Nonce': window.evasAdmin?.nonce || '',
				},
			});

			if (!response.ok) {
				throw new Error('Failed to load settings');
			}

			const data = await response.json();
			if (!isMounted()) return;
			setSettings(data);
		} catch (error) {
			console.error('Error loading settings:', error);
			if (!isMounted()) return;
			setMessage({ text: __( 'Failed to load settings', 'everyone-accessibility-suite' ), type: 'error' });
		} finally {
			if (isMounted()) setLoading(false);
		}

		// Presets are a nice-to-have: failing to load them must not block the
		// form, so this is a separate request whose error is only logged.
		try {
			const response = await fetch('/wp-json/evas/v1/customizer/presets', {
				headers: { 'X-WP-Nonce': window.evasAdmin?.nonce || '' },
			});
			if (!response.ok) throw new Error('Failed to load presets');
			const data = await response.json();
			if (isMounted()) setPresets(data.presets || []);
		} catch (error) {
			console.error('Error loading presets:', error);
		}
	};

	const applyPreset = async (preset) => {
		const confirmed = window.confirm(
			__( 'Apply this color scheme? It will overwrite the panel and button colors you have set.', 'everyone-accessibility-suite' )
		);
		if (!confirmed) return;

		const saved = await saveSettings(preset.values);
		// Remount the tabs only once the values are actually stored, so a failed
		// save leaves the form showing what is still in the database.
		if (saved) setSettingsVersion((v) => v + 1);
	};

	const saveSettings = async (newSettings) => {
		setSaving(true);
		setMessage({ text: '', type: '' });

		try {
			const response = await fetch('/wp-json/evas/v1/customizer/settings', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json',
					'X-WP-Nonce': window.evasAdmin?.nonce || '',
				},
				body: JSON.stringify(newSettings),
			});

			if (!response.ok) {
				throw new Error('Failed to save settings');
			}

			const data = await response.json();
			setSettings({ ...settings, ...newSettings });
			setMessage({ text: __( 'Settings saved successfully!', 'everyone-accessibility-suite' ), type: 'success' });
			setTimeout(() => setMessage({ text: '', type: '' }), 3000);
			return true;
		} catch (error) {
			console.error('Error saving settings:', error);
			setMessage({ text: __( 'Failed to save settings', 'everyone-accessibility-suite' ), type: 'error' });
			return false;
		} finally {
			setSaving(false);
		}
	};

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

	if (!moduleEnabled) {
		return (
			<div className="evas-customizer-page">
				<PageHeader
					title={__( 'Customizer', 'everyone-accessibility-suite' )}
					description={__( 'Customize the appearance and behavior of the accessibility panel and button', 'everyone-accessibility-suite' )}
				/>
				<Notice type="error">
					<p>{message.text || moduleDisabledText}</p>
					<p>
						<a href="#/components" className="button button-primary">
							{__( 'Go to Components', 'everyone-accessibility-suite' )}
						</a>
					</p>
				</Notice>
			</div>
		);
	}

	return (
		<div className="evas-customizer-page">
			<PageHeader
				title={__( 'Customizer', 'everyone-accessibility-suite' )}
				description={__( 'Customize the appearance and behavior of the accessibility panel and button', 'everyone-accessibility-suite' )}
			/>

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

			{presets.length > 0 && (
				<div className="evas-settings-section evas-preset-section">
					<h3>{__( 'Color Presets', 'everyone-accessibility-suite' )}</h3>
					<p className="evas-field-description">
						{__( 'Apply a ready-made color scheme to the panel and the open button. Every preset meets WCAG contrast requirements in both the light and dark theme.', 'everyone-accessibility-suite' )}
					</p>

					<div className="evas-preset-grid">
						{presets.map((preset) => (
							<button
								key={preset.id}
								type="button"
								className="evas-preset-card"
								onClick={() => applyPreset(preset)}
								disabled={saving}
							>
								{/* Light and dark halves side by side - a preset
								    defines both, and judging one without the
								    other is what makes picking colors slow. */}
								<span className="evas-preset-card__preview">
									<span
										className="evas-preset-swatch"
										style={{ background: preset.values.popup_background_color }}
									>
										<span style={{ background: preset.values.popup_key_color }}></span>
										<span style={{ background: preset.values.popup_text_color }}></span>
									</span>
									<span
										className="evas-preset-swatch"
										style={{ background: preset.values.popup_background_color_dark }}
									>
										<span style={{ background: preset.values.popup_key_color_dark }}></span>
										<span style={{ background: preset.values.popup_text_color_dark }}></span>
									</span>
								</span>
								<span className="evas-preset-card__label">{preset.label}</span>
							</button>
						))}
					</div>
				</div>
			)}

			<div className="evas-customizer-tabs">
				<div className="evas-tabs-nav">
					<button
						className={`evas-tab-button ${activeTab === 'open-button' ? 'is-active' : ''}`}
						onClick={() => setActiveTab('open-button')}
					>
						{__( 'Open Button', 'everyone-accessibility-suite' )}
					</button>
					<button
						className={`evas-tab-button ${activeTab === 'modal-popup' ? 'is-active' : ''}`}
						onClick={() => setActiveTab('modal-popup')}
					>
						{__( 'Modal Popup', 'everyone-accessibility-suite' )}
					</button>
				</div>

				<div className="evas-tab-content">
					{activeTab === 'open-button' && (
						<OpenButtonSettings
							key={settingsVersion}
							settings={settings}
							onSave={saveSettings}
							saving={saving}
						/>
					)}
					{activeTab === 'modal-popup' && (
						<ModalPopupSettings
							key={settingsVersion}
							settings={settings}
							onSave={saveSettings}
							saving={saving}
						/>
					)}
				</div>
			</div>
		</div>
	);
}

export default CustomizerPage;