/**
 * Loading Skeleton Components
 * Shimmer loading states for better UX
 */

import { View, StyleSheet, Animated, type ViewStyle, type DimensionValue } from 'react-native'
import { useEffect, useRef } from 'react'
import { useThemeColors } from '@/src/shared/theme'
import { DARK } from '@/src/shared/constants/colors'
import { SPACING } from '@/src/shared/constants/spacing'
import { RADIUS } from '@/src/shared/constants/borderRadius'

interface SkeletonProps {
  width?: DimensionValue
  height?: number
  borderRadius?: number
  style?: ViewStyle
}

/**
 * Shimmer Skeleton Component
 */
export function Skeleton({ width = '100%', height = 20, borderRadius = RADIUS.MD, style }: SkeletonProps) {
  const colors = useThemeColors()
  const shimmerValue = useRef(new Animated.Value(0)).current

  useEffect(() => {
    const shimmer = Animated.loop(
      Animated.sequence([
        Animated.timing(shimmerValue, {
          toValue: 1,
          duration: 1500,
          useNativeDriver: true,
        }),
        Animated.timing(shimmerValue, {
          toValue: 0,
          duration: 1500,
          useNativeDriver: true,
        }),
      ])
    )
    shimmer.start()
    return () => shimmer.stop()
  }, [])

  const translateX = shimmerValue.interpolate({
    inputRange: [0, 1],
    outputRange: [-200, 200],
  })

  return (
    <View
      style={[
        styles.skeleton,
        {
          width,
          height,
          borderRadius,
          backgroundColor: colors.bg.overlay2,
        },
        style,
      ]}
    >
      <Animated.View
        style={[
          styles.shimmer,
          {
            transform: [{ translateX }],
          },
        ]}
      />
    </View>
  )
}

/**
 * Workout Card Skeleton
 */
export function WorkoutCardSkeleton() {
  const colors = useThemeColors()
  
  return (
    <View style={[styles.card, { backgroundColor: colors.bg.surface }]}>
      <Skeleton width="100%" height={160} borderRadius={RADIUS.LG} />
      <View style={styles.cardContent}>
        <Skeleton width="70%" height={20} />
        <View style={styles.row}>
          <Skeleton width="40%" height={16} />
          <Skeleton width="30%" height={16} />
        </View>
      </View>
    </View>
  )
}

/**
 * Trainer Card Skeleton
 */
export function TrainerCardSkeleton() {
  const colors = useThemeColors()
  
  return (
    <View style={[styles.trainerCard, { backgroundColor: colors.bg.surface }]}>
      <Skeleton width={80} height={80} borderRadius={40} />
      <View style={styles.trainerInfo}>
        <Skeleton width="80%" height={18} />
        <Skeleton width="60%" height={14} />
      </View>
    </View>
  )
}

/**
 * Collection Card Skeleton
 */
export function CollectionCardSkeleton() {
  return (
    <View style={styles.collectionCard}>
      <Skeleton width={120} height={120} borderRadius={RADIUS.XL} />
      <Skeleton width="80%" height={18} style={{ marginTop: SPACING[3] }} />
    </View>
  )
}

/**
 * Stats Card Skeleton
 */
export function StatsCardSkeleton() {
  const colors = useThemeColors()
  
  return (
    <View style={[styles.statsCard, { backgroundColor: colors.bg.surface }]}>
      <View style={styles.statsHeader}>
        <Skeleton width="60%" height={14} />
        <Skeleton width={24} height={24} borderRadius={12} />
      </View>
      <Skeleton width="50%" height={32} style={{ marginTop: SPACING[2] }} />
    </View>
  )
}

const styles = StyleSheet.create({
  skeleton: {
    overflow: 'hidden',
  },
  shimmer: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: DARK.OVERLAY_2,
    width: 100,
  },
  card: {
    borderRadius: RADIUS.LG,
    overflow: 'hidden',
    marginBottom: SPACING[4],
  },
  cardContent: {
    padding: SPACING[4],
    gap: SPACING[2],
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: SPACING[2],
  },
  trainerCard: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: SPACING[4],
    borderRadius: RADIUS.LG,
    marginBottom: SPACING[3],
  },
  trainerInfo: {
    marginLeft: SPACING[4],
    flex: 1,
    gap: SPACING[2],
  },
  collectionCard: {
    alignItems: 'center',
    padding: SPACING[4],
  },
  statsCard: {
    padding: SPACING[4],
    borderRadius: RADIUS.LG,
    minWidth: 140,
  },
  statsHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
})