import { useEffect, useState, useCallback } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { fetchSettings, saveSettings } from '../shared/settings-api';
import { Card, CardHeader, CardBody, CardFooter } from '../shared/components/Card';
import Button from '../shared/components/Button';
import { Notice, Spinner } from '../shared/components/Feedback';
import GeneralPanel from './components/GeneralPanel';
import MessagePanel from './components/MessagePanel';
import WrapOptionsPanel from './components/WrapOptionsPanel';
import DiagnosticsPanel from './components/DiagnosticsPanel';
import HowToPanel from './components/HowToPanel';

const emptySettings = {
	enabled: true,
	label: '',
	allow_message: true,
	message_label: '',
	message_max_length: 200,
	theme_color: '#c0392b',
	layout: 'popup',
	wrap_options: [],
};

export default function App() {
	const [ settings, setSettings ] = useState( emptySettings );
	const [ loading, setLoading ] = useState( true );
	const [ saving, setSaving ] = useState( false );
	const [ notice, setNotice ] = useState( null );

	useEffect( () => {
		fetchSettings()
			.then( ( data ) => {
				setSettings( data );
				setLoading( false );
			} )
			.catch( ( error ) => {
				setNotice( {
					status: 'error',
					message: error.message || __( 'Could not load settings.', 'rt-gift-wrap-for-woocommerce' ),
				} );
				setLoading( false );
			} );
	}, [] );

	const updateField = useCallback( ( field, value ) => {
		setSettings( ( prev ) => ( { ...prev, [ field ]: value } ) );
	}, [] );

	const handleSave = useCallback( () => {
		setSaving( true );
		setNotice( null );

		saveSettings( settings )
			.then( ( data ) => {
				setSettings( data );
				setSaving( false );
				setNotice( {
					status: 'success',
					message: __( 'Gift Wrap settings saved.', 'rt-gift-wrap-for-woocommerce' ),
				} );
			} )
			.catch( ( error ) => {
				setSaving( false );
				setNotice( {
					status: 'error',
					message: error.message || __( 'Could not save settings.', 'rt-gift-wrap-for-woocommerce' ),
				} );
			} );
	}, [ settings ] );

	if ( loading ) {
		return (
			<div className="rtgw-admin-loading">
				<Spinner />
				<span>{ __( 'Loading settings…', 'rt-gift-wrap-for-woocommerce' ) }</span>
			</div>
		);
	}

	return (
		<div className="rtgw-admin-app">
			<div className="rtgw-admin-app__intro">
				<span className="rtgw-admin-app__eyebrow">{ __( 'WooCommerce', 'rt-gift-wrap-for-woocommerce' ) }</span>
				<h1>{ __( 'Gift Wrap Settings', 'rt-gift-wrap-for-woocommerce' ) }</h1>
				<p>{ __( 'Configure how gift wrap appears on both classic and block-based checkout.', 'rt-gift-wrap-for-woocommerce' ) }</p>
			</div>

			{ notice && (
				<Notice status={ notice.status } onDismiss={ () => setNotice( null ) }>
					{ notice.message }
				</Notice>
			) }

			<Card className="rtgw-admin-card">
				<CardHeader>
					<h2>{ __( 'How to add Gift Wrap to your checkout', 'rt-gift-wrap-for-woocommerce' ) }</h2>
				</CardHeader>
				<CardBody>
					<HowToPanel />
				</CardBody>
			</Card>

			<Card className="rtgw-admin-card">
				<CardHeader>
					<h2>{ __( 'Block Checkout Status', 'rt-gift-wrap-for-woocommerce' ) }</h2>
				</CardHeader>
				<CardBody>
					<DiagnosticsPanel />
				</CardBody>
			</Card>

			<Card className="rtgw-admin-card">
				<CardHeader>
					<h2>{ __( 'General', 'rt-gift-wrap-for-woocommerce' ) }</h2>
				</CardHeader>
				<CardBody>
					<GeneralPanel settings={ settings } onChange={ updateField } />
				</CardBody>
			</Card>

			<Card className="rtgw-admin-card">
				<CardHeader>
					<h2>{ __( 'Gift Message', 'rt-gift-wrap-for-woocommerce' ) }</h2>
				</CardHeader>
				<CardBody>
					<MessagePanel settings={ settings } onChange={ updateField } />
				</CardBody>
			</Card>

			<Card className="rtgw-admin-card">
				<CardHeader>
					<h2>{ __( 'Wrap Styles & Pricing', 'rt-gift-wrap-for-woocommerce' ) }</h2>
				</CardHeader>
				<CardBody>
					<WrapOptionsPanel
						options={ settings.wrap_options }
						onChange={ ( options ) => updateField( 'wrap_options', options ) }
					/>
				</CardBody>
			</Card>

			<div className="rtgw-admin-save-bar">
				<Button variant="primary" isBusy={ saving } onClick={ handleSave }>
					{ saving ? __( 'Saving…', 'rt-gift-wrap-for-woocommerce' ) : __( 'Save Settings', 'rt-gift-wrap-for-woocommerce' ) }
				</Button>
			</div>
		</div>
	);
}