/**
 * 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, FONT_FAMILY_SANS_BOLD } 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'

interface PhaseIndicatorProps {
  phase: TimerPhase
}

export function PhaseIndicator({ phase }: PhaseIndicatorProps) {
  const { t } = useTranslation()
  const phaseColor = PHASE_COLORS[phase].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'),
  }

  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,
    fontFamily: FONT_FAMILY_SANS_BOLD,
    letterSpacing: 1,
  },
})
