import { ThemedView } from '@/components/ThemedView';
import { useThemeColor } from '@/hooks/useThemeColor';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { router } from 'expo-router';
import React, { useEffect, useState } from 'react';
import { ActivityIndicator, Text, View } from 'react-native';

const ONBOARDING_COMPLETED_KEY = '@onboarding_completed';

export default function SplashScreen() {
  const backgroundColor = useThemeColor({}, 'background');
  const primaryColor = useThemeColor({}, 'primary');
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    checkOnboardingStatus();
  }, []);

  const checkOnboardingStatus = async () => {
    try {
      const onboardingCompleted = await AsyncStorage.getItem(ONBOARDING_COMPLETED_KEY);

      // 添加一个短暂的延迟以显示启动画面
      setTimeout(() => {
        if (onboardingCompleted === 'true') {
          router.replace('/(tabs)');
        } else {
          router.replace('/onboarding');
        }
        setIsLoading(false);
      }, 1000);
    } catch (error) {
      console.error('检查引导状态失败:', error);
      // 如果出现错误，默认显示引导页面
      setTimeout(() => {
        router.replace('/onboarding');
        setIsLoading(false);
      }, 1000);
    }
  };

  if (!isLoading) {
    return null;
  }

  return (
    <ThemedView style={{
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor
    }}>
      <View style={{
        width: 80,
        height: 80,
        borderRadius: 40,
        backgroundColor: primaryColor,
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: 20,
      }}>
        <Text style={{
          fontSize: 32,
        }}>
          🧘‍♀️
        </Text>
      </View>
      <ActivityIndicator size="large" color={primaryColor} />
    </ThemedView>
  );
}