import Feather from '@expo/vector-icons/Feather'
import { Image } from 'expo-image'
import { Pressable } from 'react-native'
import { PressableOpacity } from 'src/components/common/PressableOpacity'
import { ICON } from 'src/lib/icons'
import { Separator, Text, useTheme, View, YStack, ZStack } from 'tamagui'

// Single source for the "sensitive / mature content" media shroud. Both
// presentations share the eye-off glyph, the copy, and a blurhash backdrop
// (the heavy-blur preview Pixelfed/Mastodon show for hidden media); they
// differ only in chrome and reveal affordance:
//   - 'feed' → full-bleed ZStack with the message centred and dual separators
//     framing a "Tap to view" button. Only the button reveals — the
//     surrounding media area is owned by FeedPost's tap / double-tap gesture,
//     so making the whole surface tappable would fight it. (This folds the two
//     formerly-divergent feed copies — single-image had no backdrop and a
//     smaller heading; both now match the album presentation.)
//   - 'card' → compact, rounded, centred. The whole surface is the reveal
//     target; embedded quoted-status / comment cards have no competing gesture.
//
// Theme split (the documented on-photo overlay exception): the glyph and
// labels sit over the blurhash image, so they stay fixed overlay-white
// regardless of theme. The 'feed' separators keep the semantic `borderColor`
// token — they read as app chrome dividing the button from the media, not as
// part of the photo overlay.

const SENSITIVE_COPY = 'This post contains sensitive or mature content'

type Props = {
  variant: 'feed' | 'card'
  width: number
  height: number
  blurhash?: string | null
  /** Card variant only — matches the surrounding media corner radius. */
  borderRadius?: number
  /** Feed variant only — keeps the blurhash backdrop stable across FlashList
   * cell recycling. */
  recyclingKey?: string
  onReveal: () => void
}

export default function SensitiveShroud({
  variant,
  width,
  height,
  blurhash,
  borderRadius,
  recyclingKey,
  onReveal,
}: Props) {
  const theme = useTheme()
  const placeholder = blurhash ? { blurhash } : undefined

  if (variant === 'card') {
    return (
      <Pressable onPress={onReveal}>
        <View
          width={width}
          height={height}
          borderRadius={borderRadius}
          overflow="hidden"
          justifyContent="center"
          alignItems="center"
          backgroundColor="$backgroundTertiary"
        >
          <Image
            placeholder={placeholder}
            placeholderContentFit="cover"
            contentFit="cover"
            style={{ position: 'absolute', width, height }}
          />
          <YStack alignItems="center" gap="$2" padding="$3">
            <Feather name="eye-off" size={ICON.lg} color="white" />
            <Text fontSize="$3" color="white" fontWeight="600">
              Tap to view
            </Text>
          </YStack>
        </View>
      </Pressable>
    )
  }

  return (
    <ZStack w={width} h={height}>
      <Image
        placeholder={placeholder}
        placeholderContentFit="cover"
        contentFit="cover"
        recyclingKey={recyclingKey}
        style={{ position: 'absolute', width, height }}
      />
      <YStack justifyContent="center" alignItems="center" flexGrow={1}>
        <YStack justifyContent="center" alignItems="center" flexGrow={1} gap="$3">
          <Feather name="eye-off" size={ICON.xl} color="white" />
          {/* Unified heading size: the two feed copies used $5 and $7 — split
              the difference at $6 so neither album nor single-image regresses. */}
          <Text fontSize="$6" color="white" allowFontScaling={false}>
            {SENSITIVE_COPY}
          </Text>
        </YStack>
        <YStack w={width} flexShrink={1}>
          <Separator borderColor={theme.borderColor.val} />
          <PressableOpacity onPress={onReveal}>
            <View p="$4" justifyContent="center" alignItems="center">
              <Text
                fontSize="$4"
                color="white"
                fontWeight="bold"
                allowFontScaling={false}
              >
                Tap to view
              </Text>
            </View>
          </PressableOpacity>
          <Separator borderColor={theme.borderColor.val} />
        </YStack>
      </YStack>
    </ZStack>
  )
}
