/**
 * CoachEncouragement — Motivational text overlay during REST phase
 * Fades in with a subtle slide animation
 */

import React, { useRef, useEffect, useState } from 'react'
import { Text, StyleSheet, Animated } from 'react-native'

import { 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'
import { getCoachMessage } from '../constants'

type TimerPhase = 'PREP' | 'WORK' | 'REST' | 'COMPLETE'

interface CoachEncouragementProps {
  phase: TimerPhase
  currentRound: number
  totalRounds: number
}

export function CoachEncouragement({
  phase,
  currentRound,
  totalRounds,
}: CoachEncouragementProps) {
  const colors = darkColors
  const fadeAnim = useRef(new Animated.Value(0)).current
  const [message, setMessage] = useState('')

  useEffect(() => {
    if (phase === 'REST') {
      const msg = getCoachMessage(currentRound, totalRounds)
      setMessage(msg)
      fadeAnim.setValue(0)
      Animated.spring(fadeAnim, {
        toValue: 1,
        ...SPRING.SNAPPY,
        useNativeDriver: true,
      }).start()
    } else if (phase === 'PREP') {
      setMessage('Get ready!')
      fadeAnim.setValue(0)
      Animated.spring(fadeAnim, {
        toValue: 1,
        ...SPRING.SNAPPY,
        useNativeDriver: true,
      }).start()
    } else {
      Animated.timing(fadeAnim, {
        toValue: 0,
        duration: 200,
        useNativeDriver: true,
      }).start()
    }
  }, [phase, currentRound])

  if (phase !== 'REST' && phase !== 'PREP') return null

  return (
    <Animated.View
      style={[
        styles.container,
        {
          opacity: fadeAnim,
          transform: [
            {
              translateY: fadeAnim.interpolate({
                inputRange: [0, 1],
                outputRange: [12, 0],
              }),
            },
          ],
        },
      ]}
    >
      <Text style={[styles.text, { color: colors.text.secondary }]}>
        &ldquo;{message}&rdquo;
      </Text>
    </Animated.View>
  )
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    paddingHorizontal: SPACING[8],
    marginTop: SPACING[3],
  },
  text: {
    ...TYPOGRAPHY.BODY,
    fontStyle: 'italic',
    textAlign: 'center',
    lineHeight: 22,
  },
})
