import type { AnyProfileView } from '@atcute/bluesky';
import {
	type BlockingModerationCause,
	type ModerationDecision,
	ModerationCauseType,
} from '@atcute/bluesky-moderation';

import { useProfileShadow } from '#/state/cache/profile-shadow';
import { useProfileBlockMutationQueue } from '#/state/queries/profile';

import { BlockedByListDialog } from '#/components/dms/BlockedByListDialog';
import { LeaveConvoPrompt } from '#/components/dms/LeaveConvoPrompt';
import * as Prompt from '#/components/Prompt';
import { Text } from '#/components/Text';
import { Button, ButtonIcon, ButtonText } from '#/components/web/Button';

import LeaveIcon from '#/icons/central/ArrowBoxLeft_round_outlined_radius1_stroke2.svg';
import PersonCheckIcon from '#/icons/central/PeopleAdded_round_outlined_radius1_stroke2.svg';
import PersonXIcon from '#/icons/central/PeopleRemove_round_outlined_radius1_stroke2.svg';
import { m } from '#/paraglide/messages';

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

export function MessagesListBlockedFooter({
	recipient: initialRecipient,
	convoId,
	moderation,
	isGroup,
}: {
	recipient: AnyProfileView;
	convoId: string;
	moderation: ModerationDecision;
	isGroup: boolean;
}) {
	const recipient = useProfileShadow(initialRecipient);
	const [_queueBlock, queueUnblock] = useProfileBlockMutationQueue(recipient);

	const leaveConvoPromptHandle = Prompt.usePromptHandle();
	const blockedByListPromptHandle = Prompt.usePromptHandle();

	const blocks = moderation.causes.filter(
		(cause): cause is BlockingModerationCause => cause.type === ModerationCauseType.Blocking,
	);
	const listBlocks = blocks.filter((block) => block.source !== null);
	const userBlock = blocks.find((block) => block.source === null);

	const isBlocking = !!userBlock || !!listBlocks.length;

	const onUnblockPress = () => {
		if (listBlocks.length) {
			blockedByListPromptHandle.open(null);
		} else {
			void queueUnblock();
		}
	};

	return (
		<div className={css.outer}>
			<div className={css.card}>
				<PersonXIcon className={css.icon} />
				<Text align="center" className={css.heading} color="text" size="md" weight="semiBold">
					{isGroup
						? m['components.dms.block.youAreBlockingOwner']()
						: isBlocking
							? m['components.dms.block.youAreBlockingPerson']()
							: m['components.dms.block.personBlockingYou']()}
				</Text>
				<Text align="center" color="textContrastHigh" size="sm">
					{m['components.dms.chat.readOnlyHint']()}
				</Text>
				{isBlocking ? (
					<Button
						className={css.button}
						color="secondary_inverted"
						label={m['common.block.action.unblock']()}
						onClick={onUnblockPress}
						size="large"
					>
						<ButtonIcon icon={PersonCheckIcon} />
						<ButtonText>{m['common.block.action.unblock']()}</ButtonText>
					</Button>
				) : null}
				<Button
					className={css.button}
					color="secondary_inverted"
					label={m['common.chat.action.leave']()}
					onClick={() => leaveConvoPromptHandle.open(null)}
					size="large"
				>
					<ButtonIcon icon={LeaveIcon} />
					<ButtonText>{m['common.chat.action.leave']()}</ButtonText>
				</Button>
				<LeaveConvoPrompt convoId={convoId} currentScreen="conversation" handle={leaveConvoPromptHandle} />
				<BlockedByListDialog handle={blockedByListPromptHandle} listBlocks={listBlocks} />
			</div>
		</div>
	);
}