/**
 * Accessibility Statement Page
 *
 * Edits the statement stored in the `evas_statement_settings` option and
 * previews the rendered result. Talks to the accessibility-extras module's
 * own REST namespace rather than the shared settings endpoint - the shared
 * one writes to a different option, which the generator never reads.
 *
 * @package Everyone_Accessibility_Suite
 */

import { useState, useEffect, useCallback, useRef } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import {
	getStatementSettings,
	updateStatementSettings,
	generateStatement,
} from '../services/settings-api';
import { PageHeader, Loading, Notice, Field, SelectField } from '../components/ui';

const SHORTCODE = '[evas-accessibility-statement]';

const EMPTY = {
	organization_name: '',
	email: '',
	phone: '',
	conformance_level: 'AA',
	standards: 'WCAG 2.1',
	statement_text: '',
};

function StatementPage() {
	const [loading, setLoading] = useState(true);
	const [saving, setSaving] = useState(false);
	const [error, setError] = useState(null);
	const [saved, setSaved] = useState(false);
	const [copied, setCopied] = useState(false);

	const [settings, setSettings] = useState(EMPTY);
	const [defaultStatement, setDefaultStatement] = useState('');
	const [placeholders, setPlaceholders] = useState({});
	const [preview, setPreview] = useState('');
	const [previewing, setPreviewing] = useState(false);

	// Guards the debounced preview against a slow earlier render landing
	// after a newer one and showing stale HTML.
	const previewToken = useRef(0);

	useEffect(() => {
		let cancelled = false;

		(async () => {
			try {
				const response = await getStatementSettings();
				if (cancelled) return;
				setSettings({ ...EMPTY, ...(response?.settings || {}) });
				setDefaultStatement(response?.default_statement || '');
				setPlaceholders(response?.placeholders || {});
			} catch (err) {
				if (!cancelled) setError(err.message || __( 'Failed to load the statement settings', 'everyone-accessibility-suite' ));
			} finally {
				if (!cancelled) setLoading(false);
			}
		})();

		return () => { cancelled = true; };
	}, []);

	const refreshPreview = useCallback(async (current) => {
		const token = ++previewToken.current;
		setPreviewing(true);
		try {
			const response = await generateStatement(current);
			if (token === previewToken.current) setPreview(response?.statement || '');
		} catch (err) {
			if (token === previewToken.current) setPreview('');
		} finally {
			if (token === previewToken.current) setPreviewing(false);
		}
	}, []);

	// Re-render the preview shortly after typing stops, so every keystroke
	// doesn't fire its own request.
	useEffect(() => {
		if (loading) return undefined;
		const timer = setTimeout(() => refreshPreview(settings), 500);
		return () => clearTimeout(timer);
	}, [settings, loading, refreshPreview]);

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

	const handleSave = async () => {
		setSaving(true);
		setError(null);
		try {
			const response = await updateStatementSettings(settings);
			setSettings({ ...EMPTY, ...(response?.settings || settings) });
			setSaved(true);
		} catch (err) {
			setError(err.message || __( 'Failed to save', 'everyone-accessibility-suite' ));
		} finally {
			setSaving(false);
		}
	};

	const handleReset = () => {
		// eslint-disable-next-line no-alert
		if (!window.confirm( __( 'Replace the statement text with the default template?', 'everyone-accessibility-suite' ) )) return;
		change('statement_text', defaultStatement);
	};

	const handleCopy = async () => {
		try {
			await navigator.clipboard.writeText(SHORTCODE);
			setCopied(true);
			setTimeout(() => setCopied(false), 2000);
		} catch (err) {
			// Clipboard access can be denied (insecure context, permissions);
			// the shortcode is selectable on screen either way.
			setError( __( 'Could not copy automatically - select the shortcode and copy it manually.', 'everyone-accessibility-suite' ) );
		}
	};

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

	return (
		<div className="evas-statement-page">
			<PageHeader
				title={__( 'Accessibility Statement', 'everyone-accessibility-suite' )}
				description={__( 'Publish a statement describing your accessibility commitments. Place it on any page with the shortcode below.', 'everyone-accessibility-suite' )}
			/>

			{error && <Notice type="error"><p>{error}</p></Notice>}
			{saved && <Notice type="success"><p>{__( 'Statement saved.', 'everyone-accessibility-suite' )}</p></Notice>}

			<div className="evas-statement-shortcode">
				<div>
					<strong>{__( 'Shortcode', 'everyone-accessibility-suite' )}</strong>
					<code>{SHORTCODE}</code>
				</div>
				<button type="button" className="button" onClick={handleCopy}>
					{copied ? __( 'Copied', 'everyone-accessibility-suite' ) : __( 'Copy shortcode', 'everyone-accessibility-suite' )}
				</button>
			</div>

			<div className="evas-statement-layout">
				<div className="evas-statement-form">
					<h3>{__( 'Contact details', 'everyone-accessibility-suite' )}</h3>

					<Field id="evas-statement-org" label={__( 'Organization name', 'everyone-accessibility-suite' )}>
						<input
							type="text"
							id="evas-statement-org"
							className="regular-text"
							value={settings.organization_name}
							onChange={(e) => change('organization_name', e.target.value)}
						/>
					</Field>

					<Field id="evas-statement-email" label={__( 'Contact email', 'everyone-accessibility-suite' )}>
						<input
							type="email"
							id="evas-statement-email"
							className="regular-text"
							value={settings.email}
							onChange={(e) => change('email', e.target.value)}
						/>
					</Field>

					<Field
						id="evas-statement-phone"
						label={__( 'Contact phone', 'everyone-accessibility-suite' )}
						description={__( 'Leave empty to hide the phone line from the statement.', 'everyone-accessibility-suite' )}
					>
						<input
							type="tel"
							id="evas-statement-phone"
							className="regular-text"
							value={settings.phone}
							onChange={(e) => change('phone', e.target.value)}
						/>
					</Field>

					<h3>{__( 'Conformance', 'everyone-accessibility-suite' )}</h3>

					<Field id="evas-statement-standards" label={__( 'Standards', 'everyone-accessibility-suite' )}>
						<input
							type="text"
							id="evas-statement-standards"
							className="regular-text"
							value={settings.standards}
							onChange={(e) => change('standards', e.target.value)}
						/>
					</Field>
					<SelectField
						id="evas-statement-level"
						label={__( 'Conformance level', 'everyone-accessibility-suite' )}
						value={settings.conformance_level}
						onChange={(v) => change('conformance_level', v)}
						options={[
							{ value: 'A', label: __( 'Level A', 'everyone-accessibility-suite' ) },
							{ value: 'AA', label: __( 'Level AA', 'everyone-accessibility-suite' ) },
							{ value: 'AAA', label: __( 'Level AAA', 'everyone-accessibility-suite' ) },
						]}
					/>

					<h3>{__( 'Statement text', 'everyone-accessibility-suite' )}</h3>

					<p className="evas-field-description">
						{__( 'Leave empty to use the built-in template, which follows the site language automatically.', 'everyone-accessibility-suite' )}
					</p>

					<textarea
						id="evas-statement-text"
						className="evas-statement-textarea"
						rows="16"
						value={settings.statement_text}
						placeholder={defaultStatement}
						onChange={(e) => change('statement_text', e.target.value)}
						aria-label={__( 'Statement text', 'everyone-accessibility-suite' )}
					/>

					<div className="evas-statement-placeholders">
						<strong>{__( 'Placeholders', 'everyone-accessibility-suite' )}</strong>
						<ul>
							{Object.entries(placeholders).map(([token, label]) => (
								<li key={token}>
									<code>{token}</code> <span>{label}</span>
								</li>
							))}
						</ul>
					</div>

					<div className="evas-statement-actions">
						<button type="button" className="button button-primary" onClick={handleSave} disabled={saving}>
							{saving ? __( 'Saving…', 'everyone-accessibility-suite' ) : __( 'Save statement', 'everyone-accessibility-suite' )}
						</button>
						<button type="button" className="button" onClick={handleReset} disabled={!defaultStatement}>
							{__( 'Load default template', 'everyone-accessibility-suite' )}
						</button>
					</div>
				</div>

				<div className="evas-statement-preview">
					<div className="evas-statement-preview__head">
						<h3>{__( 'Preview', 'everyone-accessibility-suite' )}</h3>
						{previewing && <span className="evas-statement-preview__status">{__( 'Updating…', 'everyone-accessibility-suite' )}</span>}
					</div>
					{/* Server-rendered and passed through wp_kses_post there,
					    so the markup here is already sanitized. */}
					<div
						className="evas-statement-preview__body"
						dangerouslySetInnerHTML={{ __html: preview }}
					/>
				</div>
			</div>
		</div>
	);
}

export default StatementPage;