import {
  View,
  Text,
  Image,
  Pressable,
  ActivityIndicator,
  type LayoutChangeEvent,
  StyleProp,
  ViewStyle,
} from "react-native";
import * as React from "react";
import {
  useState,
  useEffect,
  useRef,
  memo,
  useMemo,
  useCallback,
  createContext,
  useContext,
  isValidElement,
  Children,
  cloneElement,
} from "react";
import type { ReactNode, ComponentType } from "react";
import Markdown, { MarkdownIt, type RenderRules } from "react-native-markdown-display";
import { useQuery } from "@tanstack/react-query";
import MaskedView from "@react-native-masked-view/masked-view";
import {
  Circle,
  Info,
  CheckCircle,
  XCircle,
  FileText,
  ChevronRight,
  ChevronDown,
  Check,
  CheckSquare,
  X,
  Copy,
  TriangleAlertIcon,
  Scissors,
  MicVocal,
} from "lucide-react-native";
import { StyleSheet, useUnistyles } from "react-native-unistyles";
import { useIsCompactFormFactor } from "@/constants/layout";
import Animated, {
  Easing,
  cancelAnimation,
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withTiming,
} from "react-native-reanimated";
import Svg, { Defs, LinearGradient as SvgLinearGradient, Rect, Stop } from "react-native-svg";
import { theme } from "@/styles/theme";
import { createMarkdownStyles } from "@/styles/markdown-styles";
import { Colors, Fonts } from "@/constants/theme";
import * as Clipboard from "expo-clipboard";
import type { TodoEntry, UserMessageImageAttachment } from "@/types/stream";
import type { ToolCallDetail } from "@server/server/agent/agent-sdk-types";
import { buildToolCallDisplayModel } from "@/utils/tool-call-display";
import { resolveToolCallIcon } from "@/utils/tool-call-icon";
import {
  hasMeaningfulToolCallDetail,
  isPendingToolCallDetail,
} from "@/utils/tool-call-detail-state";
import {
  parseAssistantFileLink,
  parseInlinePathToken,
  type InlinePathTarget,
} from "@/utils/inline-path";
import { getMarkdownListMarker } from "@/utils/markdown-list";
import { openExternalUrl } from "@/utils/open-external-url";
import { markScrollInvestigationEvent } from "@/utils/scroll-jank-investigation";
import { splitMarkdownBlocks } from "@/utils/split-markdown-blocks";
import {
  getAssistantImageMetadata,
  setAssistantImageMetadata,
} from "@/utils/assistant-image-metadata";
import { resolveAssistantImageSource } from "@/utils/assistant-image-source";
export type { InlinePathTarget } from "@/utils/inline-path";
import { PlanCard } from "./plan-card";
import { useToolCallSheet } from "./tool-call-sheet";
import { ToolCallDetailsContent } from "./tool-call-details";
import { useAttachmentPreviewUrl } from "@/attachments/use-attachment-preview-url";
import type { DaemonClient } from "@server/client/daemon-client";
import { isWeb, isNative } from "@/constants/platform";

interface UserMessageProps {
  message: string;
  images?: UserMessageImageAttachment[];
  timestamp: number;
  isFirstInGroup?: boolean;
  isLastInGroup?: boolean;
  disableOuterSpacing?: boolean;
}

const MessageOuterSpacingContext = createContext(false);

export function MessageOuterSpacingProvider({
  disableOuterSpacing,
  children,
}: {
  disableOuterSpacing: boolean;
  children: ReactNode;
}) {
  return (
    <MessageOuterSpacingContext.Provider value={disableOuterSpacing}>
      {children}
    </MessageOuterSpacingContext.Provider>
  );
}

function useDisableOuterSpacing(disableOuterSpacing: boolean | undefined) {
  const contextValue = useContext(MessageOuterSpacingContext);
  return disableOuterSpacing ?? contextValue;
}

const WEB_TOOLCALL_SHIMMER_KEYFRAME_ID = "paseo-toolcall-shimmer-keyframes";
const WEB_TOOLCALL_SHIMMER_ANIMATION_NAME = "paseo-toolcall-shimmer";
const WEB_TOOLCALL_SHIMMER_KEYFRAME_CSS = `
  @keyframes ${WEB_TOOLCALL_SHIMMER_ANIMATION_NAME} {
    0% {
      background-position: var(--paseo-shimmer-start, -200px) 0;
    }
    100% {
      background-position: var(--paseo-shimmer-end, 200px) 0;
    }
  }
`;
let webToolCallShimmerRegistered = false;
const SCROLL_EDGE_EPSILON = 0.5;
type ScrollAxis = "x" | "y";

function ensureWebToolCallShimmerKeyframes() {
  if (isNative) {
    return;
  }
  if (typeof document === "undefined") {
    return;
  }
  const existing = document.getElementById(WEB_TOOLCALL_SHIMMER_KEYFRAME_ID);
  if (existing) {
    if (existing.textContent !== WEB_TOOLCALL_SHIMMER_KEYFRAME_CSS) {
      existing.textContent = WEB_TOOLCALL_SHIMMER_KEYFRAME_CSS;
    }
    webToolCallShimmerRegistered = true;
    return;
  }
  if (webToolCallShimmerRegistered) {
    return;
  }
  const styleElement = document.createElement("style");
  styleElement.id = WEB_TOOLCALL_SHIMMER_KEYFRAME_ID;
  styleElement.textContent = WEB_TOOLCALL_SHIMMER_KEYFRAME_CSS;
  document.head.appendChild(styleElement);
  webToolCallShimmerRegistered = true;
}

function getWheelEventElementTarget(event: WheelEvent, fallback: HTMLElement): HTMLElement {
  const { target } = event;
  if (target instanceof HTMLElement) {
    return target;
  }
  if (target instanceof Node && target.parentElement) {
    return target.parentElement;
  }
  return fallback;
}

function canElementScrollInDirection(
  element: HTMLElement,
  axis: ScrollAxis,
  delta: number,
): boolean {
  if (delta === 0) {
    return false;
  }

  const computedStyle = window.getComputedStyle(element);
  const overflow = axis === "x" ? computedStyle.overflowX : computedStyle.overflowY;
  const isScrollableOverflow =
    overflow === "auto" || overflow === "scroll" || overflow === "overlay";
  if (!isScrollableOverflow) {
    return false;
  }

  const scrollPosition = axis === "x" ? element.scrollLeft : element.scrollTop;
  const scrollSize =
    axis === "x"
      ? element.scrollWidth - element.clientWidth
      : element.scrollHeight - element.clientHeight;
  if (scrollSize <= SCROLL_EDGE_EPSILON) {
    return false;
  }

  if (delta > 0) {
    return scrollPosition < scrollSize - SCROLL_EDGE_EPSILON;
  }
  return scrollPosition > SCROLL_EDGE_EPSILON;
}

function canScrollInsideDetailFromTarget(
  detailRoot: HTMLElement,
  startElement: HTMLElement,
  axis: ScrollAxis,
  delta: number,
): boolean {
  if (delta === 0) {
    return false;
  }

  let current: HTMLElement | null = startElement;
  while (current) {
    if (canElementScrollInDirection(current, axis, delta)) {
      return true;
    }
    if (current === detailRoot) {
      break;
    }
    current = current.parentElement;
  }
  return false;
}

function shouldStopDetailWheelPropagation(detailRoot: HTMLElement, event: WheelEvent): boolean {
  const startElement = getWheelEventElementTarget(event, detailRoot);
  const verticalDelta = event.deltaY;
  const horizontalDelta = event.deltaX !== 0 ? event.deltaX : event.shiftKey ? event.deltaY : 0;

  const hasVerticalIntent = Math.abs(verticalDelta) > SCROLL_EDGE_EPSILON;
  const hasHorizontalIntent = Math.abs(horizontalDelta) > SCROLL_EDGE_EPSILON;
  if (!hasVerticalIntent && !hasHorizontalIntent) {
    return false;
  }

  const canScrollVertically = hasVerticalIntent
    ? canScrollInsideDetailFromTarget(detailRoot, startElement, "y", verticalDelta)
    : false;
  const canScrollHorizontally = hasHorizontalIntent
    ? canScrollInsideDetailFromTarget(detailRoot, startElement, "x", horizontalDelta)
    : false;

  if (hasVerticalIntent && hasHorizontalIntent) {
    const isVerticalDominant = Math.abs(verticalDelta) >= Math.abs(horizontalDelta);
    return isVerticalDominant
      ? canScrollVertically || canScrollHorizontally
      : canScrollHorizontally || canScrollVertically;
  }

  if (hasVerticalIntent) {
    return canScrollVertically;
  }
  return canScrollHorizontally;
}

const userMessageStylesheet = StyleSheet.create((theme) => ({
  container: {
    flexDirection: "row",
    justifyContent: "flex-end",
    paddingHorizontal: theme.spacing[2],
  },
  content: {
    alignItems: "flex-end",
    maxWidth: "100%",
  },
  containerSpacing: {
    marginBottom: theme.spacing[1],
  },
  containerFirstInGroup: {
    marginTop: theme.spacing[4],
  },
  containerLastInGroup: {
    marginBottom: theme.spacing[4],
  },
  bubble: {
    backgroundColor: theme.colors.surface2,
    borderRadius: theme.borderRadius["2xl"],
    borderTopRightRadius: theme.borderRadius.sm,
    paddingHorizontal: theme.spacing[4],
    paddingVertical: theme.spacing[4],
    minWidth: 0,
    flexShrink: 1,
  },
  text: {
    color: theme.colors.foreground,
    fontSize: theme.fontSize.base,
    lineHeight: 22,
    overflowWrap: "anywhere",
  },
  imagePreviewContainer: {
    flexDirection: "row",
    gap: theme.spacing[2],
    flexWrap: "wrap",
  },
  imagePreviewSpacing: {
    marginBottom: theme.spacing[2],
  },
  imagePill: {
    borderRadius: theme.borderRadius.md,
    borderWidth: 1,
    borderColor: theme.colors.borderAccent,
    overflow: "hidden",
  },
  imageThumbnail: {
    width: 48,
    height: 48,
  },
  imageThumbnailPlaceholder: {
    width: 48,
    height: 48,
    backgroundColor: theme.colors.surface1,
  },
  copyButton: {
    alignSelf: "flex-end",
    padding: theme.spacing[1],
    marginTop: theme.spacing[2],
  },
  copyButtonHidden: {
    opacity: 0,
  },
  copyButtonVisible: {
    opacity: 1,
  },
}));

function UserMessageAttachmentThumbnail({ image }: { image: UserMessageImageAttachment }) {
  const uri = useAttachmentPreviewUrl(image);
  if (!uri) {
    return <View style={userMessageStylesheet.imageThumbnailPlaceholder} />;
  }
  return <Image source={{ uri }} style={userMessageStylesheet.imageThumbnail} />;
}

export const UserMessage = memo(function UserMessage({
  message,
  images = [],
  timestamp,
  isFirstInGroup = true,
  isLastInGroup = true,
  disableOuterSpacing,
}: UserMessageProps) {
  const isCompact = useIsCompactFormFactor();
  const [messageHovered, setMessageHovered] = useState(false);
  const [copyButtonHovered, setCopyButtonHovered] = useState(false);
  const resolvedDisableOuterSpacing = useDisableOuterSpacing(disableOuterSpacing);
  const hasText = message.trim().length > 0;
  const hasImages = images.length > 0;
  const showCopyButton = hasText && (isCompact || messageHovered || copyButtonHovered);

  return (
    <View
      style={[
        userMessageStylesheet.container,
        !resolvedDisableOuterSpacing && [
          isFirstInGroup && { marginTop: theme.spacing[4] },
          isLastInGroup && { marginBottom: theme.spacing[4] },
          !isFirstInGroup || !isLastInGroup ? { marginBottom: theme.spacing[1] } : undefined,
        ],
      ]}
    >
      <Pressable
        style={userMessageStylesheet.content}
        onHoverIn={() => setMessageHovered(true)}
        onHoverOut={() => setMessageHovered(false)}
      >
        <View style={userMessageStylesheet.bubble}>
          {hasImages ? (
            <View
              style={[
                userMessageStylesheet.imagePreviewContainer,
                hasText ? userMessageStylesheet.imagePreviewSpacing : undefined,
              ]}
            >
              {images.map((image, index) => (
                <View key={`${image.id}-${index}`} style={userMessageStylesheet.imagePill}>
                  <UserMessageAttachmentThumbnail image={image} />
                </View>
              ))}
            </View>
          ) : null}
          {hasText ? (
            <Text selectable style={userMessageStylesheet.text}>
              {message}
            </Text>
          ) : null}
        </View>
        {hasText ? (
          <TurnCopyButton
            getContent={() => message}
            containerStyle={[
              userMessageStylesheet.copyButton,
              showCopyButton
                ? userMessageStylesheet.copyButtonVisible
                : userMessageStylesheet.copyButtonHidden,
            ]}
            accessibilityLabel="Copy message"
            onHoverChange={setCopyButtonHovered}
          />
        ) : null}
      </Pressable>
    </View>
  );
});

interface AssistantMessageProps {
  message: string;
  timestamp: number;
  onInlinePathPress?: (target: InlinePathTarget) => void;
  workspaceRoot?: string;
  serverId?: string;
  client?: DaemonClient | null;
  disableOuterSpacing?: boolean;
}

export const assistantMessageStylesheet = StyleSheet.create((theme) => ({
  container: {
    paddingHorizontal: theme.spacing[2],
    paddingVertical: theme.spacing[3],
  },
  containerSpacing: {
    marginBottom: theme.spacing[4],
  },
  // Used in custom markdownRules for path chip styling
  pathChip: {
    backgroundColor: theme.colors.surface2,
    borderRadius: theme.borderRadius.full,
    paddingHorizontal: theme.spacing[2],
    paddingVertical: 2,
    marginRight: theme.spacing[1],
    marginVertical: 2,
  },
  pathChipText: {
    color: theme.colors.foreground,
    fontFamily: Fonts.mono,
    fontSize: 13,
    userSelect: isWeb ? "text" : "auto",
  },
  imageFrame: {
    width: "100%",
    minHeight: 160,
    marginHorizontal: -theme.spacing[1],
  },
  imageSurface: {
    width: "100%",
    overflow: "hidden",
  },
  image: {
    width: "100%",
    height: "100%",
  },
  imageState: {
    alignItems: "center",
    justifyContent: "center",
    paddingHorizontal: theme.spacing[4],
    paddingVertical: theme.spacing[6],
    gap: theme.spacing[2],
  },
  imageErrorText: {
    color: theme.colors.foregroundMuted,
    fontSize: theme.fontSize.sm,
    textAlign: "center",
  },
}));

const ASSISTANT_IMAGE_MIN_HEIGHT = 160;

const AssistantMarkdownResolvedImage = memo(function AssistantMarkdownResolvedImage({
  uri,
  alt,
  containerStyle,
  source,
  workspaceRoot,
  serverId,
}: {
  uri: string;
  alt?: string;
  containerStyle?: StyleProp<ViewStyle>;
  source: string;
  workspaceRoot?: string;
  serverId?: string;
}) {
  const cachedMetadata = useMemo(
    () => getAssistantImageMetadata({ source, workspaceRoot, serverId }),
    [serverId, source, workspaceRoot],
  );
  const [aspectRatio, setAspectRatio] = useState<number | null>(
    cachedMetadata?.aspectRatio ?? null,
  );

  useEffect(() => {
    if (cachedMetadata) {
      setAspectRatio(cachedMetadata.aspectRatio);
      return;
    }

    setAspectRatio(null);
    let cancelled = false;

    Image.getSize(
      uri,
      (width, height) => {
        if (cancelled) {
          return;
        }
        if (width > 0 && height > 0) {
          const metadata = setAssistantImageMetadata(
            { source, workspaceRoot, serverId },
            { width, height },
          );
          setAspectRatio(metadata?.aspectRatio ?? width / height);
        }
      },
      () => {
        if (cancelled) {
          return;
        }
        setAspectRatio(null);
      },
    );

    return () => {
      cancelled = true;
    };
  }, [cachedMetadata, serverId, source, uri, workspaceRoot]);

  const surfaceStyle = useMemo<StyleProp<ViewStyle>>(
    () => [
      assistantMessageStylesheet.imageSurface,
      aspectRatio ? { aspectRatio } : { minHeight: ASSISTANT_IMAGE_MIN_HEIGHT },
    ],
    [aspectRatio],
  );

  return (
    <View style={[assistantMessageStylesheet.imageFrame, containerStyle]}>
      <View style={surfaceStyle}>
        <Image
          source={{ uri }}
          style={assistantMessageStylesheet.image}
          resizeMode="contain"
          accessibilityLabel={alt}
        />
      </View>
    </View>
  );
});

function AssistantMarkdownImage({
  source,
  alt,
  hasLeadingContent,
  client,
  workspaceRoot,
  serverId,
}: {
  source: string;
  alt?: string;
  hasLeadingContent: boolean;
  client?: DaemonClient | null;
  workspaceRoot?: string;
  serverId?: string;
}) {
  const { theme } = useUnistyles();
  const resolution = useMemo(
    () => resolveAssistantImageSource({ source, workspaceRoot }),
    [source, workspaceRoot],
  );
  const containerStyle = useMemo<StyleProp<ViewStyle>>(
    () => ({
      marginTop: hasLeadingContent ? theme.spacing[4] : 0,
      marginBottom: 0,
    }),
    [hasLeadingContent, theme],
  );

  const query = useQuery({
    queryKey: [
      "assistantMarkdownImage",
      serverId ?? "unknown-server",
      resolution?.kind === "file_rpc" ? resolution.cwd : null,
      resolution?.kind === "file_rpc" ? resolution.path : null,
    ],
    enabled: Boolean(client && resolution?.kind === "file_rpc"),
    staleTime: 30_000,
    queryFn: async () => {
      if (!client || !resolution || resolution.kind !== "file_rpc") {
        return null;
      }

      const payload = await client.exploreFileSystem(resolution.cwd, resolution.path, "file");
      if (payload.error) {
        throw new Error(payload.error);
      }
      if (!payload.file || payload.file.kind !== "image" || !payload.file.content) {
        throw new Error("Image preview unavailable.");
      }

      return `data:${payload.file.mimeType ?? "image/png"};base64,${payload.file.content}`;
    },
  });

  const directUri = resolution?.kind === "direct" ? resolution.uri : null;
  const resolvedUri = directUri ?? query.data ?? null;

  if (resolvedUri) {
    return (
      <AssistantMarkdownResolvedImage
        uri={resolvedUri}
        alt={alt}
        containerStyle={containerStyle}
        source={source}
        workspaceRoot={workspaceRoot}
        serverId={serverId}
      />
    );
  }

  if (query.isLoading) {
    return (
      <View
        style={[
          assistantMessageStylesheet.imageFrame,
          containerStyle,
          assistantMessageStylesheet.imageState,
        ]}
      >
        <ActivityIndicator size="small" />
      </View>
    );
  }

  return (
    <View
      style={[
        assistantMessageStylesheet.imageFrame,
        containerStyle,
        assistantMessageStylesheet.imageState,
      ]}
    >
      <Text style={assistantMessageStylesheet.imageErrorText}>
        {query.error instanceof Error ? query.error.message : "Unable to load image preview."}
      </Text>
    </View>
  );
}

function MarkdownLink({
  href,
  style,
  onPress,
  children,
}: {
  href: string;
  style: any;
  onPress: (url: string) => void;
  children: ReactNode;
}) {
  const [hovered, setHovered] = useState(false);
  if (isNative) {
    return (
      <Text accessibilityRole="link" onPress={() => onPress(href)} style={style}>
        {children}
      </Text>
    );
  }

  return (
    <Pressable
      accessibilityRole="link"
      onPress={() => onPress(href)}
      onHoverIn={() => setHovered(true)}
      onHoverOut={() => setHovered(false)}
    >
      <Text style={[style, hovered && { textDecorationLine: "underline" }]}>{children}</Text>
    </Pressable>
  );
}

function getInlineCodeAutoLinkUrl(
  markdownParser: ReturnType<typeof MarkdownIt>,
  content: string,
): string | null {
  const trimmed = content.trim();
  if (!trimmed) {
    return null;
  }

  const matches = markdownParser.linkify.match(trimmed) as Array<{
    index: number;
    lastIndex: number;
    url: string;
  }> | null;
  if (!matches || matches.length !== 1) {
    return null;
  }

  const [match] = matches;
  if (!match || match.index !== 0 || match.lastIndex !== trimmed.length) {
    return null;
  }

  return match.url;
}

function nodeHasParentType(parent: unknown, type: string): boolean {
  if (Array.isArray(parent)) {
    return parent.some((entry) => entry?.type === type);
  }

  return (
    typeof parent === "object" &&
    parent !== null &&
    "type" in parent &&
    (parent as { type?: string }).type === type
  );
}

const turnCopyButtonStylesheet = StyleSheet.create((theme) => ({
  container: {
    alignSelf: "flex-start",
    padding: theme.spacing[2],
    paddingTop: 0,
    marginTop: theme.spacing[2],
  },
  iconColor: {
    color: theme.colors.foregroundMuted,
  },
  iconHoveredColor: {
    color: theme.colors.foreground,
  },
}));

interface TurnCopyButtonProps {
  getContent: () => string;
  containerStyle?: StyleProp<ViewStyle>;
  accessibilityLabel?: string;
  copiedAccessibilityLabel?: string;
  onHoverChange?: (hovered: boolean) => void;
}

export const TurnCopyButton = memo(function TurnCopyButton({
  getContent,
  containerStyle,
  accessibilityLabel,
  copiedAccessibilityLabel,
  onHoverChange,
}: TurnCopyButtonProps) {
  const [copied, setCopied] = useState(false);
  const copyTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  const handleCopy = useCallback(async () => {
    const content = getContent();
    if (!content) {
      return;
    }

    await Clipboard.setStringAsync(content);
    setCopied(true);

    if (copyTimeoutRef.current) {
      clearTimeout(copyTimeoutRef.current);
    }

    copyTimeoutRef.current = setTimeout(() => {
      setCopied(false);
      copyTimeoutRef.current = null;
    }, 1500);
  }, [getContent]);

  useEffect(() => {
    return () => {
      if (copyTimeoutRef.current) {
        clearTimeout(copyTimeoutRef.current);
      }
    };
  }, []);

  return (
    <Pressable
      onPress={handleCopy}
      onHoverIn={() => onHoverChange?.(true)}
      onHoverOut={() => onHoverChange?.(false)}
      style={[turnCopyButtonStylesheet.container, containerStyle]}
      accessibilityRole="button"
      accessibilityLabel={
        copied ? (copiedAccessibilityLabel ?? "Copied") : (accessibilityLabel ?? "Copy turn")
      }
    >
      {({ hovered }) => {
        const iconColor = hovered
          ? turnCopyButtonStylesheet.iconHoveredColor.color
          : turnCopyButtonStylesheet.iconColor.color;
        return copied ? (
          <Check size={18} color={iconColor} />
        ) : (
          <Copy size={18} color={iconColor} />
        );
      }}
    </Pressable>
  );
});

const expandableBadgeStylesheet = StyleSheet.create((theme) => ({
  container: {
    marginHorizontal: -6,
  },
  containerSpacing: {
    marginBottom: theme.spacing[1],
  },
  containerLastInSequence: {
    marginBottom: theme.spacing[4],
  },
  pressable: {
    borderRadius: theme.borderRadius.lg,
    borderWidth: theme.borderWidth[1],
    borderColor: "transparent",
    paddingHorizontal: theme.spacing[2],
    paddingVertical: theme.spacing[1],
    overflow: "hidden",
  },
  pressablePressed: {
    opacity: 0.9,
  },
  headerRow: {
    flexDirection: "row",
    alignItems: "center",
  },
  labelRow: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    overflow: "hidden",
  },
  iconBadge: {
    width: 22,
    height: 22,
    borderRadius: 11,
    alignItems: "center",
    justifyContent: "center",
    marginRight: theme.spacing[1],
    backgroundColor: "transparent",
  },
  label: {
    color: theme.colors.foregroundMuted,
    fontSize: theme.fontSize.base,
    fontWeight: theme.fontWeight.normal,
    flexShrink: 0,
  },
  labelActive: {
    color: theme.colors.foreground,
  },
  labelLoading: {
    color: theme.colors.foreground,
    opacity: 0.72,
  },
  secondaryLabel: {
    flex: 1,
    color: theme.colors.foregroundMuted,
    fontSize: theme.fontSize.base,
    fontWeight: theme.fontWeight.normal,
    marginLeft: theme.spacing[2],
  },
  secondaryLabelActive: {
    color: theme.colors.foreground,
  },
  shimmerText: {
    color: "transparent",
    fontSize: theme.fontSize.base,
    fontWeight: theme.fontWeight.normal,
    flexShrink: 1,
  },
  spacer: {
    flex: 1,
  },
  chevron: {
    marginLeft: theme.spacing[1],
    flexShrink: 0,
  },
  chevronExpanded: {
    transform: [{ rotate: "90deg" }],
  },
  detailWrapper: {
    borderBottomLeftRadius: theme.borderRadius.lg,
    borderBottomRightRadius: theme.borderRadius.lg,
    borderWidth: theme.borderWidth[1],
    borderTopWidth: 0,
    borderColor: theme.colors.border,
    padding: 0,
    gap: 0,
    flexShrink: 1,
    minWidth: 0,
    overflow: "hidden",
  },
  pressableExpanded: {
    borderColor: theme.colors.border,
    backgroundColor: theme.colors.surface1,
    borderBottomLeftRadius: 0,
    borderBottomRightRadius: 0,
  },
  shimmerOverlay: {
    position: "absolute",
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    flexDirection: "row",
    alignItems: "center",
    overflow: "hidden",
  },
  shimmerMaskRow: {
    flexDirection: "row",
    alignItems: "center",
    width: "100%",
    height: "100%",
  },
  nativeShimmerTrack: {
    position: "absolute",
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    overflow: "hidden",
  },
  nativeShimmerPeak: {
    position: "absolute",
    top: 0,
    bottom: 0,
    left: 0,
  },
}));

interface MemoizedMarkdownBlockProps {
  text: string;
  styles: ReturnType<typeof createMarkdownStyles>;
  rules: RenderRules;
  parser: MarkdownIt;
  onLinkPress: (url: string) => boolean;
}

const MemoizedMarkdownBlock = React.memo(function MemoizedMarkdownBlock({
  text,
  styles,
  rules,
  parser,
  onLinkPress,
}: MemoizedMarkdownBlockProps) {
  return (
    <Markdown style={styles} rules={rules} markdownit={parser} onLinkPress={onLinkPress}>
      {text}
    </Markdown>
  );
});

export const AssistantMessage = memo(function AssistantMessage({
  message,
  timestamp,
  onInlinePathPress,
  workspaceRoot,
  serverId,
  client,
  disableOuterSpacing,
}: AssistantMessageProps) {
  const { theme, rt } = useUnistyles();
  const resolvedDisableOuterSpacing = useDisableOuterSpacing(disableOuterSpacing);

  const markdownStyles = useMemo(() => createMarkdownStyles(theme), [rt.themeName]);

  const markdownParser = useMemo(() => {
    const parser = MarkdownIt({ typographer: true, linkify: true });
    const defaultValidateLink = parser.validateLink.bind(parser);
    parser.validateLink = (url: string) => {
      if (url.trim().toLowerCase().startsWith("file://")) {
        return true;
      }

      return defaultValidateLink(url);
    };
    return parser;
  }, []);

  const handleLinkPress = useCallback(
    (url: string) => {
      const fileTarget = onInlinePathPress ? parseAssistantFileLink(url, { workspaceRoot }) : null;
      if (fileTarget) {
        onInlinePathPress?.(fileTarget);
        return false;
      }

      void openExternalUrl(url);
      // react-native-markdown-display opens the link itself when this returns true.
      // We already handled it above, so return false to avoid duplicate opens.
      return false;
    },
    [onInlinePathPress, workspaceRoot],
  );

  const markdownRules = useMemo<RenderRules>(() => {
    return {
      text: (
        node: any,
        _children: ReactNode[],
        _parent: any,
        styles: any,
        inheritedStyles: any = {},
      ) => (
        <Text key={node.key} style={[inheritedStyles, styles.text]}>
          {node.content}
        </Text>
      ),
      textgroup: (
        node: any,
        children: ReactNode[],
        _parent: any,
        styles: any,
        inheritedStyles: any = {},
      ) => (
        <Text key={node.key} style={[inheritedStyles, styles.textgroup]}>
          {children}
        </Text>
      ),
      code_block: (
        node: any,
        _children: ReactNode[],
        _parent: any,
        styles: any,
        inheritedStyles: any = {},
      ) => (
        <Text key={node.key} style={[inheritedStyles, styles.code_block]}>
          {node.content}
        </Text>
      ),
      fence: (
        node: any,
        _children: ReactNode[],
        _parent: any,
        styles: any,
        inheritedStyles: any = {},
      ) => (
        <Text key={node.key} style={[inheritedStyles, styles.fence]}>
          {node.content}
        </Text>
      ),
      code_inline: (
        node: any,
        _children: ReactNode[],
        parent: any,
        styles: any,
        inheritedStyles: any = {},
      ) => {
        const content = node.content ?? "";
        const isLinkedInlineCode =
          nodeHasParentType(parent, "link") ||
          (!Array.isArray(parent) && typeof parent?.attributes?.href === "string");
        const parsed =
          onInlinePathPress && !isLinkedInlineCode ? parseInlinePathToken(content) : null;

        if (parsed) {
          return (
            <Text
              key={node.key}
              onPress={() => parsed && onInlinePathPress?.(parsed)}
              selectable={isWeb ? undefined : false}
              style={[assistantMessageStylesheet.pathChip, assistantMessageStylesheet.pathChipText]}
            >
              {content}
            </Text>
          );
        }

        const inlineCodeLinkUrl = getInlineCodeAutoLinkUrl(markdownParser, content);
        if (inlineCodeLinkUrl) {
          return (
            <MarkdownLink
              key={node.key}
              href={inlineCodeLinkUrl}
              style={[inheritedStyles, styles.code_inline, styles.link]}
              onPress={handleLinkPress}
            >
              {content}
            </MarkdownLink>
          );
        }

        return (
          <Text key={node.key} style={[inheritedStyles, styles.code_inline]}>
            {content}
          </Text>
        );
      },
      bullet_list: (node: any, children: ReactNode[], _parent: any, styles: any) => (
        <View key={node.key} style={styles.bullet_list}>
          {children}
        </View>
      ),
      ordered_list: (node: any, children: ReactNode[], _parent: any, styles: any) => (
        <View key={node.key} style={styles.ordered_list}>
          {children}
        </View>
      ),
      list_item: (node: any, children: ReactNode[], parent: any, styles: any) => {
        const { isOrdered, marker } = getMarkdownListMarker(node, parent);
        const iconStyle = isOrdered ? styles.ordered_list_icon : styles.bullet_list_icon;
        const contentStyle = isOrdered ? styles.ordered_list_content : styles.bullet_list_content;

        return (
          <View key={node.key} style={styles.list_item}>
            <Text style={iconStyle}>{marker}</Text>
            <View style={[contentStyle, { flex: 1, flexShrink: 1, minWidth: 0 }]}>{children}</View>
          </View>
        );
      },
      paragraph: (node: any, children: ReactNode[], _parent: any, styles: any) => (
        <View key={node.key} style={[styles.paragraph, { marginBottom: 0 }]}>
          {children}
        </View>
      ),
      link: (node: any, children: ReactNode[], _parent: any, styles: any) => (
        <MarkdownLink
          key={node.key}
          href={node.attributes?.href ?? ""}
          style={styles.link}
          onPress={handleLinkPress}
        >
          {Children.map(children, (child) =>
            isValidElement(child)
              ? cloneElement(child, {
                  style: [(child.props as any).style, { color: styles.link.color }],
                } as any)
              : child,
          )}
        </MarkdownLink>
      ),
      image: (node: any, _children: ReactNode[], parent: any, styles: any) => {
        const paragraphNode = Array.isArray(parent)
          ? parent.find((ancestor: any) => ancestor?.type === "paragraph")
          : null;
        const paragraphChildren = Array.isArray(paragraphNode?.children)
          ? paragraphNode.children
          : [];
        const imageIndex = paragraphChildren.findIndex((child: any) => child?.key === node.key);
        const hasLeadingContent = imageIndex > 0;

        return (
          <AssistantMarkdownImage
            key={node.key}
            source={String(node.attributes?.src ?? "")}
            alt={typeof node.attributes?.alt === "string" ? node.attributes.alt : undefined}
            hasLeadingContent={hasLeadingContent}
            client={client}
            workspaceRoot={workspaceRoot}
            serverId={serverId}
          />
        );
      },
    };
  }, [client, handleLinkPress, markdownParser, onInlinePathPress, serverId, workspaceRoot]);

  const blocks = useMemo(() => splitMarkdownBlocks(message), [message]);

  return (
    <View
      testID="assistant-message"
      style={[
        assistantMessageStylesheet.container,
        !resolvedDisableOuterSpacing && assistantMessageStylesheet.containerSpacing,
      ]}
    >
      {blocks.map((block, index) => (
        <View
          key={index}
          style={index < blocks.length - 1 ? { marginBottom: theme.spacing[3] } : undefined}
        >
          <MemoizedMarkdownBlock
            text={block}
            styles={markdownStyles}
            rules={markdownRules}
            parser={markdownParser}
            onLinkPress={handleLinkPress}
          />
        </View>
      ))}
    </View>
  );
});

interface SpeakMessageProps {
  message: string;
  timestamp: number;
  disableOuterSpacing?: boolean;
}

const speakMessageStylesheet = StyleSheet.create((theme) => ({
  container: {
    paddingHorizontal: theme.spacing[2],
    paddingVertical: theme.spacing[3],
  },
  containerSpacing: {
    marginBottom: theme.spacing[4],
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    gap: theme.spacing[2],
    marginBottom: theme.spacing[2],
  },
  headerLabel: {
    fontFamily: Fonts.sans,
    fontSize: 12,
    fontWeight: "500",
    color: theme.colors.foregroundMuted,
  },
  text: {
    fontFamily: Fonts.sans,
    fontSize: theme.fontSize.base,
    lineHeight: 22,
    color: theme.colors.foreground,
  },
}));

export const SpeakMessage = memo(function SpeakMessage({
  message,
  timestamp,
  disableOuterSpacing,
}: SpeakMessageProps) {
  const { theme } = useUnistyles();
  const resolvedDisableOuterSpacing = useDisableOuterSpacing(disableOuterSpacing);

  return (
    <View
      testID="speak-message"
      style={[
        speakMessageStylesheet.container,
        !resolvedDisableOuterSpacing && speakMessageStylesheet.containerSpacing,
      ]}
    >
      <View style={speakMessageStylesheet.header}>
        <MicVocal size={14} color={theme.colors.foregroundMuted} />
        <Text style={speakMessageStylesheet.headerLabel}>Spoke</Text>
      </View>
      <Text style={speakMessageStylesheet.text}>{message}</Text>
    </View>
  );
});

interface ActivityLogProps {
  type: "system" | "info" | "success" | "error" | "artifact";
  message: string;
  timestamp: number;
  metadata?: Record<string, unknown>;
  artifactId?: string;
  artifactType?: string;
  title?: string;
  onArtifactClick?: (artifactId: string) => void;
  disableOuterSpacing?: boolean;
}

const activityLogStylesheet = StyleSheet.create((theme) => ({
  pressable: {
    marginHorizontal: theme.spacing[2],
    borderRadius: theme.borderRadius.md,
    overflow: "hidden",
  },
  pressableSpacing: {
    marginBottom: theme.spacing[1],
  },
  pressableActive: {
    opacity: 0.7,
  },
  systemBg: {
    backgroundColor: "rgba(39, 39, 42, 0.5)",
  },
  infoBg: {
    backgroundColor: "rgba(30, 58, 138, 0.3)",
  },
  successBg: {
    backgroundColor: "rgba(20, 83, 45, 0.3)",
  },
  errorBg: {
    backgroundColor: "rgba(127, 29, 29, 0.3)",
  },
  artifactBg: {
    backgroundColor: "rgba(30, 58, 138, 0.4)",
  },
  content: {
    paddingHorizontal: theme.spacing[3],
    paddingVertical: 10,
  },
  row: {
    flexDirection: "row",
    alignItems: "flex-start",
    gap: theme.spacing[2],
  },
  iconContainer: {
    flexShrink: 0,
  },
  textContainer: {
    flex: 1,
  },
  messageText: {
    fontSize: theme.fontSize.sm,
    lineHeight: 20,
  },
  detailsRow: {
    flexDirection: "row",
    alignItems: "center",
    marginTop: theme.spacing[1],
  },
  detailsText: {
    color: theme.colors.foregroundMuted,
    fontSize: theme.fontSize.xs,
    marginRight: theme.spacing[1],
  },
  metadataContainer: {
    marginTop: theme.spacing[2],
    backgroundColor: "rgba(0, 0, 0, 0.5)",
    borderRadius: theme.borderRadius.base,
    padding: theme.spacing[2],
    borderWidth: theme.borderWidth[1],
    borderColor: theme.colors.border,
  },
  metadataText: {
    color: theme.colors.foreground,
    fontSize: theme.fontSize.xs,
    fontFamily: Fonts.mono,
    lineHeight: 16,
  },
}));

export const ActivityLog = memo(function ActivityLog({
  type,
  message,
  timestamp,
  metadata,
  artifactId,
  artifactType,
  title,
  onArtifactClick,
  disableOuterSpacing,
}: ActivityLogProps) {
  const resolvedDisableOuterSpacing = useDisableOuterSpacing(disableOuterSpacing);
  const [isExpanded, setIsExpanded] = useState(false);

  const typeConfig = {
    system: {
      bg: activityLogStylesheet.systemBg,
      color: "#a1a1aa",
      Icon: Circle,
    },
    info: { bg: activityLogStylesheet.infoBg, color: "#60a5fa", Icon: Info },
    success: {
      bg: activityLogStylesheet.successBg,
      color: "#4ade80",
      Icon: CheckCircle,
    },
    error: {
      bg: activityLogStylesheet.errorBg,
      color: "#f87171",
      Icon: XCircle,
    },
    artifact: {
      bg: activityLogStylesheet.artifactBg,
      color: "#93c5fd",
      Icon: FileText,
    },
  };

  const config = typeConfig[type];
  const IconComponent = config.Icon;

  const handlePress = () => {
    if (type === "artifact" && artifactId && onArtifactClick) {
      onArtifactClick(artifactId);
    } else if (metadata) {
      setIsExpanded(!isExpanded);
    }
  };

  const displayMessage =
    type === "artifact" && artifactType && title ? `${artifactType}: ${title}` : message;

  const isInteractive = type === "artifact" || metadata;

  return (
    <Pressable
      onPress={handlePress}
      disabled={!isInteractive}
      style={[
        activityLogStylesheet.pressable,
        !resolvedDisableOuterSpacing && activityLogStylesheet.pressableSpacing,
        config.bg,
        isInteractive && activityLogStylesheet.pressableActive,
      ]}
    >
      <View style={activityLogStylesheet.content}>
        <View style={activityLogStylesheet.row}>
          <View style={activityLogStylesheet.iconContainer}>
            <IconComponent size={16} color={config.color} />
          </View>
          <View style={activityLogStylesheet.textContainer}>
            <Text style={[activityLogStylesheet.messageText, { color: config.color }]}>
              {displayMessage}
            </Text>
            {metadata && (
              <View style={activityLogStylesheet.detailsRow}>
                <Text style={activityLogStylesheet.detailsText}>Details</Text>
                {isExpanded ? (
                  <ChevronDown size={12} color="#71717a" />
                ) : (
                  <ChevronRight size={12} color="#71717a" />
                )}
              </View>
            )}
          </View>
        </View>
        {isExpanded && metadata && (
          <View style={activityLogStylesheet.metadataContainer}>
            <Text style={activityLogStylesheet.metadataText}>
              {JSON.stringify(metadata, null, 2)}
            </Text>
          </View>
        )}
      </View>
    </Pressable>
  );
});

interface CompactionMarkerProps {
  status: "loading" | "completed";
  preTokens?: number;
}

const compactionStylesheet = StyleSheet.create((theme) => ({
  container: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: theme.spacing[3],
    paddingHorizontal: theme.spacing[4],
    gap: theme.spacing[2],
  },
  line: {
    flex: 1,
    height: 1,
    backgroundColor: theme.colors.border,
  },
  label: {
    flexDirection: "row",
    alignItems: "center",
    gap: theme.spacing[2],
  },
  text: {
    fontFamily: Fonts.sans,
    fontSize: 13,
    color: theme.colors.foregroundMuted,
  },
}));

export const CompactionMarker = memo(function CompactionMarker({
  status,
  preTokens,
}: CompactionMarkerProps) {
  const label =
    status === "loading"
      ? "Compacting..."
      : preTokens
        ? `Context compacted (${Math.round(preTokens / 1000)}K tokens)`
        : "Context compacted";

  return (
    <View style={compactionStylesheet.container}>
      <View style={compactionStylesheet.line} />
      <View style={compactionStylesheet.label}>
        {status === "loading" ? (
          <ActivityIndicator size="small" color="#a1a1aa" />
        ) : (
          <Scissors size={12} color="#a1a1aa" />
        )}
        <Text style={compactionStylesheet.text}>{label}</Text>
      </View>
      <View style={compactionStylesheet.line} />
    </View>
  );
});

interface TodoListCardProps {
  items: TodoEntry[];
  disableOuterSpacing?: boolean;
}

const todoListCardStylesheet = StyleSheet.create((theme) => ({
  detailsWrapper: {
    padding: theme.spacing[2],
  },
  list: {
    gap: theme.spacing[1],
  },
  itemRow: {
    flexDirection: "row",
    alignItems: "center",
    gap: theme.spacing[2],
  },
  radioBadge: {
    width: 16,
    height: 16,
    borderRadius: 8,
    backgroundColor: theme.colors.foregroundMuted,
    alignItems: "center",
    justifyContent: "center",
  },
  radioBadgeIncomplete: {
    opacity: 0.55,
  },
  radioBadgeComplete: {
    opacity: 0.95,
  },
  itemText: {
    flex: 1,
    color: theme.colors.foreground,
    fontSize: theme.fontSize.base,
  },
  itemTextCompleted: {
    color: theme.colors.foregroundMuted,
    textDecorationLine: "line-through",
  },
  emptyText: {
    color: theme.colors.foregroundMuted,
    fontSize: theme.fontSize.base,
  },
}));

export const TodoListCard = memo(function TodoListCard({
  items,
  disableOuterSpacing,
}: TodoListCardProps) {
  const { theme: unistylesTheme } = useUnistyles();
  const [isExpanded, setIsExpanded] = useState(false);

  const nextTask = useMemo(() => items.find((item) => !item.completed)?.text, [items]);

  const handleToggle = useCallback(() => {
    setIsExpanded((prev) => !prev);
  }, []);

  const renderDetails = useCallback(() => {
    return (
      <View style={todoListCardStylesheet.detailsWrapper}>
        <View style={todoListCardStylesheet.list}>
          {items.length === 0 ? (
            <Text style={todoListCardStylesheet.emptyText}>No tasks yet.</Text>
          ) : (
            items.map((item, idx) => (
              <View key={`${item.text}-${idx}`} style={todoListCardStylesheet.itemRow}>
                <View
                  style={[
                    todoListCardStylesheet.radioBadge,
                    item.completed
                      ? todoListCardStylesheet.radioBadgeComplete
                      : todoListCardStylesheet.radioBadgeIncomplete,
                  ]}
                >
                  {item.completed ? (
                    <Check size={12} color={unistylesTheme.colors.primaryForeground} />
                  ) : null}
                </View>
                <Text
                  style={[
                    todoListCardStylesheet.itemText,
                    item.completed && todoListCardStylesheet.itemTextCompleted,
                  ]}
                >
                  {item.text}
                </Text>
              </View>
            ))
          )}
        </View>
      </View>
    );
  }, [items]);

  return (
    <ExpandableBadge
      label="Tasks"
      secondaryLabel={nextTask}
      icon={CheckSquare}
      isExpanded={isExpanded}
      onToggle={handleToggle}
      renderDetails={renderDetails}
      disableOuterSpacing={disableOuterSpacing}
    />
  );
});

interface ExpandableBadgeProps {
  label: string;
  secondaryLabel?: string;
  icon?: ComponentType<{ size?: number; color?: string }>;
  isExpanded: boolean;
  style?: StyleProp<ViewStyle>;
  onToggle?: () => void;
  onDetailHoverChange?: (hovered: boolean) => void;
  renderDetails?: () => ReactNode;
  isLoading?: boolean;
  isError?: boolean;
  isLastInSequence?: boolean;
  disableOuterSpacing?: boolean;
  testID?: string;
}

const ExpandableBadge = memo(function ExpandableBadge({
  label,
  style,
  secondaryLabel,
  icon,
  isExpanded,
  onToggle,
  onDetailHoverChange,
  renderDetails,
  isLoading = false,
  isError = false,
  isLastInSequence = false,
  disableOuterSpacing,
  testID,
}: ExpandableBadgeProps) {
  const { theme } = useUnistyles();
  const resolvedDisableOuterSpacing = useDisableOuterSpacing(disableOuterSpacing);
  const [isHovered, setIsHovered] = useState(false);
  const [isPressed, setIsPressed] = useState(false);
  const isInteractive = Boolean(onToggle);
  const hasDetailContent = Boolean(renderDetails);
  const detailContent = hasDetailContent && isExpanded ? renderDetails?.() : null;
  const detailWrapperRef = useRef<View | null>(null);
  const wheelInvestigationComponentId = `ExpandableBadgeWheel:${testID ?? label}`;

  const nativeGradientIdRef = useRef(
    `shimmer-gradient-${Math.random().toString(36).substring(2, 9)}`,
  );
  const [labelRowWidth, setLabelRowWidth] = useState(0);
  const [labelRowHeight, setLabelRowHeight] = useState(0);
  const [labelOffsetX, setLabelOffsetX] = useState(0);
  const [labelWidth, setLabelWidth] = useState(0);
  const [secondaryOffsetX, setSecondaryOffsetX] = useState(0);
  const [secondaryWidth, setSecondaryWidth] = useState(0);
  const shimmerTranslateX = useSharedValue(0);

  const totalShimmerChars = label.trim().length + (secondaryLabel?.trim().length ?? 0);
  const shortTextDurationAdjustment = totalShimmerChars <= 12 ? 0.25 : 0;
  const shimmerDuration = Math.max(
    1,
    Math.min(2.3, 1.25 + totalShimmerChars * 0.008 - shortTextDurationAdjustment),
  );
  const nativeShimmerPeakWidth = Math.max(
    32,
    Math.min(120, labelRowWidth > 0 ? labelRowWidth * 0.28 : 0),
  );
  const isWebShimmer = isLoading && isWeb;
  const shouldMeasureWebShimmer = isWebShimmer;
  const shouldMeasureNativeShimmer = isLoading && isNative;
  const isNativeShimmer = shouldMeasureNativeShimmer && labelRowWidth > 0 && labelRowHeight > 0;
  const webShimmerSpanStartX = labelOffsetX;
  const webShimmerSpanEndX = secondaryLabel
    ? secondaryOffsetX + secondaryWidth
    : labelOffsetX + labelWidth;
  const webShimmerSpanWidth = Math.max(1, webShimmerSpanEndX - webShimmerSpanStartX);
  const webShimmerPeakWidth = Math.max(42, Math.min(120, webShimmerSpanWidth * 0.22));
  const webShimmerTrackStart = webShimmerSpanStartX - webShimmerPeakWidth;
  const webShimmerTrackEnd = webShimmerSpanEndX;

  const handleLabelRowLayout = useCallback(
    (event: LayoutChangeEvent) => {
      if (!shouldMeasureNativeShimmer) {
        return;
      }
      const { width, height } = event.nativeEvent.layout;
      setLabelRowWidth((previous) => (Math.abs(previous - width) > 0.5 ? width : previous));
      setLabelRowHeight((previous) => (Math.abs(previous - height) > 0.5 ? height : previous));
    },
    [shouldMeasureNativeShimmer],
  );

  const handleLabelLayout = useCallback(
    (event: LayoutChangeEvent) => {
      if (!shouldMeasureWebShimmer) {
        return;
      }
      const { x, width } = event.nativeEvent.layout;
      setLabelOffsetX((previous) => (Math.abs(previous - x) > 0.5 ? x : previous));
      setLabelWidth((previous) => (Math.abs(previous - width) > 0.5 ? width : previous));
    },
    [shouldMeasureWebShimmer],
  );

  const handleSecondaryLayout = useCallback(
    (event: LayoutChangeEvent) => {
      if (!shouldMeasureWebShimmer || !secondaryLabel) {
        return;
      }
      const { x, width } = event.nativeEvent.layout;
      setSecondaryOffsetX((previous) => (Math.abs(previous - x) > 0.5 ? x : previous));
      setSecondaryWidth((previous) => (Math.abs(previous - width) > 0.5 ? width : previous));
    },
    [shouldMeasureWebShimmer, secondaryLabel],
  );

  useEffect(() => {
    if (!isWebShimmer) {
      return;
    }
    ensureWebToolCallShimmerKeyframes();
  }, [isWebShimmer]);

  useEffect(() => {
    if (!isNativeShimmer) {
      cancelAnimation(shimmerTranslateX);
      shimmerTranslateX.value = -nativeShimmerPeakWidth;
      return;
    }
    const startPosition = -nativeShimmerPeakWidth;
    const endPosition = labelRowWidth + nativeShimmerPeakWidth;
    shimmerTranslateX.value = startPosition;
    shimmerTranslateX.value = withRepeat(
      withTiming(endPosition, {
        duration: shimmerDuration * 1000,
        easing: Easing.linear,
      }),
      -1,
      false,
    );
    return () => {
      cancelAnimation(shimmerTranslateX);
    };
  }, [isNativeShimmer, labelRowWidth, nativeShimmerPeakWidth, shimmerDuration, shimmerTranslateX]);

  useEffect(() => {
    if (isNative || !isExpanded || !hasDetailContent) {
      return;
    }

    const node = detailWrapperRef.current as unknown as HTMLElement | null;
    if (!node || typeof node.addEventListener !== "function") {
      return;
    }

    const stopWheelPropagation = (event: WheelEvent) => {
      if (shouldStopDetailWheelPropagation(node, event)) {
        event.stopPropagation();
      }
    };

    markScrollInvestigationEvent(wheelInvestigationComponentId, "wheelAttach");
    node.addEventListener("wheel", stopWheelPropagation, { passive: true });
    return () => {
      markScrollInvestigationEvent(wheelInvestigationComponentId, "wheelDetach");
      node.removeEventListener("wheel", stopWheelPropagation);
    };
  }, [hasDetailContent, isExpanded, wheelInvestigationComponentId]);

  const nativeShimmerPeakStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: shimmerTranslateX.value }],
  }));

  const shimmerGradient =
    "linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 24%, #ffffff 40%, #ffffff 60%, rgba(255, 255, 255, 0.45) 76%, rgba(255, 255, 255, 0) 100%)";

  const shimmerLabelStyle = isWebShimmer
    ? ({
        opacity: 1,
        color: "transparent",
        backgroundImage: shimmerGradient,
        backgroundSize: `${webShimmerPeakWidth}px 100%`,
        backgroundRepeat: "no-repeat",
        backgroundClip: "text",
        WebkitBackgroundClip: "text",
        WebkitTextFillColor: "transparent",
        animation: `${WEB_TOOLCALL_SHIMMER_ANIMATION_NAME} ${shimmerDuration}s linear infinite`,
        "--paseo-shimmer-start": `${webShimmerTrackStart - labelOffsetX}px`,
        "--paseo-shimmer-end": `${webShimmerTrackEnd - labelOffsetX}px`,
      } as never)
    : null;

  const shimmerSecondaryStyle = isWebShimmer
    ? ({
        opacity: 1,
        color: "transparent",
        backgroundImage: shimmerGradient,
        backgroundSize: `${webShimmerPeakWidth}px 100%`,
        backgroundRepeat: "no-repeat",
        backgroundClip: "text",
        WebkitBackgroundClip: "text",
        WebkitTextFillColor: "transparent",
        animation: `${WEB_TOOLCALL_SHIMMER_ANIMATION_NAME} ${shimmerDuration}s linear infinite`,
        "--paseo-shimmer-start": `${webShimmerTrackStart - secondaryOffsetX}px`,
        "--paseo-shimmer-end": `${webShimmerTrackEnd - secondaryOffsetX}px`,
      } as never)
    : null;

  const containerStyle = useMemo(
    () => [
      expandableBadgeStylesheet.container,
      !resolvedDisableOuterSpacing &&
        (isLastInSequence
          ? expandableBadgeStylesheet.containerLastInSequence
          : expandableBadgeStylesheet.containerSpacing),
      style,
    ],
    [isLastInSequence, resolvedDisableOuterSpacing, style],
  );

  const pressableStyle = useMemo(
    () => [
      expandableBadgeStylesheet.pressable,
      isPressed && isInteractive ? expandableBadgeStylesheet.pressablePressed : null,
      isExpanded && expandableBadgeStylesheet.pressableExpanded,
    ],
    [isExpanded, isInteractive, isPressed],
  );

  const accessibilityState = useMemo(
    () => (isInteractive ? { expanded: isExpanded } : undefined),
    [isExpanded, isInteractive],
  );

  const isActive = isHovered || isExpanded;

  const labelStyle = useMemo(
    () => [
      expandableBadgeStylesheet.label,
      isActive && expandableBadgeStylesheet.labelActive,
      isLoading && expandableBadgeStylesheet.labelLoading,
    ],
    [isActive, isLoading],
  );

  const secondaryLabelStyle = useMemo(
    () => [
      expandableBadgeStylesheet.secondaryLabel,
      isActive && expandableBadgeStylesheet.secondaryLabelActive,
    ],
    [isActive],
  );

  const shimmerLabelTextStyle = useMemo(
    () => [
      expandableBadgeStylesheet.label,
      isLoading && expandableBadgeStylesheet.labelLoading,
      expandableBadgeStylesheet.shimmerText,
      shimmerLabelStyle,
    ],
    [isLoading, shimmerLabelStyle],
  );

  const shimmerSecondaryTextStyle = useMemo(
    () => [
      expandableBadgeStylesheet.secondaryLabel,
      expandableBadgeStylesheet.shimmerText,
      shimmerSecondaryStyle,
    ],
    [shimmerSecondaryStyle],
  );

  const nativeShimmerTrackStyle = useMemo(
    () => [
      expandableBadgeStylesheet.nativeShimmerTrack,
      { width: labelRowWidth, height: labelRowHeight },
    ],
    [labelRowHeight, labelRowWidth],
  );

  const nativeShimmerMaskStyle = useMemo(
    () => [
      expandableBadgeStylesheet.shimmerMaskRow,
      { width: labelRowWidth, height: labelRowHeight },
    ],
    [labelRowHeight, labelRowWidth],
  );

  const nativeLabelMaskStyle = useMemo(
    () => [expandableBadgeStylesheet.label, { color: "#000000", opacity: 1 }],
    [],
  );

  const nativeSecondaryMaskStyle = useMemo(
    () => [expandableBadgeStylesheet.secondaryLabel, { color: "#000000", opacity: 1 }],
    [],
  );

  const nativeShimmerPeakCombinedStyle = useMemo(
    () => [
      expandableBadgeStylesheet.nativeShimmerPeak,
      nativeShimmerPeakStyle,
      { width: nativeShimmerPeakWidth, height: labelRowHeight },
    ],
    [labelRowHeight, nativeShimmerPeakStyle, nativeShimmerPeakWidth],
  );

  const chevronStyle = useMemo(
    () => [
      expandableBadgeStylesheet.chevron,
      isExpanded && expandableBadgeStylesheet.chevronExpanded,
    ],
    [isExpanded],
  );

  const IconComponent = icon;
  const iconColor = isError
    ? theme.colors.destructive
    : isActive
      ? theme.colors.foreground
      : theme.colors.mutedForeground;

  let iconNode: ReactNode = null;
  if (isError) {
    iconNode = <TriangleAlertIcon size={12} color={iconColor} opacity={0.8} />;
  } else if (IconComponent) {
    iconNode = <IconComponent size={12} color={iconColor} />;
  }

  return (
    <View style={containerStyle} testID={testID}>
      <Pressable
        onPress={isInteractive ? onToggle : undefined}
        onHoverIn={isInteractive ? () => setIsHovered(true) : undefined}
        onHoverOut={
          isInteractive
            ? () => {
                setIsHovered(false);
                setIsPressed(false);
              }
            : undefined
        }
        onPressIn={isInteractive ? () => setIsPressed(true) : undefined}
        onPressOut={isInteractive ? () => setIsPressed(false) : undefined}
        disabled={!isInteractive}
        accessibilityRole={isInteractive ? "button" : undefined}
        accessibilityState={accessibilityState}
        style={pressableStyle}
      >
        <View style={expandableBadgeStylesheet.headerRow}>
          <View style={expandableBadgeStylesheet.iconBadge}>{iconNode}</View>
          <View
            style={expandableBadgeStylesheet.labelRow}
            onLayout={shouldMeasureNativeShimmer ? handleLabelRowLayout : undefined}
          >
            <Text
              style={labelStyle}
              numberOfLines={1}
              onLayout={shouldMeasureWebShimmer ? handleLabelLayout : undefined}
            >
              {label}
            </Text>
            {secondaryLabel ? (
              <Text
                style={secondaryLabelStyle}
                numberOfLines={1}
                onLayout={shouldMeasureWebShimmer ? handleSecondaryLayout : undefined}
              >
                {secondaryLabel}
              </Text>
            ) : (
              <View style={expandableBadgeStylesheet.spacer} />
            )}
            {isWebShimmer ? (
              <View style={expandableBadgeStylesheet.shimmerOverlay} pointerEvents="none">
                <Text style={shimmerLabelTextStyle} numberOfLines={1}>
                  {label}
                </Text>
                {secondaryLabel ? (
                  <Text style={shimmerSecondaryTextStyle} numberOfLines={1}>
                    {secondaryLabel}
                  </Text>
                ) : (
                  <View style={expandableBadgeStylesheet.spacer} />
                )}
              </View>
            ) : null}
            {isNativeShimmer ? (
              <View style={expandableBadgeStylesheet.shimmerOverlay} pointerEvents="none">
                <MaskedView
                  style={nativeShimmerTrackStyle}
                  maskElement={
                    <View style={nativeShimmerMaskStyle}>
                      <Text style={nativeLabelMaskStyle} numberOfLines={1}>
                        {label}
                      </Text>
                      {secondaryLabel ? (
                        <Text style={nativeSecondaryMaskStyle} numberOfLines={1}>
                          {secondaryLabel}
                        </Text>
                      ) : (
                        <View style={expandableBadgeStylesheet.spacer} />
                      )}
                    </View>
                  }
                >
                  <View style={nativeShimmerTrackStyle}>
                    <Animated.View style={nativeShimmerPeakCombinedStyle}>
                      <Svg width="100%" height="100%" preserveAspectRatio="none">
                        <Defs>
                          <SvgLinearGradient
                            id={nativeGradientIdRef.current}
                            x1="0%"
                            y1="0%"
                            x2="100%"
                            y2="0%"
                          >
                            <Stop offset="0%" stopColor="#ffffff" stopOpacity={0} />
                            <Stop offset="50%" stopColor="#ffffff" stopOpacity={1} />
                            <Stop offset="100%" stopColor="#ffffff" stopOpacity={0} />
                          </SvgLinearGradient>
                        </Defs>
                        <Rect
                          x="0"
                          y="0"
                          width="100%"
                          height="100%"
                          fill={`url(#${nativeGradientIdRef.current})`}
                        />
                      </Svg>
                    </Animated.View>
                  </View>
                </MaskedView>
              </View>
            ) : null}
          </View>
          {isInteractive && isHovered ? (
            <ChevronRight size={14} color={theme.colors.foreground} style={chevronStyle} />
          ) : null}
        </View>
      </Pressable>
      {detailContent ? (
        <Pressable
          ref={detailWrapperRef}
          style={expandableBadgeStylesheet.detailWrapper}
          onHoverIn={() => onDetailHoverChange?.(true)}
          onHoverOut={() => onDetailHoverChange?.(false)}
        >
          {detailContent}
        </Pressable>
      ) : null}
    </View>
  );
}, areExpandableBadgePropsEqual);

function areExpandableBadgePropsEqual(previous: ExpandableBadgeProps, next: ExpandableBadgeProps) {
  if (previous.label !== next.label) return false;
  if (previous.secondaryLabel !== next.secondaryLabel) return false;
  if (previous.icon !== next.icon) return false;
  if (previous.isExpanded !== next.isExpanded) return false;
  if (previous.style !== next.style) return false;
  if (previous.isLoading !== next.isLoading) return false;
  if (previous.isError !== next.isError) return false;
  if (previous.isLastInSequence !== next.isLastInSequence) return false;
  if (previous.disableOuterSpacing !== next.disableOuterSpacing) return false;
  if (previous.testID !== next.testID) return false;
  if (Boolean(previous.onToggle) !== Boolean(next.onToggle)) return false;
  if (previous.isExpanded && previous.renderDetails !== next.renderDetails) {
    return false;
  }
  return true;
}

interface ToolCallProps {
  toolName: string;
  args?: unknown | null;
  result?: unknown | null;
  error?: unknown | null;
  status: "executing" | "running" | "completed" | "failed" | "canceled";
  detail?: ToolCallDetail;
  cwd?: string;
  metadata?: Record<string, unknown>;
  isLastInSequence?: boolean;
  disableOuterSpacing?: boolean;
  onInlineDetailsHoverChange?: (hovered: boolean) => void;
  onInlineDetailsExpandedChange?: (expanded: boolean) => void;
}

export const ToolCall = memo(function ToolCall({
  toolName,
  args,
  result,
  error,
  status,
  detail,
  cwd,
  metadata,
  isLastInSequence = false,
  disableOuterSpacing,
  onInlineDetailsHoverChange,
  onInlineDetailsExpandedChange,
}: ToolCallProps) {
  const { openToolCall } = useToolCallSheet();
  const [isExpanded, setIsExpanded] = useState(false);

  // Check if we're on mobile (use bottom sheet) or desktop (inline expand)
  const isMobile = useIsCompactFormFactor();

  const effectiveDetail = useMemo<ToolCallDetail | undefined>(() => {
    if (detail) {
      return detail;
    }
    if (args !== undefined || result !== undefined) {
      return {
        type: "unknown",
        input: args ?? null,
        output: result ?? null,
      };
    }
    return undefined;
  }, [detail, args, result]);

  const displayDetail = effectiveDetail ?? {
    type: "unknown",
    input: null,
    output: null,
  };

  const displayModel = useMemo(
    () =>
      buildToolCallDisplayModel({
        name: toolName,
        status: status === "executing" ? "running" : status,
        error: error ?? null,
        detail: displayDetail,
        metadata,
        cwd,
      }),
    [toolName, status, error, displayDetail, metadata, cwd],
  );
  const displayName = displayModel.displayName;
  const summary = displayModel.summary;
  const errorText = displayModel.errorText;
  const IconComponent = resolveToolCallIcon(toolName, effectiveDetail);
  const isLoadingDetails = isPendingToolCallDetail({
    detail: effectiveDetail,
    status,
    error,
  });
  const secondaryLabel = summary;

  // Check if there's any content to display
  const hasDetails = Boolean(error) || hasMeaningfulToolCallDetail(effectiveDetail);
  const canOpenDetails = hasDetails || isLoadingDetails;

  const handleToggle = useCallback(() => {
    if (isMobile) {
      openToolCall({
        toolName,
        displayName,
        summary: secondaryLabel,
        detail: effectiveDetail,
        errorText,
        showLoadingSkeleton: isLoadingDetails,
      });
    } else {
      setIsExpanded((prev) => !prev);
    }
  }, [
    isMobile,
    openToolCall,
    toolName,
    displayName,
    secondaryLabel,
    effectiveDetail,
    errorText,
    isLoadingDetails,
  ]);

  useEffect(() => {
    if (!onInlineDetailsHoverChange || isMobile || isExpanded) {
      return;
    }
    onInlineDetailsHoverChange(false);
  }, [isExpanded, isMobile, onInlineDetailsHoverChange]);

  useEffect(() => {
    if (!onInlineDetailsExpandedChange) {
      return;
    }
    if (isMobile) {
      onInlineDetailsExpandedChange(false);
      return;
    }
    onInlineDetailsExpandedChange(isExpanded);
  }, [isExpanded, isMobile, onInlineDetailsExpandedChange]);

  useEffect(() => {
    if (!onInlineDetailsExpandedChange) {
      return;
    }
    return () => {
      onInlineDetailsExpandedChange(false);
    };
  }, [onInlineDetailsExpandedChange]);

  // Render inline details for desktop
  const renderDetails = useCallback(() => {
    if (isMobile) return null;
    return (
      <ToolCallDetailsContent
        detail={effectiveDetail}
        errorText={errorText}
        maxHeight={400}
        showLoadingSkeleton={isLoadingDetails}
      />
    );
  }, [isMobile, effectiveDetail, errorText, isLoadingDetails]);

  if (effectiveDetail?.type === "plan") {
    return (
      <PlanCard
        title="Plan"
        text={effectiveDetail.text}
        disableOuterSpacing={disableOuterSpacing}
      />
    );
  }

  return (
    <ExpandableBadge
      testID="tool-call-badge"
      label={displayName}
      secondaryLabel={secondaryLabel}
      icon={IconComponent}
      isExpanded={!isMobile && isExpanded}
      onToggle={canOpenDetails ? handleToggle : undefined}
      renderDetails={canOpenDetails && !isMobile ? renderDetails : undefined}
      isLoading={status === "running" || status === "executing"}
      isError={status === "failed"}
      isLastInSequence={isLastInSequence}
      disableOuterSpacing={disableOuterSpacing}
      onDetailHoverChange={onInlineDetailsHoverChange}
    />
  );
}, areToolCallPropsEqual);

function areToolCallPropsEqual(previous: ToolCallProps, next: ToolCallProps) {
  if (previous.toolName !== next.toolName) return false;
  if (previous.args !== next.args) return false;
  if (previous.result !== next.result) return false;
  if (previous.error !== next.error) return false;
  if (previous.status !== next.status) return false;
  if (previous.detail !== next.detail) return false;
  if (previous.cwd !== next.cwd) return false;
  if (previous.metadata !== next.metadata) return false;
  if (previous.isLastInSequence !== next.isLastInSequence) return false;
  if (previous.disableOuterSpacing !== next.disableOuterSpacing) return false;
  return true;
}