import Feather from '@expo/vector-icons/Feather'
import { Image } from 'expo-image'
import { LinearGradient } from 'expo-linear-gradient'
import { Pressable } from 'react-native'
import { ICON } from 'src/lib/icons'
import { Text, useTheme, View } from 'tamagui'

type Variant = 'unseen' | 'seen' | 'add' | 'self-unseen' | 'self-seen'

type Props = {
  avatar?: string
  label?: string
  variant: Variant
  onPress: () => void
  onLongPress?: () => void
  size?: number
}

// Accent → pressed-sibling diagonal when the user has unseen stories; muted
// grey once seen. Both stops come from the theme so the gradient tracks
// light/dark and the active-account accent variant — once the user swaps
// accounts, the ring re-paints with that account's hue. The `add` variant
// is a dashed grey ring with a "+" badge — self, no active stories.

export default function StoryRing({
  avatar,
  label,
  variant,
  onPress,
  onLongPress,
  size = 64,
}: Props) {
  const theme = useTheme()
  const ringPadding = 3
  const innerPadding = 2
  const totalSize = size
  const innerSize = totalSize - 2 * (ringPadding + innerPadding)

  const isUnseen = variant === 'unseen' || variant === 'self-unseen'
  const isAdd = variant === 'add'

  return (
    <Pressable
      onPress={onPress}
      onLongPress={onLongPress}
      hitSlop={4}
      accessibilityRole="button"
      accessibilityLabel={label ? `${label}'s story` : 'Story'}
    >
      <View alignItems="center" gap={6} width={totalSize + 12}>
        <View
          width={totalSize}
          height={totalSize}
          borderRadius={totalSize / 2}
          alignItems="center"
          justifyContent="center"
        >
          {isUnseen ? (
            <LinearGradient
              colors={[theme.accent.val as string, theme.accentPressed.val as string]}
              start={{ x: 0, y: 0 }}
              end={{ x: 1, y: 1 }}
              style={{
                position: 'absolute',
                width: totalSize,
                height: totalSize,
                borderRadius: totalSize / 2,
              }}
            />
          ) : (
            <View
              position="absolute"
              width={totalSize}
              height={totalSize}
              borderRadius={totalSize / 2}
              borderWidth={isAdd ? 1.5 : 2}
              borderColor={
                isAdd ? theme.borderColorStrong.val : theme.borderColorStrong.val
              }
              borderStyle={isAdd ? 'dashed' : 'solid'}
            />
          )}

          <View
            width={innerSize + 2 * innerPadding}
            height={innerSize + 2 * innerPadding}
            borderRadius={(innerSize + 2 * innerPadding) / 2}
            backgroundColor={theme.background.val}
            alignItems="center"
            justifyContent="center"
          >
            <View
              width={innerSize}
              height={innerSize}
              borderRadius={innerSize / 2}
              overflow="hidden"
              alignItems="center"
              justifyContent="center"
              backgroundColor={theme.backgroundTertiary.val}
            >
              {avatar ? (
                <Image
                  source={{ uri: avatar }}
                  style={{ width: innerSize, height: innerSize }}
                  contentFit="cover"
                  cachePolicy="memory-disk"
                />
              ) : (
                <Feather name="user" size={ICON.md} color={theme.colorTertiary.val} />
              )}
            </View>
          </View>

          {isAdd ? (
            <View
              position="absolute"
              bottom={-2}
              right={-2}
              width={20}
              height={20}
              borderRadius={10}
              backgroundColor={theme.backgroundTertiary.val}
              borderWidth={2}
              borderColor={theme.background.val}
              alignItems="center"
              justifyContent="center"
            >
              <Feather name="plus" size={12} color={theme.color.val} />
            </View>
          ) : null}
        </View>

        {label ? (
          <Text
            fontSize={11}
            color={theme.colorSecondary.val}
            numberOfLines={1}
            textAlign="center"
            maxWidth={totalSize + 10}
            allowFontScaling={false}
          >
            {label}
          </Text>
        ) : null}
      </View>
    </Pressable>
  )
}
