/**
 * Usage Analytics Page Component
 *
 * Settings page for the Usage Analytics module
 *
 * @package Everyone_Accessibility_Suite
 */

import { useState, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import {
	getAnalyticsSettings,
	updateAnalyticsSettings,
	resetAnalyticsData
} from '../services/settings-api';
import { PageHeader, Notice, Loading, Section, Toggle, RangeField } from '../components/ui';
import useIsMounted from '../hooks/use-is-mounted';

function UsageAnalyticsPage() {
	const isMounted = useIsMounted();
	const [settings, setSettings] = useState({
		enabled: false,
		send_interval: 15,
		dashboard_widget: true,
		gdpr_strict: false,
	});
	const [loading, setLoading] = useState(true);
	const [saving, setSaving] = useState(false);
	const [resetting, setResetting] = useState(false);
	const [message, setMessage] = useState({ text: '', type: '' });

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

	const loadSettings = async () => {
		try {
			setLoading(true);

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

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

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

			const response = await updateAnalyticsSettings(settings);

			if (response?.success) {
				if (response.settings) {
					setSettings(response.settings);
				}
				setMessage({ text: __( 'Settings saved successfully!', 'everyone-accessibility-suite' ), type: 'success' });
				setTimeout(() => setMessage({ text: '', type: '' }), 3000);
			}
		} catch (error) {
			console.error('Error saving settings:', error);
			setMessage({ text: __( 'Error saving settings', 'everyone-accessibility-suite' ), type: 'error' });
		} finally {
			setSaving(false);
		}
	};

	const handleReset = async () => {
		if (!window.confirm(__( 'Are you sure you want to clear all analytics data? This action cannot be undone.', 'everyone-accessibility-suite' ))) {
			return;
		}

		try {
			setResetting(true);
			setMessage({ text: '', type: '' });

			const response = await resetAnalyticsData();

			if (response?.success) {
				setMessage({ text: response.message || __( 'Analytics data cleared successfully!', 'everyone-accessibility-suite' ), type: 'success' });
				setTimeout(() => setMessage({ text: '', type: '' }), 3000);
			} else {
				setMessage({ text: response?.message || __( 'Error clearing data', 'everyone-accessibility-suite' ), type: 'error' });
			}
		} catch (error) {
			console.error('Error resetting analytics:', error);
			setMessage({ text: __( 'Error clearing analytics data', 'everyone-accessibility-suite' ), type: 'error' });
		} finally {
			setResetting(false);
		}
	};

	if (loading) {
		return (
			<div className="evas-usage-analytics-page">
				<PageHeader
					title={__( 'Usage Analytics', 'everyone-accessibility-suite' )}
					description={__( 'Track accessibility panel usage with detailed statistics', 'everyone-accessibility-suite' )}
				/>
				<Loading text={__( 'Loading settings...', 'everyone-accessibility-suite' )} />
			</div>
		);
	}

	return (
		<div className="evas-usage-analytics-page">
			<PageHeader
				title={__( 'Usage Analytics', 'everyone-accessibility-suite' )}
				description={__( 'Track accessibility panel usage with detailed statistics', '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 Usage Analytics', 'everyone-accessibility-suite' )}
						description={__( 'Collect anonymous information about usage of the accessibility panel by your visitors', 'everyone-accessibility-suite' )}
						checked={settings.enabled}
						onChange={(v) => handleChange('enabled', v)}
					/>

					<RangeField
						id="send_interval"
						label={__( 'Send Interval', 'everyone-accessibility-suite' )}
						description={__( 'Interval for sending data to the server (in seconds)', 'everyone-accessibility-suite' )}
						value={settings.send_interval}
						min={5}
						max={300}
						step={5}
						unit="s"
						onChange={(v) => handleChange('send_interval', v)}
						disabled={!settings.enabled}
					/>
				</Section>

				<Section title={__( 'Display Settings', 'everyone-accessibility-suite' )}>
					<Toggle
						id="dashboard_widget"
						label={__( 'WordPress Dashboard Widget', 'everyone-accessibility-suite' )}
						description={__( 'Show usage analytics widget on the WordPress dashboard', 'everyone-accessibility-suite' )}
						checked={settings.dashboard_widget}
						onChange={(v) => handleChange('dashboard_widget', v)}
						disabled={!settings.enabled}
					/>
				</Section>

				<Section title={__( 'Privacy Settings', 'everyone-accessibility-suite' )}>
					<Toggle
						id="gdpr_strict"
						label={__( 'Strict GDPR Mode', 'everyone-accessibility-suite' )}
						description={__( 'Enable to comply with strict GDPR regulations. This stops the visitor country from being recorded.', 'everyone-accessibility-suite' )}
						checked={settings.gdpr_strict}
						onChange={(v) => handleChange('gdpr_strict', v)}
						disabled={!settings.enabled}
					/>
				</Section>

				<Section
					title={__( 'Data Management', 'everyone-accessibility-suite' )}
					description={__( 'Clear all collected analytics data from the database', 'everyone-accessibility-suite' )}
				>
					<button
						type="button"
						className="button button-secondary"
						onClick={handleReset}
						disabled={resetting}
					>
						{resetting ? __( 'Clearing...', 'everyone-accessibility-suite' ) : __( 'Clear All Analytics Data', 'everyone-accessibility-suite' )}
					</button>
				</Section>

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

export default UsageAnalyticsPage;