/**
 * WarmupOverlay — Displays warmup/cooldown movement with countdown
 */

import React from 'react'
import { View, Text, StyleSheet } from 'react-native'
import { PHASE, GREEN, TEXT } from '@/src/shared/constants/colors'
import { FONT_FAMILY } from '@/src/shared/constants/typography'
import { SPACING } from '@/src/shared/constants/spacing'

interface WarmupOverlayProps {
  movementName: string
  movementIndex: number
  totalMovements: number
  timeRemaining: number
  isCooldown?: boolean
}

export function WarmupOverlay({
  movementName,
  movementIndex,
  totalMovements,
  timeRemaining,
  isCooldown = false,
}: WarmupOverlayProps) {
  const label = isCooldown ? 'RETOUR AU CALME' : 'ÉCHAUFFEMENT'
  const color = isCooldown ? GREEN[500] : PHASE.PREP

  return (
    <View style={styles.container}>
      <Text style={[styles.phaseLabel, { color }]}>{label}</Text>
      <Text style={styles.progress}>{movementIndex + 1}/{totalMovements}</Text>
      <Text style={styles.movement}>{movementName}</Text>
      <Text style={styles.countdown}>{timeRemaining}s</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: SPACING[10],
    paddingVertical: SPACING[5],
  },
  phaseLabel: {
    fontFamily: FONT_FAMILY.SANS_BOLD,
    fontSize: 14,
    letterSpacing: 2,
    marginBottom: SPACING[2],
  },
  progress: {
    fontFamily: FONT_FAMILY.SANS,
    fontSize: 13,
    color: TEXT.TERTIARY,
    marginBottom: SPACING[4],
  },
  movement: {
    fontFamily: FONT_FAMILY.SANS_SEMIBOLD,
    fontSize: 22,
    color: TEXT.PRIMARY,
    textAlign: 'center',
    marginBottom: SPACING[3],
  },
  countdown: {
    fontFamily: FONT_FAMILY.SANS_BOLD,
    fontSize: 48,
    color: TEXT.SECONDARY,
  },
})
