import { Feather } from '@expo/vector-icons'
import EmojiText from 'src/components/common/EmojiText'
import UserAvatar from 'src/components/common/UserAvatar'
import type { Account } from 'src/lib/api-types'
import { Text, View, XStack, YStack } from 'tamagui'
import { MembershipDots } from './MembershipDots'

// Pure visual for a follow row in the List Organizer. Recomposed from the same
// primitives `UserRow` uses internally (UserAvatar + EmojiText + caption Text)
// rather than wrapping `UserRow` — UserRow puts `onPress`/`pressStyle` on its
// outer XStack, which would race the composed tap/long-press/pan gesture the
// organizer attaches around this content. No press handling lives here; the
// interactive wrapper (`OrganizerAccountRow`) and the drag preview
// (`OrganizerDragPreview`) both render this same content for visual continuity.

type Props = {
  account: Pick<Account, 'id' | 'avatar' | 'display_name' | 'acct' | 'emojis'>
  listIds: string[]
  isMutual: boolean
  colorIndices: Record<string, number>
  // Recycler hygiene for the FlashList case; omitted by the static preview.
  recycling?: boolean
}

export function OrganizerAccountRowContent({
  account,
  listIds,
  isMutual,
  colorIndices,
  recycling,
}: Props) {
  return (
    <XStack px="$4" py="$3" gap="$3" alignItems="center">
      <View>
        <UserAvatar
          url={account.avatar}
          size="md"
          recyclingKey={recycling ? account.id : undefined}
        />
        {isMutual ? (
          <View
            position="absolute"
            bottom={-2}
            right={-2}
            width={14}
            height={14}
            borderRadius={7}
            backgroundColor="$colorSuccess"
            borderWidth={1}
            borderColor="white"
            alignItems="center"
            justifyContent="center"
            accessibilityLabel="Mutual follow"
          >
            <Feather name="star" size={9} color="white" />
          </View>
        ) : null}
      </View>

      <YStack flex={1} gap="$1">
        <EmojiText
          text={account.display_name || account.acct}
          emojis={account.emojis}
          fontWeight="bold"
          color="$color"
          numberOfLines={1}
        />
        <Text fontSize="$caption" color="$colorSecondary" numberOfLines={1}>
          @{account.acct}
        </Text>
      </YStack>

      <MembershipDots listIds={listIds} colorIndices={colorIndices} />
    </XStack>
  )
}
