frontend/src/features/instrument-search/ui/InstrumentSearch/InstrumentSearch.view.tsx

import type { ChangeEvent, FC, ReactNode } from "react";

import {
	Alert,
	Anchor,
	Skeleton,
	Stack,
	Text,
	TextInput,
	Title,
} from "@mantine/core";
import { LoadingSkeleton } from "@wealthledger/ui";
import { useTranslation } from "react-i18next";
import { Link } from "react-router";

import { ApiErrorCode, isApiErrorCode } from "@/shared/api";

type InstrumentSearchProps = {
	children: ReactNode[];
	kind: "bond" | "stock";
	vm: {
		canSearch: boolean;
		code?: string;
		error: boolean;
		loading: boolean;
		onQueryChange: (event: ChangeEvent<HTMLInputElement>) => void;
		partial: boolean;
		query: string;
		ready: boolean;
	};
};

const InstrumentSearchResults: FC<InstrumentSearchProps> = (props) => {
	const { children, kind, vm } = props;
	const { t } = useTranslation();
	if (vm.loading) return (
		<LoadingSkeleton label={t(`${kind}.searching`)}>
			<Stack>
				<Skeleton h={78} />

				<Skeleton h={78} />

				<Skeleton h={78} />
			</Stack>
		</LoadingSkeleton>
	);
	if (!vm.ready) return;
	if (children.length > 0) return (
		<Stack gap="sm">
			<Text c="dimmed" size="xs">{t(`${kind}.searchVariants`)}</Text>

			{children}
		</Stack>
	);

	return (
		<Text c="dimmed">
			{t(vm.partial ? "investment.partial" : `${kind}.noSearchResults`)}
		</Text>
	);
};

const InstrumentSearch: FC<InstrumentSearchProps> = (props) => {
	const { kind, vm } = props;
	const { t } = useTranslation();

	return (
		<Stack gap="lg">
			<div>
				<Title order={1}>{t(`${kind}.searchTitle`)}</Title>

				<Text c="dimmed" mt="xs">
					{t(`${kind}.searchSubtitle`)}
				</Text>
			</div>

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

			<TextInput
				label={t(`${kind}.searchLabel`)}
				maxLength={80}
				onChange={vm.onQueryChange}
				placeholder={t(`${kind}.searchPlaceholder`)}
				size="md"
				value={vm.query}
			/>

			{!vm.canSearch && <Text c="dimmed">{t("stock.searchHint")}</Text>}

			{!!vm.error && (
				<Alert aria-live="polite" color="orange" role="status">
					<Stack gap="xs">
						<Text>
							{t(
								isApiErrorCode(vm.code, ApiErrorCode.TbankNotConnected)
								|| isApiErrorCode(vm.code, ApiErrorCode.InvalidTbankToken)
									? `${kind}.connect`
									: "stock.sectionError",
							)}
						</Text>

						<Anchor component={Link} to="/settings">
							{t("accounts.openSettings")}
						</Anchor>

					</Stack>
				</Alert>
			)}

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

export { InstrumentSearch };