import { Card, Group, Stack, Text } from "@mantine/core";
import type { FC } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";
import { formatMoney } from "@/entities/portfolio";
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 (
		<Group className={classes.summary} gap="sm" wrap="wrap">
			{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>
			) : null}
		</Group>
	);
};

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

	return (
		<Stack className={classes.list} gap="md">
			{accounts.map(({ account, summary }) => (
				<Card
					component={Link}
					to={`/accounts/${account.id}`}
					key={account.id}
					className={classes.card}
					padding="lg"
					radius="lg"
					withBorder
				>
					<Stack gap="xs">
						<Text className={classes.kicker} size="xs" fw={700}>
							{t(accountTypeKey(account.type))}
						</Text>
						<Text fw={800} size="lg">
							{account.name}
						</Text>
						<BrokerageAccountSummary summary={summary} />
						{account.openedOn ? (
							<Text c="dimmed" size="sm">
								{t("accounts.openedOn", {
									date: new Intl.DateTimeFormat("ru-RU", {
										dateStyle: "long",
										timeZone: "UTC",
									}).format(new Date(`${account.openedOn}T00:00:00Z`)),
								})}
							</Text>
						) : null}
						<Text className={classes.open} size="sm" fw={700}>
							{t("accounts.openAccount")}
						</Text>
					</Stack>
				</Card>
			))}
		</Stack>
	);
};

export { BrokerageAccountList };