/**
 * ExerciseDisplay — Shows current exercise and upcoming next exercise
 */

import React, { useRef, useEffect } from 'react'
import { View, Text, StyleSheet, Animated } from 'react-native'
import { useTranslation } from 'react-i18next'

import { BRAND, darkColors } from '@/src/shared/theme'
import { TYPOGRAPHY } from '@/src/shared/constants/typography'
import { SPACING } from '@/src/shared/constants/spacing'
import { SPRING } from '@/src/shared/constants/animations'

interface ExerciseDisplayProps {
  exercise: string
  nextExercise?: string
}

export function ExerciseDisplay({ exercise, nextExercise }: ExerciseDisplayProps) {
  const { t } = useTranslation()
  const colors = darkColors
  const fadeAnim = useRef(new Animated.Value(0)).current

  // Animate in when exercise changes
  useEffect(() => {
    fadeAnim.setValue(0)
    Animated.spring(fadeAnim, {
      toValue: 1,
      ...SPRING.SNAPPY,
      useNativeDriver: true,
    }).start()
  }, [exercise])

  return (
    <Animated.View
      style={[
        styles.container,
        {
          opacity: fadeAnim,
          transform: [
            {
              translateY: fadeAnim.interpolate({
                inputRange: [0, 1],
                outputRange: [8, 0],
              }),
            },
          ],
        },
      ]}
    >
      <Text style={[styles.label, { color: colors.text.tertiary }]}>
        {t('screens:player.current')}
      </Text>
      <Text selectable style={[styles.exercise, { color: colors.text.primary }]}>
        {exercise}
      </Text>
      {nextExercise && (
        <View style={styles.nextContainer}>
          <Text style={[styles.nextLabel, { color: colors.text.tertiary }]}>
            {t('screens:player.next')}
          </Text>
          <Text style={[styles.nextExercise, { color: BRAND.PRIMARY }]}>
            {nextExercise}
          </Text>
        </View>
      )}
    </Animated.View>
  )
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    marginTop: SPACING[6],
    paddingHorizontal: SPACING[6],
  },
  label: {
    ...TYPOGRAPHY.CAPTION_1,
    textTransform: 'uppercase',
    letterSpacing: 1,
  },
  exercise: {
    ...TYPOGRAPHY.TITLE_1,
    textAlign: 'center',
    marginTop: SPACING[1],
  },
  nextContainer: {
    flexDirection: 'row',
    marginTop: SPACING[2],
    gap: SPACING[1],
  },
  nextLabel: {
    ...TYPOGRAPHY.BODY,
  },
  nextExercise: {
    ...TYPOGRAPHY.BODY,
  },
})
