import { NativeHeaderToolbar } from "../../native/StackHeader";import { useNavigation } from "@react-navigation/native";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 { cn } from "../../lib/cn"; 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";import { useAdaptiveWorkspaceLayout } from "../layout/AdaptiveWorkspaceLayout"; 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 function NewTaskRouteScreen() {  const projects = useProjects();  const threads = useThreadShells();  const { state: catalogState } = useWorkspaceState();  const navigation = useNavigation();  const { layout } = useAdaptiveWorkspaceLayout();  const insets = useSafeAreaInsets();  const chevronColor = useThemeColor("--color-chevron");  const accentColor = useThemeColor("--color-icon-muted");  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">      <NativeHeaderToolbar placement="right">        {layout.usesSplitView ? (          <NativeHeaderToolbar.Button            accessibilityLabel="Close new task"            icon="xmark"            onPress={() => navigation.goBack()}            separateBackground          />        ) : null}        <NativeHeaderToolbar.Button          icon="plus"          onPress={() => navigation.navigate("NewTaskSheet", { screen: "AddProject" })}          separateBackground        />      </NativeHeaderToolbar>       <ScrollView        contentInsetAdjustmentBehavior="automatic"        showsVerticalScrollIndicator={false}        className="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-normal 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={() => navigation.navigate("ConnectionsNew")}              >                <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={() => navigation.navigate("NewTaskSheet", { screen: "AddProject" })}              >                <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 (                <Pressable                  key={item.key}                  onPress={() =>                    navigation.navigate("NewTaskSheet", {                      screen: "NewTaskDraft",                      params: {                        environmentId: item.environmentId,                        projectId: item.id,                        title: item.title,                      },                    })                  }                  className={cn(                    "bg-card px-4 py-3.5",                    !isFirst && "border-t border-border-subtle",                    isFirst && "rounded-t-[24px]",                    isLast && "rounded-b-[24px]",                  )}                >                  <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-snug font-t3-bold">{item.title}</Text>                    </View>                    <SymbolView                      name="chevron.right"                      size={14}                      tintColor={chevronColor}                      type="monochrome"                    />                  </View>                </Pressable>              );            })}          </View>        )}      </ScrollView>    </View>  );}