import { useTranslation } from "react-i18next";
import { Link, useMatch } from "react-router";
import { useBrokerageAccounts } from "@/entities/brokerage-account";
import { useAuth } from "@/features/auth";

type Crumb = { label: string; to?: string };

function BreadcrumbTrail({ items }: { items: Crumb[] }) {
	const { t } = useTranslation();
	return (
		<nav
			aria-label={t("breadcrumbs.label")}
			className="breadcrumbs"
			data-depth={items.length}
		>
			{items.map((item, index) => (
				<span className="breadcrumbs-entry" key={item.to ?? item.label}>
					{index ? (
						<span
							aria-hidden="true"
							className={`breadcrumbs-separator-${index}`}
						>
							→
						</span>
					) : null}
					<span className={`breadcrumbs-item-${index}`}>
						{item.to ? (
							<Link to={item.to}>{item.label}</Link>
						) : (
							<span aria-current="page">{item.label}</span>
						)}
					</span>
				</span>
			))}
		</nav>
	);
}

function AccountBreadcrumbs({
	accountId,
	events,
	operations,
}: {
	accountId: string;
	events: boolean;
	operations: boolean;
}) {
	const { accessToken } = useAuth();
	const { data: accounts } = useBrokerageAccounts(accessToken);
	const { t } = useTranslation();
	const accountName =
		accounts?.find((account) => account.id === accountId)?.name ??
		t("breadcrumbs.accountFallback");
	const accountPath = `/accounts/${accountId}`;
	return (
		<BreadcrumbTrail
			items={
				events
					? [
							{ label: t("breadcrumbs.accounts"), to: "/accounts" },
							{ label: accountName, to: accountPath },
							{ label: t("breadcrumbs.events") },
						]
					: operations
						? [
								{ label: t("breadcrumbs.accounts"), to: "/accounts" },
								{ label: accountName, to: accountPath },
								{ label: t("breadcrumbs.operations") },
							]
						: [
								{ label: t("breadcrumbs.accounts"), to: "/accounts" },
								{ label: accountName },
							]
			}
		/>
	);
}

export function AppBreadcrumbs() {
	const { t } = useTranslation();
	const accountOperations = useMatch({
		path: "/accounts/:accountId/operations",
		end: true,
	});
	const accountEvents = useMatch({
		path: "/accounts/:accountId/events",
		end: true,
	});
	const account = useMatch({ path: "/accounts/:accountId", end: true });
	const accounts = useMatch({ path: "/accounts", end: true });
	const settings = useMatch({ path: "/settings", end: true });

	if (accountOperations)
		return (
			<AccountBreadcrumbs
				accountId={accountOperations.params.accountId ?? ""}
				events={false}
				operations
			/>
		);
	if (accountEvents)
		return (
			<AccountBreadcrumbs
				accountId={accountEvents.params.accountId ?? ""}
				events
				operations={false}
			/>
		);
	if (account)
		return (
			<AccountBreadcrumbs
				accountId={account.params.accountId ?? ""}
				events={false}
				operations={false}
			/>
		);
	if (accounts)
		return <BreadcrumbTrail items={[{ label: t("breadcrumbs.accounts") }]} />;
	if (settings)
		return <BreadcrumbTrail items={[{ label: t("breadcrumbs.settings") }]} />;
	return null;
}