import { Pressable, StyleSheet, Text, View, type ViewStyle, type TextStyle } from 'react-native'
import { Image } from 'expo-image'
import type { SFSymbol } from 'sf-symbols-typescript'
import { GREEN, NAVY, RED, TEXT, BRAND } from '@/src/shared/constants/colors'
import { RADIUS } from '@/src/shared/constants/borderRadius'
import { SPACING, LAYOUT } from '@/src/shared/constants/spacing'

/**
 * SwiftUI-inspired button variants:
 * - borderedProminent: filled green (primary CTA)
 * - bordered: tinted background with colored text
 * - borderless: text-only (inline actions)
 * - destructive: red text action
 * - plain: minimal, no chrome
 */
type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive' | 'icon'
  | 'borderedProminent' | 'bordered' | 'borderless' | 'plain'

type ControlSize = 'mini' | 'small' | 'regular' | 'large' | 'extraLarge'

export interface NativeButtonProps {
  variant?: ButtonVariant
  title?: string
  systemImage?: SFSymbol
  onPress?: () => void
  disabled?: boolean
  color?: string
  controlSize?: ControlSize
  fullWidth?: boolean
  style?: ViewStyle
  testID?: string
}

export function NativeButton(props: NativeButtonProps) {
  const {
    variant = 'primary',
    title,
    systemImage,
    onPress,
    disabled,
    color,
    controlSize = 'regular',
    fullWidth,
    style,
    testID,
  } = props

  const sizeStyle = SIZE_STYLES[controlSize]
  const buttonStyle = getVariantStyle(variant, color)
  const textStyle = getVariantTextStyle(variant, color)

  return (
    <Pressable
      onPress={onPress}
      disabled={disabled}
      style={({ pressed }) => [
        styles.base,
        sizeStyle.container,
        fullWidth && styles.fullWidth,
        buttonStyle,
        pressed && styles.pressed,
        disabled && styles.disabled,
        { borderCurve: 'continuous' } as ViewStyle,
        style,
      ]}
      testID={testID}
    >
      <View style={styles.content}>
        {systemImage ? (
          <Image
            source={`sf:${systemImage}`}
            style={[styles.icon, { tintColor: textStyle.color }]}
          />
        ) : null}
        {title ? (
          <Text style={[styles.text, sizeStyle.text, textStyle]}>{title}</Text>
        ) : null}
      </View>
    </Pressable>
  )
}

function getVariantStyle(variant: ButtonVariant, color?: string): ViewStyle {
  const brandColor = color ?? GREEN[500]
  switch (variant) {
    case 'primary':
    case 'borderedProminent':
      return { backgroundColor: brandColor }
    case 'secondary':
    case 'bordered':
      return { backgroundColor: `${brandColor}18` } // 10% opacity tint
    case 'ghost':
    case 'borderless':
    case 'plain':
      return { backgroundColor: 'transparent' }
    case 'destructive':
      return { backgroundColor: 'transparent' }
    case 'icon':
      return { backgroundColor: 'transparent' }
  }
}

function getVariantTextStyle(variant: ButtonVariant, color?: string): TextStyle {
  const brandColor = color ?? GREEN[500]
  switch (variant) {
    case 'primary':
    case 'borderedProminent':
      return { color: NAVY[900] }
    case 'secondary':
    case 'bordered':
      return { color: brandColor }
    case 'destructive':
      return { color: RED[500] }
    case 'ghost':
    case 'borderless':
      return { color: brandColor }
    case 'plain':
      return { color: TEXT.PRIMARY }
    default:
      return { color: TEXT.PRIMARY }
  }
}

const SIZE_STYLES: Record<ControlSize, { container: ViewStyle; text: TextStyle }> = {
  mini: {
    container: { height: 28, paddingHorizontal: SPACING[2], borderRadius: RADIUS.SM },
    text: { fontSize: 13 },
  },
  small: {
    container: { height: 34, paddingHorizontal: SPACING[3], borderRadius: RADIUS.SM },
    text: { fontSize: 14 },
  },
  regular: {
    container: { height: 44, paddingHorizontal: SPACING[4], borderRadius: RADIUS.MD },
    text: { fontSize: 17 },
  },
  large: {
    container: { height: 50, paddingHorizontal: SPACING[5], borderRadius: RADIUS.MD },
    text: { fontSize: 17 },
  },
  extraLarge: {
    container: { height: LAYOUT.BUTTON_HEIGHT, paddingHorizontal: SPACING[6], borderRadius: RADIUS.MD },
    text: { fontSize: 17 },
  },
}

const styles = StyleSheet.create({
  base: {
    alignItems: 'center',
    justifyContent: 'center',
    minHeight: LAYOUT.TOUCH_TARGET,
  },
  content: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: SPACING[2],
  },
  fullWidth: {
    width: '100%',
  },
  icon: {
    width: 18,
    height: 18,
  },
  text: {
    fontWeight: '600',
    textAlign: 'center',
  },
  pressed: {
    opacity: 0.7,
    transform: [{ scale: 0.98 }],
  },
  disabled: {
    opacity: 0.35,
  },
})
