import { StyleSheet, Text, View, Pressable } from 'react-native'
import { Image } from 'expo-image'
import { BRAND, TEXT } from '@/src/shared/constants/colors'
import { SPACING } from '@/src/shared/constants/spacing'

export interface NativeLabeledRowProps {
  label: string
  value?: string
  /** SF Symbol name for expo-image source="sf:name" */
  icon?: string
  /** Icon tint color */
  iconColor?: string
  chevron?: boolean
  onPress?: () => void
  /** Destructive row — label turns red */
  destructive?: boolean
  children?: React.ReactNode
  testID?: string
}

export function NativeLabeledRow(props: NativeLabeledRowProps) {
  const {
    label,
    value,
    icon,
    iconColor,
    chevron,
    onPress,
    destructive,
    children,
  } = props

  const labelColor = destructive ? BRAND.DANGER : TEXT.PRIMARY

  const content = (
    <View style={styles.row}>
      {icon ? (
        <Image
          source={`sf:${icon}`}
          style={[styles.icon, { tintColor: iconColor ?? TEXT.SECONDARY }]}
        />
      ) : null}
      <Text style={[styles.label, { color: labelColor }]}>{label}</Text>
      <View style={styles.right}>
        {value ? <Text style={styles.value}>{value}</Text> : null}
        {children}
        {(chevron || onPress) ? (
          <Image
            source="sf:chevron.right"
            style={styles.chevronIcon}
          />
        ) : null}
      </View>
    </View>
  )

  if (onPress) {
    return (
      <Pressable
        onPress={onPress}
        style={({ pressed }) => pressed ? styles.pressed : undefined}
      >
        {content}
      </Pressable>
    )
  }

  return content
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    minHeight: 44,
    paddingHorizontal: SPACING[4],
    paddingVertical: SPACING[3],
  },
  icon: {
    width: 22,
    height: 22,
    marginRight: SPACING[3],
  },
  label: {
    fontSize: 17,
    fontWeight: '400',
    flex: 1,
  },
  right: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: SPACING[2],
  },
  value: {
    fontSize: 17,
    fontWeight: '400',
    color: TEXT.TERTIARY,
  },
  chevronIcon: {
    width: 13,
    height: 13,
    tintColor: TEXT.TERTIARY,
    opacity: 0.6,
  },
  pressed: {
    opacity: 0.7,
  },
})
