import type { ReactElement } from 'react';
import { useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { OnboardingScreen } from './src/screens/OnboardingScreen';
import { PhotoCaptureScreen } from './src/screens/PhotoCaptureScreen';
import { LiveFittingScreen } from './src/screens/LiveFittingScreen';
import { CaptureResultScreen } from './src/screens/CaptureResultScreen';
import { useAppStore } from './src/store/useAppStore';
import { detectPose } from './src/features/pose';

type Screen = 'onboarding' | 'photo' | 'live' | 'result';

export default function App(): ReactElement {
  const [screen, setScreen] = useState<Screen>('onboarding');
  const [capturedUri, setCapturedUri] = useState<string>('');
  const setPhoto = useAppStore((s) => s.setPhoto);
  const setPose = useAppStore((s) => s.setPose);

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <StatusBar style="auto" />
      {screen === 'onboarding' && (
        <OnboardingScreen onDone={() => setScreen('photo')} />
      )}
      {screen === 'photo' && (
        <PhotoCaptureScreen
          onPhotoReady={async (uri) => {
            setPhoto(uri);
            try {
              const pose = await detectPose(uri);
              setPose(pose);
            } catch {
              // Mac에서 PoseModule 빌드 전까지는 pose 없이 진행 (LiveFitting에서 mask 생성 실패)
            }
            setScreen('live');
          }}
        />
      )}
      {screen === 'live' && (
        <LiveFittingScreen
          onCapture={(uri) => {
            setCapturedUri(uri);
            setScreen('result');
          }}
        />
      )}
      {screen === 'result' && (
        <CaptureResultScreen
          imageUri={capturedUri}
          onRetry={() => setScreen('live')}
        />
      )}
    </GestureHandlerRootView>
  );
}