import { useRouter } from 'expo-router';
import {
  View,
  Text,
  Image,
  StyleSheet,
  TouchableOpacity,
  Dimensions,
} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useEffect } from 'react';

const { width, height } = Dimensions.get('window');

export default function IntroScreen() {
  const router = useRouter();

  useEffect(() => {
    const checkGuest = async () => {
      const isGuest = await AsyncStorage.getItem('isGuest');
      if (isGuest === 'true') {
        router.replace('/main');
      }
    };
    checkGuest();
  }, []);

  const handleGuestStart = async () => {
    await AsyncStorage.setItem('isGuest', 'true');
    router.replace('/main');
  };

  const handleLoginPress = () => {
    // 추후 개발: 로그인 페이지로 이동
    alert('로그인 기능은 추후 지원 예정입니다.');
  };

  return (
    <View style={styles.container}>
      <Image
        source={require('../assets/background.png')}
        style={styles.backgroundImage}
        resizeMode="cover"
      />
      <View style={styles.overlay}>
        <TouchableOpacity style={styles.button} onPress={handleGuestStart}>
          <Text style={styles.buttonText}>게스트로 시작하기</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.buttonOutline} onPress={handleLoginPress}>
          <Text style={styles.buttonOutlineText}>Gmail로 로그인</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  backgroundImage: {
    width,
    height,
    position: 'absolute',
  },
  overlay: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 32,
    backgroundColor: 'rgba(0, 0, 0, 0.4)',
  },
  button: {
    backgroundColor: '#FF6B00',
    paddingVertical: 14,
    paddingHorizontal: 36,
    borderRadius: 12,
    marginBottom: 16,
    width: '100%',
    alignItems: 'center',
  },
  buttonText: {
    color: '#FFF',
    fontSize: 16,
    fontWeight: 'bold',
  },
  buttonOutline: {
    borderWidth: 2,
    borderColor: '#FFF',
    paddingVertical: 14,
    paddingHorizontal: 36,
    borderRadius: 12,
    width: '100%',
    alignItems: 'center',
  },
  buttonOutlineText: {
    color: '#FFF',
    fontSize: 16,
    fontWeight: 'bold',
  },
});