import type {  EnvironmentProject,  EnvironmentThreadShell,} from "@t3tools/client-runtime/state/shell";import type { EnvironmentId } from "@t3tools/contracts";import type { MenuAction } from "@react-native-menu/menu";import * as Haptics from "expo-haptics";import { Stack } from "expo-router";import { SymbolView } from "expo-symbols";import { useCallback, useRef } from "react";import {  ActivityIndicator,  Pressable,  RefreshControl,  ScrollView,  useWindowDimensions,  View,} from "react-native";import ReanimatedSwipeable, {  type SwipeableMethods,} from "react-native-gesture-handler/ReanimatedSwipeable"; import { AppText as Text } from "../../components/AppText";import { ControlPillMenu } from "../../components/ControlPill";import { EmptyState } from "../../components/EmptyState";import { ProjectFavicon } from "../../components/ProjectFavicon";import { relativeTime } from "../../lib/time";import { useThemeColor } from "../../lib/useThemeColor";import {  THREAD_SWIPE_ACTIONS_WIDTH,  THREAD_SWIPE_SPRING,  ThreadSwipeActions,} from "../home/thread-swipe-actions";import type { ArchivedThreadGroup, ArchivedThreadSortOrder } from "./archivedThreadList"; export interface ArchivedThreadsHeaderEnvironment {  readonly environmentId: EnvironmentId;  readonly label: string;} const THREAD_ACTIONS: MenuAction[] = [  {    id: "unarchive",    title: "Unarchive",    image: "arrow.uturn.backward",  },  {    id: "delete",    title: "Delete",    image: "trash",    attributes: { destructive: true },  },]; function ArchivedThreadsHeader(props: {  readonly environments: ReadonlyArray<ArchivedThreadsHeaderEnvironment>;  readonly selectedEnvironmentId: EnvironmentId | null;  readonly sortOrder: ArchivedThreadSortOrder;  readonly onEnvironmentChange: (environmentId: EnvironmentId | null) => void;  readonly onSearchQueryChange: (query: string) => void;  readonly onSortOrderChange: (sortOrder: ArchivedThreadSortOrder) => void;}) {  const hasCustomFilter = props.selectedEnvironmentId !== null || props.sortOrder !== "newest";   return (    <>      <Stack.Screen        options={{          title: "Archived Threads",          headerSearchBarOptions: {            autoCapitalize: "none",            hideNavigationBar: false,            obscureBackground: false,            placeholder: "Search archived threads",            placement: "stacked",            onChangeText: (event) => {              props.onSearchQueryChange(event.nativeEvent.text);            },            onCancelButtonPress: () => {              props.onSearchQueryChange("");            },          },        }}      />       <Stack.Toolbar placement="right">        <Stack.Toolbar.Menu          accessibilityLabel="Filter and sort archived threads"          icon={            hasCustomFilter              ? "line.3.horizontal.decrease.circle.fill"              : "line.3.horizontal.decrease.circle"          }          separateBackground          title="Archived thread options"        >          <Stack.Toolbar.Menu title="Environment">            <Stack.Toolbar.Label>Environment</Stack.Toolbar.Label>            <Stack.Toolbar.MenuAction              isOn={props.selectedEnvironmentId === null}              onPress={() => props.onEnvironmentChange(null)}            >              <Stack.Toolbar.Label>All environments</Stack.Toolbar.Label>            </Stack.Toolbar.MenuAction>            {props.environments.map((environment) => (              <Stack.Toolbar.MenuAction                key={environment.environmentId}                isOn={props.selectedEnvironmentId === environment.environmentId}                onPress={() => props.onEnvironmentChange(environment.environmentId)}              >                <Stack.Toolbar.Label>{environment.label}</Stack.Toolbar.Label>              </Stack.Toolbar.MenuAction>            ))}          </Stack.Toolbar.Menu>           <Stack.Toolbar.Menu title="Sort by archived date">            <Stack.Toolbar.Label>Sort by archived date</Stack.Toolbar.Label>            <Stack.Toolbar.MenuAction              isOn={props.sortOrder === "newest"}              onPress={() => props.onSortOrderChange("newest")}            >              <Stack.Toolbar.Label>Newest first</Stack.Toolbar.Label>            </Stack.Toolbar.MenuAction>            <Stack.Toolbar.MenuAction              isOn={props.sortOrder === "oldest"}              onPress={() => props.onSortOrderChange("oldest")}            >              <Stack.Toolbar.Label>Oldest first</Stack.Toolbar.Label>            </Stack.Toolbar.MenuAction>          </Stack.Toolbar.Menu>        </Stack.Toolbar.Menu>      </Stack.Toolbar>    </>  );} function ProjectGroupLabel(props: {  readonly environmentLabel: string | null;  readonly project: EnvironmentProject;}) {  return (    <View className="flex-row items-center gap-2.5 px-1 pb-2">      <ProjectFavicon        environmentId={props.project.environmentId}        projectTitle={props.project.title}        size={18}        workspaceRoot={props.project.workspaceRoot}      />      <Text        className="flex-1 text-xs font-t3-medium uppercase text-foreground-muted"        numberOfLines={1}        style={{ letterSpacing: 0.5 }}      >        {props.project.title}      </Text>      {props.environmentLabel ? (        <Text className="max-w-[42%] text-2xs text-foreground-tertiary" numberOfLines={1}>          {props.environmentLabel}        </Text>      ) : null}    </View>  );} function ArchivedThreadRow(props: {  readonly environmentLabel: string | null;  readonly isLast: boolean;  readonly onDelete: () => void;  readonly onSwipeableClose: (methods: SwipeableMethods) => void;  readonly onSwipeableWillOpen: (methods: SwipeableMethods) => void;  readonly onUnarchive: () => void;  readonly thread: EnvironmentThreadShell;}) {  const swipeableRef = useRef<SwipeableMethods | null>(null);  const fullSwipeArmedRef = useRef(false);  const { width: windowWidth } = useWindowDimensions();  const cardColor = useThemeColor("--color-card");  const iconColor = useThemeColor("--color-icon-subtle");  const separatorColor = useThemeColor("--color-separator");  const fullSwipeThreshold = Math.max(THREAD_SWIPE_ACTIONS_WIDTH + 44, (windowWidth - 32) * 0.58);  const timestamp = relativeTime(props.thread.archivedAt ?? props.thread.updatedAt);  const subtitle = [props.environmentLabel, props.thread.branch].filter((part): part is string =>    Boolean(part),  );  const handleFullSwipeArmedChange = useCallback((armed: boolean) => {    if (armed && !fullSwipeArmedRef.current && process.env.EXPO_OS === "ios") {      void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);    }    fullSwipeArmedRef.current = armed;  }, []);  const handleMenuAction = useCallback(    (event: { nativeEvent: { event: string } }) => {      if (event.nativeEvent.event === "unarchive") {        props.onUnarchive();      } else if (event.nativeEvent.event === "delete") {        props.onDelete();      }    },    [props.onDelete, props.onUnarchive],  );   return (    <ReanimatedSwipeable      ref={swipeableRef}      animationOptions={THREAD_SWIPE_SPRING}      childrenContainerStyle={{ backgroundColor: cardColor }}      containerStyle={{ backgroundColor: cardColor }}      dragOffsetFromRightEdge={8}      enableTrackpadTwoFingerGesture      friction={1}      onSwipeableClose={() => {        fullSwipeArmedRef.current = false;        if (swipeableRef.current) {          props.onSwipeableClose(swipeableRef.current);        }      }}      onSwipeableOpenStartDrag={() => {        if (swipeableRef.current) {          props.onSwipeableWillOpen(swipeableRef.current);        }      }}      onSwipeableWillOpen={() => {        const methods = swipeableRef.current;        if (!methods) return;         props.onSwipeableWillOpen(methods);        if (fullSwipeArmedRef.current) {          fullSwipeArmedRef.current = false;          methods.close();          props.onDelete();        }      }}      overshootFriction={1}      overshootRight      renderRightActions={(_progress, translation, methods) => (        <ThreadSwipeActions          backgroundColor={cardColor}          fullSwipeThreshold={fullSwipeThreshold}          onDelete={props.onDelete}          onFullSwipeArmedChange={handleFullSwipeArmedChange}          primaryAction={{            accessibilityLabel: `Unarchive ${props.thread.title}`,            icon: "arrow.uturn.backward",            label: "Unarchive",            onPress: props.onUnarchive,          }}          swipeableMethods={methods}          threadTitle={props.thread.title}          translation={translation}        />      )}      rightThreshold={THREAD_SWIPE_ACTIONS_WIDTH * 0.42}    >      <View        className="flex-row items-center gap-3 bg-card px-4 py-3"        style={{          borderBottomColor: separatorColor,          borderBottomWidth: props.isLast ? 0 : 1,        }}      >        <View className="h-[34px] w-[34px] items-center justify-center rounded-[11px] bg-subtle">          <SymbolView name="archivebox.fill" size={15} tintColor={iconColor} type="monochrome" />        </View>         <View className="min-w-0 flex-1 gap-1">          <View className="flex-row items-center gap-2">            <Text              className="min-w-0 flex-1 text-base font-t3-bold leading-[20px] text-foreground"              numberOfLines={1}            >              {props.thread.title}            </Text>            <Text              className="text-xs text-foreground-tertiary"              style={{ fontVariant: ["tabular-nums"] }}            >              {timestamp}            </Text>          </View>          {subtitle.length > 0 ? (            <View className="flex-row items-center gap-1.5">              <SymbolView                name="arrow.triangle.branch"                size={10}                tintColor={iconColor}                type="monochrome"              />              <Text                className="min-w-0 flex-1 text-2xs text-foreground-tertiary"                numberOfLines={1}                style={{ fontFamily: "monospace" }}              >                {subtitle.join(" · ")}              </Text>            </View>          ) : null}        </View>         <ControlPillMenu actions={THREAD_ACTIONS} onPressAction={handleMenuAction}>          <Pressable            accessibilityLabel={`Actions for ${props.thread.title}`}            accessibilityRole="button"            className="h-8 w-8 items-center justify-center rounded-full active:bg-subtle"            hitSlop={6}          >            <SymbolView name="ellipsis" size={16} tintColor={iconColor} type="monochrome" />          </Pressable>        </ControlPillMenu>      </View>    </ReanimatedSwipeable>  );} function ArchiveError(props: { readonly message: string; readonly onRetry: () => void }) {  return (    <View className="rounded-[20px] border border-danger-border bg-danger p-4">      <Text className="text-base font-t3-bold text-danger-foreground">        Could not load every archive      </Text>      <Text className="mt-1 text-sm leading-[18px] text-foreground-muted">{props.message}</Text>      <Pressable className="mt-3 self-start active:opacity-60" onPress={props.onRetry}>        <Text className="text-sm font-t3-bold text-danger-foreground">Try again</Text>      </Pressable>    </View>  );} export function ArchivedThreadsScreen(props: {  readonly environments: ReadonlyArray<ArchivedThreadsHeaderEnvironment>;  readonly error: string | null;  readonly groups: ReadonlyArray<ArchivedThreadGroup>;  readonly isLoading: boolean;  readonly searchQuery: string;  readonly selectedEnvironmentId: EnvironmentId | null;  readonly sortOrder: ArchivedThreadSortOrder;  readonly onDeleteThread: (thread: EnvironmentThreadShell) => void;  readonly onEnvironmentChange: (environmentId: EnvironmentId | null) => void;  readonly onRefresh: () => void;  readonly onSearchQueryChange: (query: string) => void;  readonly onSortOrderChange: (sortOrder: ArchivedThreadSortOrder) => void;  readonly onUnarchiveThread: (thread: EnvironmentThreadShell) => void;}) {  const openSwipeableRef = useRef<SwipeableMethods | null>(null);  const refreshTint = useThemeColor("--color-icon");  const handleSwipeableWillOpen = useCallback((methods: SwipeableMethods) => {    if (openSwipeableRef.current && openSwipeableRef.current !== methods) {      openSwipeableRef.current.close();    }    openSwipeableRef.current = methods;  }, []);  const handleSwipeableClose = useCallback((methods: SwipeableMethods) => {    if (openSwipeableRef.current === methods) {      openSwipeableRef.current = null;    }  }, []);  const isInitialLoad = props.isLoading && props.groups.length === 0 && props.error === null;  const isFiltered = props.searchQuery.trim().length > 0 || props.selectedEnvironmentId !== null;   return (    <View className="flex-1 bg-sheet">      <ArchivedThreadsHeader        environments={props.environments}        onEnvironmentChange={props.onEnvironmentChange}        onSearchQueryChange={props.onSearchQueryChange}        onSortOrderChange={props.onSortOrderChange}        selectedEnvironmentId={props.selectedEnvironmentId}        sortOrder={props.sortOrder}      />       <ScrollView        className="flex-1"        contentContainerStyle={{ gap: 20, paddingBottom: 32, paddingHorizontal: 16, paddingTop: 8 }}        contentInsetAdjustmentBehavior="automatic"        keyboardDismissMode="on-drag"        keyboardShouldPersistTaps="handled"        onScrollBeginDrag={() => openSwipeableRef.current?.close()}        refreshControl={          <RefreshControl            onRefresh={props.onRefresh}            refreshing={props.isLoading && !isInitialLoad}            tintColor={String(refreshTint)}          />        }        showsVerticalScrollIndicator={false}      >        {props.error ? <ArchiveError message={props.error} onRetry={props.onRefresh} /> : null}         {isInitialLoad ? (          <View className="items-center py-16">            <ActivityIndicator color={refreshTint} />            <Text className="mt-3 text-sm text-foreground-muted">Loading archive…</Text>          </View>        ) : props.groups.length === 0 ? (          <EmptyState            detail={              isFiltered                ? "Try another search or environment."                : "Threads you archive will appear here."            }            title={isFiltered ? "No matching threads" : "No archived threads"}          />        ) : (          props.groups.map((group) => {            const environmentLabel =              props.environments.find(                (environment) => environment.environmentId === group.project.environmentId,              )?.label ?? null;             return (              <View key={group.key} collapsable={false}>                <ProjectGroupLabel environmentLabel={environmentLabel} project={group.project} />                <View                  className="overflow-hidden rounded-[20px] bg-card"                  style={{ borderCurve: "continuous" }}                >                  {group.threads.map((thread, index) => (                    <ArchivedThreadRow                      key={`${thread.environmentId}:${thread.id}`}                      environmentLabel={environmentLabel}                      isLast={index === group.threads.length - 1}                      onDelete={() => props.onDeleteThread(thread)}                      onSwipeableClose={handleSwipeableClose}                      onSwipeableWillOpen={handleSwipeableWillOpen}                      onUnarchive={() => props.onUnarchiveThread(thread)}                      thread={thread}                    />                  ))}                </View>              </View>            );          })        )}      </ScrollView>    </View>  );}