import {SymbolView} from 'expo-symbols'
import {type ReactNode} from 'react'
import {View} from 'react-native'

import {Text, type TextProps} from '@/components/ui/typography'
import {
  atoms as a,
  FONT_FAMILY_DISPLAY,
  pressed as pressedStyle,
  useTheme,
  type Theme,
  type ViewStyleProp,
} from '@/sprinkles'

// the shared card frame — rounded, bordered, hard-bg surface. <Card> renders
// it; <VirtualList> composes it into its scroll container so both agree on one
// definition of "looks like a card"
export const cardFrame = (t: Theme) => [
  a.rounded_lg,
  a.curve_continuous,
  a.border,
  t.atoms.bg_hard,
  t.atoms.border_contrast_low,
]

export function Card({
  children,
  padded = true,
  style,
}: {
  children?: ReactNode
  // the standard screen gutter, on by default; compact cards that own their
  // own padding (tiles, home previews) opt out
  padded?: boolean
  style?: ViewStyleProp
}) {
  const t = useTheme()
  return (
    <View style={[cardFrame(t), padded && a.px_md, style]}>
      {children}
    </View>
  )
}

export function CardLabel({style, ...rest}: TextProps) {
  return (
    <Text
      style={[a.text_sm, {textTransform: 'uppercase'}, style]}
      {...rest}
    />
  )
}

export function CardRowTitle({style, ...rest}: TextProps) {
  return (
    <Text
      emoji
      style={[
        a.text_md,
        a.leading_normal,
        a.font_semi_bold,
        a.flex_shrink,
        {fontFamily: FONT_FAMILY_DISPLAY},
        style,
      ]}
      {...rest}
    />
  )
}

// trailing defaults to a navigation chevron; rows that act in place (invite,
// add) pass their own trailing content — or null — so the affordance is honest
export function CardRow({
  children,
  pressed,
  leading,
  trailing,
  style,
}: {
  children?: ReactNode
  pressed?: boolean
  leading?: ReactNode
  trailing?: ReactNode
  style?: ViewStyleProp
}) {
  const t = useTheme()
  return (
    <View
      style={[
        a.flex_row,
        a.align_center,
        a.gap_md,
        a.py_lg,
        pressed && pressedStyle,
        style,
      ]}
    >
      {leading}
      <View style={[a.flex_1, a.gap_xxs]}>{children}</View>
      {trailing !== undefined ? (
        trailing
      ) : (
        <SymbolView
          name="chevron.right"
          size={14}
          weight="medium"
          tintColor={t.atoms.text_contrast_low.color}
        />
      )}
    </View>
  )
}
