import { Button, Card, Group, Stack, Text, Title } from "@mantine/core";
import { useTranslation } from "react-i18next";
import { useParams } from "react-router";
import {
	type BrokerageEvent,
	useBrokerageEvents,
} from "@/entities/brokerage-event";
import { formatMoney } from "@/entities/portfolio";
import { StateView } from "@/shared/ui";

export function AccountEventsPage() {
	const { accountId } = useParams();
	const events = useBrokerageEvents(accountId);
	if (events.isLoading) return <AccountEventsPageLoading />;
	if (events.isError)
		return <AccountEventsPageError retry={() => events.refetch()} />;
	if (!events.data) return <AccountEventsPageLoading />;
	if (!events.data.events.length) return <AccountEventsPageEmpty />;
	return <AccountEventsPageLoaded events={events.data.events} />;
}

function AccountEventsPageLoading() {
	const { t } = useTranslation();
	return (
		<StateView
			loading
			title={t("states.loadingTitle")}
			text={t("states.loadingText")}
		/>
	);
}

function AccountEventsPageError({ retry }: { retry: () => void }) {
	const { t } = useTranslation();
	return (
		<StateView
			error
			title={t("events.errorTitle")}
			text={t("events.errorText")}
			action={<Button onClick={retry}>{t("events.retry")}</Button>}
		/>
	);
}

function AccountEventsPageEmpty() {
	const { t } = useTranslation();
	return (
		<Stack maw={960} gap="lg">
			<Title order={1}>{t("events.title")}</Title>
			<Text c="dimmed">{t("events.hint")}</Text>
			<StateView title={t("events.emptyTitle")} text={t("events.emptyText")} />
		</Stack>
	);
}

function AccountEventsPageLoaded({ events }: { events: BrokerageEvent[] }) {
	const { t } = useTranslation();
	return (
		<Stack maw={960} gap="lg">
			<Title order={1}>{t("events.title")}</Title>
			<Text c="dimmed">{t("events.hint")}</Text>
			{events.map((event) => (
				<AccountEventRow
					event={event}
					key={`${event.type}-${event.date}-${event.ticker}`}
				/>
			))}
		</Stack>
	);
}

function AccountEventRow({ event }: { event: BrokerageEvent }) {
	const { t } = useTranslation();
	return (
		<Card withBorder>
			<Group justify="space-between" align="flex-start" wrap="wrap">
				<Stack gap={2}>
					<Text fw={700}>{event.displayName}</Text>
					<Text c="dimmed" size="sm">
						{formatCalendarDate(event.date)} ·{" "}
						{t(`events.dateKind.${event.dateKind}`)}
					</Text>
				</Stack>
				<Stack gap={2} align="flex-end">
					<Text fw={700}>
						{event.amount && event.currency
							? formatMoney({ currency: event.currency, value: event.amount })
							: t("events.noAmount")}
					</Text>
					<Text c="dimmed" size="sm">
						{t(`events.type.${event.type}`)}
					</Text>
				</Stack>
			</Group>
		</Card>
	);
}

function formatCalendarDate(date: string) {
	return new Intl.DateTimeFormat("ru-RU", {
		dateStyle: "medium",
		timeZone: "UTC",
	}).format(new Date(`${date}T00:00:00Z`));
}