/**
 * PhaseIndicator — Colored badge showing current timer phase
 */

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

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

type TimerPhase = 'PREP' | 'WORK' | 'REST' | 'COMPLETE' | 'WARMUP' | 'COOLDOWN' | 'TRANSITION'

interface PhaseIndicatorProps {
  phase: TimerPhase
}

export function PhaseIndicator({ phase }: PhaseIndicatorProps) {
  const { t } = useTranslation()
  // WARMUP/COOLDOWN/TRANSITION fall back to PREP colors if not in PHASE_COLORS map
  const phaseColor = (PHASE_COLORS as Record<string, { fill: string }>)[phase]?.fill ?? PHASE_COLORS.PREP.fill
  const phaseLabels: Record<TimerPhase, string> = {
    PREP: t('screens:player.phases.prep'),
    WORK: t('screens:player.phases.work'),
    REST: t('screens:player.phases.rest'),
    COMPLETE: t('screens:player.phases.complete'),
    WARMUP: t('screens:player.phases.warmup'),
    COOLDOWN: t('screens:player.phases.stretch'),
    TRANSITION: t('screens:player.phases.trans'),
  }

  return (
    <View style={[styles.indicator, { backgroundColor: `${phaseColor}20` }]}>
      <Text style={[styles.text, { color: phaseColor }]}>{phaseLabels[phase]}</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  indicator: {
    paddingHorizontal: SPACING[4],
    paddingVertical: SPACING[1],
    borderRadius: RADIUS.FULL,
    marginBottom: SPACING[2],
    borderCurve: 'continuous',
  },
  text: {
    ...TYPOGRAPHY.CALLOUT,
    fontWeight: '700',
    letterSpacing: 1,
  },
})
