frontend/src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.tsx

import type { CSSProperties, FC } from "react";

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

import { formatMoney, portfolioCategoryPresentation } from "@/shared/lib";
import { SourceSyncStatus } from "@/shared/ui";

import type { BrokerageAccountCard } from "../../model/display";

import { accountTypeKey } from "../../model/display";
import classes from "./BrokerageAccountList.module.css";

const DECIMAL_PART_COUNT = 2;
const STRUCTURE_CATEGORY_ORDER = ["STOCK", "BOND", "OTHER", "CASH"] as const;

const percentFormatter = new Intl.NumberFormat("ru-RU", {
	maximumFractionDigits: 1,
	minimumFractionDigits: 1,
});

type AvailableSummary = Extract<
	BrokerageAccountCard["summary"],
	{ state: "available" }
>;

type BrokerageAccountListProps = { accounts: BrokerageAccountCard[] };

type BrokerageAccountSummaryProps = {
	summary: BrokerageAccountCard["summary"];
};

type PortfolioSummary = AvailableSummary["portfolio"];

type ReturnValueProps = {
	item: PortfolioSummary["unrealizedReturn"];
};

type StructureCurrency = PortfolioSummary["structure"];

function formatPercent(value: null | string) {
	if (value === null) return "—";

	const rounded = percentFormatter.format(Math.abs(Number(value)));
	let sign = "";
	if (rounded !== "0,0") sign = value.startsWith("-") ? "−" : "+";

	return `${sign}${rounded}\u{A0}%`;
}

function formatStructurePercent(value: string) {
	return percentFormatter.format(Number(value));
}

function isZero(value: string) {
	const unsigned = value.startsWith("-") ? value.slice(1) : value;
	const [integer = "", fraction = ""] = unsigned.split(".", DECIMAL_PART_COUNT);

	return integer.replaceAll("0", "") === ""
		&& fraction.replaceAll("0", "") === "";
}

const ReturnValue: FC<ReturnValueProps> = (props) => {
	const { t } = useTranslation();
	const { item } = props;

	const displayedPercent = formatPercent(item.percent);
	const isNegative = displayedPercent.startsWith("−");
	const isPositive = displayedPercent.startsWith("+");

	let toneClass = classes.neutral;
	if (isNegative) toneClass = classes.negative;
	else if (isPositive) toneClass = classes.positive;

	return (
		<Group className={classes.return} gap="xs" wrap="wrap">
			<Text className={toneClass} fw={700} size="sm">
				{displayedPercent}
			</Text>

			<Text className={toneClass} size="sm">
				{formatMoney(
					{ currency: "RUB", value: item.absolute },
					{ withSign: true },
				)}
			</Text>

			{item.partial && (
				<Text c="dimmed" size="xs">
					{t("accounts.partial")}
				</Text>
			)}
		</Group>
	);
};

type StructureBarProps = { item: StructureCurrency };

const StructureBar: FC<StructureBarProps> = (props) => {
	const { t } = useTranslation();

	const categories = STRUCTURE_CATEGORY_ORDER.flatMap((type) => {
		const category = props.item.categories.find(item => item.type === type);

		return category ? [category] : [];
	});

	const description = categories.map((category) => {
		const label = t(portfolioCategoryPresentation[category.type].label);

		const percent = category.sharePercent === null
			? null
			: formatStructurePercent(category.sharePercent);

		return percent === null
			? t("accounts.structure.incomplete", { category: label })
			: t("accounts.structure.category", { category: label, percent });
	}).join("; ");

	const label = t("accounts.structure.label", {
		value: description,
	});

	const legendCategories = categories.filter(category =>
		category.sharePercent === null || !isZero(category.sharePercent));

	return (
		<Stack gap={4}>
			<div
				aria-label={label}
				className={classes.structureBar}
				role="img"
				title={label}
			>
				{categories.map((category) => {
					const presentation = portfolioCategoryPresentation[category.type];

					const style = {
						"--category-color": `var(--mantine-color-${presentation.color.replace(".", "-")})`,
						"width": `${category.sharePercent ?? 0}%`,
					} as CSSProperties;

					return (
						<div
							aria-hidden
							className={classes.structureSection}
							key={category.type}
							style={style}
						/>
					);
				})}
			</div>

			<Group aria-hidden gap="xs" wrap="wrap">
				{legendCategories.map((category) => {
					const presentation = portfolioCategoryPresentation[category.type];
					const categoryLabel = t(presentation.label);

					const text = category.sharePercent === null
						? categoryLabel
						: t("accounts.structure.category", {
								category: categoryLabel,
								percent: formatStructurePercent(category.sharePercent),
							});

					return (
						<Text c="dimmed" key={category.type} size="xs">
							<Text c={presentation.color} component="span">●</Text>
							{" "}
							{text}
						</Text>
					);
				})}
			</Group>
		</Stack>
	);
};

const BrokerageAccountSummary: FC<BrokerageAccountSummaryProps> = (props) => {
	const { summary } = props;
	const { t } = useTranslation();
	if (summary.state === "unavailable")
		return (
			<Text c="dimmed" size="sm">
				{t("accounts.summaryUnavailable")}
			</Text>
		);
	if (summary.state === "empty")
		return (
			<Text c="dimmed" size="sm">
				{t("accounts.summaryEmpty")}
			</Text>
		);

	return (
		<Stack className={classes.balance} gap="xs">
			<Stack className={classes.summary} gap="sm">
				<Stack className={classes.currencySummary} gap={2}>
					<Text className={classes.total} fw={700}>
						{formatMoney(summary.totals, { withRoundedCents: true })}
					</Text>

					<ReturnValue item={summary.portfolio.unrealizedReturn} />
				</Stack>
			</Stack>

			<Group className={classes.cash} gap="xs" justify="flex-end">
				<Text c="dimmed" size="xs">
					{t("accounts.cash")}
				</Text>

				<Text className={classes.cashValue} size="sm">
					{formatMoney(summary.portfolio.cash, { withRoundedCents: true })}
				</Text>
			</Group>
		</Stack>
	);
};

type BrokerageAccountSourceStatusProps = {
	source: BrokerageAccountCard["source"];
};

const BrokerageAccountSourceStatus: FC<BrokerageAccountSourceStatusProps> = (
	props,
) => {
	const { t } = useTranslation();
	const { source } = props;
	const isSyncing = source?.lastAttempt.state === "running";

	const errorText = source?.lastAttempt.state === "failed"
		? t("accounts.refreshError")
		: null;

	return (
		<>
			<SourceSyncStatus
				errorText={errorText}
				lastAttempt={source?.lastAttempt}
				lastSuccessfulAt={source?.lastSuccessfulAt}
				stale={source?.freshness === "stale"}
			/>

			{isSyncing && (
				<Text role="status" size="xs">
					{t("accounts.refreshing")}
				</Text>
			)}
		</>
	);
};

type AccountDescriptionProps = {
	account: BrokerageAccountCard;
};

const AccountDescription: FC<AccountDescriptionProps> = (props) => {
	const { t } = useTranslation();
	const { account, summary } = props.account;
	if (summary.state !== "available") return null;

	const returns = [t("accounts.description.return", {
		absolute: formatMoney(
			{ currency: "RUB", value: summary.portfolio.unrealizedReturn.absolute },
			{ withSign: true },
		),
		percent: formatPercent(summary.portfolio.unrealizedReturn.percent),
	})];

	const structures = (() => {
		const categories = summary.portfolio.structure.categories.map(category =>
			t("accounts.description.structureCategory", {
				category: t(portfolioCategoryPresentation[category.type].label),
				value: formatMoney(
					{ currency: "RUB", value: category.value },
					{ withRoundedCents: true },
				),
			}),
		).join(", ");

		return t("accounts.description.structure", { value: categories });
	})();

	const hasPartialReturn = summary.portfolio.unrealizedReturn.partial;

	const details = [returns, structures].join(". ");

	return (
		<VisuallyHidden>
			{t("accounts.description.start", {
				name: account.name,
				type: t(accountTypeKey(account.type)),
			})}
			{t("accounts.description.currentValue", {
				value: formatMoney(summary.portfolio.totals),
			})}
			{details ? `${details}. ` : ""}
			{hasPartialReturn ? t("accounts.brokerDescription") : ""}
		</VisuallyHidden>
	);
};

const BrokerageAccountList: FC<BrokerageAccountListProps> = (props) => {
	const { t } = useTranslation();

	return (
		<ul className={classes.list}>
			{props.accounts.map(({ account, positionCounts, source, summary }) => (
				<li key={account.id}>
					<Link className={classes.row} to={`/accounts/${account.id}`}>
						<Group className={classes.identity} wrap="nowrap">
							<h2 className={classes.name}>{account.name}</h2>

							<Badge className={classes.accountType} variant="light">
								{t(accountTypeKey(account.type))}
							</Badge>
						</Group>

						<BrokerageAccountSummary summary={summary} />

						<Stack className={classes.details} gap={2}>
							{positionCounts && (
								<Text c="dimmed" size="xs">
									{t("accounts.positions", {
										count: positionCounts.total,
									})}
								</Text>
							)}

							<BrokerageAccountSourceStatus source={source} />
						</Stack>

						{summary.state === "available" && (
							<Stack className={classes.structure} gap={4}>
								<StructureBar item={summary.portfolio.structure} />
							</Stack>
						)}

						<AccountDescription
							account={{ account, positionCounts, source, summary }}
						/>
					</Link>
				</li>
			))}
		</ul>
	);
};

export { BrokerageAccountList };