/**
 * GlassCard - Liquid Glass Container
 * iOS 18.4 inspired glassmorphism — theme-aware
 */

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

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

type GlassVariant = 'base' | 'elevated' | 'inset' | 'tinted'

interface GlassCardProps {
  children: ReactNode
  variant?: GlassVariant
  style?: ViewStyle
  hasBlur?: boolean
  blurIntensity?: number
}

function getVariantStyles(colors: ThemeColors): Record<GlassVariant, ViewStyle> {
  return {
    base: {
      backgroundColor: colors.glass.base.backgroundColor,
      borderColor: colors.glass.base.borderColor,
      borderWidth: colors.glass.base.borderWidth,
    },
    elevated: {
      backgroundColor: colors.glass.elevated.backgroundColor,
      borderColor: colors.glass.elevated.borderColor,
      borderWidth: colors.glass.elevated.borderWidth,
    },
    inset: {
      backgroundColor: colors.glass.inset.backgroundColor,
      borderColor: colors.glass.inset.borderColor,
      borderWidth: colors.glass.inset.borderWidth,
    },
    tinted: {
      backgroundColor: colors.glass.tinted.backgroundColor,
      borderColor: colors.glass.tinted.borderColor,
      borderWidth: colors.glass.tinted.borderWidth,
    },
  }
}

function getShadowStyles(colors: ThemeColors): Record<GlassVariant, ViewStyle> {
  return {
    base: colors.shadow.sm,
    elevated: colors.shadow.md,
    inset: {},
    tinted: colors.shadow.sm,
  }
}

export function GlassCard({
  children,
  variant = 'base',
  style,
  hasBlur = true,
  blurIntensity,
}: GlassCardProps) {
  const colors = useThemeColors()
  const variantStyles = useMemo(() => getVariantStyles(colors), [colors])
  const shadowStyles = useMemo(() => getShadowStyles(colors), [colors])

  const glassStyle = variantStyles[variant]
  const shadowStyle = shadowStyles[variant]
  const intensity = blurIntensity ?? colors.glass.blurMedium

  if (hasBlur) {
    return (
      <View style={[styles.container, glassStyle, shadowStyle, style]}>
        <BlurView
          intensity={intensity}
          tint={colors.glass.blurTint}
          style={StyleSheet.absoluteFill}
        />
        <View style={styles.content}>{children}</View>
      </View>
    )
  }

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

const styles = StyleSheet.create({
  container: {
    borderRadius: RADIUS.GLASS_CARD,
    overflow: 'hidden',
  },
  content: {
    flex: 1,
  },
})

// Preset components for common use cases

export function GlassCardElevated(props: Omit<GlassCardProps, 'variant'>) {
  return <GlassCard {...props} variant="elevated" />
}

export function GlassCardInset(props: Omit<GlassCardProps, 'variant'>) {
  return <GlassCard {...props} variant="inset" hasBlur={false} />
}

export function GlassCardTinted(props: Omit<GlassCardProps, 'variant'>) {
  return <GlassCard {...props} variant="tinted" />
}
