import type { FC } from "react";

import { Stack } from "@mantine/core";
import { StateView } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";

import type { BrokerageAccount } from "@/entities/brokerage-account";
import type { InvestmentResourceMeta } from "@/shared/api";

import { BrokerageEventsPreview } from "@/entities/brokerage-event";
import { ReadRetry, type ReadRetryProps, SourceSyncStatus } from "@/shared/ui";

import type {
	AccountPageIncomeSummary,
	AccountPageRecentEvents,
	AccountPageRecentOperations,
} from "../../../model/previews";

import { AccountHeading } from "./AccountHeading.view";
import { IncomeSummary } from "./IncomeSummary.view";
import { PortfolioStructure } from "./PortfolioStructure/PortfolioStructure";
import { RecentOperations } from "./RecentOperations.view";

type AccountPageEmptyProps = {
	account?: BrokerageAccount;
	accountId?: string;
	incomeSummary?: AccountPageIncomeSummary;
	readRetry?: ReadRetryProps;
	recentEvents: AccountPageRecentEvents;
	recentOperations: AccountPageRecentOperations;
	source?: InvestmentResourceMeta;
};

const AccountPageEmpty: FC<AccountPageEmptyProps> = (props) => {
	const { t } = useTranslation();

	const text = t(
		props.accountId === "all"
			? "portfolio.allEmptyText"
			: "portfolio.emptyText",
	);

	return (
		<Stack>
			<AccountHeading account={props.account} accountId={props.accountId} />

			<SourceSyncStatus
				lastAttempt={props.source?.lastAttempt}
				lastSuccessfulAt={props.source?.lastSuccessfulAt}
				stale={props.source?.freshness === "stale"}
			/>

			{!!props.readRetry && <ReadRetry {...props.readRetry} />}

			<StateView text={text} title={t("portfolio.emptyTitle")} />

			<PortfolioStructure
				structure={{ currencies: [], unvaluedCategories: [] }}
			/>

			<RecentOperations
				allAccounts={props.accountId === "all"}
				operations={props.recentOperations}
			/>

			<BrokerageEventsPreview
				allAccounts={props.accountId === "all"}
				events={props.recentEvents}
			/>

			{!!props.incomeSummary && <IncomeSummary {...props.incomeSummary} />}
		</Stack>
	);
};

export { AccountPageEmpty };