/**
 * StatsOverlay — Real-time workout stats (calories, BPM, effort)
 * Inspired by Apple Fitness+ stats row
 */

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

import { Icon } from '@/src/shared/components/Icon'
import { TYPOGRAPHY, FONT_FAMILY_SANS_BOLD } from '@/src/shared/constants/typography'
import { SPACING } from '@/src/shared/constants/spacing'
import { RADIUS } from '@/src/shared/constants/borderRadius'
import { SPRING } from '@/src/shared/constants/animations'
import { GREEN, NAVY, BORDER_COLORS, TEXT, BRAND_DANGER, AMBER } from '@/src/shared/constants/colors'

interface StatsOverlayProps {
  calories: number
  heartRate: number | null
  elapsedRounds: number
  totalRounds: number
}

function StatItem({
  value,
  label,
  icon,
  iconColor,
  delay = 0,
}: {
  value: string
  label: string
  icon: string
  iconColor: string
  delay?: number
}) {
  const scaleAnim = useRef(new Animated.Value(0)).current

  useEffect(() => {
    Animated.sequence([
      Animated.delay(delay),
      Animated.spring(scaleAnim, {
        toValue: 1,
        ...SPRING.BOUNCY,
        useNativeDriver: true,
      }),
    ]).start()
  }, [delay])

  return (
    <Animated.View
      style={[
        styles.stat,
        { transform: [{ scale: scaleAnim }] },
      ]}
    >
      <Icon name={icon as any} size={16} tintColor={iconColor} />
      <Text
        selectable
        style={[styles.statValue, { color: TEXT.PRIMARY }]}
      >
        {value}
      </Text>
      <Text style={[styles.statLabel, { color: TEXT.TERTIARY }]}>{label}</Text>
    </Animated.View>
  )
}

export function StatsOverlay({
  calories,
  heartRate,
  elapsedRounds,
  totalRounds,
}: StatsOverlayProps) {
  const { t } = useTranslation()
  const effort = totalRounds > 0
    ? Math.round((elapsedRounds / totalRounds) * 100)
    : 0

  return (
    <View style={styles.container}>
      <StatItem
        value={String(calories)}
        label={t('screens:player.calories')}
        icon="flame.fill"
        iconColor={GREEN[500]}
        delay={0}
      />
      <View style={[styles.divider, { backgroundColor: BORDER_COLORS.DIM }]} />
      <StatItem
        value={heartRate ? String(heartRate) : '--'}
        label="bpm"
        icon="heart.fill"
        iconColor={BRAND_DANGER}
        delay={100}
      />
      <View style={[styles.divider, { backgroundColor: BORDER_COLORS.DIM }]} />
      <StatItem
        value={`${effort}%`}
        label={t('screens:player.effort', { defaultValue: 'effort' })}
        icon="bolt.fill"
        iconColor={AMBER[500]}
        delay={200}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-evenly',
    borderRadius: RADIUS.LG,
    borderCurve: 'continuous',
    overflow: 'hidden',
    borderWidth: 1,
    borderColor: BORDER_COLORS.DIM,
    backgroundColor: NAVY[800],
    paddingVertical: SPACING[3],
    paddingHorizontal: SPACING[2],
  },
  stat: {
    alignItems: 'center',
    flex: 1,
    gap: 2,
  },
  statValue: {
    ...TYPOGRAPHY.TITLE_2,
    fontVariant: ['tabular-nums'],
    fontFamily: FONT_FAMILY_SANS_BOLD,
  },
  statLabel: {
    ...TYPOGRAPHY.CAPTION_2,
    textTransform: 'uppercase',
    letterSpacing: 0.5,
  },
  divider: {
    width: 1,
    height: 32,
  },
})
