import { useRouter } from 'expo-router'
import { useTimerEngine } from '@/src/features/timer'
import { TimerDisplay } from '@/src/features/timer/components/TimerDisplay'

export default function TimerScreen() {
  const router = useRouter()
  const timer = useTimerEngine()

  function handleStart() {
    timer.start()
  }

  function handleStop() {
    timer.stop()
    router.back()
  }

  return (
    <TimerDisplay
      state={{
        phase: timer.phase,
        secondsLeft: timer.secondsLeft,
        currentRound: timer.currentRound,
        totalRounds: timer.totalRounds,
        currentCycle: timer.currentCycle,
        totalCycles: timer.totalCycles,
        isRunning: timer.isRunning,
        isPaused: timer.isPaused,
        totalElapsedSeconds: timer.totalElapsedSeconds,
      }}
      config={timer.config}
      exerciseName="Burpees"
      nextExerciseName="Squats"
      onStart={handleStart}
      onPause={timer.pause}
      onResume={timer.resume}
      onStop={handleStop}
      onSkip={timer.skip}
    />
  )
}