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;

	const positionReturnColor = vm.position?.absoluteReturn?.value.startsWith("-")
		? "red.8"
		: "green.8";

	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={positionReturnColor} 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) => {
							const accountReturnColor = account.absoluteReturn?.value.startsWith("-")
								? "red.8"
								: undefined;

							return (
								<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={accountReturnColor}>
											{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 };