/**
 * Components Page Component
 *
 * Manage modules/components
 *
 * @package Everyone_Accessibility_Suite
 */

import { useState, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { getModules, toggleModule, getRoutes } from '../services/components-api';
import { PageHeader, Notice, Loading } from '../components/ui';
import useIsMounted from '../hooks/use-is-mounted';
import { setAdminRoutes } from '../hooks/use-admin-routes';

function ComponentsPage() {
	const { i18n } = window.evasAdmin || {};
	const isMounted = useIsMounted();
	const [modules, setModules] = useState([]);
	const [loading, setLoading] = useState(true);
	const [saving, setSaving] = useState(null);
	const [message, setMessage] = useState({ text: '', type: '' });

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

	const notify = (text, type) => {
		setMessage({ text, type });
		setTimeout(() => setMessage({ text: '', type: '' }), 3000);
	};

	const loadModules = async () => {
		try {
			setLoading(true);
			const data = await getModules();
			if (!isMounted()) return;
			setModules(data);
		} catch (error) {
			console.error('Error loading modules:', error);
			if (!isMounted()) return;
			setMessage({ text: i18n?.error || __( 'Error loading modules', 'everyone-accessibility-suite' ), type: 'error' });
		} finally {
			if (isMounted()) setLoading(false);
		}
	};

	const refreshRoutes = async () => {
		try {
			setAdminRoutes(await getRoutes());
		} catch (error) {
			// The module itself was toggled successfully; only the menu is
			// behind, and a page reload fixes it. Not worth an error notice
			// that would contradict the success message next to it.
			console.error('Error refreshing module routes:', error);
		}
	};

	const handleToggle = async (moduleId, enabled) => {
		try {
			setSaving(moduleId);
			const response = await toggleModule(moduleId, enabled);

			if (response.success) {
				setModules(response.modules || []);
				notify(
					response.message || (enabled ? i18n?.moduleDisabled : i18n?.moduleEnabled) || __( 'Saved!', 'everyone-accessibility-suite' ),
					'success'
				);

				// Publish the module's settings screen into the sidebar and the
				// router straight away. Fetched in a separate request on
				// purpose - see getRoutes().
				await refreshRoutes();
			} else {
				notify(response.message || i18n?.error || __( 'Error toggling module', 'everyone-accessibility-suite' ), 'error');
			}
		} catch (error) {
			console.error('Error toggling module:', error);
			notify(i18n?.error || __( 'Error toggling module', 'everyone-accessibility-suite' ), 'error');
		} finally {
			setSaving(null);
		}
	};

	if (loading) {
		return (
			<div className="evas-components-page">
				<PageHeader
					title={i18n?.components || __( 'Components', 'everyone-accessibility-suite' )}
					description={__( 'Manage plugin modules and components', 'everyone-accessibility-suite' )}
				/>
				<Loading text={i18n?.loading || __( 'Loading...', 'everyone-accessibility-suite' )} />
			</div>
		);
	}

	return (
		<div className="evas-components-page">
			<PageHeader
				title={i18n?.components || __( 'Components', 'everyone-accessibility-suite' )}
				description={__( 'Manage plugin modules and components', 'everyone-accessibility-suite' )}
			/>

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

			<div className="evas-components-grid">
				{modules.map((module) => (
					<div
						key={module.id}
						className={`evas-component-card ${module.enabled ? 'is-enabled' : 'is-disabled'} ${module.locked ? 'is-locked' : ''}`}
					>
						<div className="evas-component-card__header">
							{module.icon && module.icon.startsWith('dashicons-') ? (
								<span className={`dashicons ${module.icon}`}></span>
							) : (
								<span className="dashicons dashicons-admin-plugins"></span>
							)}
							<h3>{module.name}</h3>
						</div>
						<div className="evas-component-card__body">
							<p>{module.description}</p>
							<div className="evas-component-card__meta">
								<span className="evas-component-card__type">{module.type}</span>
								<span
									className={`evas-component-card__status ${
										module.locked ? 'is-locked' : module.enabled ? 'is-active' : ''
									}`}
								>
									{module.locked ? __( 'Coming Soon', 'everyone-accessibility-suite' ) : module.enabled ? __( 'Active', 'everyone-accessibility-suite' ) : __( 'Inactive', 'everyone-accessibility-suite' )}
								</span>
							</div>
						</div>
						<div className="evas-component-card__footer">
							<button
								type="button"
								className={`button ${module.enabled ? 'button-secondary' : 'button-primary'}`}
								onClick={() => handleToggle(module.id, module.enabled)}
								disabled={saving === module.id || module.locked || (module.enabled && !module.can_disable)}
							>
								{module.locked
									? __( 'Coming Soon', 'everyone-accessibility-suite' )
									: saving === module.id
									? i18n?.loading || __( 'Loading...', 'everyone-accessibility-suite' )
									: module.enabled && !module.can_disable
									? __( 'Always Active', 'everyone-accessibility-suite' )
									: module.enabled
									? i18n?.disableModule || __( 'Disable', 'everyone-accessibility-suite' )
									: i18n?.enableModule || __( 'Enable', 'everyone-accessibility-suite' )}
							</button>
						</div>
					</div>
				))}
			</div>

			{modules.length === 0 && (
				<div className="evas-empty-state">
					<p>{__( 'No modules available', 'everyone-accessibility-suite' )}</p>
				</div>
			)}
		</div>
	);
}

export default ComponentsPage;