/**
 * CollectionCard - Premium collection card with glassmorphism
 * Used in Home and Browse screens
 */

import { useMemo } from 'react'
import {
  View,
  StyleSheet,
  Pressable,
  ImageBackground,
  Dimensions,
  Text as RNText,
} from 'react-native'
import { LinearGradient } from 'expo-linear-gradient'
import { BlurView } from 'expo-blur'

import { useThemeColors, BRAND, GRADIENTS } from '@/src/shared/theme'
import type { ThemeColors } from '@/src/shared/theme/types'
import { RADIUS } from '@/src/shared/constants/borderRadius'
import { SPACING } from '@/src/shared/constants/spacing'
import { StyledText } from './StyledText'
import type { Collection } from '@/src/shared/types'

const { width: SCREEN_WIDTH } = Dimensions.get('window')

interface CollectionCardProps {
  collection: Collection
  onPress?: () => void
  imageUrl?: string
}

export function CollectionCard({ collection, onPress, imageUrl }: CollectionCardProps) {
  const colors = useThemeColors()
  const styles = useMemo(() => createStyles(colors), [colors])

  return (
    <Pressable style={styles.container} onPress={onPress}>
      {/* Background Image or Gradient */}
      {imageUrl ? (
        <ImageBackground
          source={{ uri: imageUrl }}
          style={StyleSheet.absoluteFill}
          imageStyle={{ borderRadius: RADIUS.XL }}
          resizeMode="cover"
        >
          <LinearGradient
            colors={GRADIENTS.VIDEO_OVERLAY as [string, string]}
            style={StyleSheet.absoluteFill}
          />
        </ImageBackground>
      ) : (
        <LinearGradient
          colors={collection.gradient ?? [BRAND.PRIMARY, '#FF3B30']}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 1 }}
          style={[StyleSheet.absoluteFill, { borderRadius: RADIUS.XL }]}
        />
      )}

      {/* Glassmorphism Overlay */}
      <View style={styles.overlay}>
        <BlurView intensity={20} tint={colors.glass.blurTint} style={StyleSheet.absoluteFill} />
      </View>

      {/* Content */}
      <View style={styles.content}>
        <View style={styles.iconContainer}>
          <RNText style={styles.icon}>{collection.icon}</RNText>
        </View>

        <StyledText
          size={17}
          weight="bold"
          color="#FFFFFF"
          numberOfLines={2}
          style={styles.title}
        >
          {collection.title}
        </StyledText>

        <StyledText
          size={13}
          weight="medium"
          color="rgba(255,255,255,0.7)"
          numberOfLines={1}
        >
          {collection.workoutIds.length} workouts
        </StyledText>
      </View>
    </Pressable>
  )
}

function createStyles(colors: ThemeColors) {
  const cardWidth = (SCREEN_WIDTH - SPACING[6] * 2 - SPACING[3]) / 2

  return StyleSheet.create({
    container: {
      width: cardWidth,
      aspectRatio: 1,
      borderRadius: RADIUS.XL,
      overflow: 'hidden',
      ...colors.shadow.md,
    },
    overlay: {
      ...StyleSheet.absoluteFillObject,
      backgroundColor: 'rgba(0,0,0,0.3)',
    },
    content: {
      flex: 1,
      padding: SPACING[4],
      justifyContent: 'flex-end',
    },
    iconContainer: {
      width: 48,
      height: 48,
      borderRadius: 14,
      backgroundColor: 'rgba(255,255,255,0.15)',
      justifyContent: 'center',
      alignItems: 'center',
      marginBottom: SPACING[3],
      borderWidth: 1,
      borderColor: 'rgba(255,255,255,0.2)',
    },
    icon: {
      fontSize: 24,
    },
    title: {
      marginBottom: SPACING[1],
    },
  })
}
