frontend/src/pages/account/ui/AccountPage/components/PositionCard/PositionCard.view.tsx

import type { FC } from "react";

import { Anchor, Card, Group, Stack, Text } from "@mantine/core";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";

import { formatMoney } from "@/shared/lib";

import type { AccountPagePosition, AccountPagePositionSection } from "../../../../model/positions";

import classes from "../../AccountPage.module.css";
import { PositionLogo } from "../PositionLogo.view";

type PositionCardProps = {
	kind: AccountPagePositionSection["kind"];
	position: AccountPagePosition;
};

const PositionCard: FC<PositionCardProps> = (props) => {
	const { kind, position } = props;
	const { t } = useTranslation();
	const isExpanded = kind !== "other";

	const returnClass = position.returnTone
		? classes[position.returnTone]
		: undefined;

	let returnText = position.returnText;
	if (returnText && !isExpanded)
		returnText = t("portfolio.return", { value: returnText });
	const instrumentTo = position.instrumentTo;

	const identifier
		= kind === "stocks" ? (position.ticker ?? position.isin) : position.isin;

	const identifierText = [
		t("portfolio.quantity", { value: position.quantity }),
		identifier,
	]
		.filter(Boolean)
		.join(" · ");

	const accountLink = position.account
		? (
				<Anchor
					component={Link}
					size="xs"
					to={`/accounts/${encodeURIComponent(position.account.id)}`}
				>
					{position.account.name}
				</Anchor>
			)
		: undefined;

	const secondaryText = [
		position.averagePurchasePrice
			? t("portfolio.avgPrice", {
					value: formatMoney(position.averagePurchasePrice),
				})
			: null,
		position.shareText
			? t("portfolio.share", { value: position.shareText })
			: null,
	]
		.filter(Boolean)
		.join(" · ");

	if (isExpanded)
		return (
			<Card className={`${classes.tile} ${classes.expandedCard}`} withBorder>
				<div className={classes.expandedMain}>
					<PositionLogo
						key={position.logoSrc ?? "no-logo"}
						label={position.displayName}
						src={position.logoSrc}
						to={instrumentTo}
					/>

					<Stack className={classes.expandedIdentity} gap={2} miw={0}>
						{instrumentTo
							? (
									<Anchor c="inherit" component={Link} fw={600} to={instrumentTo}>
										{position.displayName}
									</Anchor>
								)
							: (
									<Text fw={600} lineClamp={1}>
										{position.displayName}
									</Text>
								)}

						{accountLink}

						<Text c="dimmed" className={classes.expandedIdentifiers} size="xs">
							{identifierText}
						</Text>
					</Stack>

					<Stack align="flex-end" className={classes.expandedValue} gap={2}>
						{!!position.currentValue && (
							<Text fw={700} size="lg">
								{formatMoney(position.currentValue)}
							</Text>
						)}

						{!!returnText && (
							<Text className={returnClass} fw={600} size="sm">
								{returnText}
							</Text>
						)}
					</Stack>
				</div>

				{!!secondaryText && (
					<Text c="dimmed" className={classes.expandedMeta} size="xs">
						{secondaryText}
					</Text>
				)}
			</Card>
		);

	return (
		<Card className={classes.tile} withBorder>
			<Group align="flex-start" justify="space-between" wrap="nowrap">
				<Stack gap={2} miw={0}>
					<Text fw={700} lineClamp={1}>
						{position.displayName}
					</Text>

					{accountLink}

					{!!position.isin && (
						<Text c="dimmed" className={classes.mono} size="xs">
							{position.isin}
						</Text>
					)}

					<Text c="dimmed" size="xs">
						{t("portfolio.quantity", { value: position.quantity })}
					</Text>
				</Stack>

				<Stack align="flex-end" gap={2}>
					{!!position.currentValue && (
						<Text fw={800} size="lg">
							{formatMoney(position.currentValue)}
						</Text>
					)}

					{!!returnText && (
						<Text className={returnClass} fw={600} size="sm">
							{returnText}
						</Text>
					)}
				</Stack>
			</Group>

			{!!(position.averagePurchasePrice || position.shareText) && (
				<Group justify="space-between" mt="xs">
					{!!position.averagePurchasePrice && (
						<Text c="dimmed" size="xs">
							{t("portfolio.avgPrice", {
								value: formatMoney(position.averagePurchasePrice),
							})}
						</Text>
					)}

					{!!position.shareText && (
						<Text c="dimmed" size="xs">
							{t("portfolio.share", { value: position.shareText })}
						</Text>
					)}
				</Group>
			)}
		</Card>
	);
};

export { PositionCard };