import {memo, useEffect, useMemo} from 'react'
import {
  type GestureResponderEvent,
  Pressable,
  type StyleProp,
  type TextStyle,
  View,
  type ViewStyle,
} from 'react-native'
import Animated, {
  LayoutAnimationConfig,
  LinearTransition,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
  ZoomIn,
  ZoomOut,
} from 'react-native-reanimated'
import {
  AppBskyEmbedRecord,
  type ChatBskyActorDefs,
  ChatBskyConvoDefs,
  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 {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name'
import {makeProfileLink} from '#/lib/routes/links'
import {type ConvoItem} from '#/state/messages/convo/types'
import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {unstableCacheProfileView} from '#/state/queries/unstable-profile-cache'
import {useSession} from '#/state/session'
import {atoms as a, native, platform, useTheme} from '#/alf'
import {isOnlyEmoji} from '#/alf/typography'
import {useDialogControl} from '#/components/Dialog'
import {ActionsWrapper} from '#/components/dms/ActionsWrapper'
import {InlineLinkText, Link} from '#/components/Link'
import * as ProfileCard from '#/components/ProfileCard'
import {RichText} from '#/components/RichText'
import {Text} from '#/components/Typography'
import {DateDivider} from './DateDivider'
import {MessageItemEmbed} from './MessageItemEmbed'
import {ReactionsDialog} from './ReactionsDialog'
import {CLUSTERED_MESSAGE_THRESHOLD_MS, MESSAGE_GAP_THRESHOLD_MS} from './util'

const AVATAR_SIZE = 28
const CLUSTERED_MESSAGE_GAP = 2
const BORDER_RADIUS = 18
const SQUARED_BORDER_RADIUS = 4
const DISPLAY_NAME_INSET = 22

function isWithinClusterBoundary({
  isPending,
  adjacentMessage,
  isFromSameSender,
  currentSentAt,
  direction,
}: {
  isPending: boolean
  adjacentMessage:
    | ChatBskyConvoDefs.MessageView
    | ChatBskyConvoDefs.DeletedMessageView
    | null
  isFromSameSender: boolean
  currentSentAt: string
  direction: 'prev' | 'next'
}): boolean {
  if (!isFromSameSender) return true
  if (ChatBskyConvoDefs.isMessageView(adjacentMessage)) {
    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:
    | ChatBskyConvoDefs.MessageView
    | ChatBskyConvoDefs.DeletedMessageView
    | null
  nextMessage:
    | ChatBskyConvoDefs.MessageView
    | ChatBskyConvoDefs.DeletedMessageView
    | null
  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 = relatedProfiles.get(message.sender.did)

  const reactionsControl = useDialogControl()

  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,
    adjacentMessage: prevMessage,
    isFromSameSender: isPrevFromSameSender,
    currentSentAt: message.sentAt,
    direction: 'prev',
  })

  const isLastInCluster = isWithinClusterBoundary({
    isPending,
    adjacentMessage: nextMessage,
    isFromSameSender: isNextFromSameSender,
    currentSentAt: message.sentAt,
    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 hasReactions = message.reactions && message.reactions.length > 0
  const prevHasReactions =
    prevIsMessage && prevMessage.reactions && prevMessage.reactions.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 rt = new RichTextAPI({text: message.text, facets: message.facets})

  const hasEmbedAndText =
    AppBskyEmbedRecord.isView(message.embed) && 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 && !isOnlyEmoji(message.text)
  const showAvatar = isGroupChat && !isFromSelf && isLastInCluster

  useEffect(() => {
    bottomRadiusSV.set(withTiming(targetBottomRadius, {duration: 300}))
  }, [targetBottomRadius, bottomRadiusSV])

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

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

  const avatar =
    profile && moderationOpts ? (
      <Link
        style={[a.rounded_full]}
        label={l`${createSanitizedDisplayName(profile)}’s avatar`}
        accessibilityHint={l`Opens this profile`}
        to={makeProfileLink({
          did: profile.did,
          handle: profile.handle,
        })}
        onPress={() => unstableCacheProfileView(queryClient, profile)}>
        <ProfileCard.Avatar
          profile={profile}
          size={AVATAR_SIZE}
          moderationOpts={moderationOpts}
          disabledPreview
        />
      </Link>
    ) : (
      <ProfileCard.AvatarPlaceholder size={AVATAR_SIZE} />
    )

  const groupedReactions = useMemo(() => {
    const reactions = message.reactions ?? []
    const grouped = new Map<
      string,
      {
        key: string
        value: string
        senders: ChatBskyConvoDefs.ReactionViewSender[]
        count: number
      }
    >()
    for (const reaction of reactions) {
      if (!reaction) continue
      const existing = grouped.get(reaction.value)
      if (existing) {
        existing.senders.push(reaction.sender)
        existing.count++
      } else {
        grouped.set(reaction.value, {
          key: reaction.value,
          value: reaction.value,
          senders: [reaction.sender],
          count: 1,
        })
      }
    }
    return Array.from(grouped.values())
  }, [message.reactions])

  const reactions = useMemo(() => message.reactions ?? [], [message.reactions])

  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 ? (
        <View
          style={[
            a.relative,
            a.bottom_0,
            isFromSelf ? [a.align_end] : [a.ml_sm, a.align_start],
            a.px_sm,
          ]}>
          <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.flex_wrap,
              a.rounded_lg,
              a.border,
              t.atoms.border_contrast_low,
              t.atoms.shadow_xs,
              hasSelfReacted
                ? {backgroundColor: t.palette.primary_100}
                : t.atoms.bg_contrast_25,
              {
                paddingTop: platform({android: 2, default: 3}),
                paddingBottom: platform({android: 2, default: 3}),
                paddingLeft: 6,
                paddingRight: 6,
                transform: [{translateY: -8}],
              },
            ]}
            onPress={isGroupChat ? reactionsControl.open : undefined}>
            {groupedReactions.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 &&
            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>
        </View>
      ) : null}
      <ReactionsDialog
        control={reactionsControl}
        relatedProfiles={relatedProfiles}
        message={message}
        reactions={message.reactions}
        groupedReactions={groupedReactions}
      />
    </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},
        ]}>
        <View style={[a.relative]}>
          {showAvatar ? (
            <View
              style={[
                a.absolute,
                a.bottom_0,
                a.z_50,
                hasReactions && {
                  transform: [
                    {
                      translateY: platform({
                        ios: -29,
                        default: -27,
                      }),
                    },
                  ],
                },
              ]}>
              {avatar}
            </View>
          ) : null}
          <View
            style={[
              a.flex_grow,
              !isFromSelf && isGroupChat && {paddingLeft: AVATAR_SIZE},
            ]}>
            {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}
            <ActionsWrapper
              hasReactions={hasReactions}
              isFromSelf={isFromSelf}
              message={message}
              senderProfile={profile}>
              {AppBskyEmbedRecord.isView(message.embed) && (
                <MessageItemEmbed
                  embed={message.embed}
                  isFromSelf={isFromSelf}
                  isGroupChat={isGroupChat}
                  squaredBottomCorner={squaredBottomCorner || hasEmbedAndText}
                  squaredTopCorner={squaredTopCorner}
                />
              )}
              {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,
                    !isOnlyEmoji(message.text) && [
                      a.rounded_xl,
                      a.py_sm,
                      a.px_md,
                      {
                        marginTop: hasEmbedAndText ? CLUSTERED_MESSAGE_GAP : 0,
                        backgroundColor: isFromSelf
                          ? isPending
                            ? pendingColor
                            : t.palette.primary_500
                          : t.palette.contrast_50,
                      },
                      isFromSelf ? a.self_end : a.self_start,
                      borderRadiusStyle,
                    ],
                  ]}>
                  <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.
                      isOnlyEmoji(message.text) && [
                        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>
              )}
              {appliedReactions}
            </ActionsWrapper>
          </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}