/**
 * CollectionCard - Premium collection card
 * Used in Explore and Browse screens
 * Supports 'default' and 'hero' variants
 */

import { useMemo, useRef, useCallback } from 'react'
import {
  View,
  StyleSheet,
  Pressable,
  Animated,
  ImageBackground,
  useWindowDimensions,
  Text as RNText,
} from 'react-native'

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

const AnimatedPressable = Animated.createAnimatedComponent(Pressable)

export type CollectionCardVariant = 'default' | 'hero' | 'horizontal'

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

export function CollectionCard({ collection, variant = 'default', onPress, imageUrl, workoutCountLabel }: CollectionCardProps) {
  const colors = useThemeColors()
  const { width: screenWidth } = useWindowDimensions()
  const styles = useMemo(() => createStyles(colors, screenWidth, variant), [colors, screenWidth, variant])

  // Press animation
  const scaleValue = useRef(new Animated.Value(1)).current
  const handlePressIn = useCallback(() => {
    Animated.spring(scaleValue, {
      toValue: 0.97,
      useNativeDriver: true,
      speed: 50,
      bounciness: 4,
    }).start()
  }, [scaleValue])
  const handlePressOut = useCallback(() => {
    Animated.spring(scaleValue, {
      toValue: 1,
      useNativeDriver: true,
      speed: 30,
      bounciness: 6,
    }).start()
  }, [scaleValue])

  const countLabel = workoutCountLabel ?? `${collection.workoutIds.length} workouts`

  return (
    <AnimatedPressable
      style={[styles.container, { transform: [{ scale: scaleValue }] }]}
      onPress={onPress}
      onPressIn={handlePressIn}
      onPressOut={handlePressOut}
    >
      {/* Background Image or Solid Color */}
      {imageUrl ? (
        <ImageBackground
          source={{ uri: imageUrl }}
          style={StyleSheet.absoluteFill}
          imageStyle={{ borderRadius: RADIUS.XL }}
          resizeMode="cover"
        >
          <View
            style={[
              StyleSheet.absoluteFill,
              {
                backgroundColor: GRADIENTS.VIDEO_OVERLAY[1],
              },
            ]}
          />
        </ImageBackground>
      ) : (
        <View
          style={[
            StyleSheet.absoluteFill,
            {
              borderRadius: RADIUS.XL,
              backgroundColor: NAVY[800],
            },
          ]}
        />
      )}

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

        <StyledText
          preset={variant === 'hero' ? 'TITLE_2' : 'HEADLINE'}
          color={TEXT.PRIMARY}
          numberOfLines={2}
          style={styles.title}
        >
          {collection.title}
        </StyledText>

        {variant === 'hero' && (
          <StyledText
            preset="CARD_SUBTITLE"
            color={TEXT.SECONDARY}
            numberOfLines={2}
            style={{ marginBottom: SPACING[1] }}
          >
            {collection.description}
          </StyledText>
        )}

        <StyledText
          preset="CARD_METADATA"
          color={TEXT.TERTIARY}
          numberOfLines={1}
        >
          {countLabel}
        </StyledText>
      </View>
    </AnimatedPressable>
  )
}

function createStyles(colors: ThemeColors, screenWidth: number, variant: CollectionCardVariant) {
  const defaultCardWidth = (screenWidth - LAYOUT.SCREEN_PADDING * 2 - SPACING[3]) / 2
  const horizontalCardWidth = screenWidth * 0.65

  const containerByVariant = {
    default: {
      width: defaultCardWidth,
      aspectRatio: 1 as number,
    },
    hero: {
      width: screenWidth - LAYOUT.SCREEN_PADDING * 2,
      height: 200,
    },
    horizontal: {
      width: horizontalCardWidth,
      height: 180,
    },
  }

  return StyleSheet.create({
    container: {
      ...containerByVariant[variant],
      borderRadius: RADIUS.XL,
      overflow: 'hidden',
    },
    content: {
      flex: 1,
      padding: SPACING[4],
      justifyContent: 'flex-end',
    },
    iconContainer: {
      width: 48,
      height: 48,
      borderRadius: RADIUS.LG,
      backgroundColor: GREEN.DIM,
      justifyContent: 'center',
      alignItems: 'center',
      marginBottom: SPACING[3],
      borderWidth: 1,
      borderColor: GREEN.BORDER,
    },
    icon: {
      fontSize: 24,
    },
    title: {
      marginBottom: SPACING[1],
    },
  })
}
