/packages/react_ui/src/pages/users/:id/page.tsx at eeac3086a740ab78dd7b364f0f6f993c261cc778

// SPDX-FileCopyrightText: 2025 Shota FUJI <pockawoooh@gmail.com>
// SPDX-License-Identifier: AGPL-3.0-only

import "../../../polyfill.ts";

import { createClient } from "@connectrpc/connect";
import { Button, Code, Container, Flex, Spinner, Text } from "@radix-ui/themes";
import { type QueryKey, useQuery } from "@tanstack/react-query";
import { type User } from "@yamori/proto/yamori/workspace/v2/user_pb.js";
import { WorkspaceService } from "@yamori/proto/yamori/workspace/v2/workspace_service_pb.js";
import { type FC } from "react";

import * as Empty from "../../../components/Empty.ts";
import { ManagedErrorCallout } from "../../../components/ErrorCallout.ts";
import { useConnectTransport } from "../../../contexts/ConnectTransport.tsx";
import { Select, useURLPatternResult } from "../../../contexts/Router.tsx";
import { IllegalMessageError } from "../../../errors/IllegalMessageError.ts";

import { LoggedInLayout } from "../../LoggedInLayout.tsx";
import * as list from "../page.tsx";
import * as edit from "./edit/page.tsx";
import * as details from "./Details.tsx";

const Title: FC = () => "ユーザ詳細";

export function hasAccess(loginUser: User, userId: string): boolean {
	return (
		loginUser.id?.value === userId || !!loginUser.permissions?.canReadOtherUserProfile
	);
}

const NoAccess: FC = () => {
	return (
		<Empty.Root>
			<Empty.Title>閲覧権限がありません</Empty.Title>
			<Empty.Description>
				対象のユーザ情報の閲覧権限がないためページを表示できません。
			</Empty.Description>
			<Empty.Actions>
				<Button asChild size="3">
					<a href={list.createHref()}>一覧へ戻る</a>
				</Button>
			</Empty.Actions>
		</Empty.Root>
	);
};

export function userFetchQuery(userId: string): QueryKey {
	return [
		WorkspaceService.typeName,
		WorkspaceService.method.get.name,
		import.meta.url,
		userId,
	];
}

interface BodyProps {
	loginUser: User;

	userId: string;
}

const Body: FC<BodyProps> = ({ loginUser, userId }) => {
	const transport = useConnectTransport();
	const client = createClient(WorkspaceService, transport);

	const query = useQuery({
		queryKey: userFetchQuery(userId),
		async queryFn() {
			const resp = await client.get({});
			if (resp.result.case === "ok") {
				// Tanstack Query が `undefined` をエラーシグナルとして濫用しているため回避が必要
				// `undefined` を返すとエラー状態になる（デザインバグだが治る見込みはない）
				return resp.result.value.users.find((u) => u.id?.value === userId) ?? null;
			}

			if (typeof resp.result.case === "string") {
				throw resp.result.value;
			}

			throw new IllegalMessageError(resp);
		},
	});

	if (query.isError) {
		return (
			<LoggedInLayout title={<Title />} user={loginUser}>
				<Container p="3" size="2">
					<Empty.Root>
						<Empty.Title>ユーザ詳細の取得に失敗</Empty.Title>
						<Empty.Description>
							ユーザ詳細の取得中にエラーが発生しました。
						</Empty.Description>
						<ManagedErrorCallout title="取得失敗" error={query.error} />
						<Empty.Actions>
							<Button size="3" onClick={() => void query.refetch()}>
								再取得
							</Button>
							<Button asChild size="3" variant="outline">
								<a href={list.createHref()}>一覧へ戻る</a>
							</Button>
						</Empty.Actions>
					</Empty.Root>
				</Container>
			</LoggedInLayout>
		);
	}

	if (query.isLoading) {
		return (
			<LoggedInLayout title={<Title />} user={loginUser}>
				<Flex position="absolute" inset="0" align="center" justify="center" gap="2">
					<Spinner />
					<Text size="2" color="gray">
						ユーザ詳細を読込中...
					</Text>
				</Flex>
			</LoggedInLayout>
		);
	}

	if (!query.data) {
		return (
			<LoggedInLayout title={<Title />} user={loginUser}>
				<Container p="3" size="2">
					<Empty.Root>
						<Empty.Title>該当するユーザは存在しません</Empty.Title>
						<Empty.Description>
							ID <Code>{userId}</Code> のユーザは登録されていません。
						</Empty.Description>
						<Empty.Actions>
							<Button asChild size="3">
								<a href={list.createHref()}>一覧へ戻る</a>
							</Button>
						</Empty.Actions>
					</Empty.Root>
				</Container>
			</LoggedInLayout>
		);
	}

	const user = query.data;

	return (
		<Select
			routes={[
				{
					pattern: details.pattern,
					children: <details.Page user={user} loginUser={loginUser} />,
				},
				{
					pattern: edit.pattern,
					children: <edit.Page user={user} loginUser={loginUser} />,
				},
			]}
			fallback={
				<LoggedInLayout title="404" user={loginUser}>
					<Empty.Root>
						<Empty.Title>ページが見つかりません</Empty.Title>
						<Empty.Description>指定された URL にページはありません。</Empty.Description>
						<Empty.Actions>
							<Button asChild size="3">
								<a href={list.createHref()}>一覧へ戻る</a>
							</Button>
						</Empty.Actions>
					</Empty.Root>
				</LoggedInLayout>
			}
		/>
	);
};

export interface PageProps {
	loginUser: User;
}

export const Page: FC<PageProps> = ({ loginUser }) => {
	const { pathname } = useURLPatternResult();
	const userId = pathname.groups.user || "";

	if (!hasAccess(loginUser, userId)) {
		return (
			<LoggedInLayout title={<Title />} user={loginUser}>
				<NoAccess />
			</LoggedInLayout>
		);
	}

	return <Body loginUser={loginUser} userId={userId} />;
};

export const pattern = new URLPattern({
	pathname: "/users/:user(wu-[^\\/]+)/:frag*",
});