import type { FC } from "react";

import {
	Alert,
	Button,
	Group,
	Stack,
	Text,
	Title,
} from "@mantine/core";
import { DatePickerInput } from "@mantine/dates";
import { useTranslation } from "react-i18next";

import {
	BrokerageEventCard,
	BrokerageEventGroup,
	brokerageEventGroupKey,
	brokerageEventKey,
} from "@/entities/brokerage-event";
import { formatDate, formatSnapshotTime, groupItems } from "@/shared/lib";
import { ReadRetry, SourceSyncStatus } from "@/shared/ui";

import type { AccountEventsPageViewModel } from "../AccountEventsPage.vm";

import { AccountEventsPageEmpty } from "./AccountEventsPageEmpty.view";

type AccountEventsPageLoadedProps = Extract<
	AccountEventsPageViewModel,
	{ state: "loaded" }
>;

const AccountEventsPageLoadedEvents: FC<AccountEventsPageLoadedProps> = (
	props,
) => {
	if (props.events.length > 0) {
		const entries = groupItems(
			props.events,
			props.allAccounts ? brokerageEventGroupKey : () => null,
		);

		return (
			<Stack
				component="ul"
				gap="sm"
				m={0}
				p={0}
				style={{ listStyle: "none" }}
			>
				{entries.map(entry => entry.type === "group"
					? (
							<BrokerageEventGroup
								events={entry.items}
								key={entry.key}
								totalVisible={props.totalVisible}
							/>
						)
					: (
							<li key={brokerageEventKey(entry.item)}>
								<BrokerageEventCard event={entry.item} />
							</li>
						))}
			</Stack>
		);
	}

	if (props.partial) {
		return;
	}

	return <AccountEventsPageEmpty />;
};

const AccountEventsPageLoaded: FC<AccountEventsPageLoadedProps> = (props) => {
	const { t } = useTranslation();

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

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

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

			{!!props.partial && <Alert role="status">{t("investment.partial")}</Alert>}

			<Text c="dimmed">{t("events.hint")}</Text>

			<Text c="dimmed" size="sm">
				{t("events.forecastWindow", {
					date: formatSnapshotTime(props.calculatedAt),
					from: formatDate(props.window.from),
					to: formatDate(props.window.to),
				})}
			</Text>

			<Group align="end">
				<DatePickerInput
					allowSingleDateInRange
					clearable
					clearButtonProps={{ "aria-label": t("ledger.clearPeriod") }}
					label={t("ledger.period")}
					minDate={props.minDate}
					onChange={props.onPeriodChange}
					popoverProps={{
						middlewares: { shift: { crossAxis: true } },
						onOpen: props.onPeriodPopoverOpen,
						returnFocus: true,
					}}
					type="range"
					value={props.draftPeriod}
					valueFormat="DD.MM.YYYY"
				/>
			</Group>

			<Group>
				<Button disabled={!props.canApply} onClick={props.onApply}>
					{t("ledger.apply")}
				</Button>

				<Button onClick={props.onReset} variant="default">
					{t("ledger.reset")}
				</Button>
			</Group>

			<AccountEventsPageLoadedEvents {...props} />
		</Stack>
	);
};

export { AccountEventsPageLoaded };