import type { FC } from "react";

import {
	Alert,
	Button,
	Group,
	Loader,
	Stack,
	Text,
	Title,
} from "@mantine/core";
import { StateView } from "@wealthledger/ui";
import { FormProvider } from "react-hook-form";
import { useTranslation } from "react-i18next";

import { formatSnapshotTime } from "@/shared/lib";

import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";

import classes from "../AccountIncomePage.module.css";
import { IncomeComparisons } from "./IncomeComparisons.view";
import { IncomePayments } from "./IncomePayments.view";
import { IncomePeriodForm } from "./IncomePeriodForm/IncomePeriodForm.view";
import { IncomeSummary } from "./IncomeSummary.view";

type LoadedProps = Extract<AccountIncomePageViewModel, { state: "loaded" }>;

const AccountIncomePageLoadedSummary: FC<LoadedProps> = (props) => {
	const { t } = useTranslation();

	const { analytics } = props;

	if (props.partial) {
		return <Alert role="status">{t("investment.partial")}</Alert>;
	}

	return analytics.totalsByCurrency.length > 0
		? <IncomeSummary totals={analytics.totalsByCurrency} />
		: <StateView text={t("income.emptyText")} title={t("income.emptyTitle")} />;
};

const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
	const { display, form, onReset, onSubmit, refreshError, refreshing, retry }
		= props;

	const { t } = useTranslation();

	return (
		<Stack className={classes.page} gap="lg">
			{!!props.lastSuccessfulAt && (
				<Text c="dimmed" size="xs">
					{t("investment.sourceTime", {
						date: formatSnapshotTime(props.lastSuccessfulAt),
					})}
				</Text>
			)}

			<Title order={1}>{t("income.title")}</Title>

			<Button disabled={refreshing} onClick={retry} w="fit-content">
				{t("investment.refresh")}
			</Button>

			<FormProvider {...form}>
				<IncomePeriodForm
					key={props.formRevision}
					onReset={onReset}
					onSubmit={form.handleSubmit(onSubmit)}
				/>
			</FormProvider>

			{!!refreshing && (
				<Group aria-label={t("income.refreshing")} gap="xs" role="status">
					<Loader size="sm" />

					<Text>{t("income.refreshing")}</Text>
				</Group>
			)}

			{!!refreshError && (
				<Alert aria-live="polite" color="orange" role="status">
					<Stack gap="sm">
						<Text>
							{t(
								props.sourceError
									? "investment.syncFailed"
									: "income.refreshError",
							)}
						</Text>

						<Button onClick={retry} variant="default">
							{t("income.retry")}
						</Button>
					</Stack>
				</Alert>
			)}

			<AccountIncomePageLoadedSummary {...props} />

			<Alert color="blue">{t("income.taxBoundary")}</Alert>

			<IncomeComparisons
				comparison={display.previousComparison}
				notice={t(`income.${display.previousNotice}`)}
				title={t("income.previousPeriod")}
			/>

			<IncomeComparisons
				comparison={display.comparison}
				notice={t(`income.${display.yearNotice}`)}
				title={t("income.yearAgo")}
			/>

			<IncomePayments entries={display.entries} />
		</Stack>
	);
};

export { AccountIncomePageLoaded };