/**
 * Interface settings — a React/@wordpress/components admin panel.
 *
 * First React surface in the free plugin. Reads and writes a small set of
 * UI preferences through the agentic/v1/ui-settings REST route. Kept
 * deliberately self-contained so it shares no save path with the existing
 * PHP settings form.
 */
import { createRoot, useState, useEffect } from '@wordpress/element';
import apiFetch from '@wordpress/api-fetch';
import { __ } from '@wordpress/i18n';
import {
	Card,
	CardHeader,
	CardBody,
	CardFooter,
	RadioControl,
	ToggleControl,
	Button,
	Spinner,
	Notice,
	Flex,
	FlexItem,
} from '@wordpress/components';

const REST_PATH = 'agentic/v1/ui-settings';

function InterfaceSettings() {
	const [ loading, setLoading ] = useState( true );
	const [ saving, setSaving ] = useState( false );
	const [ error, setError ] = useState( '' );
	const [ saved, setSaved ] = useState( false );
	const [ uiMode, setUiMode ] = useState( 'basic' );
	const [ showOnboarding, setShowOnboarding ] = useState( true );

	useEffect( () => {
		apiFetch( { path: REST_PATH } )
			.then( ( data ) => {
				setUiMode( data.ui_mode === 'advanced' ? 'advanced' : 'basic' );
				setShowOnboarding( !! data.show_onboarding );
				setLoading( false );
			} )
			.catch( ( err ) => {
				setError(
					err.message ||
						__(
							'Could not load interface settings.',
							'agent-builder'
						)
				);
				setLoading( false );
			} );
	}, [] );

	const save = () => {
		setSaving( true );
		setSaved( false );
		setError( '' );
		apiFetch( {
			path: REST_PATH,
			method: 'POST',
			data: { ui_mode: uiMode, show_onboarding: showOnboarding },
		} )
			.then( ( data ) => {
				setUiMode( data.ui_mode === 'advanced' ? 'advanced' : 'basic' );
				setShowOnboarding( !! data.show_onboarding );
				setSaving( false );
				setSaved( true );
			} )
			.catch( ( err ) => {
				setError(
					err.message ||
						__(
							'Could not save interface settings.',
							'agent-builder'
						)
				);
				setSaving( false );
			} );
	};

	if ( loading ) {
		return (
			<Card>
				<CardBody>
					<Spinner />{ ' ' }
					{ __( 'Loading interface settings…', 'agent-builder' ) }
				</CardBody>
			</Card>
		);
	}

	return (
		<Card className="agentic-interface-settings">
			<CardHeader>
				<h2 style={ { margin: 0 } }>
					{ __( 'Interface', 'agent-builder' ) }
				</h2>
			</CardHeader>
			<CardBody>
				{ error && (
					<Notice
						status="error"
						isDismissible={ false }
						className="agentic-mb-12"
					>
						{ error }
					</Notice>
				) }
				{ saved && ! error && (
					<Notice
						status="success"
						isDismissible
						onRemove={ () => setSaved( false ) }
						className="agentic-mb-12"
					>
						{ __( 'Interface settings saved.', 'agent-builder' ) }
					</Notice>
				) }

				<RadioControl
					label={ __( 'Interface mode', 'agent-builder' ) }
					help={ __(
						'Basic keeps the menu focused on everyday tasks. Advanced reveals developer tools such as Skills, APIs and Endpoints.',
						'agent-builder'
					) }
					selected={ uiMode }
					options={ [
						{
							label: __( 'Basic', 'agent-builder' ),
							value: 'basic',
						},
						{
							label: __( 'Advanced', 'agent-builder' ),
							value: 'advanced',
						},
					] }
					onChange={ ( value ) => setUiMode( value ) }
				/>

				<div style={ { marginTop: '20px' } }>
					<ToggleControl
						label={ __(
							'Show the Getting Started checklist on the dashboard',
							'agent-builder'
						) }
						help={ __(
							'Turn this off once you are set up to hide the onboarding checklist.',
							'agent-builder'
						) }
						checked={ showOnboarding }
						onChange={ ( value ) => setShowOnboarding( value ) }
						__nextHasNoMarginBottom
					/>
				</div>
			</CardBody>
			<CardFooter>
				<Flex justify="flex-start">
					<FlexItem>
						<Button
							variant="primary"
							onClick={ save }
							isBusy={ saving }
							disabled={ saving }
						>
							{ saving
								? __( 'Saving…', 'agent-builder' )
								: __( 'Save changes', 'agent-builder' ) }
						</Button>
					</FlexItem>
				</Flex>
			</CardFooter>
		</Card>
	);
}

document.addEventListener( 'DOMContentLoaded', () => {
	const root = document.getElementById( 'agentic-interface-settings-root' );
	if ( root ) {
		createRoot( root ).render( <InterfaceSettings /> );
	}
} );
