import UserAvatar from 'src/components/common/UserAvatar'
import { CharCount } from 'src/components/ui'
import { Text, useTheme, XStack, YStack } from 'tamagui'

// Compose Redesign Phase 2 — read-only "posting as" row at the top of the
// composer. Multi-account users (up to 8 signed-in accounts per
// `MAX_ACCOUNTS`) need an unambiguous at-a-glance answer to "which account
// will this post under" — the prior inline header showed only the username,
// which collapses to the same string when the same handle exists on two
// instances. Account switching itself stays in Settings → Accounts; this
// row is display-only by design.

type Props = {
  avatarUrl: string | null
  displayName: string | null
  username: string | null
  instance: string | null
  captionCount: number
  maxCharacters: number
  overLimit: boolean
}

export function ComposerAccountRow({
  avatarUrl,
  displayName,
  username,
  instance,
  captionCount,
  maxCharacters,
  overLimit,
}: Props) {
  const theme = useTheme()
  // `verify_credentials` returns `acct` = `username` for the local user, so
  // building `@user@instance.tld` from `username` + `instance` is the
  // unambiguous form across both Pixelfed and Mastodon registries.
  const handle = username && instance ? `@${username}@${instance}` : null
  const primary = displayName?.trim() || username || ''

  return (
    <XStack gap="$3" alignItems="center" justifyContent="space-between">
      <XStack gap="$3" alignItems="center" flex={1} flexShrink={1}>
        <UserAvatar
          url={avatarUrl ?? undefined}
          size="md"
          accessibilityLabel={handle ? `Posting as ${handle}` : undefined}
        />
        <YStack flex={1} flexShrink={1}>
          <Text fontSize="$5" fontWeight="bold" color={theme.color.val} numberOfLines={1}>
            {primary}
          </Text>
          {handle ? (
            <Text fontSize="$2" color={theme.colorTertiary.val} numberOfLines={1}>
              {handle}
            </Text>
          ) : null}
        </YStack>
      </XStack>
      <CharCount
        current={captionCount}
        max={maxCharacters}
        tone={overLimit ? 'danger' : 'default'}
      />
    </XStack>
  )
}
