import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import {
	Button,
	ComboboxControl,
	TextareaControl,
	TextControl,
} from '@wordpress/components';
import {
	Check,
	CheckCircle2,
	Clock3,
	LifeBuoy,
	Send,
	ShieldCheck,
} from 'lucide-react';
import { adminPost } from './adminApi';

const SECTIONS = [
	{ value: 'support', label: __( 'Support', 'cliq-store-locator' ) },
	{ value: 'billing', label: __( 'Billing', 'cliq-store-locator' ) },
	{
		value: 'consultation',
		label: __( 'Consultation', 'cliq-store-locator' ),
	},
	{ value: 'custom', label: __( 'Custom work', 'cliq-store-locator' ) },
];

const siteUrl = () => {
	try {
		return window.location.origin;
	} catch ( e ) {
		return '';
	}
};

const ContactForm = () => {
	const [ values, setValues ] = useState( {
		name: '',
		email: '',
		section: 'support',
		message: '',
	} );
	const [ status, setStatus ] = useState( 'idle' ); // idle | sending | done | error
	const [ error, setError ] = useState( '' );

	const set = ( k, v ) => setValues( ( p ) => ( { ...p, [ k ]: v } ) );

	const submit = ( e ) => {
		e.preventDefault();
		if ( status === 'sending' ) {
			return;
		}
		if (
			! values.name.trim() ||
			! values.email.trim() ||
			! values.message.trim()
		) {
			setError(
				__(
					'Please add your name, email and a message.',
					'cliq-store-locator'
				)
			);
			return;
		}
		setError( '' );
		setStatus( 'sending' );
		adminPost( 'contact', { ...values, site_url: siteUrl() } )
			.then( () => setStatus( 'done' ) )
			.catch( ( err ) => {
				setStatus( 'error' );
				setError(
					err?.message ||
						__(
							'Something went wrong. Please try again.',
							'cliq-store-locator'
						)
				);
			} );
	};

	if ( status === 'done' ) {
		return (
			<div className="cliq-sl-contact cliq-sl-contact--done">
				<span className="cliq-sl-contact__check">
					<CheckCircle2 size={ 28 } strokeWidth={ 2 } />
				</span>
				<h3>
					{ __(
						'Message sent — thank you!',
						'cliq-store-locator'
					) }
				</h3>
				<p>
					{ __(
						'Our team typically replies within one business day. We’ll be in touch shortly.',
						'cliq-store-locator'
					) }
				</p>
				<Button
					variant="secondary"
					onClick={ () => {
						setValues( {
							name: '',
							email: '',
							section: 'support',
							message: '',
						} );
						setStatus( 'idle' );
					} }
				>
					{ __( 'Send another', 'cliq-store-locator' ) }
				</Button>
			</div>
		);
	}

	return (
		<div className="cliq-sl-contact">
			<aside className="cliq-sl-contact__aside">
				<span className="cliq-sl-contact__badge">
					<LifeBuoy size={ 24 } strokeWidth={ 1.8 } />
				</span>
				<span className="cliq-sl-contact__eyebrow">
					{ __( 'CliqThemes support', 'cliq-store-locator' ) }
				</span>
				<h3>
					{ __(
						'Talk to a product specialist',
						'cliq-store-locator'
					) }
				</h3>
				<p>
					{ __(
						'Share the outcome you need and the page where you are working. The right person on our team will review it.',
						'cliq-store-locator'
					) }
				</p>
				<ul>
					<li>
						<Clock3 size={ 15 } />
						{ __(
							'Reply within one business day',
							'cliq-store-locator'
						) }
					</li>
					<li>
						<ShieldCheck size={ 15 } />
						{ __(
							'Your site details stay private',
							'cliq-store-locator'
						) }
					</li>
					<li>
						<Check size={ 15 } />
						{ __(
							'Setup, billing and custom work',
							'cliq-store-locator'
						) }
					</li>
				</ul>
				<small>
					{ __(
						'Include screenshots or console errors in your message when relevant.',
						'cliq-store-locator'
					) }
				</small>
			</aside>

			<div className="cliq-sl-contact__body">
				<div className="cliq-sl-contact__intro">
					<h3>{ __( 'How can we help?', 'cliq-store-locator' ) }</h3>
					<p>
						{ __(
							'Complete the form and we will respond by email.',
							'cliq-store-locator'
						) }
					</p>
				</div>

				<form className="cliq-sl-contact__form" onSubmit={ submit }>
					<div className="cliq-sl-contact__row">
						<TextControl
							__nextHasNoMarginBottom
							label={ __(
								'Your name',
								'cliq-store-locator'
							) }
							value={ values.name }
							onChange={ ( v ) => set( 'name', v ) }
						/>
						<TextControl
							__nextHasNoMarginBottom
							type="email"
							label={ __(
								'Email address',
								'cliq-store-locator'
							) }
							value={ values.email }
							onChange={ ( v ) => set( 'email', v ) }
						/>
					</div>
					<ComboboxControl
						__nextHasNoMarginBottom
						label={ __(
							'What can we help with?',
							'cliq-store-locator'
						) }
						value={ values.section }
						options={ SECTIONS }
						onChange={ ( v ) => v && set( 'section', v ) }
					/>
					<TextareaControl
						__nextHasNoMarginBottom
						label={ __(
							'What are you trying to achieve?',
							'cliq-store-locator'
						) }
						placeholder={ __(
							'Describe the issue, what you expected, and any steps we can use to reproduce it.',
							'cliq-store-locator'
						) }
						rows={ 6 }
						value={ values.message }
						onChange={ ( v ) => set( 'message', v ) }
					/>
					{ error && (
						<p className="cliq-sl-contact__error">{ error }</p>
					) }
					<div className="cliq-sl-contact__actions">
						<span>
							{ __(
								'We will reply to the email above.',
								'cliq-store-locator'
							) }
						</span>
						<Button
							variant="primary"
							type="submit"
							isBusy={ status === 'sending' }
							disabled={ status === 'sending' }
						>
							<Send size={ 15 } strokeWidth={ 2 } />
							{ status === 'sending'
								? __( 'Sending…', 'cliq-store-locator' )
								: __(
										'Send message',
										'cliq-store-locator'
								  ) }
						</Button>
					</div>
				</form>
			</div>
		</div>
	);
};

export default ContactForm;
