import { Feather } from '@expo/vector-icons'
import { Link } from 'expo-router'
import React from 'react'
import { Platform, Pressable } from 'react-native'
import BoostedAvatar from 'src/components/common/BoostedAvatar'
import EmojiText from 'src/components/common/EmojiText'
import type { CustomEmoji, Status } from 'src/lib/api-types'
import { ICON } from 'src/lib/icons'
import { enforceLen } from 'src/utils'
import { Text, useTheme, View, XStack, YStack } from 'tamagui'

// Variant signals the surface this header sits on top of. Layout is
// intentionally identical across variants today — the prop exists so
// future callers (an event-only hero row, a thread-reply compact header)
// can opt into branch-specific tweaks without a new component.
export type PostHeaderVariant = 'image' | 'text' | 'event'

export interface PostHeaderProps {
  avatar: string
  username: string
  displayName: string
  userId: string
  menuContent?: React.ReactNode
  booster?: Status['account']
  emojis?: Array<CustomEmoji>
  // Optional inline timestamp drawn after the display-name row. Used on
  // text-post permalinks where there's no separate PostCaption footer.
  timeAgo?: string | null
  variant?: PostHeaderVariant
}

// Canonical header for every post type. Feed and detail screens delegate
// here so display-name + handle + menu rendering stays identical —
// previously the text-post branch hand-rolled its own header, which is
// where the "username instead of display_name" and "custom emoji
// dropped" bugs lived.
const PostHeader = React.memo(function PostHeader({
  avatar,
  username,
  displayName,
  userId,
  menuContent,
  booster,
  emojis,
  timeAgo,
  variant: _variant = 'image',
}: PostHeaderProps) {
  const theme = useTheme()
  const headerLabel = enforceLen(displayName?.trim() || username, 25, true)
  return (
    <View px="$3" py="$1" backgroundColor={theme.background.val}>
      <XStack
        flexGrow={1}
        justifyContent="space-between"
        alignSelf="stretch"
        alignItems="center"
        py="$2"
      >
        <View flexGrow={1}>
          <XStack gap="$3" alignItems="center" flexGrow={1}>
            <BoostedAvatar url={avatar} userId={userId} booster={booster} size="md" />
            <Link href={`/profile/${userId}`} asChild>
              <Pressable>
                <YStack gap={3}>
                  <XStack gap="$2" alignItems="center">
                    <EmojiText variant="display" text={headerLabel} emojis={emojis} />
                    {timeAgo ? (
                      <Text
                        color={theme.colorSecondary.val}
                        fontSize="$3"
                        numberOfLines={1}
                      >
                        · {timeAgo}
                      </Text>
                    ) : null}
                  </XStack>
                  {username ? (
                    <Text fontWeight="300" fontSize="$3" color={theme.colorSecondary.val}>
                      @{enforceLen(username, 25, true)}
                    </Text>
                  ) : null}
                </YStack>
              </Pressable>
            </Link>
          </XStack>
        </View>
        {menuContent || (
          <View px="$3">
            <Feather
              name={Platform.OS === 'ios' ? 'more-horizontal' : 'more-vertical'}
              size={ICON.lg}
              color={theme.color.val}
            />
          </View>
        )}
      </XStack>
    </View>
  )
})

export default PostHeader
