frontend/src/features/instrument-details/ui/InstrumentPosition.view.tsx

import type { FC } from "react";

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

import { formatDecimal, formatMoney, formatSnapshotTime } from "@/shared/lib";

import type { InstrumentPositionVm } from "../model/types";

import classes from "./InstrumentDetails.module.css";
import { InstrumentSection } from "./InstrumentSection.view";

type InstrumentPositionProps = {
	quantityLabel?: string;
	returnNote?: string;
	vm: InstrumentPositionVm;
};
const InstrumentPosition: FC<InstrumentPositionProps> = (props) => {
	const { vm } = props;
	const { t } = useTranslation();
	if (vm.position && vm.position.accounts.length === 0) return;
	return (
		<InstrumentSection state={vm.positionState} title={t("stock.position")}>
			{!!(vm.position) && ((
				<Stack gap="md">
					{!!(vm.position.isStale) && ((
						<Alert color="orange">{t("portfolio.staleWarning")}</Alert>
					))}
					<div className={`${classes.metrics} ${classes.holding}`}>
						<div>
							<Text c="dimmed" size="sm">
								{props.quantityLabel ?? t("stock.quantity")}
							</Text>
							<Text className={classes.metricValue}>
								{formatDecimal(vm.position.quantity)}
							</Text>
						</div>
						<div>
							<Text c="dimmed" size="sm">
								{t("stock.value")}
							</Text>
							<Text className={classes.metricValue}>
								{formatMoney(vm.position.currentValue)}
							</Text>
						</div>
						<div>
							<Text c="dimmed" size="sm">
								{t("stock.average")}
							</Text>
							<Text className={classes.metricValue}>
								{formatMoney(vm.position.averagePurchasePrice)}
							</Text>
						</div>
						<div>
							<Text c="dimmed" size="sm">
								{t("stock.openReturn")}
							</Text>
							<Text
								c={
									vm.position.absoluteReturn?.value.startsWith("-")
										? "red.8"
										: "green.8"
								}
								className={classes.metricValue}
							>
								{formatMoney(vm.position.absoluteReturn)}
							</Text>
							{vm.position.returnPercent !== null && ((
								<Text size="sm">
									{formatDecimal(vm.position.returnPercent)}
									{" "}
									%
								</Text>
							))}
						</div>
					</div>
					<Text c="dimmed" size="xs">
						{props.returnNote ?? t("stock.openReturnNote")}
					</Text>
					<div>
						{vm.position.accounts.map(account => (
							<div className={classes.accountRow} key={account.account?.id}>
								{account.account
									? (
											<Anchor
												component={Link}
												to={`/accounts/${encodeURIComponent(account.account.id)}`}
											>
												{account.account.name}
											</Anchor>
										)
									: (
											<Text>{t("stock.portfolio")}</Text>
										)}
								<div>
									<Text c="dimmed" size="xs">
										{props.quantityLabel ?? t("stock.quantity")}
									</Text>
									<Text>{formatDecimal(account.quantity)}</Text>
								</div>
								<div>
									<Text c="dimmed" size="xs">
										{t("stock.average")}
									</Text>
									<Text>{formatMoney(account.averagePurchasePrice)}</Text>
								</div>
								<div>
									<Text c="dimmed" size="xs">
										{t("stock.value")}
									</Text>
									<Text>{formatMoney(account.currentValue)}</Text>
								</div>
								<div>
									<Text c="dimmed" size="xs">
										{t("stock.openReturn")}
									</Text>
									<Text
										c={
											(account.absoluteReturn?.value.startsWith("-")) ? ("red.8") : undefined
										}
									>
										{formatMoney(account.absoluteReturn)}
									</Text>
									{account.returnPercent !== null && ((
										<Text size="xs">
											{formatDecimal(account.returnPercent)}
											{" "}
											%
										</Text>
									))}
								</div>
							</div>
						))}
					</div>
					<Text c="dimmed" size="xs">
						{t("stock.snapshotAt", {
							date: formatSnapshotTime(vm.position.observedAt),
						})}
					</Text>
				</Stack>
			))}
		</InstrumentSection>
	);
};

export { InstrumentPosition };