/**
 * BurnBar — Real-time calorie tracking vs community average
 */

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

import { BRAND, darkColors } from '@/src/shared/theme'
import { RADIUS } from '@/src/shared/constants/borderRadius'
import { TYPOGRAPHY, FONT_FAMILY_SANS_SEMIBOLD } from '@/src/shared/constants/typography'
import { SPACING } from '@/src/shared/constants/spacing'

interface BurnBarProps {
  currentCalories: number
  avgCalories: number
}

export function BurnBar({ currentCalories, avgCalories }: BurnBarProps) {
  const { t } = useTranslation()
  const colors = darkColors
  const percentage = Math.min((currentCalories / avgCalories) * 100, 100)

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={[styles.label, { color: colors.text.tertiary }]}>
          {t('screens:player.burnBar')}
        </Text>
        <Text style={styles.value}>
          {t('units.calUnit', { count: currentCalories })}
        </Text>
      </View>
      <View style={[styles.track, { backgroundColor: colors.border.dim }]}>
        <View style={[styles.fill, { width: `${percentage}%` }]} />
        <View style={[styles.avg, { left: '50%', backgroundColor: colors.text.tertiary }]} />
      </View>
      <Text style={[styles.avgLabel, { color: colors.text.tertiary }]}>
        {t('screens:player.communityAvg', { calories: avgCalories })}
      </Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {},
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: SPACING[2],
  },
  label: {
    ...TYPOGRAPHY.CAPTION_1,
  },
  value: {
    ...TYPOGRAPHY.CALLOUT,
    color: BRAND.PRIMARY,
    fontFamily: FONT_FAMILY_SANS_SEMIBOLD,
    fontVariant: ['tabular-nums'],
  },
  track: {
    height: 6,
    borderRadius: RADIUS.XS,
    overflow: 'hidden',
  },
  fill: {
    height: '100%',
    backgroundColor: BRAND.PRIMARY,
    borderRadius: RADIUS.XS,
  },
  avg: {
    position: 'absolute',
    top: -2,
    width: 2,
    height: 10,
  },
  avgLabel: {
    ...TYPOGRAPHY.CAPTION_2,
    marginTop: SPACING[1],
    textAlign: 'right',
  },
})
