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

import type { FC } from "react";

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

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

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

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

type BrokerageAccountListProps = { accounts: BrokerageAccountCard[] };

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

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.summary} gap={4}>
			{summary.totals.map(total => (
				<Text className={classes.total} fw={700} key={total.currency}>
					{formatMoney(total)}
				</Text>
			))}
			{!!(summary.remainingCurrencyCount) && ((
				<Text c="dimmed" size="sm">
					{t("accounts.remainingCurrencies", {
						count: summary.remainingCurrencyCount,
					})}
				</Text>
			))}
		</Stack>
	);
};

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

	return (
		<SimpleGrid className={classes.list} cols={1} spacing="lg">
			{accounts.map(({ account, positionCounts, source, summary }) => (
				<Card
					className={classes.card}
					component={Link}
					key={account.id}
					padding="xl"
					radius="lg"
					to={`/accounts/${account.id}`}
					withBorder
				>
					<Stack className={classes.identity} gap="sm">
						<Group gap="sm" justify="space-between" wrap="nowrap">
							<Text className={classes.kicker} fw={700} size="xs">
								{t(accountTypeKey(account.type))}
							</Text>
							<svg
								aria-hidden="true"
								className={classes.accountIcon}
								fill="none"
								focusable="false"
								stroke="currentColor"
								strokeLinecap="round"
								strokeLinejoin="round"
								strokeWidth="1.5"
								viewBox="0 0 24 24"
							>
								<rect height="15" rx="3" width="18" x="3" y="5" />
								<path d="M3 9h18M7 15h3M14 5V3H7a4 4 0 0 0-4 4" />
							</svg>
						</Group>
						<Text className={classes.name} component="h2" fw={700}>
							{account.name}
						</Text>
					</Stack>
					<Stack className={classes.balance} gap="xs">
						<Text c="dimmed" size="sm">
							{t("accounts.currentValue")}
						</Text>
						<BrokerageAccountSummary summary={summary} />
						{!!(source?.lastSuccessfulAt) && ((
							<Text c="dimmed" size="xs">
								{t("investment.sourceTime", {
									date: formatSnapshotTime(source.lastSuccessfulAt),
								})}
							</Text>
						))}
						{(source?.sync.state === "running"
							|| source?.sync.state === "queued") && ((
							<Text role="status" size="xs">
								{t("accounts.refreshing")}
							</Text>
						))}
						{(source?.sync.state === "failed") && ((
							<Text size="xs">{t("accounts.refreshError")}</Text>
						))}
						{(source?.freshness === "stale") && ((
							<Text size="xs">{t("investment.stale")}</Text>
						))}
					</Stack>
					{!!(positionCounts) && ((
						<dl className={classes.positions}>
							<div className={classes.stocks}>
								<dt>{t("accounts.stocks")}</dt>
								<dd>
									{new Intl.NumberFormat("ru-RU").format(positionCounts.stocks)}
								</dd>
							</div>
							<div className={classes.bonds}>
								<dt>{t("accounts.bonds")}</dt>
								<dd>
									{new Intl.NumberFormat("ru-RU").format(positionCounts.bonds)}
								</dd>
							</div>
						</dl>
					))}
					<Group className={classes.footer} gap="sm" justify="space-between">
						{!!(account.openedOn) && ((
							<Text c="dimmed" size="xs">
								{t("accounts.openedOn", {
									date: formatDate(account.openedOn),
								})}
							</Text>
						))}
						<Text className={classes.open} component="span" fw={600} size="sm">
							{t("accounts.openAccount")}
							<span aria-hidden="true" className={classes.arrow}>
								→
							</span>
						</Text>
					</Group>
				</Card>
			))}
		</SimpleGrid>
	);
};

export { BrokerageAccountList };