import type { FC } from "react";

import { Accordion, Alert, Stack } from "@mantine/core";
import { useTranslation } from "react-i18next";

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

import { BrokerageEventsPreview } from "@/entities/brokerage-event";
import { SourceSyncStatus } from "@/shared/ui";
import { PortfolioStructure } from "@/widgets/portfolio-structure";

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

import classes from "../AccountPage.module.css";
import { AccountHeading } from "./AccountHeading.view";
import { CurrencyCards } from "./CurrencyCards/CurrencyCards.view";
import { IncomeSummary } from "./IncomeSummary.view";
import { PositionSection } from "./PositionSection.view";
import { RecentOperations } from "./RecentOperations.view";

type AccountPageLoadedProps = {
	account?: BrokerageAccount;
	accountId?: string;
	incomeSummary?: AccountPageIncomeSummary;
	partial?: boolean;
	portfolio: Portfolio;
	positionSections: AccountPagePositionSection[];
	recentEvents: AccountPageRecentEvents;
	recentOperations: AccountPageRecentOperations;
	source?: InvestmentResourceMeta;
};

const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
	const { t } = useTranslation();

	const defaultValue = [
		...props.positionSections.map(section => section.kind),
		"cash",
		"recentOperations",
		"recentEvents",
		"incomeSummary",
	];

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

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

			{props.partial
				? <Alert role="status">{t("investment.partial")}</Alert>
				: <CurrencyCards amounts={props.portfolio.totalsByCurrency} />}

			{!props.partial && (
				<PortfolioStructure
					key={props.accountId}
					structure={props.portfolio.structure}
				/>
			)}

			<Accordion
				classNames={{
					chevron: classes.accordionChevron,
					control: classes.accordionControl,
					label: classes.accordionLabel,
					panel: classes.accordionPanel,
				}}
				defaultValue={defaultValue}
				multiple
			>
				{props.positionSections.map(section => (
					<Accordion.Item key={section.kind} value={section.kind}>
						<Accordion.Control>
							{t(positionSectionTitleKey(section.kind))}
						</Accordion.Control>

						<Accordion.Panel>
							<PositionSection section={section} />
						</Accordion.Panel>
					</Accordion.Item>
				))}

				<Accordion.Item value="cash">
					<Accordion.Control>{t("portfolio.cashBalances")}</Accordion.Control>

					<Accordion.Panel>
						<CurrencyCards amounts={props.portfolio.cashBalances} />
					</Accordion.Panel>
				</Accordion.Item>

				<Accordion.Item value="recentOperations">
					<Accordion.Control>{t("ledger.recentTitle")}</Accordion.Control>

					<Accordion.Panel>
						<RecentOperations operations={props.recentOperations} />
					</Accordion.Panel>
				</Accordion.Item>

				<Accordion.Item value="recentEvents">
					<Accordion.Control>{t("events.recentTitle")}</Accordion.Control>

					<Accordion.Panel>
						<BrokerageEventsPreview events={props.recentEvents} />
					</Accordion.Panel>
				</Accordion.Item>

				<Accordion.Item value="incomeSummary">
					<Accordion.Control>{t("income.summaryTitle")}</Accordion.Control>

					<Accordion.Panel>
						{!!props.incomeSummary && (
							<IncomeSummary {...props.incomeSummary} />
						)}
					</Accordion.Panel>
				</Accordion.Item>
			</Accordion>
		</Stack>
	);
};

function positionSectionTitleKey(kind: AccountPagePositionSection["kind"]) {
	if (kind === "stocks") return "portfolio.stocks";

	return kind === "bonds" ? "portfolio.bonds" : "portfolio.otherPositions";
}

export { AccountPageLoaded };