import { Anchor, Group, Text } from "@mantine/core";
import { EntryCard } from "@wealthledger/ui";
import type { FC } from "react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";
import {
	formatDecimal,
	formatMoney,
	formatSnapshotTime,
	instrumentLogoUrl,
} from "@/shared/lib";
import type { BrokerageOperation } from "../api/useBrokerageOperations";
import { operationLabelKey, paymentPresentation } from "../model/display";

type LedgerEntryRowProps = {
	operation: BrokerageOperation;
	withDetails?: boolean;
};

const LedgerEntryRow: FC<LedgerEntryRowProps> = (props) => {
	const { operation } = props;
	const { t } = useTranslation();
	const instrument =
		operation.ticker ?? operation.instrumentType ?? t("ledger.noInstrument");
	const payment = paymentPresentation(operation);
	const metadata = [
		t("ledger.occurredAt", { date: formatSnapshotTime(operation.occurredAt) }),
		instrument,
		props.withDetails ? null : operation.account?.name,
	]
		.filter(Boolean)
		.join(" · ");

	return (
		<EntryCard
			title={operation.description || t(operationLabelKey(operation.type))}
			metadata={metadata}
			details={
				props.withDetails ? (
					<>
						<Group gap="sm">
							{operation.quantity != null ? (
								<Text size="xs" c="dimmed">
									{t("ledger.quantity", {
										value: formatDecimal(operation.quantity),
									})}
								</Text>
							) : null}
							{operation.price ? (
								<Text size="xs" c="dimmed">
									{t("ledger.price", { value: formatMoney(operation.price) })}
								</Text>
							) : null}
						</Group>
						{operation.account ? (
							<Anchor
								component={Link}
								size="sm"
								to={`/accounts/${encodeURIComponent(operation.account.id)}`}
							>
								{operation.account.name}
							</Anchor>
						) : null}
					</>
				) : undefined
			}
			initial={(instrument.trim()[0] ?? "?").toUpperCase()}
			imageSrc={instrumentLogoUrl(operation.logoName)}
			value={payment.amount}
			valueLabel={t(payment.label)}
			tone={payment.tone}
		/>
	);
};

export { LedgerEntryRow };