import { useEffect, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Button, Spinner } from '@wordpress/components';
import {
	ArrowRight,
	Check,
	ClipboardList,
	Code2,
	MapPinned,
	Palette,
	Plus,
	Settings2,
} from 'lucide-react';
import { adminGet } from './adminApi';
import { StoreIcon, CategoryIcon } from './icons';

const Dashboard = () => {
	const [ data, setData ] = useState( null );
	const [ failed, setFailed ] = useState( false );

	useEffect( () => {
		let active = true;
		adminGet( 'overview' )
			.then( ( response ) => active && setData( response ) )
			.catch( () => active && setFailed( true ) );
		return () => {
			active = false;
		};
	}, [] );

	if ( ! data && ! failed ) {
		return (
			<div className="cliqthemes-ui-loading">
				<Spinner />
			</div>
		);
	}

	const cards = [
		{
			label: __( 'Stores', 'cliq-store-locator' ),
			value: data?.stores ?? 0,
			Icon: StoreIcon,
			tone: 'indigo',
		},
		{
			label: __( 'Categories', 'cliq-store-locator' ),
			value: data?.categories ?? 0,
			Icon: CategoryIcon,
			tone: 'emerald',
		},
	];
	const storeCount = Number( data?.stores || 0 );
	const categoryCount = Number( data?.categories || 0 );
	const go = ( hash ) => {
		window.location.hash = hash;
	};
	const checklist = [
		{
			label: __( 'Add at least one store', 'cliq-store-locator' ),
			description: __(
				'Add its address, coordinates, contact details and opening hours.',
				'cliq-store-locator'
			),
			complete: storeCount > 0,
			action: () => go( '#/stores' ),
			actionLabel: storeCount
				? __( 'Manage stores', 'cliq-store-locator' )
				: __( 'Add store', 'cliq-store-locator' ),
		},
		{
			label: __(
				'Organize stores with categories',
				'cliq-store-locator'
			),
			description: __(
				'Categories give visitors a useful filter and keep larger directories understandable.',
				'cliq-store-locator'
			),
			complete: categoryCount > 0,
			action: () => go( '#/categories' ),
			actionLabel: __( 'Manage categories', 'cliq-store-locator' ),
		},
		{
			label: __( 'Customize the locator', 'cliq-store-locator' ),
			description: __(
				'Choose the layout, theme, visible fields, map provider and detail-page behavior.',
				'cliq-store-locator'
			),
			complete: false,
			action: () => go( '#/settings' ),
			actionLabel: __( 'Open settings', 'cliq-store-locator' ),
		},
	];

	return (
		<div className="cliq-sl-dashboard">
			<header className="cliq-sl-dashboard__hero">
				<div>
					<span>
						{ __( 'Locator overview', 'cliq-store-locator' ) }
					</span>
					<h1>
						{ storeCount
							? __(
									'Your store directory at a glance',
									'cliq-store-locator'
							  )
							: __(
									'Build your first locator',
									'cliq-store-locator'
							  ) }
					</h1>
					<p>
						{ storeCount
							? __(
									'Manage your directory, refine the customer experience and publish it anywhere in WordPress.',
									'cliq-store-locator'
							  )
							: __(
									'Start with a store, choose the experience you want, then publish the ready-made locator on any page.',
									'cliq-store-locator'
							  ) }
					</p>
				</div>
				<div className="cliq-sl-dashboard__hero-actions">
					<Button
						variant="primary"
						onClick={ () => go( '#/stores' ) }
					>
						<Plus size={ 16 } />
						{ __( 'Add a store', 'cliq-store-locator' ) }
					</Button>
					<Button
						variant="secondary"
						onClick={ () => go( '#/settings' ) }
					>
						<Settings2 size={ 16 } />
						{ __( 'Locator settings', 'cliq-store-locator' ) }
					</Button>
				</div>
			</header>

			<div className="cliq-sl-dashboard__summary">
				<div className="cliqthemes-ui-stats cliq-sl-dashboard__stats">
					{ cards.map( ( { label, value, Icon, tone } ) => (
						<div
							className={ `cliqthemes-ui-stat cliqthemes-ui-stat--${ tone }` }
							key={ label }
						>
							<span className="cliqthemes-ui-stat__icon">
								<Icon size={ 22 } />
							</span>
							<span className="cliqthemes-ui-stat__body">
								<strong className="cliqthemes-ui-stat__value">
									{ value }
								</strong>
								<span className="cliqthemes-ui-stat__label">
									{ label }
								</span>
							</span>
						</div>
					) ) }
				</div>
				<div className="cliq-sl-dashboard__publish">
					<span>
						<Code2 size={ 20 } />
					</span>
					<div>
						<strong>
							{ __( 'Ready to publish?', 'cliq-store-locator' ) }
						</strong>
						<p>
							{ __(
								'Add the Store Locator block or use the shortcode on any page.',
								'cliq-store-locator'
							) }
						</p>
						<code>[cliq_store_locator]</code>
					</div>
				</div>
			</div>
			{ failed && (
				<p className="cliqthemes-ui-empty-state">
					{ __(
						'Store totals could not be loaded.',
						'cliq-store-locator'
					) }
				</p>
			) }

			<div className="cliq-sl-dashboard__workspace">
				<section className="cliq-sl-dashboard__checklist">
					<header>
						<span>
							<ClipboardList size={ 19 } />
						</span>
						<div>
							<h2>
								{ __(
									'Launch checklist',
									'cliq-store-locator'
								) }
							</h2>
							<p>
								{ __(
									'The essential steps for a useful public locator.',
									'cliq-store-locator'
								) }
							</p>
						</div>
					</header>
					<div>
						{ checklist.map( ( item ) => (
							<article
								className={ item.complete ? 'is-complete' : '' }
								key={ item.label }
							>
								<span className="cliq-sl-dashboard__check">
									{ item.complete ? (
										<Check size={ 15 } />
									) : null }
								</span>
								<div>
									<strong>{ item.label }</strong>
									<p>{ item.description }</p>
								</div>
								<Button
									variant="tertiary"
									onClick={ item.action }
								>
									{ item.actionLabel }
									<ArrowRight size={ 14 } />
								</Button>
							</article>
						) ) }
					</div>
				</section>

				<aside className="cliq-sl-dashboard__howto">
					<header>
						<h2>
							{ __(
								'Shape the customer journey',
								'cliq-store-locator'
							) }
						</h2>
						<p>
							{ __(
								'Three settings have the biggest impact on a new locator.',
								'cliq-store-locator'
							) }
						</p>
					</header>
					<button type="button" onClick={ () => go( '#/settings' ) }>
						<span>
							<Palette size={ 18 } />
						</span>
						<div>
							<strong>
								{ __(
									'Match your brand',
									'cliq-store-locator'
								) }
							</strong>
							<small>
								{ __(
									'Set colors and choose which fields each template displays.',
									'cliq-store-locator'
								) }
							</small>
						</div>
						<ArrowRight size={ 15 } />
					</button>
					<button type="button" onClick={ () => go( '#/settings' ) }>
						<span>
							<MapPinned size={ 18 } />
						</span>
						<div>
							<strong>
								{ __(
									'Choose the right layout',
									'cliq-store-locator'
								) }
							</strong>
							<small>
								{ __(
									'Place the map left or right, or use a responsive card-only grid.',
									'cliq-store-locator'
								) }
							</small>
						</div>
						<ArrowRight size={ 15 } />
					</button>
					<button
						type="button"
						onClick={ () =>
							window.dispatchEvent(
								new CustomEvent( 'cliq-sl:onboarding' )
							)
						}
					>
						<span>
							<ClipboardList size={ 18 } />
						</span>
						<div>
							<strong>
								{ __(
									'Use guided setup',
									'cliq-store-locator'
								) }
							</strong>
							<small>
								{ __(
									'Create realistic demo stores and learn the workflow safely.',
									'cliq-store-locator'
								) }
							</small>
						</div>
						<ArrowRight size={ 15 } />
					</button>
				</aside>
			</div>
		</div>
	);
};

export default Dashboard;
