import type { FC } from "react";

import { Button, Stack, Text, Title } from "@mantine/core";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";

import type { InvestmentResourceMeta } from "@/shared/api";

import {
	type BrokerageAccountCard,
	BrokerageAccountList,
} from "@/entities/brokerage-account";
import { SourceSyncStatus } from "@/shared/ui";

type AccountsPageLoadedProps = {
	accounts: BrokerageAccountCard[];
	meta: InvestmentResourceMeta;
};

const AccountsPageLoaded: FC<AccountsPageLoadedProps> = (props) => {
	const { t } = useTranslation();

	return (
		<Stack gap="lg">
			<Stack gap={4}>
				<Title order={1}>{t("accounts.title")}</Title>

				<Text c="dimmed" size="sm">
					{t("accounts.subtitle")}
				</Text>

				<SourceSyncStatus
					lastAttempt={props.meta.lastAttempt}
					lastSuccessfulAt={props.meta.lastSuccessfulAt}
					stale={props.meta.freshness === "stale"}
				/>
			</Stack>

			<Button
				component={Link}
				to="/accounts/all"
				variant="light"
				w="fit-content"
			>
				{t("accounts.openAll")}
			</Button>

			<BrokerageAccountList accounts={props.accounts} />
		</Stack>
	);
};

export { AccountsPageLoaded };