import { memo, useId } from "react";import { Pressable, View } from "react-native";import Svg, { Circle, Defs, RadialGradient, Stop } from "react-native-svg"; import { mixThemePreviewBase, THEME_PREVIEW_RENDER_SPECS } from "@t3tools/shared/themePreview"; import { SymbolView } from "../../../../components/AppSymbol";import { AppText as Text } from "../../../../components/AppText";import {  getMobileThemeVariables,  getMobileThemePreviewColors,  MOBILE_THEME_OPTIONS,  type MobileThemeAppearance,  type MobileThemeId,  type MobileThemeIds,  type MobileThemeMode,  type MobileThemeVariables,} from "../../../../lib/mobileTheme";import { useThemeColor } from "../../../../lib/useThemeColor";import { useAppearancePreferences } from "../AppearancePreferencesProvider"; const APPEARANCE_MODES: ReadonlyArray<{  readonly id: MobileThemeMode;  readonly label: string;}> = [  { id: "system", label: "System" },  { id: "light", label: "Light" },  { id: "dark", label: "Dark" },]; const PreviewOrb = memo(function PreviewOrb(props: {  readonly appearance: MobileThemeAppearance;  readonly compact?: boolean;  readonly themeId: MobileThemeId;}) {  const idPrefix = useId().replaceAll(":", "");  const accentGradientId = `${idPrefix}-accent-glow`;  const actionGradientId = `${idPrefix}-action-glow`;  const colors = getMobileThemePreviewColors(props.themeId, props.appearance);  const spec = THEME_PREVIEW_RENDER_SPECS[props.appearance];  const accentRadius = Math.hypot(    Math.max(spec.accent.center[0], 1 - spec.accent.center[0]),    Math.max(spec.accent.center[1], 1 - spec.accent.center[1]),  );  const actionRadius = Math.hypot(    Math.max(spec.action.center[0], 1 - spec.action.center[0]),    Math.max(spec.action.center[1], 1 - spec.action.center[1]),  );  const position = (value: number) => `${value * 100}%`;  const radius = (value: number) => `${value * 100}%`;   return (    <View      className={`${props.compact ? "size-14" : "size-16"} overflow-hidden rounded-full border`}      style={{        borderColor:          props.appearance === "dark" ? "rgba(255, 255, 255, 0.14)" : "rgba(0, 0, 0, 0.1)",      }}    >      <Svg accessibilityElementsHidden height="100%" viewBox="0 0 64 64" width="100%">        <Defs>          <RadialGradient            cx={position(spec.accent.center[0])}            cy={position(spec.accent.center[1])}            fx={position(spec.accent.center[0])}            fy={position(spec.accent.center[1])}            id={accentGradientId}            r={radius(accentRadius)}          >            <Stop offset="0%" stopColor={colors.accent} stopOpacity={1} />            <Stop              offset={position(spec.accent.middleOffset)}              stopColor={colors.accent}              stopOpacity={spec.accent.middleOpacity}            />            <Stop              offset={position(spec.accent.endOffset)}              stopColor={colors.accent}              stopOpacity={0}            />            <Stop offset="100%" stopColor={colors.accent} stopOpacity={0} />          </RadialGradient>          <RadialGradient            cx={position(spec.action.center[0])}            cy={position(spec.action.center[1])}            fx={position(spec.action.center[0])}            fy={position(spec.action.center[1])}            id={actionGradientId}            r={radius(actionRadius)}          >            <Stop              offset="0%"              stopColor={colors.messageAction}              stopOpacity={spec.action.startOpacity}            />            <Stop              offset={position(spec.action.endOffset)}              stopColor={colors.messageAction}              stopOpacity={0}            />            <Stop offset="100%" stopColor={colors.messageAction} stopOpacity={0} />          </RadialGradient>        </Defs>        <Circle cx="32" cy="32" fill={mixThemePreviewBase(colors, props.appearance)} r="32" />        <Circle cx="32" cy="32" fill={`url(#${actionGradientId})`} r="32" />        <Circle cx="32" cy="32" fill={`url(#${accentGradientId})`} r="32" />      </Svg>    </View>  );}); function ThemeCard(props: {  readonly disabled: boolean;  readonly darkSelected: boolean;  readonly label: string;  readonly lightSelected: boolean;  readonly onSelectBoth: () => void;  readonly onSelect: (appearance: MobileThemeAppearance) => void;  readonly themeId: MobileThemeId;}) {  const badgeBackground = useThemeColor("--color-card");  const badgeIcon = useThemeColor("--color-icon");   const choice = (appearance: MobileThemeAppearance, selected: boolean) => (    <Pressable      accessibilityLabel={`${props.label} ${appearance} theme`}      accessibilityRole="radio"      accessibilityState={{ checked: selected, disabled: props.disabled }}      className={        selected          ? "size-[66px] items-center justify-center rounded-full border-[3px] border-primary"          : "size-[66px] items-center justify-center rounded-full border-[3px] border-transparent"      }      disabled={props.disabled}      onPress={() => props.onSelect(appearance)}    >      <PreviewOrb appearance={appearance} compact themeId={props.themeId} />      {selected ? (        <View          className="absolute -bottom-0.5 -right-0.5 size-5 items-center justify-center rounded-full border border-border"          style={{ backgroundColor: badgeBackground }}        >          <SymbolView            name={appearance === "light" ? "sun.max" : "moon"}            size={12}            tintColor={badgeIcon}            type="monochrome"            weight="medium"          />        </View>      ) : null}    </Pressable>  );   return (    <View className="min-w-36 flex-1 basis-[47%] gap-3 rounded-[24px] border border-border bg-card px-2 py-4">      <Pressable        accessibilityHint="Sets both light and dark appearances"        accessibilityLabel={`${props.label} theme`}        accessibilityRole="button"        accessibilityState={{ disabled: props.disabled }}        className="absolute inset-0 rounded-[24px] active:bg-subtle"        disabled={props.disabled}        onPress={props.onSelectBoth}      />      <View className="flex-row items-center justify-center gap-2 py-1" pointerEvents="box-none">        {choice("light", props.lightSelected)}        {choice("dark", props.darkSelected)}      </View>      <View className="min-h-8 flex-row items-center" pointerEvents="none">        <Text className="min-w-0 flex-1 text-lg font-t3-medium" numberOfLines={1}>          {props.label}        </Text>      </View>    </View>  );} function PreviewPane(props: { readonly colors: MobileThemeVariables; readonly compact?: boolean }) {  return (    <View      className="flex-1 overflow-hidden"      style={{ backgroundColor: props.colors["--color-screen"] }}    >      <View        className={props.compact ? "h-[18px] gap-0.5 px-1" : "h-[18px] gap-1 px-1.5"}        style={{ backgroundColor: props.colors["--color-card"] }}      >        <View className="mt-2 flex-row items-center gap-1">          <View            className="size-1.5 rounded-full"            style={{ backgroundColor: props.colors["--color-primary"] }}          />          <View            className="h-1 flex-1 rounded-full"            style={{ backgroundColor: props.colors["--color-foreground-muted"] }}          />        </View>      </View>      <View        className={          props.compact ? "flex-1 justify-between px-1 py-2" : "flex-1 justify-between px-1.5 py-2"        }      >        <View className="gap-1">          <View            className="h-1.5 w-[72%] rounded-full"            style={{ backgroundColor: props.colors["--color-subtle-strong"] }}          />          <View            className="h-1.5 w-[46%] rounded-full"            style={{ backgroundColor: props.colors["--color-subtle-strong"] }}          />        </View>        <View className="items-end gap-1 pb-2">          <View            className="h-3 w-[78%] rounded-full"            style={{ backgroundColor: props.colors["--color-user-bubble"] }}          />          <View            className="h-1 w-[38%] rounded-full"            style={{ backgroundColor: props.colors["--color-foreground-muted"] }}          />        </View>      </View>    </View>  );} function ModePreview(props: { readonly mode: MobileThemeMode; readonly themeIds: MobileThemeIds }) {  const light = getMobileThemeVariables(props.themeIds.light, "light");  const dark = getMobileThemeVariables(props.themeIds.dark, "dark");  const currentBorder = useThemeColor("--color-border");  const currentFrame = useThemeColor("--color-drawer");  const currentIndicator = useThemeColor("--color-foreground-muted");  const frameColor =    props.mode === "light"      ? light["--color-border"]      : props.mode === "dark"        ? dark["--color-border"]        : currentBorder;  const frameBackground =    props.mode === "light"      ? light["--color-drawer"]      : props.mode === "dark"        ? dark["--color-drawer"]        : currentFrame;  const indicatorColor =    props.mode === "light"      ? light["--color-foreground-muted"]      : props.mode === "dark"        ? dark["--color-foreground-muted"]        : currentIndicator;   return (    <View      className="h-24 w-14 self-center rounded-[16px] p-[3px]"      style={{ backgroundColor: frameBackground, borderColor: frameColor, borderWidth: 1.5 }}    >      <View className="flex-1 flex-row overflow-hidden rounded-[11px]">        {props.mode === "system" ? (          <>            <PreviewPane colors={light} compact />            <PreviewPane colors={dark} compact />          </>        ) : (          <PreviewPane colors={props.mode === "light" ? light : dark} />        )}      </View>      <View        className="absolute bottom-[6px] left-1/2 h-1 w-4 -translate-x-1/2 rounded-full"        style={{ backgroundColor: indicatorColor }}      />    </View>  );} function ModeCard(props: {  readonly disabled: boolean;  readonly label: string;  readonly mode: MobileThemeMode;  readonly onPress: () => void;  readonly selected: boolean;  readonly themeIds: MobileThemeIds;}) {  return (    <Pressable      accessibilityLabel={`${props.label} appearance`}      accessibilityRole="radio"      accessibilityState={{ checked: props.selected, disabled: props.disabled }}      className={        props.selected          ? "min-w-0 flex-1 gap-2 rounded-[24px] border-2 border-primary bg-subtle p-2"          : "min-w-0 flex-1 gap-2 rounded-[24px] border border-border bg-card p-2"      }      disabled={props.disabled}      onPress={props.onPress}    >      <ModePreview mode={props.mode} themeIds={props.themeIds} />      <Text        className={          props.selected            ? "text-center text-base font-t3-bold text-foreground"            : "text-center text-base text-foreground-muted"        }      >        {props.label}      </Text>    </Pressable>  );} function SectionLabel({ children }: { readonly children: string }) {  return <Text className="px-2 text-sm font-t3-medium text-foreground-muted">{children}</Text>;} export function ThemeAppearanceSection() {  const {    isReady,    setThemeIdForAppearance,    setThemeIdForBothAppearances,    setThemeMode,    themeIds,    themeMode,  } = useAppearancePreferences();   return (    <View className="gap-6">      <View className="gap-2">        <SectionLabel>Color scheme</SectionLabel>        <View accessibilityRole="radiogroup" className="flex-row gap-2">          {APPEARANCE_MODES.map((mode) => (            <ModeCard              disabled={!isReady}              key={mode.id}              label={mode.label}              mode={mode.id}              onPress={() => setThemeMode(mode.id)}              selected={mode.id === themeMode}              themeIds={themeIds}            />          ))}        </View>      </View>       <View className="gap-3">        <SectionLabel>Themes</SectionLabel>        <View className="flex-row flex-wrap gap-3">          {MOBILE_THEME_OPTIONS.map((theme) => (            <ThemeCard              disabled={!isReady}              key={theme.id}              label={theme.label}              darkSelected={theme.id === themeIds.dark}              lightSelected={theme.id === themeIds.light}              onSelect={(appearance) => setThemeIdForAppearance(appearance, theme.id)}              onSelectBoth={() => setThemeIdForBothAppearances(theme.id)}              themeId={theme.id}            />          ))}        </View>      </View>    </View>  );}