import { useEffect, useRef, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { api } from '../api';
import { brandLogoUrl } from '../../shared/brandLogo';

const META = [
	{
		icon: 'portfolio',
		label: __( 'JBM Library', 'joc-blockora-morph' ),
	},
	{
		icon: 'block-default',
		label: __( 'Gutenberg', 'joc-blockora-morph' ),
	},
	{
		icon: 'shortcode',
		label: __( 'Shortcodes', 'joc-blockora-morph' ),
	},
];

export default function Welcome( { onStart } ) {
	const [ loading, setLoading ] = useState( false );
	const rootRef = useRef( null );
	const glowRef = useRef( null );
	const rafRef = useRef( 0 );
	const posRef = useRef( { x: 50, y: 40 } );
	const targetRef = useRef( { x: 50, y: 40 } );

	useEffect( () => {
		const root = rootRef.current;
		const glow = glowRef.current;
		if ( ! root || ! glow ) {
			return undefined;
		}

		const reduceMotion = window.matchMedia(
			'(prefers-reduced-motion: reduce)'
		).matches;
		if ( reduceMotion ) {
			return undefined;
		}

		const setGlow = ( x, y ) => {
			glow.style.setProperty( '--bm-glow-x', `${ x }%` );
			glow.style.setProperty( '--bm-glow-y', `${ y }%` );
		};

		setGlow( posRef.current.x, posRef.current.y );

		const onMove = ( event ) => {
			const rect = root.getBoundingClientRect();
			if ( ! rect.width || ! rect.height ) {
				return;
			}
			targetRef.current = {
				x: ( ( event.clientX - rect.left ) / rect.width ) * 100,
				y: ( ( event.clientY - rect.top ) / rect.height ) * 100,
			};
			glow.classList.add( 'is-active' );
		};

		const onLeave = () => {
			glow.classList.remove( 'is-active' );
		};

		const tick = () => {
			const pos = posRef.current;
			const target = targetRef.current;
			pos.x += ( target.x - pos.x ) * 0.14;
			pos.y += ( target.y - pos.y ) * 0.14;
			setGlow( pos.x, pos.y );
			rafRef.current = window.requestAnimationFrame( tick );
		};

		root.addEventListener( 'pointermove', onMove );
		root.addEventListener( 'pointerleave', onLeave );
		rafRef.current = window.requestAnimationFrame( tick );

		return () => {
			root.removeEventListener( 'pointermove', onMove );
			root.removeEventListener( 'pointerleave', onLeave );
			window.cancelAnimationFrame( rafRef.current );
		};
	}, [] );

	const start = async () => {
		setLoading( true );
		try {
			await api.post( '/welcome/dismiss', {} );
			if ( typeof window.jocbmAdmin === 'object' && window.jocbmAdmin ) {
				window.jocbmAdmin.welcomeSeen = true;
			}
		} catch ( e ) {
			// Still continue into the app.
			if ( typeof window.jocbmAdmin === 'object' && window.jocbmAdmin ) {
				window.jocbmAdmin.welcomeSeen = true;
			}
		}
		setLoading( false );
		onStart();
	};

	return (
		<div className="bm-welcome" ref={ rootRef }>
			<div className="bm-welcome__atmosphere" aria-hidden="true" />
			<div
				className="bm-welcome__cursor-glow"
				ref={ glowRef }
				aria-hidden="true"
			/>
			<div className="bm-welcome__grid" aria-hidden="true" />
			<span className="bm-welcome__orb bm-welcome__orb--a" aria-hidden="true" />
			<span className="bm-welcome__orb bm-welcome__orb--b" aria-hidden="true" />

			<div className="bm-welcome__stage">
				<div className="bm-welcome__logo-wrap" aria-hidden="true">
					<span className="bm-welcome__logo-ring bm-welcome__logo-ring--1" />
					<span className="bm-welcome__logo-ring bm-welcome__logo-ring--2" />
					<span className="bm-welcome__logo-ring bm-welcome__logo-ring--3" />
					<img
						className="bm-welcome__logo"
						src={ brandLogoUrl() }
						alt=""
						width={ 176 }
						height={ 176 }
						decoding="async"
					/>
				</div>

				<p className="bm-welcome__brand">
					JOC Blockora{ ' ' }
					<span className="bm-welcome__brand-accent">Morph</span>
				</p>

				<h1 className="bm-welcome__headline">
					{ __( 'Craft blocks that carry your brand.', 'joc-blockora-morph' ) }
				</h1>

				<p className="bm-welcome__lede">
					{ __(
						'Import a design, style it once, then ship it in the editor — or as a shortcode anywhere.',
						'joc-blockora-morph'
					) }
				</p>

				<button
					type="button"
					className="bm-welcome__cta"
					onClick={ start }
					disabled={ loading }
				>
					{ loading
						? __( 'Opening…', 'joc-blockora-morph' )
						: __( 'Enter JOC Blockora Morph', 'joc-blockora-morph' ) }
					{ ! loading && (
						<span
							className="dashicons dashicons-arrow-right-alt2"
							aria-hidden="true"
						/>
					) }
				</button>

				<ul className="bm-welcome__meta">
					{ META.map( ( item ) => (
						<li key={ item.label }>
							<span
								className={ `dashicons dashicons-${ item.icon }` }
								aria-hidden="true"
							/>
							{ item.label }
						</li>
					) ) }
				</ul>
			</div>
		</div>
	);
}
