import { useRouter, Redirect } from 'expo-router'
import { Screen1Problem } from '@/src/features/onboarding/screens/Screen1Problem'
import { Screen2Empathy } from '@/src/features/onboarding/screens/Screen2Empathy'
import { Screen3Solution } from '@/src/features/onboarding/screens/Screen3Solution'
import { Screen4WowMoment } from '@/src/features/onboarding/screens/Screen4WowMoment'
import { Screen5Personalization } from '@/src/features/onboarding/screens/Screen5Personalization'
import { Screen6Paywall } from '@/src/features/onboarding/screens/Screen6Paywall'
import { useOnboarding } from '@/src/features/onboarding/hooks/useOnboarding'

export default function OnboardingRouter() {
  const router = useRouter()
  const currentStep = useOnboarding((state) => state.currentStep)
  const isOnboardingComplete = useOnboarding((state) => state.isOnboardingComplete)
  const nextStep = useOnboarding((state) => state.nextStep)
  const completeOnboarding = useOnboarding((state) => state.completeOnboarding)

  const handleNext = () => {
    nextStep()
  }

  const handleComplete = () => {
    completeOnboarding()
    router.replace('/(tabs)')
  }

  // Redirect to tabs if onboarding is already complete
  if (isOnboardingComplete) {
    return <Redirect href="/(tabs)" />
  }

  // Render the correct screen based on current step
  switch (currentStep) {
    case 0:
      return <Screen1Problem onNext={handleNext} />
    case 1:
      return <Screen2Empathy onNext={handleNext} />
    case 2:
      return <Screen3Solution onNext={handleNext} />
    case 3:
      return <Screen4WowMoment />
    case 4:
      return <Screen5Personalization onNext={handleNext} />
    case 5:
      return <Screen6Paywall onComplete={handleComplete} />
    default:
      // Fallback to first screen if step is out of bounds
      return <Screen1Problem onNext={handleNext} />
  }
}