frontend/src/pages/stock/ui/StockPage.view.tsx

import {
	Alert,
	Avatar,
	Badge,
	Button,
	Group,
	Paper,
	Skeleton,
	Stack,
	Text,
	Title,
} from "@mantine/core";
import { LoadingSkeleton } from "@wealthledger/ui";
import type { FC } from "react";
import { useTranslation } from "react-i18next";
import {
	InstrumentChart as StockChart,
	InstrumentEvents as StockEvents,
	InstrumentPosition as StockPosition,
	InstrumentSection as StockSection,
} from "@/features/instrument-details";
import {
	formatDate,
	formatDecimal,
	formatMoney,
	formatSnapshotTime,
} from "@/shared/lib";
import { StockDividends } from "./components/StockEvents.view";
import classes from "./StockPage.module.css";
import type { StockPageVm } from "./StockPage.vm";

type StockPageViewProps = { vm: StockPageVm };
const StockPageView: FC<StockPageViewProps> = (props) => {
	const { vm } = props;
	const { t } = useTranslation();
	const stock = vm.stock;
	if (!stock) return null;
	return (
		<Stack className={classes.page} gap="lg">
			<Paper component="header" className={classes.section} withBorder>
				<Group justify="space-between" align="start">
					<div className={classes.identity}>
						<Avatar
							key={vm.logoSrc}
							src={vm.logoSrc}
							alt=""
							size={56}
							radius="md"
						>
							{stock.name[0]}
						</Avatar>
						<div>
							<Title order={1} size="h2">
								{stock.name}
							</Title>
							<Text size="sm" c="dimmed">
								{stock.ticker} ·{" "}
								{t(`stock.shareTypes.${stock.shareType}`, {
									defaultValue: t("stock.share"),
								})}
							</Text>
						</div>
					</div>
					<Button
						variant="subtle"
						onClick={() => {
							vm.stockState.retry();
							vm.quoteState.retry();
						}}
					>
						{t("stock.refreshPrice")}
					</Button>
				</Group>
				{vm.company?.description ? (
					<Text size="sm" mt="md" style={{ whiteSpace: "pre-line" }}>
						{vm.company.description}
					</Text>
				) : null}
				{vm.stockState.error || vm.quoteState.error ? (
					<Alert role="alert" color="orange" mt="md">
						{t(vm.quote ? "accounts.refreshError" : "stock.sectionError")}
					</Alert>
				) : null}
				{vm.quoteState.loading ? (
					<LoadingSkeleton label={t("stock.loadingPrice")}>
						<Skeleton mt="lg" h={55} w="50%" />
					</LoadingSkeleton>
				) : (
					<div aria-live="polite">
						<Text className={classes.price} mt="lg">
							{formatMoney(vm.quote?.price ?? null)}
						</Text>
						{vm.quote?.change ? (
							<Text
								fw={600}
								className={
									vm.quote.change.value.startsWith("-")
										? classes.negative
										: classes.positive
								}
							>
								{vm.quote.change.value.startsWith("-") ? "" : "+"}
								{formatMoney(vm.quote.change)}
								{vm.quote.changePercent !== null
									? ` (${formatDecimal(vm.quote.changePercent)} %)`
									: ""}
							</Text>
						) : null}
						{vm.quote?.previousCloseDate ? (
							<Text size="xs" c="dimmed">
								{t("stock.changeBase", {
									date: formatDate(vm.quote.previousCloseDate),
								})}
							</Text>
						) : (
							<Text size="xs" c="dimmed">
								{t("stock.noComparison")}
							</Text>
						)}
						<Group gap="sm" mt="sm">
							<Badge variant="light" color="gray">
								{t(`stock.trading.${vm.quote?.tradingStatus}`, {
									defaultValue: t("stock.trading.unknown"),
								})}
							</Badge>
							{vm.quote?.priceAt ? (
								<Text size="xs" c="dimmed">
									{t("stock.priceAt", {
										date: formatSnapshotTime(vm.quote.priceAt),
									})}
								</Text>
							) : null}
						</Group>
						{vm.quote?.unavailable.length ? (
							<Text c="dimmed" size="xs" mt="xs">
								{t("stock.partialQuote")}
							</Text>
						) : null}
						{vm.quoteState.refreshing ? (
							<Text role="status" size="xs" c="dimmed">
								{t("accounts.refreshing")}
							</Text>
						) : null}
					</div>
				)}
				<StockSection
					title={t("stock.company")}
					state={vm.companyState}
					embedded
				>
					<Group gap="xl" mb="md">
						{stock.sector ? (
							<Text size="sm">
								{t("stock.sector")}:{" "}
								{t(`stock.sectors.${stock.sector}`, {
									defaultValue: stock.sector,
								})}
							</Text>
						) : null}
						{stock.lot !== null ? (
							<Text size="sm">{t("stock.lot", { value: stock.lot })}</Text>
						) : null}
					</Group>
					{vm.company ? (
						<Stack gap="lg">
							{vm.company.unavailable.length ? (
								<Alert color="orange">
									<Group justify="space-between">
										<Text size="sm">{t("stock.partialCompany")}</Text>
										<Button
											size="xs"
											variant="default"
											onClick={vm.companyState.retry}
										>
											{t("accounts.retry")}
										</Button>
									</Group>
								</Alert>
							) : null}
							{vm.company.metrics.length ? (
								<div className={classes.companyMetrics}>
									{vm.company.metrics.map((metric) => (
										<div key={metric.key}>
											<Text size="xs" c="dimmed">
												{t(`stock.metrics.${metric.key}`)}
												{metric.period ? ` · ${metric.period}` : ""}
											</Text>
											<Text fw={600} size="lg">
												{new Intl.NumberFormat("ru-RU", {
													maximumFractionDigits: 2,
													notation:
														metric.unit === "money" ? "compact" : "standard",
												}).format(metric.value)}{" "}
												{metric.unit === "money"
													? new Intl.NumberFormat("ru-RU", {
															style: "currency",
															currency: metric.currency ?? "RUB",
															currencyDisplay: "narrowSymbol",
														})
															.formatToParts(0)
															.find((part) => part.type === "currency")?.value
													: metric.unit === "percent"
														? "%"
														: "×"}
											</Text>
										</div>
									))}
								</div>
							) : (
								<Text c="dimmed">{t("stock.noFundamentals")}</Text>
							)}
							<Text size="xs" c="dimmed">
								{t("stock.periodNote")}
							</Text>
						</Stack>
					) : null}
				</StockSection>
			</Paper>
			<StockChart vm={vm} />
			<StockPosition vm={vm} />
			<StockDividends vm={vm} />
			<StockEvents vm={vm} />
		</Stack>
	);
};

export { StockPageView };