import { Stack, useLocalSearchParams, useRouter } from "expo-router";import { useCallback, useMemo, useState } from "react";import * as Arr from "effect/Array";import * as Option from "effect/Option";import { pipe } from "effect/Function";import { Pressable, ScrollView, Text as RNText, View, useColorScheme } from "react-native";import { useThemeColor } from "../../lib/useThemeColor";import { useGitStatus, gitStatusManager } from "../../state/use-git-status";import { dismissGitActionResult, useGitActionProgress } from "../../state/use-git-action-state"; import { EmptyState } from "../../components/EmptyState";import { LoadingScreen } from "../../components/LoadingScreen";import { buildThreadRoutePath } from "../../lib/routes";import { scopedThreadKey } from "../../lib/scopedEntities";import { connectionTone } from "../connection/connectionTone"; import { useRemoteCatalog } from "../../state/use-remote-catalog";import {  useRemoteConnectionStatus,  useRemoteEnvironmentState,} from "../../state/use-remote-environment-registry";import { useSelectedThreadDetail } from "../../state/use-thread-detail";import { useThreadSelection } from "../../state/use-thread-selection";import { GitActionProgressOverlay } from "./GitActionProgressOverlay";import { ThreadDetailScreen } from "./ThreadDetailScreen";import { ThreadGitControls } from "./ThreadGitControls";import { ThreadNavigationDrawer } from "./ThreadNavigationDrawer";import { useSelectedThreadCommands } from "./use-selected-thread-commands";import { useSelectedThreadGitActions } from "./use-selected-thread-git-actions";import { useSelectedThreadGitState } from "./use-selected-thread-git-state";import { useThreadComposerState } from "./use-thread-composer-state"; function firstRouteParam(value: string | string[] | undefined): string | null {  if (Array.isArray(value)) {    return value[0] ?? null;  }   return value ?? null;} export function ThreadRouteScreen() {  const { isLoadingSavedConnection, environmentStateById, pendingConnectionError } =    useRemoteEnvironmentState();  const { connectionState, connectionError: aggregateConnectionError } =    useRemoteConnectionStatus();  const { projects, threads } = useRemoteCatalog();  const { selectedThread, selectedThreadProject, selectedEnvironmentConnection } =    useThreadSelection();  const selectedThreadDetail = useSelectedThreadDetail();  const composer = useThreadComposerState();  const gitState = useSelectedThreadGitState();  const gitActions = useSelectedThreadGitActions();  const commands = useSelectedThreadCommands({    activePendingUserInput: composer.activePendingUserInput,    activePendingUserInputAnswers: composer.activePendingUserInputAnswers,    refreshSelectedThreadGitStatus: gitActions.refreshSelectedThreadGitStatus,  });  const refreshSelectedThread = commands.onRefresh;  const router = useRouter();  const params = useLocalSearchParams<{    environmentId?: string | string[];    threadId?: string | string[];  }>();  const [drawerVisible, setDrawerVisible] = useState(false);  const environmentId = firstRouteParam(params.environmentId);  const threadId = firstRouteParam(params.threadId);  const routeEnvironmentRuntime = environmentId    ? (environmentStateById[environmentId] ?? null)    : null;  const routeConnectionState = routeEnvironmentRuntime?.connectionState ?? connectionState;  const routeConnectionError =    pendingConnectionError ?? routeEnvironmentRuntime?.connectionError ?? aggregateConnectionError;   /* ─── Native header theming ──────────────────────────────────────── */  const isDark = useColorScheme() === "dark";  const iconColor = String(useThemeColor("--color-icon"));  const foregroundColor = String(useThemeColor("--color-foreground"));  const secondaryFg = isDark ? "#a3a3a3" : "#525252";   /* ─── Git status for native header trigger ───────────────────────── */  const gitStatus = useGitStatus({    environmentId: selectedThread?.environmentId ?? "",    cwd: selectedThread?.worktreePath ?? selectedThreadProject?.workspaceRoot ?? null,  });   /* ─── Git action progress (for overlay banner) ──────────────────── */  const gitActionProgressTarget = useMemo(    () => ({      environmentId: selectedThread?.environmentId ?? null,      cwd: selectedThread?.worktreePath ?? selectedThreadProject?.workspaceRoot ?? null,    }),    [      selectedThread?.environmentId,      selectedThread?.worktreePath,      selectedThreadProject?.workspaceRoot,    ],  );  const gitActionProgress = useGitActionProgress(gitActionProgressTarget);   const handleRefreshGitStatus = useCallback(async () => {    if (!selectedThread) return;    await gitStatusManager.refresh({      environmentId: selectedThread.environmentId,      cwd: selectedThread.worktreePath ?? selectedThreadProject?.workspaceRoot ?? null,    });  }, [selectedThread, selectedThreadProject?.workspaceRoot]);   /** Wraps thread refresh + git status refresh for pull-to-refresh */  const handleRefreshAll = useCallback(async () => {    await refreshSelectedThread();    await handleRefreshGitStatus();  }, [handleRefreshGitStatus, refreshSelectedThread]);   const handleOpenDrawer = useCallback(() => {    setDrawerVisible(true);  }, []);   const handleOpenConnectionEditor = useCallback(() => {    void router.push("/connections");  }, [router]);   if (!environmentId || !threadId) {    return <LoadingScreen message="Opening thread…" />;  }   if (!selectedThread) {    const stillHydrating =      isLoadingSavedConnection ||      routeConnectionState === "connecting" ||      routeConnectionState === "reconnecting";     if (stillHydrating) {      return <LoadingScreen message="Opening thread…" />;    }     return (      <ScrollView        contentInsetAdjustmentBehavior="automatic"        contentContainerStyle={{          flexGrow: 1,          justifyContent: "center",          paddingHorizontal: 24,          paddingVertical: 32,        }}        className="bg-screen flex-1"      >        <EmptyState          title="Thread unavailable"          detail="This thread is not available in the current mobile snapshot."        />      </ScrollView>    );  }   if (!selectedThreadDetail) {    return <LoadingScreen message="Opening thread…" />;  }   const selectedThreadKey = scopedThreadKey(selectedThread.environmentId, selectedThread.id);  const serverConfig =    routeEnvironmentRuntime?.serverConfig ??    pipe(      Object.values(environmentStateById),      Arr.map((runtime) => runtime.serverConfig),      Arr.findFirst((value) => value !== null),      Option.getOrNull,    );   const headerSubtitle = [    selectedThreadProject?.title ?? null,    selectedEnvironmentConnection?.environmentLabel ?? null,  ]    .filter(Boolean)    .join(" · ");   return (    <>      <Stack.Screen        options={{          headerShown: true,          headerTransparent: true,          headerStyle: { backgroundColor: "transparent" },          headerShadowVisible: false,          headerTintColor: iconColor,          headerBackTitle: "",          headerTitle: () => (            <Pressable              style={{ alignItems: "center", maxWidth: 200 }}              onLongPress={() => {                // TODO: trigger rename modal              }}            >              <RNText                numberOfLines={1}                style={{                  fontFamily: "DMSans_700Bold",                  fontSize: 18,                  fontWeight: "900",                  color: foregroundColor,                  letterSpacing: -0.4,                }}              >                {selectedThreadDetail.title}              </RNText>              <RNText                numberOfLines={1}                style={{                  fontFamily: "DMSans_700Bold",                  fontSize: 12,                  fontWeight: "700",                  color: secondaryFg,                  letterSpacing: 0.3,                }}              >                {headerSubtitle}              </RNText>            </Pressable>          ),        }}      />       <ThreadGitControls        currentBranch={selectedThreadDetail.branch}        gitStatus={gitStatus.data}        gitOperationLabel={gitState.gitOperationLabel}        onPull={gitActions.onPullSelectedThreadBranch}        onRunAction={gitActions.onRunSelectedThreadGitAction}      />       <GitActionProgressOverlay progress={gitActionProgress} onDismiss={dismissGitActionResult} />       <View className="flex-1 bg-screen">        <ThreadDetailScreen          selectedThread={selectedThreadDetail}          screenTone={connectionTone(routeConnectionState)}          connectionError={routeConnectionError}          httpBaseUrl={selectedEnvironmentConnection?.httpBaseUrl ?? null}          bearerToken={selectedEnvironmentConnection?.bearerToken ?? null}          selectedThreadFeed={composer.selectedThreadFeed}          activeWorkStartedAt={composer.activeWorkStartedAt}          activePendingApproval={composer.activePendingApproval}          respondingApprovalId={commands.respondingApprovalId}          activePendingUserInput={composer.activePendingUserInput}          activePendingUserInputDrafts={composer.activePendingUserInputDrafts}          activePendingUserInputAnswers={composer.activePendingUserInputAnswers}          respondingUserInputId={commands.respondingUserInputId}          draftMessage={composer.draftMessage}          draftAttachments={composer.draftAttachments}          connectionStateLabel={routeConnectionState}          activeThreadBusy={composer.activeThreadBusy}          environmentId={selectedThread.environmentId}          projectWorkspaceRoot={selectedThreadProject?.workspaceRoot ?? null}          selectedThreadQueueCount={composer.selectedThreadQueueCount}          onOpenDrawer={handleOpenDrawer}          onOpenConnectionEditor={handleOpenConnectionEditor}          onChangeDraftMessage={composer.onChangeDraftMessage}          onPickDraftImages={composer.onPickDraftImages}          onNativePasteImages={composer.onNativePasteImages}          onRemoveDraftImage={composer.onRemoveDraftImage}          onRefresh={handleRefreshAll}          serverConfig={serverConfig}          onStopThread={commands.onStopThread}          onSendMessage={composer.onSendMessage}          onUpdateThreadModelSelection={commands.onUpdateThreadModelSelection}          onUpdateThreadRuntimeMode={commands.onUpdateThreadRuntimeMode}          onUpdateThreadInteractionMode={commands.onUpdateThreadInteractionMode}          onRespondToApproval={commands.onRespondToApproval}          onSelectUserInputOption={composer.onSelectUserInputOption}          onChangeUserInputCustomAnswer={composer.onChangeUserInputCustomAnswer}          onSubmitUserInput={commands.onSubmitUserInput}        />         <ThreadNavigationDrawer          visible={drawerVisible}          projects={projects}          threads={threads}          selectedThreadKey={selectedThreadKey}          onClose={() => setDrawerVisible(false)}          onSelectThread={(thread) => {            router.replace(buildThreadRoutePath(thread));          }}          onStartNewTask={() => router.push("/new")}        />      </View>    </>  );}