import { Feather } from '@expo/vector-icons'
import EmojiText from 'src/components/common/EmojiText'
import StatusContent from 'src/components/common/StatusContent'
import type { CustomEmoji } from 'src/lib/api-types'
import { ICON } from 'src/lib/icons'
import type { NormalizedField } from 'src/lib/profile/accountFields'
import { useTheme, XStack, YStack } from 'tamagui'

// Renders Mastodon-style structured profile metadata (Account.fields). Each row
// is a labelled value; rel="me"-verified rows get a green check next to the
// label. Pixelfed accounts have no fields, so ProfileHeader only mounts this
// when `fields.length > 0` — this component is a pure presenter.
//
// Field VALUES are HTML and run through the same StatusContent pipeline the bio
// uses (htmlToTextWithLineBreaks → AutolinkText), so a verified-link value
// renders as a tappable, favicon-decorated link with the full href preserved as
// the tap target, and custom-emoji shortcodes resolve against `emojis`. Press
// handlers are threaded in from ProfileHeader rather than rebuilt here, keeping
// StatusContent's memo identity stable across FlashList header churn.

interface ProfileFieldsProps {
  fields: NormalizedField[]
  emojis?: CustomEmoji[]
  onHashtagPress: (hashtag: string) => void
  onMentionPress: (mention: string, isLocalMention: boolean) => void
}

export default function ProfileFields({
  fields,
  emojis,
  onHashtagPress,
  onMentionPress,
}: ProfileFieldsProps) {
  const theme = useTheme()
  if (!fields.length) return null

  const verifiedColor = theme.green9?.val ?? '#2E7D32'

  return (
    <YStack gap="$2" mt="$1">
      {fields.map((field, i) => (
        <YStack
          key={`${i}-${field.name}`}
          gap="$1"
          pt={i === 0 ? 0 : '$2'}
          borderTopWidth={i === 0 ? 0 : 1}
          borderColor={theme.borderColor.val}
        >
          {field.name ? (
            <XStack alignItems="center" gap="$1.5">
              <EmojiText
                variant="caption"
                text={field.name}
                emojis={emojis}
                color={theme.colorSecondary.val}
                textTransform="uppercase"
                letterSpacing={0.4}
                fontWeight="600"
                flexShrink={1}
              />
              {field.verified ? (
                <Feather
                  name="check-circle"
                  size={ICON.xs}
                  color={verifiedColor}
                  accessibilityLabel="Verified link"
                />
              ) : null}
            </XStack>
          ) : null}
          {field.valueHtml ? (
            <StatusContent
              html={field.valueHtml}
              emojis={emojis}
              disableReadMore
              onHashtagPress={onHashtagPress}
              onMentionPress={onMentionPress}
            />
          ) : null}
        </YStack>
      ))}
    </YStack>
  )
}
