import { type NavigationProp, type ParamListBase, useNavigation } from "@react-navigation/native";import { useCallback, useLayoutEffect, useState } from "react";import { ActivityIndicator, Linking, Pressable, View } from "react-native";import { WebView } from "react-native-webview"; import { AppText as Text } from "../../../components/AppText";import { LoadingStrip } from "../../../components/LoadingStrip";import { SymbolView } from "../../../components/AppSymbol";import { useThemeColor } from "../../../lib/useThemeColor";import { isLegalDocumentUrl, LEGAL_URL } from "../lib/legal-document-url"; export function SettingsLegalDocumentCloseHeaderButton() {  const navigation = useNavigation();  const iconColor = useThemeColor("--color-icon");   return (    <Pressable      accessibilityLabel="Close legal document"      accessibilityRole="button"      hitSlop={12}      onPress={() => navigation.goBack()}      className="p-2 active:opacity-60"    >      <SymbolView        name="xmark"        size={18}        tintColor={iconColor}        type="monochrome"        weight="semibold"      />    </Pressable>  );} export function SettingsLegalDocumentExternalHeaderButton({  externalUrl = LEGAL_URL,}: {  readonly externalUrl?: string;}) {  const iconColor = useThemeColor("--color-icon");  const safeExternalUrl = isLegalDocumentUrl(externalUrl) ? externalUrl : LEGAL_URL;   return (    <Pressable      accessibilityLabel="Open legal documents in external browser"      accessibilityRole="button"      hitSlop={12}      onPress={() => void Linking.openURL(safeExternalUrl).catch(() => undefined)}      className="p-2 active:opacity-60"    >      <SymbolView        name="safari"        size={19}        tintColor={iconColor}        type="monochrome"        weight="regular"      />    </Pressable>  );} interface SettingsLegalDocumentRouteScreenProps {  readonly documentName: string;  readonly documentUrl: string;} export function SettingsLegalDocumentRouteScreen({  documentName,  documentUrl,}: SettingsLegalDocumentRouteScreenProps) {  const navigation = useNavigation<NavigationProp<ParamListBase>>();  const iconColor = useThemeColor("--color-icon");  const [reloadKey, setReloadKey] = useState(0);  const [loadProgress, setLoadProgress] = useState(0);  const [loadError, setLoadError] = useState<string | null>(null);  const [externalUrl, setExternalUrl] = useState(documentUrl);  const renderExternalHeaderButton = useCallback(    () => <SettingsLegalDocumentExternalHeaderButton externalUrl={externalUrl} />,    [externalUrl],  );   useLayoutEffect(() => {    navigation.setOptions({      headerRight: renderExternalHeaderButton,    });  }, [navigation, renderExternalHeaderButton]);   const openExternalUrl = useCallback((url: string) => {    void Linking.openURL(url).catch(() => undefined);  }, []);  if (loadError) {    return (      <View className="flex-1 items-center justify-center gap-4 bg-sheet px-8">        <SymbolView          name="exclamationmark.triangle"          size={32}          tintColor={iconColor}          type="monochrome"          weight="regular"        />        <View className="items-center gap-2">          <Text className="text-center font-t3-bold text-lg text-foreground">            Couldn&apos;t load the {documentName.toLowerCase()}          </Text>          <Text selectable className="text-center text-sm leading-normal text-foreground-muted">            {loadError}          </Text>        </View>        <View className="w-full max-w-[320px] gap-2">          <Pressable            accessibilityRole="button"            onPress={() => {              setLoadError(null);              setReloadKey((value) => value + 1);            }}            className="items-center rounded-xl bg-foreground px-4 py-3 active:opacity-80"          >            <Text className="font-t3-bold text-base text-sheet">Try Again</Text>          </Pressable>          <Pressable            accessibilityRole="link"            onPress={() => openExternalUrl(documentUrl)}            className="items-center rounded-xl px-4 py-3 active:bg-foreground/5"          >            <Text className="font-t3-medium text-base text-foreground-muted">Open in Browser</Text>          </Pressable>        </View>      </View>    );  }   return (    <View className="relative flex-1 bg-sheet">      {loadProgress > 0 && loadProgress < 1 ? <LoadingStrip progress={loadProgress} /> : null}      <WebView        key={reloadKey}        source={{ uri: documentUrl }}        originWhitelist={["http://*", "https://*", "mailto:*"]}        cacheEnabled={false}        cacheMode="LOAD_NO_CACHE"        allowsBackForwardNavigationGestures        domStorageEnabled={false}        incognito        javaScriptEnabled={false}        setSupportMultipleWindows={false}        sharedCookiesEnabled={false}        thirdPartyCookiesEnabled={false}        startInLoadingState        onShouldStartLoadWithRequest={(request) => {          if (isLegalDocumentUrl(request.url)) return true;           openExternalUrl(request.url);          return false;        }}        onLoadProgress={(event) => {          setLoadProgress(event.nativeEvent.progress);        }}        onLoadStart={() => {          setLoadProgress(0.05);          setLoadError(null);        }}        onLoadEnd={(event) => {          if (isLegalDocumentUrl(event.nativeEvent.url)) {            setExternalUrl(event.nativeEvent.url);          }          setLoadProgress(0);        }}        onError={(event) => {          setLoadProgress(0);          setLoadError(event.nativeEvent.description || "The page could not be loaded.");        }}        onHttpError={(event) => {          if (!isLegalDocumentUrl(event.nativeEvent.url)) return;          setLoadProgress(0);          setLoadError(`The server returned status ${event.nativeEvent.statusCode}.`);        }}        renderLoading={() => (          <View className="absolute inset-0 items-center justify-center bg-sheet">            <ActivityIndicator />          </View>        )}        style={{ flex: 1, backgroundColor: "transparent" }}      />    </View>  );}