import { useNavigation, type StaticScreenProps } from "@react-navigation/native";import { useCallback, useState } from "react";import { Platform, Pressable, ScrollView, View } from "react-native";import { useSafeAreaInsets } from "react-native-safe-area-context"; import { AndroidSheetHeader } from "../../../components/AndroidScreenHeader";import { AppText as Text, AppTextInput as TextInput } from "../../../components/AppText";import { cn } from "../../../lib/cn";import { useEnvironmentQuery } from "../../../state/query";import { useThreadSelection } from "../../../state/use-thread-selection";import { useSelectedThreadGitActions } from "../../../state/use-selected-thread-git-actions";import { useSelectedThreadGitState } from "../../../state/use-selected-thread-git-state";import { useSelectedThreadWorktree } from "../../../state/use-selected-thread-worktree";import { vcsEnvironment } from "../../../state/vcs";import { SheetActionButton } from "./gitSheetComponents"; type GitCommitSheetProps = StaticScreenProps<{  readonly environmentId: string;  readonly threadId: string;}>; export function GitCommitSheet(_props: GitCommitSheetProps) {  const navigation = useNavigation();  const insets = useSafeAreaInsets();  const { selectedThread } = useThreadSelection();  const { selectedThreadCwd } = useSelectedThreadWorktree();  const gitState = useSelectedThreadGitState();  const gitActions = useSelectedThreadGitActions();   const gitStatus = useEnvironmentQuery(    selectedThread !== null && selectedThreadCwd !== null      ? vcsEnvironment.status({          environmentId: selectedThread.environmentId,          input: { cwd: selectedThreadCwd },        })      : null,  );   const busy = gitState.gitOperationLabel !== null;  const isDefaultRef = gitStatus.data?.isDefaultRef ?? false;  const allFiles = gitStatus.data?.workingTree?.files ?? [];   const [dialogCommitMessage, setDialogCommitMessage] = useState("");  const [excludedFiles, setExcludedFiles] = useState<ReadonlySet<string>>(new Set());  const [isEditingFiles, setIsEditingFiles] = useState(false);   const selectedFiles = allFiles.filter((file) => !excludedFiles.has(file.path));  const allSelected = excludedFiles.size === 0;  const noneSelected = selectedFiles.length === 0;  const selectedInsertions = selectedFiles.reduce((sum, file) => sum + file.insertions, 0);  const selectedDeletions = selectedFiles.reduce((sum, file) => sum + file.deletions, 0);  const selectedFilePreview = selectedFiles.slice(0, 3);   const runCommitAction = useCallback(    async (featureBranch: boolean) => {      const commitMessage = dialogCommitMessage.trim();      navigation.goBack();      await gitActions.onRunSelectedThreadGitAction({        action: "commit",        featureBranch,        ...(commitMessage ? { commitMessage } : {}),        ...(!allSelected ? { filePaths: selectedFiles.map((file) => file.path) } : {}),      });    },    [allSelected, dialogCommitMessage, gitActions, navigation, selectedFiles],  );   return (    <View collapsable={false} className="flex-1 bg-sheet">      {Platform.OS === "android" ? (        <AndroidSheetHeader title="Commit changes" onBack={() => navigation.goBack()} />      ) : null}      <ScrollView        className="flex-1"        keyboardShouldPersistTaps="handled"        showsVerticalScrollIndicator={false}        contentInset={{ bottom: Math.max(insets.bottom, 18) + 18 }}        contentContainerClassName="gap-4 px-5 pt-2"      >        <View className="gap-3 rounded-[22px] border border-border bg-card px-4 py-4">          <View className="flex-row items-center justify-between gap-3">            <Text className="text-foreground-muted text-sm font-medium">Branch</Text>            <Text className="text-foreground text-base font-t3-bold">              {gitStatus.data?.refName ?? "(detached HEAD)"}            </Text>          </View>          {isDefaultRef ? (            <Text className="text-xs leading-normal text-warning-foreground">              Warning: this is the default branch.            </Text>          ) : null}        </View>         <View className="gap-3 rounded-[22px] border border-border bg-card px-4 py-4">          <View className="flex-row items-center justify-between gap-3">            <View className="gap-1">              <Text className="text-foreground text-base font-t3-bold">Files</Text>              <Text className="text-foreground-muted text-xs leading-normal">                {selectedFiles.length} selected · +{selectedInsertions} / -{selectedDeletions}              </Text>            </View>            <View className="flex-row items-center gap-2">              {!allSelected && isEditingFiles ? (                <Pressable                  className="bg-subtle rounded-full px-3 py-2"                  onPress={() => setExcludedFiles(new Set())}                >                  <Text className="text-foreground text-2xs font-t3-bold uppercase">Reset</Text>                </Pressable>              ) : null}              <Pressable                className="bg-subtle rounded-full px-3 py-2"                onPress={() => setIsEditingFiles((current) => !current)}              >                <Text className="text-foreground text-2xs font-t3-bold uppercase">                  {isEditingFiles ? "Done" : "Edit"}                </Text>              </Pressable>            </View>          </View>           {allFiles.length === 0 ? (            <Text className="text-foreground-secondary text-sm leading-normal">              No changed files are available to commit.            </Text>          ) : !isEditingFiles ? (            <View className="gap-2">              {selectedFilePreview.map((file) => (                <View key={file.path} className="flex-row items-center justify-between gap-3">                  <Text className="text-foreground flex-1 text-sm font-medium" numberOfLines={1}>                    {file.path}                  </Text>                  <Text className="text-xs font-t3-bold text-emerald-500">+{file.insertions}</Text>                  <Text className="text-xs font-t3-bold text-rose-500">-{file.deletions}</Text>                </View>              ))}              {selectedFiles.length > selectedFilePreview.length ? (                <Text className="text-foreground-muted text-xs leading-snug">                  +{selectedFiles.length - selectedFilePreview.length} more files                </Text>              ) : null}            </View>          ) : (            <View className="gap-2">              {allFiles.map((file) => {                const included = !excludedFiles.has(file.path);                return (                  <Pressable                    key={file.path}                    className={cn(                      "rounded-[18px] border px-4 py-3",                      included ? "border-border" : "border-border-subtle",                    )}                    onPress={() => {                      setExcludedFiles((current) => {                        const next = new Set(current);                        if (next.has(file.path)) {                          next.delete(file.path);                        } else {                          next.add(file.path);                        }                        return next;                      });                    }}                  >                    <View                      className={`absolute inset-0 rounded-[18px] ${included ? "bg-card" : "bg-subtle"}`}                    />                    <View className="flex-row items-start justify-between gap-3">                      <View className="flex-1 gap-1">                        <Text                          selectable                          className={`text-sm font-t3-bold ${included ? "text-foreground" : "text-foreground-muted"}`}                        >                          {file.path}                        </Text>                        {!included ? (                          <Text className="text-foreground-muted text-2xs leading-normal">                            Excluded from this commit                          </Text>                        ) : null}                      </View>                      <View className="items-end gap-1">                        <Text className="text-xs font-t3-bold text-emerald-500">                          +{file.insertions}                        </Text>                        <Text className="text-xs font-t3-bold text-rose-500">                          -{file.deletions}                        </Text>                      </View>                    </View>                  </Pressable>                );              })}            </View>          )}        </View>         <View className="gap-2">          <Text className="text-foreground text-sm font-t3-bold">Commit message</Text>          <TextInput            multiline            value={dialogCommitMessage}            onChangeText={setDialogCommitMessage}            placeholder="Leave empty to auto-generate"            textAlignVertical="top"            className="min-h-[128px] rounded-[20px] px-4 py-3.5"          />        </View>         <View className="flex-row gap-3">          <View className="flex-1">            <SheetActionButton              icon="arrow.branch"              label="Commit on new branch"              disabled={noneSelected || busy}              onPress={() => void runCommitAction(true)}            />          </View>          <View className="flex-1">            <SheetActionButton              icon="checkmark.circle"              label="Commit"              tone="primary"              disabled={noneSelected || busy}              onPress={() => void runCommitAction(false)}            />          </View>        </View>      </ScrollView>    </View>  );}