/**
 * General Settings component.
 *
 * @package Schema_AI
 */

import { useState } from '@wordpress/element';
import { TextControl, Button, Notice } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import apiFetch from '@wordpress/api-fetch';

function General( { settings, onSave } ) {
	const [ apiKey, setApiKey ] = useState( settings?.api_key || '' );
	const [ orgName, setOrgName ] = useState( settings?.default_organization?.name || '' );
	const [ orgLogo, setOrgLogo ] = useState( settings?.default_logo || '' );
	const [ orgUrl, setOrgUrl ] = useState( settings?.default_organization?.url || '' );
	const [ connectionStatus, setConnectionStatus ] = useState( null );
	const [ verifying, setVerifying ] = useState( false );

	const wpDefaults = window.schemaAiData?.wpDefaults || {};

	const handleVerify = async () => {
		setVerifying( true );
		try {
			const result = await apiFetch( { path: '/schema-ai/v1/stats' } );
			setConnectionStatus( 'connected' );
		} catch ( err ) {
			setConnectionStatus( 'error' );
		} finally {
			setVerifying( false );
		}
	};

	return (
		<div className="schema-ai-settings-section">
			<h2>{ __( 'API Configuration', 'schema-ai' ) }</h2>
			<TextControl label={ __( 'API Key', 'schema-ai' ) } value={ apiKey } onChange={ setApiKey } type="password" help={ __( 'Enter your Schema AI API key from the SaaS dashboard.', 'schema-ai' ) } />
			<Button variant="secondary" onClick={ handleVerify } isBusy={ verifying }>{ __( 'Verify Connection', 'schema-ai' ) }</Button>
			{ connectionStatus === 'connected' && <Notice status="success" isDismissible={ false }>{ __( 'Connected', 'schema-ai' ) }</Notice> }
			{ connectionStatus === 'error' && <Notice status="error" isDismissible={ false }>{ __( 'Connection failed. Check your API key.', 'schema-ai' ) }</Notice> }

			<h2>{ __( 'Organization Defaults', 'schema-ai' ) }</h2>
			<p className="description" style={ { marginBottom: '16px' } }>
				{ __( 'These are optional overrides. If left empty, your WordPress site name, logo, and URL are used automatically.', 'schema-ai' ) }
			</p>
			<TextControl label={ __( 'Organization Name', 'schema-ai' ) } value={ orgName } onChange={ setOrgName } placeholder={ wpDefaults.siteName || '' } help={ orgName ? '' : __( 'Using:', 'schema-ai' ) + ' ' + ( wpDefaults.siteName || '' ) } />
			<TextControl label={ __( 'Organization Logo URL', 'schema-ai' ) } value={ orgLogo } onChange={ setOrgLogo } type="url" placeholder={ wpDefaults.siteLogo || __( 'Using theme logo', 'schema-ai' ) } help={ orgLogo ? '' : ( wpDefaults.siteLogo ? __( 'Using:', 'schema-ai' ) + ' ' + wpDefaults.siteLogo : __( 'Using your theme\'s custom logo', 'schema-ai' ) ) } />
			<TextControl label={ __( 'Organization URL', 'schema-ai' ) } value={ orgUrl } onChange={ setOrgUrl } type="url" placeholder={ wpDefaults.siteUrl || '' } help={ orgUrl ? '' : __( 'Using:', 'schema-ai' ) + ' ' + ( wpDefaults.siteUrl || '' ) } />
		</div>
	);
}

export default General;