import { type PropsWithChildren, useState } from 'react';

import { type DisplayRestrictions, ModerationCauseType } from '@atcute/bluesky-moderation';

import { useGoBack } from '#/lib/hooks/use-go-back';

import { useModerationCauseDescription } from '#/state/moderation/use-moderation-cause-description';

import * as Dialog from '#/components/Dialog';
import { ModerationDetailsDialog } from '#/components/moderation/ModerationDetailsDialog';
import { Text } from '#/components/Text';
import { Button, ButtonText } from '#/components/web/Button';

import { m } from '#/paraglide/messages';

import * as css from './ScreenHider.css';

export function ScreenHider({
	screenDescription,
	modui,
	className,
	children,
}: PropsWithChildren<{
	screenDescription: string;
	modui: DisplayRestrictions;
	className?: string;
}>) {
	const [override, setOverride] = useState(false);
	const onPressBack = useGoBack();
	const handle = Dialog.useDialogHandle();
	const blur = modui.blurs[0];
	const desc = useModerationCauseDescription(blur);

	if (!blur || override) {
		return <div className={className}>{children}</div>;
	}

	const isNoPwi = !!modui.blurs.find(
		(cause) =>
			cause.type === ModerationCauseType.Label && cause.labelDef.identifier === '!no-unauthenticated',
	);
	return (
		<div className={css.container}>
			<div className={css.badgeWrap}>
				<div className={css.badge}>
					<desc.icon className={css.icon} />
				</div>
			</div>
			<Text className={css.title} size="_4xl" weight="semiBold">
				{isNoPwi ? m['common.session.signInRequiredTitle']() : m['common.moderation.contentWarning']()}
			</Text>
			{isNoPwi ? (
				<Text className={css.body} color="textContrastMedium" size="lg">
					{m['components.moderation.signInRequired.message']()}
				</Text>
			) : (
				<Text className={css.body} color="textContrastMedium" size="lg">
					{m['components.moderation.label.flaggedPrefix']({ type: screenDescription })}{' '}
					<Text color="text" size="lg" weight="semiBold">
						{desc.name}.{' '}
					</Text>
					<Dialog.Trigger
						aria-label={m['components.moderation.label.learnMore.aboutWarning']()}
						className={css.learnMore}
						handle={handle}
					>
						<Text color="textLink" size="lg">
							{m['components.moderation.label.learnMore.label']()}
						</Text>
					</Dialog.Trigger>
				</Text>
			)}
			{!isNoPwi && <ModerationDetailsDialog handle={handle} modcause={blur} />}
			<div className={css.spacer} />
			<div className={css.buttonRow}>
				<Button
					className={css.pill}
					color="primary"
					label={m['common.action.goBack']()}
					onClick={onPressBack}
					size="large"
					variant="solid"
				>
					<ButtonText>{m['common.action.goBack']()}</ButtonText>
				</Button>
				{!modui.noOverride && (
					<Button
						className={css.pill}
						color="secondary"
						label={m['common.moderation.showAnyway']()}
						onClick={() => setOverride((v) => !v)}
						size="large"
						variant="solid"
					>
						<ButtonText>{m['common.moderation.showAnyway']()}</ButtonText>
					</Button>
				)}
			</div>
		</div>
	);
}