import { useEffect } from 'react';

import { Outlet, resolveMeta, useRoute } from '@oomfware/stacker';

import { useKeybind } from '#/lib/keybinds';

import { focusSearch } from '#/state/events';
import { useSession } from '#/state/session';
import { closeAllActiveElements } from '#/state/shell/overlays';

import { useOpenComposer } from '#/features/composer/open-composer';

import { LinkWarningDialog } from '#/components/dialogs/LinkWarningDialog';
import { SigninDialog } from '#/components/dialogs/Signin';
import { ErrorBoundary } from '#/components/ErrorBoundary';
import { GroupChatJoinDialog } from '#/components/intents/GroupChatJoinDialog';
import { Lightbox } from '#/components/Lightbox';
import { GlobalReportDialog } from '#/components/moderation/ReportDialog';
import { LoggedOut } from '#/components/Shell/LoggedOut';
import { Shell } from '#/components/Shell/Shell';

import { useRouter } from '#/router';

import { ComposerDialog } from './ComposerDialog';

/**
 * the shell layout wrapping every in-app route. global overlays live inside here (not as siblings of the
 * router) so their virtualized lists read `useIsFocused()` as `true`.
 */
export function ShellLayout() {
	const match = useRoute();
	const router = useRouter();
	const { hasSession } = useSession();
	const { openComposer } = useOpenComposer();

	useKeybind({
		scope: 'app',
		keybind: 'n',
		enabled: hasSession,
		handle() {
			openComposer({});
		},
	});

	useKeybind({
		scope: 'app',
		keybind: '/',
		handle() {
			if (!focusSearch.emit()) {
				router.navigate({ to: { name: 'Explore' } });
			}
		},
	});

	// close dialogs/menus/lightbox when the history entry changes, but NOT on an in-place replace (which
	// also fires subscribe) — gate on the entry key so clearing a one-shot param can't dismiss the composer.
	useEffect(() => {
		let prevKey = router.location.key;
		return router.subscribe(() => {
			const key = router.location.key;
			if (key !== prevKey) {
				prevKey = key;
				closeAllActiveElements();
			}
		});
	}, [router]);

	if (!hasSession && resolveMeta(match, 'requireAuth')) {
		return <LoggedOut />;
	}

	return (
		<Shell bottomBar={resolveMeta(match, 'bottomBar') ?? false} routeName={match.name}>
			<ErrorBoundary>
				<Outlet />
			</ErrorBoundary>
			<ComposerDialog />
			<SigninDialog />
			<LinkWarningDialog />
			<GroupChatJoinDialog />
			<Lightbox />
			<GlobalReportDialog />
		</Shell>
	);
}