import { Link, Stack, useRouter } from "expo-router";import { SymbolView } from "expo-symbols";import type { EnvironmentId, ProjectId } from "@t3tools/contracts";import { useMemo } from "react";import { ActivityIndicator, Pressable, ScrollView, View } from "react-native";import { useSafeAreaInsets } from "react-native-safe-area-context";import { useThemeColor } from "../../lib/useThemeColor"; import { AppText as Text } from "../../components/AppText";import { ProjectFavicon } from "../../components/ProjectFavicon";import { useProjects, useThreadShells } from "../../state/entities";import type { WorkspaceState } from "../../state/workspaceModel";import { useWorkspaceState } from "../../state/workspace";import { groupProjectsByRepository } from "../../lib/repositoryGroups"; function deriveProjectEmptyState(catalogState: WorkspaceState): {  readonly title: string;  readonly detail: string;  readonly loading: boolean;} {  if (catalogState.isLoadingConnections) {    return {      title: "Loading environments",      detail: "Checking saved environments on this device.",      loading: true,    };  }   if (!catalogState.hasConnections) {    return {      title: "No environments connected",      detail: "Add an environment before creating a task.",      loading: false,    };  }   if (    (catalogState.connectionState === "available" ||      catalogState.connectionState === "offline" ||      catalogState.connectionState === "error") &&    !catalogState.hasLoadedShellSnapshot  ) {    return {      title: "Environment unavailable",      detail:        catalogState.connectionError ??        "The saved environment is offline. Check the URL or start the environment, then retry.",      loading: false,    };  }   if (    catalogState.hasConnectingEnvironment &&    !catalogState.hasLoadedShellSnapshot &&    catalogState.connectionError === null  ) {    return {      title: "Connecting to environment",      detail: "Loading projects from the saved environment.",      loading: true,    };  }   return {    title: "No projects found",    detail: "The connected environment did not report any projects.",    loading: false,  };} export default function NewTaskRoute() {  const projects = useProjects();  const threads = useThreadShells();  const { state: catalogState } = useWorkspaceState();  const router = useRouter();  const insets = useSafeAreaInsets();  const chevronColor = useThemeColor("--color-chevron");  const accentColor = useThemeColor("--color-icon-muted");  const borderSubtleColor = useThemeColor("--color-border-subtle");  const repositoryGroups = useMemo(    () => groupProjectsByRepository({ projects, threads }),    [projects, threads],  );  const items = useMemo(() => {    const nextItems: Array<{      readonly environmentId: EnvironmentId;      readonly id: ProjectId;      readonly key: string;      readonly title: string;      readonly workspaceRoot: string;    }> = [];    for (const group of repositoryGroups) {      const project = group.projects[0]?.project;      if (!project) {        continue;      }      nextItems.push({        environmentId: project.environmentId,        id: project.id,        key: group.key,        title: project.title,        workspaceRoot: project.workspaceRoot,      });    }    return nextItems;  }, [repositoryGroups]);  const projectEmptyState = deriveProjectEmptyState(catalogState);   return (    <View collapsable={false} className="flex-1 bg-sheet">      <Stack.Screen options={{ title: "Choose project" }} />      <Stack.Toolbar placement="right">        <Stack.Toolbar.Button          icon="plus"          onPress={() => router.push("/new/add-project")}          separateBackground        />      </Stack.Toolbar>       <ScrollView        showsVerticalScrollIndicator={false}        style={{ flex: 1 }}        contentInset={{ bottom: Math.max(insets.bottom, 18) + 18 }}        contentContainerStyle={{          paddingHorizontal: 20,          paddingTop: 8,        }}      >        {items.length === 0 ? (          <View collapsable={false} className="items-center gap-3 rounded-[24px] bg-card px-6 py-8">            {projectEmptyState.loading ? <ActivityIndicator color={accentColor} /> : null}            <Text className="text-center text-lg font-t3-bold text-foreground">              {projectEmptyState.title}            </Text>            <Text className="text-center text-sm leading-[20px] text-foreground-muted">              {projectEmptyState.detail}            </Text>            {!catalogState.hasReadyEnvironment ? (              <Pressable                className="mt-1 rounded-full bg-primary px-4 py-2.5 active:opacity-70"                onPress={() => router.push("/connections/new")}              >                <Text className="text-sm font-t3-bold text-primary-foreground">                  Add environment                </Text>              </Pressable>            ) : (              <Pressable                className="mt-1 rounded-full bg-primary px-4 py-2.5 active:opacity-70"                onPress={() => router.push("/new/add-project")}              >                <Text className="text-sm font-t3-bold text-primary-foreground">                  Add new project                </Text>              </Pressable>            )}          </View>        ) : (          <View collapsable={false} className="overflow-hidden rounded-[24px] bg-card">            {items.map((item, index) => {              const isFirst = index === 0;              const isLast = index === items.length - 1;               return (                <Link                  key={item.key}                  href={{                    pathname: "/new/draft",                    params: {                      environmentId: item.environmentId,                      projectId: item.id,                      title: item.title,                    },                  }}                  asChild                >                  <Pressable                    className="bg-card"                    style={{                      paddingHorizontal: 16,                      paddingVertical: 14,                      borderTopWidth: isFirst ? 0 : 1,                      borderTopColor: borderSubtleColor,                      borderTopLeftRadius: isFirst ? 24 : 0,                      borderTopRightRadius: isFirst ? 24 : 0,                      borderBottomLeftRadius: isLast ? 24 : 0,                      borderBottomRightRadius: isLast ? 24 : 0,                    }}                  >                    <View className="flex-row items-center justify-between gap-3">                      <View className="h-7 w-7 items-center justify-center">                        <ProjectFavicon                          environmentId={item.environmentId}                          size={20}                          projectTitle={item.title}                          workspaceRoot={item.workspaceRoot}                        />                      </View>                      <View className="flex-1">                        <Text className="text-base leading-[21px] font-t3-bold">{item.title}</Text>                      </View>                      <SymbolView                        name="chevron.right"                        size={14}                        tintColor={chevronColor}                        type="monochrome"                      />                    </View>                  </Pressable>                </Link>              );            })}          </View>        )}      </ScrollView>    </View>  );}