/**
 * App shell: hash router + antd Layout with responsive navigation.
 */
import { useState, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Layout, Menu, Button, Grid, Drawer } from 'antd';
import {
	PictureOutlined,
	AppstoreOutlined,
	BarChartOutlined,
	SettingOutlined,
	PlusOutlined,
	MenuOutlined,
} from '@ant-design/icons';

import { config } from './api';
import ToursList from './features/tours/ToursList';
import TemplateGallery from './features/templates/TemplateGallery';
import TourEditor from './features/editor/TourEditor';
import Dashboard from './features/analytics/Dashboard';
import SettingsForm from './features/settings/SettingsForm';

const parseHash = () => {
	const hash = window.location.hash.replace( /^#\/?/, '' );
	const [ route, param ] = hash.split( '/' );
	return { route: route || 'tours', param: param || null };
};

export const navigate = ( path ) => {
	window.location.hash = `#/${ path }`;
};

const NAV_ITEMS = [
	{
		key: 'tours',
		icon: <PictureOutlined />,
		label: __( 'Tours', 'vistour-virtual-tour-builder' ),
	},
	{
		key: 'templates',
		icon: <AppstoreOutlined />,
		label: __( 'Templates', 'vistour-virtual-tour-builder' ),
	},
	{
		key: 'analytics',
		icon: <BarChartOutlined />,
		label: __( 'Analytics', 'vistour-virtual-tour-builder' ),
	},
	{
		key: 'settings',
		icon: <SettingOutlined />,
		label: __( 'Settings', 'vistour-virtual-tour-builder' ),
		manage: true,
	},
];

const AppShell = () => {
	const [ location, setLocation ] = useState( parseHash );
	const [ menuOpen, setMenuOpen ] = useState( false );
	const screens = Grid.useBreakpoint();

	useEffect( () => {
		const onHashChange = () => {
			setLocation( parseHash() );
			setMenuOpen( false );
		};
		window.addEventListener( 'hashchange', onHashChange );
		return () => window.removeEventListener( 'hashchange', onHashChange );
	}, [] );

	const items = NAV_ITEMS.filter(
		( item ) => ! item.manage || config.canManage
	);
	const activeKey = [ 'new', 'edit' ].includes( location.route )
		? 'tours'
		: location.route;

	const renderView = () => {
		const { route, param } = location;

		switch ( route ) {
			case 'new':
				return <TourEditor key="new" tourId={ null } />;
			case 'edit':
				return (
					<TourEditor
						key={ param }
						tourId={ parseInt( param, 10 ) }
					/>
				);
			case 'templates':
				return <TemplateGallery />;
			case 'analytics':
				return <Dashboard />;
			case 'settings':
				return config.canManage ? <SettingsForm /> : <ToursList />;
			default:
				return <ToursList />;
		}
	};

	const menu = (
		<Menu
			mode={ screens.md ? 'horizontal' : 'vertical' }
			selectedKeys={ [ activeKey ] }
			items={ items }
			onClick={ ( { key } ) => navigate( key ) }
			style={
				screens.md
					? { flex: 1, minWidth: 0, borderBottom: 'none' }
					: { borderInlineEnd: 'none' }
			}
		/>
	);

	return (
		<Layout className="vist360-app">
			<Layout.Header className="vist360-app__header">
				<div className="vist360-app__header-inner">
					{ ! screens.md && (
						<Button
							type="text"
							icon={ <MenuOutlined /> }
							onClick={ () => setMenuOpen( true ) }
							aria-label={ __(
								'Open navigation',
								'vistour-virtual-tour-builder'
							) }
						/>
					) }
					<div className="vist360-app__brand">
						<PictureOutlined className="vist360-app__logo" />
						<span>
							{ __(
								'360° Tours',
								'vistour-virtual-tour-builder'
							) }
						</span>
					</div>
					{ screens.md && menu }
					<Button
						type="primary"
						icon={ <PlusOutlined /> }
						onClick={ () => navigate( 'templates' ) }
					>
						{ screens.sm
							? __(
									'New Tour',
									'vistour-virtual-tour-builder'
							  )
							: null }
					</Button>
				</div>
			</Layout.Header>

			{ ! screens.md && (
				<Drawer
					open={ menuOpen }
					onClose={ () => setMenuOpen( false ) }
					placement="left"
					width={ 240 }
					title={ __(
						'360° Tours',
						'vistour-virtual-tour-builder'
					) }
				>
					{ menu }
				</Drawer>
			) }

			<Layout.Content className="vist360-app__content">
				{ renderView() }
			</Layout.Content>
		</Layout>
	);
};

export default AppShell;
