import { Feather } from '@expo/vector-icons'
import { Pressable } from 'react-native'
import type { RsvpAction } from 'src/lib/api'
import type { PfEventParticipationStatus } from 'src/lib/api-types'
import { isActiveRsvp, nextRsvpAction, rsvpLabel } from 'src/lib/events'
import { ICON } from 'src/lib/icons'
import { Menu, Text, useTheme, View, XStack } from 'tamagui'

export type RsvpPillSize = 'sm' | 'md'

type RsvpPillProps = {
  rsvp: PfEventParticipationStatus | null
  past: boolean
  pending: boolean
  onSelect: (action: RsvpAction) => void
  // 'sm' for the in-feed EventCard, 'md' for the full-screen EventDetailView.
  // Defaults to 'sm'.
  size?: RsvpPillSize
  // Override the rendered label. Used to show "Event ended" when `past`.
  label?: string
}

const SIZE_TOKENS = {
  sm: { paddingHorizontal: 12, paddingVertical: 6, iconSize: ICON.lg, fontSize: '$2' },
  md: { paddingHorizontal: 14, paddingVertical: 8, iconSize: ICON.sm, fontSize: '$3' },
} as const

export default function RsvpPill({
  rsvp,
  past,
  pending,
  onSelect,
  size = 'sm',
  label,
}: RsvpPillProps) {
  const theme = useTheme()
  const active = isActiveRsvp(rsvp)
  const disabled = past || pending
  const tokens = SIZE_TOKENS[size]
  const text = label ?? (past ? 'Event ended' : rsvpLabel(rsvp))
  const iconColor: string = active
    ? (theme.colorInverse.val as string)
    : past
      ? (theme.colorTertiary.val as string)
      : (theme.color.val as string)

  const body = (
    <Pressable
      onPress={() => {
        if (disabled) return
        onSelect(nextRsvpAction(rsvp))
      }}
      disabled={disabled}
      hitSlop={6}
      accessibilityRole="button"
      accessibilityLabel={text}
      accessibilityState={{ disabled }}
      style={({ pressed }) => ({
        transform: [{ scale: pressed && !disabled ? 0.96 : 1 }],
        opacity: pressed && !disabled ? 0.9 : 1,
      })}
    >
      <View
        paddingHorizontal={tokens.paddingHorizontal}
        paddingVertical={tokens.paddingVertical}
        borderRadius={999}
        backgroundColor={active ? '$accent' : '$backgroundTertiary'}
        opacity={past ? 0.6 : pending ? 0.6 : 1}
        {...(active
          ? {
              shadowColor: '$accentGlow',
              elevation: '$2' as any,
            }
          : null)}
      >
        <XStack alignItems="center" gap="$2">
          <Feather name="calendar" size={tokens.iconSize} color={iconColor} />
          <Text
            fontSize={tokens.fontSize}
            fontWeight="bold"
            color={active ? '$colorInverse' : past ? '$colorTertiary' : '$color'}
          >
            {text}
          </Text>
        </XStack>
      </View>
    </Pressable>
  )

  if (past) return body

  return (
    <Menu>
      <Menu.Trigger>{body}</Menu.Trigger>
      <Menu.Content>
        <Menu.Item key="going" onSelect={() => onSelect('going')}>
          <Menu.ItemTitle>Going</Menu.ItemTitle>
          <Menu.ItemIcon ios={{ name: 'checkmark.circle' }} />
        </Menu.Item>
        <Menu.Item key="interested" onSelect={() => onSelect('interested')}>
          <Menu.ItemTitle>Interested</Menu.ItemTitle>
          <Menu.ItemIcon ios={{ name: 'star' }} />
        </Menu.Item>
        <Menu.Item key="declined" onSelect={() => onSelect('declined')}>
          <Menu.ItemTitle>Can't go</Menu.ItemTitle>
          <Menu.ItemIcon ios={{ name: 'xmark.circle' }} />
        </Menu.Item>
        {rsvp ? (
          <Menu.Item key="withdraw" destructive onSelect={() => onSelect('withdraw')}>
            <Menu.ItemTitle>Clear RSVP</Menu.ItemTitle>
            <Menu.ItemIcon ios={{ name: 'arrow.uturn.backward' }} />
          </Menu.Item>
        ) : null}
      </Menu.Content>
    </Menu>
  )
}
