/**
 * Card - Dark Medical surface container
 * Flat navy cards with border-dim, no glassmorphism
 */

import { ReactNode, useMemo } from 'react'
import { StyleSheet, View, ViewStyle } from 'react-native'

import { useThemeColors } from '../theme'
import type { ThemeColors } from '../theme/types'
import { RADIUS } from '../constants/borderRadius'
import { ORANGE } from '../constants/colors'

type CardVariant = 'default' | 'accent' | 'tip'

interface CardProps {
  children: ReactNode
  variant?: CardVariant
  style?: ViewStyle
}

function getVariantStyles(colors: ThemeColors): Record<CardVariant, ViewStyle> {
  return {
    default: {
      backgroundColor: colors.surface.default.backgroundColor,
      borderColor: colors.surface.default.borderColor,
      borderWidth: colors.surface.default.borderWidth,
    },
    accent: {
      backgroundColor: colors.surface.accent.backgroundColor,
      borderColor: colors.surface.accent.borderColor,
      borderWidth: colors.surface.accent.borderWidth,
    },
    tip: {
      backgroundColor: colors.surface.tip.backgroundColor,
      borderLeftWidth: 3,
      borderLeftColor: ORANGE[500],
      borderTopColor: colors.surface.default.borderColor,
      borderRightColor: colors.surface.default.borderColor,
      borderBottomColor: colors.surface.default.borderColor,
      borderWidth: 1,
    },
  }
}

export function Card({
  children,
  variant = 'default',
  style,
}: CardProps) {
  const colors = useThemeColors()
  const variantStyles = useMemo(() => getVariantStyles(colors), [colors])

  const surfaceStyle = variantStyles[variant]

  return (
    <View style={[styles.container, surfaceStyle, style]}>
      {children}
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    borderRadius: RADIUS.LG,
    borderCurve: 'continuous',
    overflow: 'hidden',
  },
})

// Preset components for common use cases
export function CardAccent(props: Omit<CardProps, 'variant'>) {
  return <Card {...props} variant="accent" />
}

export function CardTip(props: Omit<CardProps, 'variant'>) {
  return <Card {...props} variant="tip" />
}

// Backward-compatible aliases
export const GlassCard = Card
export const GlassCardElevated = CardAccent
export const GlassCardInset = Card
export const GlassCardTinted = CardAccent
