import {memo, useEffect, useMemo} from 'react'
import {
  type GestureResponderEvent,
  Pressable,
  type StyleProp,
  type TextStyle,
  View,
  type ViewStyle,
} from 'react-native'
import Animated, {
  type AnimatedStyle,
  FadeIn,
  FadeOut,
  interpolateColor,
  LayoutAnimationConfig,
  LinearTransition,
  useAnimatedStyle,
  useSharedValue,
  withDelay,
  withSequence,
  withTiming,
  ZoomIn,
  ZoomOut,
} from 'react-native-reanimated'
import {
  AppBskyEmbedRecord,
  type ChatBskyActorDefs,
  ChatBskyConvoDefs,
  ChatBskyEmbedJoinLink,
  moderateProfile,
  RichText as RichTextAPI,
} from '@atproto/api'
import {plural} from '@lingui/core/macro'
import {Trans, useLingui} from '@lingui/react/macro'
import {useQueryClient} from '@tanstack/react-query'

import {isBlockedOrBlocking} from '#/lib/moderation/blocked-and-muted'
import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name'
import {sanitizeHandle} from '#/lib/strings/handles'
import {useMaybeProfileShadow} from '#/state/cache/profile-shadow'
import {type Shadow} from '#/state/cache/types'
import {type ConvoItem} from '#/state/messages/convo/types'
import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {useProfileBlockMutationQueue} from '#/state/queries/profile'
import {unstableCacheProfileView} from '#/state/queries/unstable-profile-cache'
import {useSession} from '#/state/session'
import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
import {atoms as a, native, platform, tokens, useTheme, utils} from '#/alf'
import {isOnlyEmoji} from '#/alf/typography'
import {Button} from '#/components/Button'
import {ActionsWrapper} from '#/components/dms/ActionsWrapper'
import {useMessageDialogs} from '#/components/dms/MessageOverlays'
import {useMessageReplies} from '#/components/dms/MessageReplies'
import {useReplyPreviewText} from '#/components/dms/replyPreview'
import {ArrowCornerDownRight_Stroke2_Corner3_Rounded as ArrowCornerDownRightIcon} from '#/components/icons/ArrowCornerDownRight'
import {InlineLinkText} from '#/components/Link'
import * as ProfileCard from '#/components/ProfileCard'
import * as Prompt from '#/components/Prompt'
import {RichText} from '#/components/RichText'
import {Text} from '#/components/Typography'
import {DateDivider} from './DateDivider'
import {MessageItemEmbed} from './MessageItemEmbed'
import {MessageItemInviteEmbed} from './MessageItemInviteEmbed'
import {groupReactions} from './ReactionsDialog'
import {
  CLUSTERED_MESSAGE_THRESHOLD_MS,
  filterBlockedReactions,
  MESSAGE_BUBBLE_MAX_WIDTH,
  MESSAGE_GAP_THRESHOLD_MS,
} from './util'

const AVATAR_SIZE = 28
const CLUSTERED_MESSAGE_GAP = 2
const BORDER_RADIUS = 20
const SQUARED_BORDER_RADIUS = 4
const DISPLAY_NAME_INSET = 20

export type MessageItemNeighbor =
  | ChatBskyConvoDefs.MessageView
  | ChatBskyConvoDefs.DeletedMessageView
  | null

function messageIsReply(message: MessageItemNeighbor): boolean {
  return (
    ChatBskyConvoDefs.isMessageView(message) &&
    (ChatBskyConvoDefs.isMessageView(message.replyTo) ||
      ChatBskyConvoDefs.isDeletedMessageView(message.replyTo) ||
      ChatBskyConvoDefs.isMessageBeforeUserJoinedGroupView(message.replyTo))
  )
}

function isWithinClusterBoundary({
  isPending,
  message,
  adjacentMessage,
  isFromSameSender,
  direction,
}: {
  isPending: boolean
  message: ChatBskyConvoDefs.MessageView
  adjacentMessage: MessageItemNeighbor
  isFromSameSender: boolean
  direction: 'prev' | 'next'
}): boolean {
  // A reply always starts its own cluster, breaking grouping with the message
  // above it. Looking back, that's a boundary if this message is a reply;
  // looking forward, it's a boundary if the next message is a reply.
  if (messageIsReply(direction === 'prev' ? message : adjacentMessage)) {
    return true
  }
  if (!isFromSameSender) return true
  if (ChatBskyConvoDefs.isMessageView(adjacentMessage)) {
    const currentSentAt = message.sentAt
    const thisDate = new Date(currentSentAt)
    const adjDate = new Date(adjacentMessage.sentAt)
    const diff =
      direction === 'next'
        ? adjDate.getTime() - thisDate.getTime()
        : thisDate.getTime() - adjDate.getTime()
    const isOutsideThreshold = diff > CLUSTERED_MESSAGE_THRESHOLD_MS
    // For pending messages, still check the time threshold
    if (isPending) return isOutsideThreshold
    return isOutsideThreshold
  }
  return true
}

let MessageItem = ({
  item,
  isGroupChat = false,
  prevMessage,
  nextMessage,
  relatedProfiles,
}: {
  item: ConvoItem & {type: 'message' | 'pending-message'}
  isGroupChat?: boolean
  prevMessage: MessageItemNeighbor
  nextMessage: MessageItemNeighbor
  relatedProfiles: Map<string, ChatBskyActorDefs.ProfileViewBasic>
}): React.ReactNode => {
  const t = useTheme()
  const {currentAccount} = useSession()
  const {t: l} = useLingui()
  const moderationOpts = useModerationOpts()
  const queryClient = useQueryClient()

  const {message} = item
  const profile = useMaybeProfileShadow(relatedProfiles.get(message.sender.did))

  const {openReactions} = useMessageDialogs()
  const {scrollToMessage, highlightedMessage} = useMessageReplies()

  // `replyTo` comes back hydrated as the referenced message, a deleted-message
  // tombstone, or a before-joined placeholder. Narrow away the open-union
  // fallback so we only render shapes we understand.
  const replyTo =
    ChatBskyConvoDefs.isMessageView(message.replyTo) ||
    ChatBskyConvoDefs.isDeletedMessageView(message.replyTo) ||
    ChatBskyConvoDefs.isMessageBeforeUserJoinedGroupView(message.replyTo)
      ? message.replyTo
      : undefined
  const replyToMessageId =
    replyTo && !ChatBskyConvoDefs.isMessageBeforeUserJoinedGroupView(replyTo)
      ? replyTo.id
      : undefined
  const onPressReplyTo = replyToMessageId
    ? () => scrollToMessage(replyToMessageId)
    : undefined

  const isPending = item.type === 'pending-message'

  const displayName = profile ? createSanitizedDisplayName(profile) : null

  const isFromSelf =
    message.sender?.did != null && message.sender.did === currentAccount?.did

  const prevIsMessage = ChatBskyConvoDefs.isMessageView(prevMessage)
  const nextIsMessage = ChatBskyConvoDefs.isMessageView(nextMessage)

  const isPrevFromSameSender =
    prevIsMessage &&
    prevMessage.sender?.did === message.sender?.did &&
    message.sender?.did != null
  const isNextFromSameSender =
    nextIsMessage &&
    nextMessage.sender?.did === message.sender?.did &&
    message.sender?.did != null

  const isFirstInCluster = isWithinClusterBoundary({
    isPending,
    message,
    adjacentMessage: prevMessage,
    isFromSameSender: isPrevFromSameSender,
    direction: 'prev',
  })

  const isLastInCluster = isWithinClusterBoundary({
    isPending,
    message,
    adjacentMessage: nextMessage,
    isFromSameSender: isNextFromSameSender,
    direction: 'next',
  })

  const hasLargeGapFromPrev =
    !ChatBskyConvoDefs.isMessageView(prevMessage) ||
    new Date(message.sentAt).getTime() -
      new Date(prevMessage.sentAt).getTime() >
      MESSAGE_GAP_THRESHOLD_MS

  const isInCluster = !(isFirstInCluster && isLastInCluster)
  const isInMiddleOfCluster =
    isInCluster && !isFirstInCluster && !isLastInCluster

  const visibleReactions = useMemo(
    () => filterBlockedReactions(message.reactions, relatedProfiles),
    [message.reactions, relatedProfiles],
  )

  const hasReactions = visibleReactions.length > 0
  const prevHasReactions =
    prevIsMessage &&
    filterBlockedReactions(prevMessage.reactions, relatedProfiles).length > 0
  const isNextEmojiOnly = nextIsMessage && isOnlyEmoji(nextMessage.text)
  const isPrevEmojiOnly = prevIsMessage && isOnlyEmoji(prevMessage.text)
  const squaredBottomCorner =
    !hasReactions &&
    !isNextEmojiOnly &&
    isInCluster &&
    (isInMiddleOfCluster || isFirstInCluster)
  const squaredTopCorner =
    !prevHasReactions &&
    !isPrevEmojiOnly &&
    isInCluster &&
    (isInMiddleOfCluster || isLastInCluster)

  const pendingColor = t.palette.primary_300

  const bubbleColor = isFromSelf
    ? isPending
      ? pendingColor
      : t.palette.primary_500
    : t.palette.contrast_50
  const highlightColor = isFromSelf
    ? t.palette.primary_300
    : t.palette.primary_100

  const rt = new RichTextAPI({text: message.text, facets: message.facets})

  const isEmojiOnly = isOnlyEmoji(message.text)

  const hasEmbed =
    AppBskyEmbedRecord.isView(message.embed) ||
    ChatBskyEmbedJoinLink.isView(message.embed)
  const hasEmbedAndText = hasEmbed && rt.text.length > 0

  const targetBottomRadius = squaredBottomCorner
    ? SQUARED_BORDER_RADIUS
    : BORDER_RADIUS
  const targetTopRadius =
    squaredTopCorner || hasEmbedAndText ? SQUARED_BORDER_RADIUS : BORDER_RADIUS

  const bottomRadiusSV = useSharedValue(targetBottomRadius)
  const topRadiusSV = useSharedValue(targetTopRadius)

  const showDisplayName =
    isGroupChat && !isFromSelf && isFirstInCluster && !isEmojiOnly
  const showAvatar = isGroupChat && !isFromSelf && isLastInCluster

  /*
   * Emoji-only messages have no bubble background (see the `!isOnlyEmoji` gate
   * on the bubble styling below), so the corner-radius animation is invisible
   * overhead for them. Worse, on Android the resulting re-layout of the parent
   * Animated.View re-measures the enlarged emoji `<Text>` and some Android
   * device's text stack drops the trailing glyph on that second pass (while
   * keeping its reserved width). Set the radii directly for emoji-only messages
   * so nothing re-lays-out the glyph after its initial paint.
   */
  useEffect(() => {
    bottomRadiusSV.set(
      isEmojiOnly
        ? targetBottomRadius
        : withTiming(targetBottomRadius, {duration: 300}),
    )
  }, [targetBottomRadius, bottomRadiusSV, isEmojiOnly])

  useEffect(() => {
    topRadiusSV.set(
      isEmojiOnly
        ? targetTopRadius
        : withTiming(targetTopRadius, {duration: 300}),
    )
  }, [targetTopRadius, topRadiusSV, isEmojiOnly])

  // Flash the message background when it's been scrolled to (e.g. by tapping a
  // reply that quotes it), so it's easy to spot. Keyed on the highlight `key`
  // so re-tapping the same message re-triggers the flash.
  const highlightSV = useSharedValue(0)
  const isHighlighted = highlightedMessage?.id === message.id
  const highlightKey = isHighlighted ? highlightedMessage.key : null
  useEffect(() => {
    if (highlightKey === null) return
    highlightSV.set(
      withSequence(
        withTiming(1, {duration: 150}),
        withDelay(400, withTiming(0, {duration: 450})),
      ),
    )
  }, [highlightKey, highlightSV])

  const highlightStyle = useAnimatedStyle(() => ({
    backgroundColor: interpolateColor(
      highlightSV.get(),
      [0, 1],
      [bubbleColor, highlightColor],
    ),
  }))

  const borderRadiusStyle = useAnimatedStyle(() =>
    isFromSelf
      ? {
          borderBottomRightRadius: bottomRadiusSV.get(),
          borderTopRightRadius: topRadiusSV.get(),
        }
      : {
          borderBottomLeftRadius: bottomRadiusSV.get(),
          borderTopLeftRadius: topRadiusSV.get(),
        },
  )

  const avatar =
    profile && moderationOpts ? (
      <PreviewableUserAvatar
        profile={profile}
        size={AVATAR_SIZE}
        type={profile.associated?.labeler ? 'labeler' : 'user'}
        onBeforePress={() => unstableCacheProfileView(queryClient, profile)}
        moderation={moderateProfile(profile, moderationOpts).ui('avatar')}
      />
    ) : (
      <ProfileCard.AvatarPlaceholder size={AVATAR_SIZE} />
    )

  const groupedReactions = useMemo(
    () => groupReactions(visibleReactions),
    [visibleReactions],
  )

  const reactions = visibleReactions

  const hasSelfReacted = reactions.some(
    r => r.sender.did === currentAccount?.did,
  )

  const reactionsLabel = useMemo(() => {
    if (reactions.length === 0) return ''
    if (reactions.length === 1) {
      const reaction = reactions[0]
      const sender = reaction.sender
      if (sender.did === currentAccount?.did) {
        return l`You reacted ${reaction.value}`
      } else {
        const senderDid = reaction.sender.did
        const memberSender = relatedProfiles.get(senderDid)
        if (memberSender) {
          return l`${createSanitizedDisplayName(memberSender)} reacted ${reaction.value}`
        }
        return l`Someone reacted ${reaction.value}`
      }
    }
    return l`${plural(reactions.length, {
      one: '# person',
      other: '# people',
    })} reacted – ${groupedReactions.map(g => g.value).join(' ')}`
  }, [reactions, groupedReactions, currentAccount?.did, relatedProfiles, l])

  const appliedReactions = (
    <LayoutAnimationConfig skipEntering skipExiting>
      {hasReactions ? (
        <Animated.View
          entering={FadeIn}
          exiting={FadeOut}
          style={[
            a.absolute,
            {top: '100%'},
            isFromSelf ? [a.right_0] : [a.left_0, isGroupChat && a.ml_sm],
            a.px_sm,
            a.z_10,
          ]}>
          <Pressable
            accessible={true}
            accessibilityLabel={reactionsLabel}
            accessibilityHint={
              isGroupChat ? l`Tap to view reactions` : undefined
            }
            style={[
              a.flex_row,
              a.gap_2xs,
              isFromSelf ? a.justify_end : a.justify_start,
              a.rounded_lg,
              a.border,
              t.atoms.border_contrast_low,
              t.atoms.shadow_xs,
              a.px_sm,
              hasSelfReacted
                ? {backgroundColor: t.palette.primary_100}
                : t.atoms.bg_contrast_25,
              {
                paddingTop: platform({android: 2, default: 3}),
                paddingBottom: platform({android: 2, default: 3}),
                transform: [{translateY: -6}],
              },
            ]}
            onPress={isGroupChat ? () => openReactions(message) : undefined}>
            {groupedReactions.slice(0, 10).map(group => (
              <Animated.View
                entering={native(ZoomIn.springify(200).delay(400))}
                exiting={
                  groupedReactions.length > 1
                    ? native(ZoomOut.delay(200))
                    : undefined
                }
                layout={native(LinearTransition.delay(300))}
                key={group.value}
                style={[a.py_2xs]}>
                <Text
                  emoji
                  style={[
                    a.text_md,
                    {textAlignVertical: 'center', includeFontPadding: false},
                  ]}>
                  {group.value}
                </Text>
              </Animated.View>
            ))}
            {(groupedReactions.length !== reactions.length ||
              groupedReactions.length > 10) &&
            reactions.length > 1 ? (
              <View style={[a.p_2xs, a.pl_0, a.justify_center]}>
                <Text
                  style={[
                    a.text_sm,
                    a.font_medium,
                    hasSelfReacted
                      ? {color: t.palette.primary_900}
                      : t.atoms.text_contrast_high,
                    {textAlignVertical: 'center', includeFontPadding: false},
                  ]}>
                  {reactions.length}
                </Text>
              </View>
            ) : null}
          </Pressable>
        </Animated.View>
      ) : null}
    </LayoutAnimationConfig>
  )

  const messageInset = platform<ViewStyle | undefined>({
    android: a.mx_sm,
    ios: a.mx_md,
    web: a.mx_lg,
  })

  return (
    <>
      {hasLargeGapFromPrev && <DateDivider date={message.sentAt} />}
      <View
        style={[
          messageInset,
          isFirstInCluster ? a.mt_md : {marginTop: CLUSTERED_MESSAGE_GAP},
          hasReactions && {paddingBottom: 26},
        ]}>
        <View style={[a.relative]}>
          {showAvatar ? (
            <View style={[a.absolute, a.bottom_0, a.z_50]}>{avatar}</View>
          ) : null}
          <View
            style={[
              a.relative,
              a.flex_grow,
              !isFromSelf && isGroupChat && {paddingLeft: AVATAR_SIZE},
            ]}>
            {replyTo ? (
              <ReplyCaption
                replyTo={replyTo}
                isFromSelf={isFromSelf}
                isGroupChat={isGroupChat}
                replierDisplayName={displayName}
                relatedProfiles={relatedProfiles}
                onPress={onPressReplyTo}
              />
            ) : displayName && showDisplayName ? (
              <Text
                style={[
                  a.text_xs,
                  t.atoms.text_contrast_medium,
                  a.pt_xs,
                  a.pb_2xs,
                  {paddingLeft: DISPLAY_NAME_INSET},
                ]}
                emoji>
                {displayName}
              </Text>
            ) : null}
            {profile && isBlockedOrBlocking(profile) && isGroupChat ? (
              <BlockedPlaceholder profile={profile} style={borderRadiusStyle} />
            ) : (
              <View style={[a.relative]}>
                <ActionsWrapper
                  isFromSelf={isFromSelf}
                  message={message}
                  senderProfile={profile}
                  moderationOpts={moderationOpts}>
                  {AppBskyEmbedRecord.isView(message.embed) && (
                    <MessageItemEmbed
                      embed={message.embed}
                      isFromSelf={isFromSelf}
                      isGroupChat={isGroupChat}
                      squaredBottomCorner={
                        squaredBottomCorner || hasEmbedAndText
                      }
                      squaredTopCorner={squaredTopCorner}
                      highlightSV={highlightSV}
                    />
                  )}
                  {ChatBskyEmbedJoinLink.isView(message.embed) && (
                    <MessageItemInviteEmbed
                      embed={message.embed}
                      isFromSelf={isFromSelf}
                      isGroupChat={isGroupChat}
                      squaredBottomCorner={
                        squaredBottomCorner || hasEmbedAndText
                      }
                      squaredTopCorner={squaredTopCorner}
                      highlightSV={highlightSV}
                    />
                  )}
                  {rt.text.length > 0 && (
                    <Animated.View
                      accessibilityHint={l`Double tap or long press the message to add a reaction`}
                      style={[
                        !isFromSelf && isGroupChat && a.ml_sm,
                        !isEmojiOnly && [
                          a.rounded_xl,
                          a.py_sm,
                          a.px_md,
                          a.max_w_full,
                          {
                            marginTop: hasEmbedAndText
                              ? CLUSTERED_MESSAGE_GAP
                              : 0,
                          },
                          isFromSelf ? a.self_end : a.self_start,
                          borderRadiusStyle,
                          highlightStyle,
                        ],
                      ]}>
                      {replyTo && !isEmojiOnly ? (
                        <ReplyQuote
                          replyTo={replyTo}
                          isFromSelf={isFromSelf}
                          relatedProfiles={relatedProfiles}
                          onPress={onPressReplyTo}
                        />
                      ) : null}
                      <RichText
                        value={rt}
                        style={[
                          a.text_md,
                          isFromSelf && {color: t.palette.white},
                          // Emoji-only: add top leading to avoid clipping the
                          // glyph, then pull the bottom up by the same amount so
                          // the glyph bottom-aligns with the avatar instead of
                          // sitting above its line-box baseline.
                          isEmojiOnly && [
                            a.leading_tight,
                            // Visually align bottom of the emoji with the avatar
                            !isFromSelf &&
                              platform({
                                android: {marginTop: a.mt_2xs.marginTop},
                                default: {marginBottom: -a.mb_sm.marginBottom},
                              }),
                          ],
                        ]}
                        interactiveStyle={a.underline}
                        enableTags
                        emojiMultiplier={3}
                        shouldProxyLinks={true}
                      />
                    </Animated.View>
                  )}
                </ActionsWrapper>
                {appliedReactions}
              </View>
            )}
          </View>
        </View>
        {isLastInCluster && (
          <MessageItemMetadata
            item={item}
            style={[isFromSelf ? a.text_right : a.text_left]}
          />
        )}
      </View>
    </>
  )
}
MessageItem = memo(MessageItem)
export {MessageItem}

let MessageItemMetadata = ({
  item,
  style,
}: {
  item: ConvoItem & {type: 'message' | 'pending-message'}
  style: StyleProp<TextStyle>
}): React.ReactNode => {
  const t = useTheme()
  const {t: l} = useLingui()

  const handleRetry = (e: GestureResponderEvent) => {
    if (item.type === 'pending-message' && item.retry) {
      e.preventDefault()
      item.retry()
      return false
    }
  }

  const errorColor = t.palette.negative_400

  switch (item.type) {
    case 'pending-message':
      return item.failed ? (
        <Text style={[a.text_xs, a.my_2xs, {color: errorColor}, style]}>
          <Text style={[a.text_xs, {color: errorColor}]}>
            <Trans>Message failed to send.</Trans>
          </Text>
          {item.retry && (
            <>
              {' '}
              <InlineLinkText
                label={l`Click to retry failed message`}
                to="#"
                onPress={handleRetry}
                style={[a.text_xs, {color: errorColor}]}>
                <Trans>Tap to retry</Trans>
              </InlineLinkText>
              .
            </>
          )}
        </Text>
      ) : null
    default:
      return null
  }
}
MessageItemMetadata = memo(MessageItemMetadata)
export {MessageItemMetadata}

function BlockedPlaceholder({
  profile,
  style,
}: {
  profile: Shadow<ChatBskyActorDefs.ProfileViewBasic>
  style?: AnimatedStyle<ViewStyle>
}) {
  const {t: l} = useLingui()
  const t = useTheme()
  const control = Prompt.usePromptControl()
  const [_queueBlock, queueUnblock] = useProfileBlockMutationQueue(profile)

  return (
    <>
      <Button
        style={[{maxWidth: MESSAGE_BUBBLE_MAX_WIDTH}, a.self_start]}
        label={
          profile.viewer?.blocking
            ? l`This message is hidden because you are blocking this user.`
            : l`This message is hidden because this user is blocking you.`
        }
        accessibilityHint={l`Tap for details`}
        onPress={() => control.open()}>
        <Animated.View
          style={[
            a.ml_sm,
            a.rounded_xl,
            a.py_sm,
            a.px_md,
            t.atoms.bg,
            a.self_start,
            a.border,
            t.atoms.border_contrast_high,
            a.flex_shrink,
            style,
          ]}>
          <Text
            style={[
              a.text_sm,
              a.leading_snug,
              a.italic,
              t.atoms.text_contrast_medium,
            ]}>
            {profile.viewer?.blocking ? (
              <Trans>
                This message is hidden because you are blocking this user.
              </Trans>
            ) : (
              <Trans>
                This message is hidden because this user is blocking you.
              </Trans>
            )}
          </Text>
        </Animated.View>
      </Button>
      <Prompt.Outer control={control}>
        <Prompt.Content>
          <Prompt.TitleText>
            {profile.viewer?.blocking ? (
              <Trans>
                You are blocking {sanitizeHandle(profile.handle, '@')}
              </Trans>
            ) : (
              <Trans>
                {sanitizeHandle(profile.handle, '@')} is blocking you
              </Trans>
            )}
          </Prompt.TitleText>
          <Prompt.DescriptionText>
            {profile.viewer?.blocking ? (
              <Trans>
                Messages from this person are hidden while you are blocking
                them.
              </Trans>
            ) : (
              <Trans>
                Messages from this person are hidden while they are blocking
                you.
              </Trans>
            )}
          </Prompt.DescriptionText>
          <Prompt.Actions>
            <Prompt.Action onPress={() => {}} cta={l`Okay`} color="primary" />
            {profile.viewer?.blocking && !profile.viewer.blockingByList && (
              <Prompt.Action
                onPress={() => void queueUnblock()}
                cta={l`Unblock`}
                color="secondary"
              />
            )}
          </Prompt.Actions>
        </Prompt.Content>
      </Prompt.Outer>
    </>
  )
}

/**
 * The "↪ X replied to Y" caption rendered above a reply message, in place of
 * the display name. `X` is the person sending the reply (self -> "you"), `Y` is
 * the original sender. Tapping it scrolls to the original (if loaded).
 *
 * Aligns with the sender's display name for others (left), or with the message
 * bubble for self (right).
 */
function ReplyCaption({
  replyTo,
  isFromSelf,
  isGroupChat,
  replierDisplayName,
  relatedProfiles,
  onPress,
}: {
  replyTo:
    | ChatBskyConvoDefs.MessageView
    | ChatBskyConvoDefs.DeletedMessageView
    | ChatBskyConvoDefs.MessageBeforeUserJoinedGroupView
  isFromSelf: boolean
  isGroupChat: boolean
  replierDisplayName: string | null
  relatedProfiles: Map<string, ChatBskyActorDefs.ProfileViewBasic>
  onPress?: () => void
}) {
  const t = useTheme()
  const {t: l} = useLingui()
  const {currentAccount} = useSession()

  let caption: string = ''
  if (
    ChatBskyConvoDefs.isMessageView(replyTo) ||
    ChatBskyConvoDefs.isDeletedMessageView(replyTo)
  ) {
    const originalSenderIsSelf = replyTo.sender.did === currentAccount?.did
    const originalProfile = relatedProfiles.get(replyTo.sender.did)
    const originalName = originalSenderIsSelf
      ? null
      : originalProfile
        ? createSanitizedDisplayName(originalProfile)
        : null

    caption = isFromSelf
      ? originalSenderIsSelf
        ? l`You replied to yourself`
        : originalName
          ? l`You replied to ${originalName}`
          : l`You replied`
      : originalSenderIsSelf
        ? l`${replierDisplayName} replied to you`
        : originalName
          ? l`${replierDisplayName} replied to ${originalName}`
          : l`${replierDisplayName} replied`
  } else {
    caption = l`Someone replied`
  }

  return (
    <Button
      label={
        onPress
          ? l`Scroll to the message this is replying to`
          : l`A reply to a message sent before you joined`
      }
      disabled={!onPress}
      onPress={onPress}
      style={[
        a.w_full,
        a.flex_row,
        a.align_center,
        a.gap_2xs,
        a.pb_2xs,
        a.pt_xs,
        isFromSelf
          ? [a.justify_end, a.pr_md]
          : [
              a.justify_start,
              isGroupChat ? {paddingLeft: DISPLAY_NAME_INSET} : a.pl_md,
            ],
      ]}>
      <ArrowCornerDownRightIcon
        size="xs"
        style={t.atoms.text_contrast_medium}
      />
      <Text
        style={[a.text_xs, a.flex_shrink, t.atoms.text_contrast_medium]}
        numberOfLines={1}
        emoji>
        {caption}
      </Text>
    </Button>
  )
}

/**
 * The nested quote of the original message, rendered at the top of a reply
 * bubble. Tapping it scrolls to the original (if loaded).
 */
function ReplyQuote({
  replyTo,
  isFromSelf,
  relatedProfiles,
  onPress,
}: {
  replyTo:
    | ChatBskyConvoDefs.MessageView
    | ChatBskyConvoDefs.DeletedMessageView
    | ChatBskyConvoDefs.MessageBeforeUserJoinedGroupView
  isFromSelf: boolean
  relatedProfiles: Map<string, ChatBskyActorDefs.ProfileViewBasic>
  onPress?: () => void
}) {
  const t = useTheme()
  const {t: l} = useLingui()
  const getReplyPreviewText = useReplyPreviewText()

  const senderDid =
    ChatBskyConvoDefs.isMessageView(replyTo) ||
    ChatBskyConvoDefs.isDeletedMessageView(replyTo)
      ? replyTo.sender.did
      : undefined
  const senderProfile = useMaybeProfileShadow(
    senderDid ? relatedProfiles.get(senderDid) : undefined,
  )
  // Hide the quoted content if we block, or are blocked by, the original
  // sender - mirroring how the message bubble itself is hidden.
  const isBlocked = senderProfile ? isBlockedOrBlocking(senderProfile) : false
  const senderName =
    senderProfile && !isBlocked
      ? createSanitizedDisplayName(senderProfile)
      : null

  const tintColor = isFromSelf ? t.palette.white : t.atoms.text.color
  const subtleColor = isFromSelf
    ? t.palette.white
    : t.atoms.text_contrast_high.color
  const borderColor = isFromSelf
    ? utils.alpha(t.palette.white, 0.5)
    : t.atoms.border_contrast_high.borderColor

  let text: string
  let subtle = false
  if (isBlocked) {
    text = l({
      message: '(blocked message hidden)',
      comment: 'A reply summary in chat',
    })
    subtle = true
  } else if (ChatBskyConvoDefs.isMessageView(replyTo)) {
    ;({text, subtle} = getReplyPreviewText(replyTo))
  } else if (ChatBskyConvoDefs.isMessageBeforeUserJoinedGroupView(replyTo)) {
    text = l({
      message: `(message sent before you joined)`,
      comment: 'A reply summary in chat',
    })
    subtle = true
  } else {
    text = l({message: '(deleted message)', comment: 'A reply summary in chat'})
    subtle = true
  }

  return (
    <Button
      label={
        !onPress
          ? l`Replied-to message was sent before you joined`
          : senderName
            ? l`Replied-to message from ${senderName}, tap to scroll to it`
            : l`Replied-to message, tap to scroll to it`
      }
      disabled={!onPress}
      onPress={onPress}
      style={[
        a.mb_xs,
        a.rounded_md,
        a.p_sm,
        // The padding above is a little loose, so we tighten it up here.
        {paddingTop: tokens.space.sm - 2},
        a.flex_col,
        a.align_start,
        a.border,
        {borderColor, marginHorizontal: -4},
      ]}>
      {senderName ? (
        <Text style={[a.text_xs, {color: subtleColor}]} emoji numberOfLines={1}>
          {senderName}
        </Text>
      ) : null}
      <Text
        style={[
          a.text_sm,
          {color: subtle ? subtleColor : tintColor},
          subtle && a.italic,
        ]}
        emoji
        numberOfLines={2}>
        {text}
      </Text>
    </Button>
  )
}