import Feather from '@expo/vector-icons/Feather'
import { BodyText, FootnoteText } from 'src/components/ui'
import type { Visibility } from 'src/lib/api-types'
import { ICON } from 'src/lib/icons'
import { Sheet, Text, useTheme, XStack, YStack } from 'tamagui'

// Compose Redesign Phase 3 §3.4 — visibility picker. Replaces the cycle
// button (`scope: public → unlisted → private → public`) with a sheet that
// lists each option with its user-visible effect, the same shape Mastodon
// and Pixelfed web both ship. The sheet is reachable from the composer's
// scope trigger button; the trigger itself is rendered by the consumer (we
// don't host it here so the consumer can stage the chevron + label inside
// its own toolbar XGroup).
//
// `direct` (DM visibility) is intentionally unrepresented — Pixelfed
// 400-rejects `direct` (`ApiV1Controller.php:3741`), and the Mastodon DM
// composer is a separate screen. The list mirrors the hardcoded server
// validation enum minus `direct` and `draft`.

type ScopeOption = {
  value: Exclude<Visibility, 'direct' | 'draft'>
  label: string
  subtitle: string
  icon: 'globe' | 'eye-off' | 'lock'
}

const OPTIONS: ScopeOption[] = [
  {
    value: 'public',
    label: 'Public',
    subtitle: 'Visible to everyone, on public timelines.',
    icon: 'globe',
  },
  {
    value: 'unlisted',
    label: 'Unlisted',
    subtitle: 'Visible to anyone with the link, not on public timelines.',
    icon: 'eye-off',
  },
  {
    value: 'private',
    label: 'Followers only',
    subtitle: 'Only your followers can see this post.',
    icon: 'lock',
  },
]

export const SCOPE_LABEL: Record<ScopeOption['value'], string> = {
  public: 'Public',
  unlisted: 'Unlisted',
  private: 'Followers only',
}

export const SCOPE_ICON: Record<ScopeOption['value'], ScopeOption['icon']> = {
  public: 'globe',
  unlisted: 'eye-off',
  private: 'lock',
}

type Props = {
  open: boolean
  onOpenChange: (open: boolean) => void
  value: Visibility
  onValueChange: (value: Visibility) => void
  /** True for private accounts — the picker still opens (so the user can see
   *  the "locked" explanation) but every row is disabled. */
  disabled?: boolean
}

export function ComposerScopePicker({
  open,
  onOpenChange,
  value,
  onValueChange,
  disabled,
}: Props) {
  const theme = useTheme()

  const onSelect = (next: ScopeOption['value']) => {
    if (disabled) return
    onValueChange(next)
    onOpenChange(false)
  }

  return (
    <Sheet
      modal
      open={open}
      onOpenChange={onOpenChange}
      snapPointsMode="fit"
      dismissOnSnapToBottom
      zIndex={100_000}
    >
      <Sheet.Overlay
        backgroundColor="rgba(0,0,0,0.5)"
        enterStyle={{ opacity: 0 }}
        exitStyle={{ opacity: 0 }}
      />
      <Sheet.Handle backgroundColor={theme.backgroundTertiary.val} />
      <Sheet.Frame
        backgroundColor={theme.background.val}
        paddingHorizontal="$4"
        paddingTop="$3"
        paddingBottom="$5"
        gap="$2"
      >
        <Text fontSize="$6" fontWeight="700" color={theme.color.val} paddingBottom="$2">
          Who can see this post?
        </Text>
        <YStack>
          {OPTIONS.map((opt) => {
            const selected = opt.value === value
            return (
              <XStack
                key={opt.value}
                alignItems="center"
                gap="$3"
                paddingVertical="$3"
                paddingHorizontal="$2"
                borderRadius="$3"
                opacity={disabled ? 0.5 : 1}
                pressStyle={
                  disabled ? undefined : { backgroundColor: '$backgroundHover' }
                }
                onPress={() => onSelect(opt.value)}
                accessibilityRole="radio"
                accessibilityState={{ selected, disabled }}
                accessibilityLabel={opt.label}
                accessibilityHint={opt.subtitle}
              >
                <Feather name={opt.icon} size={ICON.lg} color={theme.color.val} />
                <YStack flex={1} gap="$1">
                  <BodyText emphasis={selected ? 'heavy' : 'medium'}>
                    {opt.label}
                  </BodyText>
                  <FootnoteText tone="secondary">{opt.subtitle}</FootnoteText>
                </YStack>
                {selected ? (
                  <Feather
                    name="check"
                    size={ICON.md}
                    color={theme.interactiveActive.val}
                  />
                ) : null}
              </XStack>
            )
          })}
        </YStack>
        {disabled ? (
          <FootnoteText tone="secondary" paddingTop="$2">
            Your account is private — every post is followers-only.
          </FootnoteText>
        ) : null}
      </Sheet.Frame>
    </Sheet>
  )
}
