/**
 * Settings: plugin defaults saved via the core settings endpoint.
 */
import { useState, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import {
	App,
	Typography,
	Button,
	Card,
	Collapse,
	Switch,
	Slider,
	Spin,
	Space,
} from 'antd';

import { fetchSettings, saveSettings } from '../../api';

const SettingsForm = () => {
	const { message } = App.useApp();
	const [ values, setValues ] = useState( null );
	const [ saving, setSaving ] = useState( false );

	useEffect( () => {
		fetchSettings()
			.then( setValues )
			.catch( ( error ) =>
				message.error(
					error.message ||
						__(
							'Failed to load settings.',
							'vistour-virtual-tour-builder'
						)
				)
			);
	}, [ message ] );

	if ( ! values ) {
		return (
			<div className="vist360-loading">
				<Spin size="large" />
			</div>
		);
	}

	const set = ( key, value ) =>
		setValues( ( current ) => ( { ...current, [ key ]: value } ) );

	const save = async () => {
		setSaving( true );
		try {
			setValues( await saveSettings( values ) );
			message.success(
				__( 'Settings saved.', 'vistour-virtual-tour-builder' )
			);
		} catch ( error ) {
			message.error(
				error.message ||
					__(
						'Failed to save settings.',
						'vistour-virtual-tour-builder'
					)
			);
		} finally {
			setSaving( false );
		}
	};

	const toggleRow = ( key, label, help = '', danger = false ) => (
		<div className="vist360-toggle-row" key={ key }>
			<div>
				<span>{ label }</span>
				{ help && (
					<Typography.Paragraph
						type={ danger ? 'danger' : 'secondary' }
						style={ { margin: 0, fontSize: 12 } }
					>
						{ help }
					</Typography.Paragraph>
				) }
			</div>
			<Switch
				checked={ !! values[ key ] }
				onChange={ ( value ) => set( key, value ) }
			/>
		</div>
	);

	return (
		<div className="vist360-view vist360-settings">
			<div className="vist360-view__header">
				<div>
					<Typography.Title level={ 2 }>
						{ __( 'Settings', 'vistour-virtual-tour-builder' ) }
					</Typography.Title>
					<Typography.Text type="secondary">
						{ __(
							'Defaults for new tours. Each tour can override them.',
							'vistour-virtual-tour-builder'
						) }
					</Typography.Text>
				</div>
				<Button type="primary" loading={ saving } onClick={ save }>
					{ __(
						'Save settings',
						'vistour-virtual-tour-builder'
					) }
				</Button>
			</div>

			<Card className="vist360-settings__card">
				<Collapse
					defaultActiveKey={ [ 'viewer' ] }
					ghost
					items={ [
						{
							key: 'viewer',
							label: __(
								'Viewer defaults',
								'vistour-virtual-tour-builder'
							),
							children: (
								<Space
									direction="vertical"
									style={ { width: '100%' } }
									size="middle"
								>
									{ toggleRow(
										'autorotate',
										__(
											'Auto-rotate',
											'vistour-virtual-tour-builder'
										)
									) }
									{ toggleRow(
										'show_controls',
										__(
											'Show viewer controls',
											'vistour-virtual-tour-builder'
										)
									) }
									{ toggleRow(
										'show_share',
										__(
											'Show share button',
											'vistour-virtual-tour-builder'
										)
									) }
									{ toggleRow(
										'gyroscope',
										__(
											'Gyroscope on mobile',
											'vistour-virtual-tour-builder'
										)
									) }
									<div className="vist360-label">
										{ __(
											'Default viewer height (px)',
											'vistour-virtual-tour-builder'
										) }
										<Slider
											min={ 200 }
											max={ 1200 }
											step={ 10 }
											value={ values.height || 500 }
											onChange={ ( height ) =>
												set( 'height', height )
											}
										/>
									</div>
								</Space>
							),
						},
						{
							key: 'analytics',
							label: __(
								'Analytics',
								'vistour-virtual-tour-builder'
							),
							children: toggleRow(
								'analytics_enabled',
								__(
									'Enable analytics tracking',
									'vistour-virtual-tour-builder'
								),
								__(
									'Anonymous counts only — no cookies, no personal data.',
									'vistour-virtual-tour-builder'
								)
							),
						},
						{
							key: 'advanced',
							label: __(
								'Advanced',
								'vistour-virtual-tour-builder'
							),
							children: toggleRow(
								'delete_data',
								__(
									'Delete all data on uninstall',
									'vistour-virtual-tour-builder'
								),
								__(
									'Permanently removes tours, analytics, and settings when the plugin is deleted.',
									'vistour-virtual-tour-builder'
								),
								true
							),
						},
					] }
				/>
			</Card>
		</div>
	);
};

export default SettingsForm;
