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

import type { FC } from "react";

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

import { formatDate, formatMoney } 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";

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>
	);
};

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

const BrokerageAccountSourceStatus: FC<BrokerageAccountSourceStatusProps> = (
	props,
) => {
	const { source } = props;
	const { t } = useTranslation();

	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>
			)}
		</>
	);
};

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>

							<WalletIcon className={classes.accountIcon} />
						</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} />

						<BrokerageAccountSourceStatus source={source} />
					</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 };