import type { AnyProfileView } from '@atcute/bluesky';

import { useSession } from '#/state/session';

import { Trans } from '#/locale/Trans';

import * as Dialog from '#/components/Dialog';
import { Stack } from '#/components/Stack';
import { Text } from '#/components/Text';
import * as css from '#/components/verification/VerifierDialog.css';
import { Button, ButtonText } from '#/components/web/Button';

import Logo from '#/icons/brands/Bluesky.svg';
import VerifiedCheck from '#/icons/original/VerifiedCheck.svg';
import VerifierCheck from '#/icons/original/VerifierCheck.svg';
import { m } from '#/paraglide/messages';

export function VerifierDialog({
	handle,
	profile,
}: {
	handle: Dialog.DialogHandle;
	profile: AnyProfileView;
}) {
	return (
		<Dialog.Root handle={handle}>
			<Dialog.Popup size="narrow">
				<DialogInner handle={handle} profile={profile} />
			</Dialog.Popup>
		</Dialog.Root>
	);
}

const VerificationIllustration = () => {
	return (
		<div
			aria-label={m['components.verification.trustedVerifier.illustration']()}
			className={css.imageBox}
			role="img"
		>
			<div className={css.illustrationInner}>
				{/* Step 1: Bluesky logo */}
				<div className={css.blueskyCircleClass}>
					<Logo className={css.logo} />
				</div>
				<span className={css.blueskyLabelClass}>{m['components.verification.illustration.bluesky']()}</span>

				{/* Arrow 1 */}
				<div className={css.arrow1}>
					<svg fill="none" height={16} stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24" width={16}>
						<path d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" strokeLinecap="round" strokeLinejoin="round" />
					</svg>
				</div>

				{/* Step 2: Trusted Verifier badge */}
				<div className={css.verifierCircleClass}>
					<VerifierCheck className={css.checkIcon} />
				</div>
				<span className={css.verifierLabelClass}>
					{m['components.verification.illustration.trustedVerifier']()}
				</span>

				{/* Arrow 2 */}
				<div className={css.arrow2}>
					<svg fill="none" height={16} stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24" width={16}>
						<path d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" strokeLinecap="round" strokeLinejoin="round" />
					</svg>
				</div>

				{/* Step 3: Verified Account badge */}
				<div className={css.verifiedCircleClass}>
					<VerifiedCheck className={css.checkIcon} />
				</div>
				<span className={css.verifiedLabelClass}>
					{m['components.verification.illustration.verifiedAccount']()}
				</span>
			</div>
		</div>
	);
};

function DialogInner({ handle, profile }: { handle: Dialog.DialogHandle; profile: AnyProfileView }) {
	const { currentAccount } = useSession();

	const isSelf = profile.did === currentAccount?.did;
	const name = profile.handle;
	const label = isSelf
		? m['components.verification.trustedVerifier.youStatus']()
		: m['components.verification.trustedVerifier.userStatus']({ name });

	return (
		<Stack gap="lg">
			<VerificationIllustration />
			<Stack gap="sm">
				<Dialog.Title>{label}</Dialog.Title>
				<Text size="md">
					<Trans
						message={m['components.verification.trustedVerifier.description']}
						markup={{ t0: () => <VerifierCheck className={css.inlineCheck} /> }}
					/>
				</Text>
			</Stack>
			<Dialog.Actions direction="responsive">
				<Button
					color="primary"
					label={m['common.a11y.closeDialog']()}
					onClick={() => handle.close()}
					size="small"
				>
					<ButtonText>{m['common.action.close']()}</ButtonText>
				</Button>
			</Dialog.Actions>
		</Stack>
	);
}