/**
 * 欢迎页 WelcomeScreen
 * 胡萝卜BBS - 用户欢迎页
 *
 * 亮色模式：白色主色调 + 胡萝卜橙辅色
 * 暗色模式：深色背景 + 胡萝卜橙辅色
 */

import React, { useEffect, useRef, useMemo } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Animated,
  StatusBar,
  Dimensions,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { useAppColors, useResolvedColorScheme, type AppColors } from '../../theme';
import * as hrefs from '../../navigation/hrefs';

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

export const WelcomeScreen: React.FC = () => {
  const router = useRouter();
  const colors = useAppColors();
  const resolved = useResolvedColorScheme();
  const styles = useMemo(() => createWelcomeStyles(colors), [colors]);
  const isDark = resolved === 'dark';
  
  // 动画值
  const fadeAnim = useRef(new Animated.Value(0)).current;
  const slideUpAnim = useRef(new Animated.Value(50)).current;
  const scaleAnim = useRef(new Animated.Value(0.9)).current;

  useEffect(() => {
    // 启动入场动画
    Animated.parallel([
      Animated.timing(fadeAnim, {
        toValue: 1,
        duration: 800,
        useNativeDriver: true,
      }),
      Animated.timing(slideUpAnim, {
        toValue: 0,
        duration: 800,
        useNativeDriver: true,
      }),
      Animated.timing(scaleAnim, {
        toValue: 1,
        duration: 800,
        useNativeDriver: true,
      }),
    ]).start();
  }, []);

  const handleSignIn = () => {
    router.push(hrefs.hrefAuthLogin());
  };

  const handleCreateAccount = () => {
    router.push(hrefs.hrefAuthRegister());
  };

  return (
    <View style={styles.container}>
      <StatusBar barStyle={isDark ? 'light-content' : 'dark-content'} />
      
      {/* 装饰性背景元素 */}
      <View style={styles.decorCircle1} />
      <View style={styles.decorCircle2} />
      <View style={styles.decorCircle3} />
      
      <SafeAreaView style={styles.safeArea}>
        <Animated.View 
          style={[
            styles.content,
            {
              opacity: fadeAnim,
              transform: [
                { translateY: slideUpAnim },
                { scale: scaleAnim },
              ],
            },
          ]}
        >
            {/* 品牌区域 */}
            <View style={styles.brandSection}>
              <Text style={styles.welcomeEn}>Welcome To</Text>
              <Text style={styles.brandName}>萝卜社区</Text>
              <View style={styles.brandUnderline} />
              
              <Text style={styles.subtitle}>
                发现有趣的内容{'\n'}
                结识志同道合的朋友
              </Text>
            </View>
          
          {/* 按钮区域 */}
          <View style={styles.buttonSection}>
            <TouchableOpacity
              style={styles.signInButton}
              onPress={handleSignIn}
              activeOpacity={0.8}
            >
              <Text style={styles.signInButtonText}>登录</Text>
            </TouchableOpacity>
            
            <TouchableOpacity
              style={styles.createAccountButton}
              onPress={handleCreateAccount}
              activeOpacity={0.8}
            >
              <Text style={styles.createAccountButtonText}>创建账号</Text>
            </TouchableOpacity>
          </View>
        </Animated.View>
      </SafeAreaView>
    </View>
  );
};

function createWelcomeStyles(colors: AppColors) {
  return StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: colors.background.default,
    },
    safeArea: {
      flex: 1,
    },
    content: {
      flex: 1,
      justifyContent: 'space-between',
      paddingHorizontal: 32,
      paddingTop: 60,
      paddingBottom: 40,
    },
    
    // 装饰性背景元素 - 使用胡萝卜橙的淡色
    decorCircle1: {
      position: 'absolute',
      top: -100,
      right: -100,
      width: 400,
      height: 400,
      borderRadius: 200,
      backgroundColor: colors.primary.main + '08', // 非常淡的胡萝卜橙
    },
    decorCircle2: {
      position: 'absolute',
      top: height * 0.3,
      left: -80,
      width: 200,
      height: 200,
      borderRadius: 100,
      backgroundColor: colors.primary.main + '10',
    },
    decorCircle3: {
      position: 'absolute',
      bottom: -50,
      right: -50,
      width: 250,
      height: 250,
      borderRadius: 125,
      backgroundColor: colors.primary.main + '08',
    },
    
    // 品牌区域
    brandSection: {
      alignItems: 'center',
    },
    badge: {
      backgroundColor: colors.primary.main + '15',
      paddingHorizontal: 20,
      paddingVertical: 8,
      borderRadius: 20,
      marginBottom: 24,
    },
    badgeText: {
      color: colors.primary.main,
      fontSize: 14,
      fontWeight: '600',
      letterSpacing: 1,
    },
    welcomeEn: {
      fontSize: 24,
      fontWeight: '400',
      color: colors.text.secondary,
      marginBottom: 4,
      letterSpacing: 1,
    },
    brandName: {
      fontSize: 42,
      fontWeight: '800',
      color: colors.text.primary,
      letterSpacing: 4,
      marginBottom: 8,
    },
    brandUnderline: {
      width: 80,
      height: 4,
      backgroundColor: colors.primary.main,
      borderRadius: 2,
      marginBottom: 24,
    },
    title: {
      fontSize: 48,
      fontWeight: '800',
      color: colors.text.primary,
      marginBottom: 16,
      letterSpacing: 2,
    },
    subtitle: {
      fontSize: 16,
      color: colors.text.secondary,
      textAlign: 'center',
      lineHeight: 24,
      letterSpacing: 0.5,
    },
    
    // 按钮区域
    buttonSection: {
      width: '100%',
      gap: 16,
    },
    signInButton: {
      backgroundColor: colors.primary.main,
      borderRadius: 16,
      height: 56,
      alignItems: 'center',
      justifyContent: 'center',
      shadowColor: colors.primary.main,
      shadowOffset: { width: 0, height: 4 },
      shadowOpacity: 0.3,
      shadowRadius: 8,
      elevation: 5,
    },
    signInButtonText: {
      color: colors.primary.contrast,
      fontSize: 16,
      fontWeight: '700',
      letterSpacing: 1,
    },
    createAccountButton: {
      backgroundColor: 'transparent',
      borderRadius: 16,
      height: 56,
      alignItems: 'center',
      justifyContent: 'center',
      borderWidth: 2,
      borderColor: colors.primary.main,
    },
    createAccountButtonText: {
      color: colors.primary.main,
      fontSize: 16,
      fontWeight: '700',
      letterSpacing: 1,
    },
  });
}

export default WelcomeScreen;
