import { BodyText, FootnoteText } from 'src/components/ui/Typography'
import { Toast, useToastState, YStack } from 'tamagui'

// Map the `preset` field on `ShowOptions` (originally a burnt-native field —
// `'error' | 'done' | 'none'`, plus our convenience alias `'success'`) to a
// Tamagui sub-theme name. Burnt's native code path is dead in this app
// (`<ToastProvider native={false}>` in `_layout.tsx`), but reusing the same
// field name means a call site that passes `preset: 'error'` gets a themed
// custom toast today and would still get the right native UX if the global
// `native` flag flipped tomorrow.
const PRESET_THEME: Record<string, 'red' | 'green' | undefined> = {
  error: 'red',
  done: 'green',
  success: 'green',
}

// Side gutter between the toast card and the screen edge.
const SIDE_GUTTER = 16
// Tablet/landscape ceiling — keeps the toast a card, not a banner.
const TABLET_MAX = 520

const GlobalToast = () => {
  const currentToast = useToastState()
  if (!currentToast || currentToast.isHandledNatively) return null

  const themeName = PRESET_THEME[(currentToast as any).preset as string]

  // Centering: ONE mechanism only. ToastImplFrame's default variant ships
  // `marginHorizontal: 'auto'` (@tamagui/toast/src/ToastImpl.tsx:57) and
  // the wrapping `<Animated.View style={{ margin: 'auto' }}>` does the
  // same (ToastImpl.tsx:374). Together those auto margins shrink-and-
  // center the toast inside a full-width viewport. We must NOT add a
  // second centering signal (no `width=`, no `alignSelf`, no
  // `alignItems` on the viewport) — competing centerings cause Yoga to
  // assign the leftover cross-axis space to one side and pin the toast
  // to that edge.
  //
  // The two knobs we DO own:
  //   - `maxWidth`: enforces the tablet/landscape ceiling.
  //   - `marginHorizontal`: the side gutter, applied as a real margin
  //     so it composes with the auto margin instead of fighting it.
  return (
    <Toast
      key={currentToast.id}
      duration={currentToast.duration}
      viewportName={currentToast.viewportName}
      theme={themeName}
      transition="quick"
      enterStyle={{ opacity: 0, y: 30, scale: 0.96 }}
      exitStyle={{ opacity: 0, y: 20, scale: 0.96 }}
      y={0}
      opacity={1}
      scale={1}
      maxWidth={TABLET_MAX}
      marginHorizontal={SIDE_GUTTER}
      paddingHorizontal="$4"
      paddingVertical="$3"
      borderRadius="$5"
      borderWidth={1}
      borderColor="$borderColor"
      // Solid surface so the toast remains legible over feed imagery.
      // The themed sub-themes (red/green) push this token into the
      // saturated step-6 range; the default theme falls back to the
      // standard background-secondary card surface.
      backgroundColor={themeName ? '$color6' : '$backgroundSecondary'}
      shadowColor="$shadowColor"
      shadowOffset={{ width: 0, height: 4 }}
      shadowOpacity={1}
      shadowRadius={12}
      elevation={6}
    >
      <YStack gap="$1">
        <BodyText
          emphasis="strong"
          textAlign="center"
          color={themeName ? '$colorInverse' : '$color'}
        >
          {currentToast.title}
        </BodyText>
        {!!currentToast.message && (
          <FootnoteText
            textAlign="center"
            color={themeName ? '$colorInverse' : '$colorSecondary'}
            opacity={themeName ? 0.92 : 1}
          >
            {currentToast.message}
          </FootnoteText>
        )}
      </YStack>
    </Toast>
  )
}

export default GlobalToast
