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

import { clsx } from 'clsx';

import { profileTarget } from '#/lib/routes/targets';

import { STALE } from '#/state/queries';
import { useProfileQuery } from '#/state/queries/profile';
import { useSession } from '#/state/session';

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

import { ProfileHoverCard } from '#/components/ProfileHoverCard';
import { Text } from '#/components/Text';
import { InlineLinkText } from '#/components/web/Link';

import ArrowCornerDownRightIcon from '#/icons/central/ArrowCornerDownRight_round_outlined_radius3_stroke2.svg';
import { m } from '#/paraglide/messages';

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

export function PostRepliedTo({
	parentAuthor,
	isParentBlocked,
	isParentNotFound,
	className,
}: {
	parentAuthor: Did | AnyProfileView | undefined;
	isParentBlocked?: boolean;
	isParentNotFound?: boolean;
	/** Spacing escape hatch for the row's host; callers own the rhythm around it. */
	className?: string;
}) {
	const { currentAccount } = useSession();

	let label;
	if (isParentBlocked) {
		label = m['components.post.reply.toBlocked']();
	} else if (isParentNotFound) {
		label = m['components.post.reply.toPost']();
	} else if (parentAuthor) {
		const did = typeof parentAuthor === 'string' ? parentAuthor : parentAuthor.did;
		const isMe = currentAccount?.did === did;
		if (isMe) {
			label = m['components.post.reply.toYou']();
		} else {
			label = (
				<Trans
					message={m['components.post.reply.to']}
					markup={{ t0: () => <ParentAuthorName did={did} /> }}
				/>
			);
		}
	}

	if (!label) {
		// should not happen.
		return null;
	}

	return (
		<div className={clsx(css.row, className)}>
			<ArrowCornerDownRightIcon className={css.icon} />
			<Text className={css.label} color="textContrastMedium" numberOfLines={1} size="sm">
				{label}
			</Text>
		</div>
	);
}

/**
 * the replied-to author's handle as an inline profile link wrapped in a hover card, falling back to a shimmer
 * while loading and to plain text on error
 */
function ParentAuthorName({ did }: { did: Did }) {
	// a feed of replies mounts many of these at once, so coalesce the author fetches into one request.
	const { data: profile, isError } = useProfileQuery({ batch: true, did, staleTime: STALE.INFINITY });

	if (isError) {
		return (
			<Text color="textContrastMedium" size="sm">
				user
			</Text>
		);
	}

	if (profile) {
		const name = profile.handle;
		return (
			<ProfileHoverCard actor={did}>
				<InlineLinkText
					size="sm"
					label={name}
					weight="medium"
					color="textContrastMedium"
					to={profileTarget(profile.did)}
				>
					{name}
				</InlineLinkText>
			</ProfileHoverCard>
		);
	}

	return <span className={css.loadingName} />;
}