water-sys/app/screens/LoginScreen.tsx

import React, { useEffect, useState, useRef } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  StatusBar,
  Platform,
  BackHandler,
  TextInput,
  Animated,
  Easing,
  FlatList,
  Keyboard,
  Modal,
  InteractionManager,
} from 'react-native';
import { useTranslation } from 'react-i18next';
import { useNavigation } from '@react-navigation/native';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { RootStackParamList } from '../navigation/types';
import { Country, countries } from '../constants/countries';
import { useAuth } from '../contexts/AuthContext';

// 常见邮箱后缀列表
const EMAIL_DOMAINS = [
  'gmail.com',
  'yahoo.com',
  'hotmail.com',
  'outlook.com',
  'icloud.com',
  'mail.com',
  'protonmail.com',
  'qq.com',
  '163.com',
  '126.com',
];

type LoginScreenProps = {
  onClose?: () => void;
  isModal?: boolean;
};

export const LoginScreen = ({ onClose, isModal }: LoginScreenProps) => {
  const { t } = useTranslation();
  const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
  const { login } = useAuth();
  
  // 邮箱登录状态
  const [showEmailLogin, setShowEmailLogin] = useState(false);
  const [email, setEmail] = useState('');
  const [emailPassword, setEmailPassword] = useState('');
  const [emailPasswordError, setEmailPasswordError] = useState(false);
  const [showSuggestions, setShowSuggestions] = useState(false);
  const [suggestions, setSuggestions] = useState<string[]>([]);
  
  // 手机号登录状态
  const [showPhoneLogin, setShowPhoneLogin] = useState(false);
  const [phoneNumber, setPhoneNumber] = useState('');
  const [password, setPassword] = useState('');
  const [passwordError, setPasswordError] = useState(false);
  const [showCountryModal, setShowCountryModal] = useState(false);
  const [selectedCountry, setSelectedCountry] = useState<Country>({
    name: 'Republic of Congo',
    code: 'CG',
    flag: '🇨🇬',
    userCount: 300000,
    phoneCode: '+242'
  });
  
  // 动画值
  const emailSlideAnim = useRef(new Animated.Value(400)).current;
  const phoneSlideAnim = useRef(new Animated.Value(400)).current;
  const [emailLoginMounted, setEmailLoginMounted] = useState(false);
  const [phoneLoginMounted, setPhoneLoginMounted] = useState(false);

  // 处理邮箱输入变化，生成邮箱建议
  const handleEmailChange = (text: string) => {
    setEmail(text);
    
    // 检查是否包含@符号
    if (text.includes('@')) {
      const [username, domain] = text.split('@');
      
      if (domain) {
        // 如果已经输入了部分域名，过滤匹配的域名
        const filteredDomains = EMAIL_DOMAINS.filter(item => 
          item.toLowerCase().startsWith(domain.toLowerCase())
        );
        
        // 生成完整的邮箱建议列表
        const emailSuggestions = filteredDomains.map(d => `${username}@${d}`);
        setSuggestions(emailSuggestions);
        setShowSuggestions(emailSuggestions.length > 0);
      } else {
        // 如果只输入了@，显示所有域名建议
        const emailSuggestions = EMAIL_DOMAINS.map(d => `${username}@${d}`);
        setSuggestions(emailSuggestions);
        setShowSuggestions(true);
      }
    } else if (text.length > 0) {
      // 没有@符号但有输入内容，显示常见邮箱后缀建议
      const emailSuggestions = EMAIL_DOMAINS.map(d => `${text}@${d}`);
      setSuggestions(emailSuggestions);
      setShowSuggestions(true);
    } else {
      // 输入为空，不显示建议
      setShowSuggestions(false);
    }
  };

  // 选择一个邮箱建议
  const handleSelectSuggestion = (suggestion: string) => {
    setEmail(suggestion);
    setShowSuggestions(false);
  };

  // 验证邮箱格式
  const isValidEmail = (email: string): boolean => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  };

  // 渲染单个邮箱建议项
  const renderSuggestionItem = ({ item }: { item: string }) => (
    <TouchableOpacity 
      style={styles.suggestionItem}
      onPress={() => handleSelectSuggestion(item)}
    >
      <Text style={styles.suggestionText}>{item}</Text>
    </TouchableOpacity>
  );

  // 选择国家
  const handleCountrySelect = (country: Country) => {
    setSelectedCountry(country);
    setShowCountryModal(false);
  };

  // 渲染国家列表项 - 添加性能优化
  const renderCountryItem = React.useCallback(({ item }: { item: Country }) => (
    <TouchableOpacity 
      style={styles.countryItem}
      onPress={() => handleCountrySelect(item)}
      activeOpacity={0.7}
    >
      <Text style={styles.countryItemFlag}>{item.flag}</Text>
      <View style={styles.countryItemContent}>
        <Text style={styles.countryItemName}>{item.name}</Text>
        <Text style={styles.countryItemCode}>{item.phoneCode}</Text>
      </View>
    </TouchableOpacity>
  ), []);

  // 添加Android返回按钮处理
  useEffect(() => {
    const backAction = () => {
      if (showEmailLogin) {
        closeEmailLogin();
        return true;
      }
      if (showPhoneLogin) {
        closePhoneLogin();
        return true;
      }
      if (showCountryModal) {
        setShowCountryModal(false);
        return true;
      }
      handleClose();
      return true;
    };

    const backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      backAction
    );

    return () => backHandler.remove();
  }, [showEmailLogin, showPhoneLogin, showCountryModal]);

  // 初始化动画配置
  useEffect(() => {
    // React Native Animated API不支持直接设置useNativeDriver
    // 这些配置会在动画函数中使用
  }, []);

  // 打开邮箱登录面板
  const openEmailLogin = () => {
    emailSlideAnim.setValue(400);
    setEmailLoginMounted(true);
    
    // 等待组件挂载后启动动画
    requestAnimationFrame(() => {
      setShowEmailLogin(true);
      Animated.spring(emailSlideAnim, {
        toValue: 0,
        useNativeDriver: true,
        friction: 8,
        tension: 40,
        restDisplacementThreshold: 0.01,
        restSpeedThreshold: 0.01,
      }).start();
    });
  };

  // 关闭邮箱登录面板
  const closeEmailLogin = () => {
    Keyboard.dismiss();
    
    // 使用更简单的配置减少计算复杂度
    Animated.timing(emailSlideAnim, {
      toValue: 400,
      duration: 200,
      useNativeDriver: true,
      easing: Easing.cubic,
    }).start();
    
    // 先隐藏建议列表，减少布局计算
    setShowSuggestions(false);
    
    // 使用InteractionManager确保动画完成后再执行耗时操作
    InteractionManager.runAfterInteractions(() => {
      setShowEmailLogin(false);
      setEmail('');
      setEmailPassword('');
      setEmailPasswordError(false);
      
      // 延迟卸载组件
      setTimeout(() => {
        setEmailLoginMounted(false);
      }, 50);
    });
  };

  // 打开手机号登录面板
  const openPhoneLogin = () => {
    phoneSlideAnim.setValue(400);
    setPhoneLoginMounted(true);
    
    // 等待组件挂载后启动动画
    requestAnimationFrame(() => {
      setShowPhoneLogin(true);
      Animated.spring(phoneSlideAnim, {
        toValue: 0,
        useNativeDriver: true,
        friction: 8,
        tension: 40,
        restDisplacementThreshold: 0.01,
        restSpeedThreshold: 0.01,
      }).start();
    });
  };

  // 关闭手机号登录面板
  const closePhoneLogin = () => {
    Keyboard.dismiss();
    
    // 使用更简单的配置减少计算复杂度
    Animated.timing(phoneSlideAnim, {
      toValue: 400,
      duration: 200,
      useNativeDriver: true,
      easing: Easing.cubic,
    }).start();
    
    // 使用InteractionManager确保动画完成后再执行耗时操作
    InteractionManager.runAfterInteractions(() => {
      setShowPhoneLogin(false);
      setPhoneNumber('');
      
      // 延迟卸载组件
      setTimeout(() => {
        setPhoneLoginMounted(false);
      }, 50);
    });
  };

  // 修改关闭按钮处理函数
  const handleClose = () => {
    if (isModal && onClose) {
      onClose();
    } else {
      navigation.goBack();
    }
  };

  const handleGoogleLogin = () => {
    // 处理Google登录
  };

  const handleFacebookLogin = () => {
    // 处理Facebook登录
  };

  const handleAppleLogin = () => {
    // 处理Apple登录
  };

  const handleInstagramLogin = () => {
    // 处理Instagram登录
  };

  const handleEmailLogin = () => {
    // 处理邮箱登录 - 显示邮箱登录面板
    openEmailLogin();
  };

  const handleEmailContinue = async () => {
    if (emailPassword === '123') {
      setEmailPasswordError(false);
      await login();
      closeEmailLogin();
      navigation.replace('MainTabs');
    } else {
      setEmailPasswordError(true);
    }
  };

  const handlePhoneLogin = () => {
    // 处理手机号登录 - 显示手机号登录面板
    openPhoneLogin();
  };

  const handlePhoneVerificationSuccess = async () => {
    await login();
    closePhoneLogin();
    navigation.replace('MainTabs');
  };

  const handlePhoneContinue = async () => {
    if (phoneNumber.trim() && password) {
      if (password === '123') {
        await login();
        closePhoneLogin();
        navigation.replace('MainTabs');
      } else {
        setPasswordError(true);
      }
    }
  };

  const handleForgotPassword = () => {
    // 处理忘记密码
  };

  return (
    <View style={styles.container}>
      <StatusBar barStyle="light-content" backgroundColor="#0066FF" />
      
      {/* 顶部蓝色背景区域 */}
      <View style={styles.blueHeader}>
        <Text style={styles.logo}>brainnel</Text>
        <View style={styles.features}>
          <View style={styles.featureItem}>
            <View style={styles.featureIconContainer}>
              <Text style={styles.featureIcon}>💰</Text>
            </View>
            <Text style={styles.featureText}>{t('wholesalePrice')}</Text>
          </View>
          <View style={styles.featureItem}>
            <View style={styles.featureIconContainer}>
              <Text style={styles.featureIcon}>🚚</Text>
            </View>
            <Text style={styles.featureText}>{t('fastShipping')}</Text>
          </View>
        </View>
      </View>

      {/* 登录区域 */}
      <View style={styles.loginContainer}>
        <TouchableOpacity 
          style={styles.closeButton}
          onPress={handleClose}
        >
          <Text style={styles.closeButtonText}>×</Text>
        </TouchableOpacity>
        
        <View style={styles.titleContainer}>
          {/* <Text style={styles.title}>Login For brainnel</Text> */}
          <Text style={styles.subtitle}>{t('loginSubtitle')}</Text>
        </View>

        {/* 登录按钮 */}
        <TouchableOpacity 
          style={styles.loginButton} 
          onPress={handleGoogleLogin}
        >
          <View style={styles.loginButtonIcon}>
            <Text>G</Text>
          </View>
          <Text style={styles.loginButtonText}>{t('continueWithGoogle')}</Text>
        </TouchableOpacity>

        <TouchableOpacity 
          style={styles.loginButton} 
          onPress={handleFacebookLogin}
        >
          <View style={[styles.loginButtonIcon, styles.facebookIcon]}>
            <Text style={{color: '#fff'}}>f</Text>
          </View>
          <Text style={styles.loginButtonText}>{t('continueWithFacebook')}</Text>
        </TouchableOpacity>

        {Platform.OS === 'ios' && (
          <TouchableOpacity 
            style={styles.loginButton} 
            onPress={handleAppleLogin}
          >
            <View style={[styles.loginButtonIcon, styles.appleIconBg]}>
              <Text>🍎</Text>
            </View>
            <Text style={styles.loginButtonText}>{t('continueWithApple')}</Text>
          </TouchableOpacity>
        )}

        <TouchableOpacity 
          style={styles.loginButton} 
          onPress={handleInstagramLogin}
        >
          <View style={[styles.loginButtonIcon, styles.instagramIcon]}>
            <Text>📷</Text>
          </View>
          <Text style={styles.loginButtonText}>{t('continueWithInstagram')}</Text>
        </TouchableOpacity>

        <TouchableOpacity 
          style={styles.loginButton} 
          onPress={handleEmailLogin}
        >
          <View style={styles.loginButtonIcon}>
            <Text>✉️</Text>
          </View>
          <Text style={styles.loginButtonText}>{t('continueWithEmail')}</Text>
        </TouchableOpacity>

        <TouchableOpacity 
          style={styles.loginButton} 
          onPress={handlePhoneLogin}
        >
          <View style={styles.loginButtonIcon}>
            <Text>📱</Text>
          </View>
          <Text style={styles.loginButtonText}>{t('continueWithPhone')}</Text>
        </TouchableOpacity>

        {/* 忘记密码 */}
        <TouchableOpacity 
          style={styles.forgotPassword}
          onPress={handleForgotPassword}
        >
          <Text style={styles.forgotPasswordText}>{t('forgotPassword')}</Text>
        </TouchableOpacity>

        {/* 服务条款 */}
        <View style={styles.termsContainer}>
          <Text style={styles.terms}>
            {t('termsText')} <Text style={styles.link}>{t('termsOfUse')}</Text>
          </Text>
          <Text style={styles.terms}>
            {t('and')} <Text style={styles.link}>{t('privacyPolicy')}</Text>
          </Text>
        </View>
      </View>

      {/* 邮箱登录面板 - 从底部滑出 */}
      {emailLoginMounted && (
        <Animated.View 
          style={[
            styles.emailLoginContainer,
            {
              transform: [{ translateY: emailSlideAnim }],
              opacity: emailSlideAnim.interpolate({
                inputRange: [0, 400],
                outputRange: [1, 0.7]
              })
            }
          ]}
          removeClippedSubviews={true}
          collapsable={false}
        >
          <View style={styles.emailLoginHeader}>
            <TouchableOpacity 
              style={styles.emailLoginCloseButton}
              onPress={closeEmailLogin}
              activeOpacity={0.7}
            >
              <Text style={styles.emailLoginCloseButtonText}>✕</Text>
            </TouchableOpacity>
            <Text style={styles.emailLoginTitle}>{t('logInOrSignUp')}</Text>
          </View>

          <View style={styles.emailLoginContent}>
            <View style={styles.emailInputContainer}>
              <TextInput
                style={styles.emailInput}
                placeholder={t('pleaseEnterEmail')}
                value={email}
                onChangeText={(text) => {
                  handleEmailChange(text);
                  setEmailPasswordError(false);
                }}
                keyboardType="email-address"
                autoCapitalize="none"
                autoCorrect={false}
                autoFocus
                maxLength={50}
              />
              {email.length > 0 && (
                <TouchableOpacity 
                  style={styles.emailClearButton}
                  onPress={() => {
                    setEmail('');
                    setShowSuggestions(false);
                    setEmailPasswordError(false);
                  }}
                  activeOpacity={0.7}
                >
                  <Text style={styles.emailClearButtonText}>✕</Text>
                </TouchableOpacity>
              )}
            </View>

            {/* 邮箱后缀建议列表 */}
            {showSuggestions && (
              <View style={styles.suggestionsContainer}>
                <FlatList
                  data={suggestions.slice(0, 5)} // 限制最多显示5个建议
                  renderItem={renderSuggestionItem}
                  keyExtractor={(item) => item}
                  style={styles.suggestionsList}
                  keyboardShouldPersistTaps="handled"
                  removeClippedSubviews={true}
                  initialNumToRender={5}
                  maxToRenderPerBatch={5}
                  windowSize={5}
                  getItemLayout={(data, index) => (
                    {length: 44, offset: 44 * index, index}
                  )}
                />
              </View>
            )}

            {/* 密码输入框 */}
            <View style={[
              styles.phoneInputContainer, 
              emailPasswordError && styles.passwordErrorContainer
            ]}>
              <TextInput
                style={styles.passwordInput}
                placeholder={t('enterPassword')}
                value={emailPassword}
                onChangeText={(text) => {
                  setEmailPassword(text);
                  setEmailPasswordError(false);
                }}
                secureTextEntry={true}
                autoCapitalize="none"
              />
              {emailPasswordError && (
                <View style={styles.passwordErrorIcon}>
                  <Text style={styles.passwordErrorIconText}>!</Text>
                </View>
              )}
            </View>
            
            {/* 密码错误提示 */}
            {emailPasswordError && (
              <>
                <Text style={styles.passwordErrorText}>
                  {t('passwordIncorrect')}
                </Text>
                
                <TouchableOpacity 
                  style={styles.forgotPasswordLink}
                  onPress={handleForgotPassword}
                  activeOpacity={0.7}
                >
                  <Text style={styles.forgotPasswordLinkText}>
                    {t('forgotPassword')}
                  </Text>
                </TouchableOpacity>
              </>
            )}

            <TouchableOpacity 
              style={[
                styles.emailContinueButton, 
                (!isValidEmail(email) || !emailPassword) && styles.emailDisabledButton
              ]}
              onPress={handleEmailContinue}
              disabled={!isValidEmail(email) || !emailPassword}
              activeOpacity={0.7}
            >
              <Text style={styles.emailContinueButtonText}>{t('continue')}</Text>
            </TouchableOpacity>
          </View>
        </Animated.View>
      )}

      {/* 手机号登录面板 - 从底部滑出 */}
      {phoneLoginMounted && (
        <Animated.View 
          style={[
            styles.phoneLoginContainer,
            {
              transform: [{ translateY: phoneSlideAnim }],
              opacity: phoneSlideAnim.interpolate({
                inputRange: [0, 400],
                outputRange: [1, 0.7]
              })
            }
          ]}
          removeClippedSubviews={true}
          collapsable={false}
        >
          <View style={styles.phoneLoginHeader}>
            <TouchableOpacity 
              style={styles.phoneLoginCloseButton}
              onPress={closePhoneLogin}
              activeOpacity={0.7}
            >
              <Text style={styles.phoneLoginCloseButtonText}>✕</Text>
            </TouchableOpacity>
            <Text style={styles.phoneLoginTitle}>{t('logInOrSignUp')}</Text>
          </View>

          <View style={styles.phoneLoginContent}>
            <View style={styles.phoneInputContainer}>
              <TouchableOpacity 
                style={styles.countrySelector}
                onPress={() => setShowCountryModal(true)}
                activeOpacity={0.7}
              >
                <Text style={styles.countryFlag}>{selectedCountry.flag}</Text>
                <Text style={styles.countryCode}>{selectedCountry.phoneCode}</Text>
                <Text style={styles.downArrow}>▼</Text>
              </TouchableOpacity>

              <TextInput
                style={styles.phoneInput}
                placeholder={t('phoneNumber')}
                value={phoneNumber}
                onChangeText={(text) => {
                  setPhoneNumber(text);
                  setPasswordError(false);
                }}
                keyboardType="phone-pad"
                autoFocus
                maxLength={15}
              />
              {phoneNumber.length > 0 && (
                <TouchableOpacity 
                  style={styles.phoneClearButton}
                  onPress={() => {
                    setPhoneNumber('');
                    setPasswordError(false);
                  }}
                  activeOpacity={0.7}
                >
                  <Text style={styles.phoneClearButtonText}>✕</Text>
                </TouchableOpacity>
              )}
            </View>

            {/* 密码输入框 */}
            <View style={[
              styles.phoneInputContainer, 
              passwordError && styles.passwordErrorContainer
            ]}>
              <TextInput
                style={styles.passwordInput}
                placeholder={t('enterPassword')}
                value={password}
                onChangeText={(text) => {
                  setPassword(text);
                  setPasswordError(false);
                }}
                secureTextEntry={true}
                autoCapitalize="none"
              />
              {passwordError && (
                <View style={styles.passwordErrorIcon}>
                  <Text style={styles.passwordErrorIconText}>!</Text>
                </View>
              )}
            </View>
            
            {/* 密码错误提示 */}
            {passwordError && (
              <>
                <Text style={styles.passwordErrorText}>
                  {t('passwordIncorrect')}
                </Text>
                
                <TouchableOpacity 
                  style={styles.forgotPasswordLink}
                  onPress={handleForgotPassword}
                  activeOpacity={0.7}
                >
                  <Text style={styles.forgotPasswordLinkText}>
                    {t('forgotPassword')}
                  </Text>
                </TouchableOpacity>
              </>
            )}

            <Text style={[
              styles.phoneInfoText,
              passwordError && { marginTop: 5 }
            ]}>
       
            </Text>

            <TouchableOpacity 
              style={[
                styles.phoneContinueButton, 
                (!phoneNumber.trim() || !password) && styles.phoneDisabledButton
              ]}
              onPress={handlePhoneContinue}
              disabled={!phoneNumber.trim() || !password}
              activeOpacity={0.7}
            >
              <Text style={styles.phoneContinueButtonText}>{t('continue')}</Text>
            </TouchableOpacity>
          </View>
        </Animated.View>
      )}

      {/* 国家选择模态框 */}
      <Modal
        visible={showCountryModal}
        animationType="slide"
        transparent={true}
        onRequestClose={() => setShowCountryModal(false)}
        hardwareAccelerated={true}
        statusBarTranslucent={true}
        presentationStyle="overFullScreen"
      >
        <View style={styles.countryModalContainer}>
          <View style={styles.countryModalContent}>
            <View style={styles.countryModalHeader}>
              <TouchableOpacity 
                style={styles.countryModalCloseButton}
                onPress={() => setShowCountryModal(false)}
                activeOpacity={0.7}
              >
                <Text style={styles.countryModalCloseButtonText}>✕</Text>
              </TouchableOpacity>
              <Text style={styles.countryModalTitle}>{t('selectCountry')}</Text>
            </View>
            <FlatList
              data={countries}
              renderItem={renderCountryItem}
              keyExtractor={(item) => item.code}
              style={styles.countryList}
              showsVerticalScrollIndicator={false}
              removeClippedSubviews={true}
              initialNumToRender={10}
              maxToRenderPerBatch={10}
              windowSize={10}
              getItemLayout={(data, index) => (
                {length: 69, offset: 69 * index, index}
              )}
            />
          </View>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  closeButton: {
    position: 'absolute',
    top: 15,
    left: 10,
    width: 24,
    height: 24,
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 1,
  },
  closeButtonText: {
    color: '#000',
    fontSize: 24,
    fontWeight: '300',
  },
  blueHeader: {
    backgroundColor: '#0066FF',
    paddingHorizontal: 20,
    paddingBottom: 20,
    paddingTop: Platform.OS === 'ios' ? 60 : 40,
    borderBottomLeftRadius: 24,
    borderBottomRightRadius: 24,
  },
  logo: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#fff',
    marginBottom: 15,
  },
  features: {
    flexDirection: 'row',
    gap: 16,
  },
  featureItem: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  featureIconContainer: {
    backgroundColor: 'rgba(255, 255, 255, 0.2)',
    borderRadius: 8,
    width: 24,
    height: 24,
    justifyContent: 'center',
    alignItems: 'center',
  },
  featureIcon: {
    fontSize: 12,
  },
  featureText: {
    fontSize: 14,
    color: '#fff',
  },
  loginContainer: {
    flex: 1,
    paddingHorizontal: 20,
    paddingTop: Platform.OS === 'ios' ? 40 : 20,
  },
  titleContainer: {
    alignItems: 'center',
    marginBottom: 30,
    paddingTop: 20,
    position: 'relative',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#000',
    marginBottom: 8,
    textAlign: 'center',
  },
  subtitle: {
    fontSize: 14,
    color: '#666',
    textAlign: 'center',
  },
  loginButton: {
    flexDirection: 'row',
    height: 50,
    borderRadius: 25,
    borderWidth: 1,
    borderColor: '#E1E1E1',
    alignItems: 'center',
    marginBottom: 12,
    paddingHorizontal: 16,
    backgroundColor: '#fff',
  },
  loginButtonIcon: {
    width: 24,
    height: 24,
    borderRadius: 12,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 16,
  },
  facebookIcon: {
    backgroundColor: '#3b5998',
  },
  appleIconBg: {
    backgroundColor: '#000',
  },
  instagramIcon: {
    backgroundColor: '#E1306C',
  },
  loginButtonText: {
    flex: 1,
    fontSize: 16,
    color: '#000',
    textAlign: 'center',
    marginRight: 16,
  },
  forgotPassword: {
    alignItems: 'center',
    marginVertical: 20,
  },
  forgotPasswordText: {
    color: '#0066FF',
    fontSize: 14,
  },
  termsContainer: {
    alignItems: 'center',
    marginTop: 10,
  },
  terms: {
    fontSize: 12,
    color: '#666',
    textAlign: 'center',
    lineHeight: 18,
  },
  link: {
    color: '#0066FF',
  },
  
  // 邮箱登录样式
  emailLoginContainer: {
    position: 'absolute',
    top: Platform.OS === 'ios' ? 60 : 40,
    height: Platform.OS === 'ios' ? 'auto' : '100%',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: '#fff',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: -2 },
    shadowOpacity: 0.1,
    shadowRadius: 5,
    elevation: 5,
    zIndex: 10,
  },
  emailLoginHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingTop: 20,
    paddingHorizontal: 16,
    paddingBottom: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  emailLoginCloseButton: {
    padding: 8,
    width: 36,
    height: 36,
    justifyContent: 'center',
    alignItems: 'center',
  },
  emailLoginCloseButtonText: {
    fontSize: 18,
    color: '#000',
  },
  emailLoginTitle: {
    flex: 1,
    fontSize: 18,
    fontWeight: '600',
    color: '#000',
    textAlign: 'center',
    marginRight: 36, // 为了让标题真正居中
  },
  emailLoginContent: {
    padding: 20,
    paddingBottom: Platform.OS === 'ios' ? 50 : 30,
    flex: 1,
  },
  emailInputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: '#E1E1E1',
    borderRadius: 25,
    height: 50,
    marginBottom: 20,
  },
  emailInput: {
    flex: 1,
    height: '100%',
    paddingHorizontal: 16,
    fontSize: 16,
    paddingRight: 36,
  },
  emailClearButton: {
    position: 'absolute',
    right: 12,
    top: '50%',
    transform: [{ translateY: -12 }],
    height: 24,
    width: 24,
    justifyContent: 'center',
    alignItems: 'center',
  },
  emailClearButtonText: {
    fontSize: 16,
    color: '#999',
    fontWeight: '500',
    textAlign: 'center',
  },
  suggestionsContainer: {
    borderWidth: 1,
    borderColor: '#E1E1E1',
    borderRadius: 10,
    marginTop: -10,
    marginBottom: 20,
    maxHeight: 200,
    backgroundColor: '#fff',
  },
  suggestionsList: {
    padding: 8,
  },
  suggestionItem: {
    paddingVertical: 12,
    paddingHorizontal: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#F0F0F0',
  },
  suggestionText: {
    fontSize: 16,
    color: '#333',
  },
  emailContinueButton: {
    height: 50,
    backgroundColor: '#0039CB',
    borderRadius: 25,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 20,
  },
  emailDisabledButton: {
    backgroundColor: '#CCCCCC',
  },
  emailContinueButtonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
  
  // 手机号登录样式
  phoneLoginContainer: {
    position: 'absolute',
    top: Platform.OS === 'ios' ? 60 : 40,
    height: Platform.OS === 'ios' ? 'auto' : '100%',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: '#fff',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: -2 },
    shadowOpacity: 0.1,
    shadowRadius: 5,
    elevation: 5,
    zIndex: 10,
  },
  phoneLoginHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingTop: 20,
    paddingHorizontal: 16,
    paddingBottom: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  phoneLoginCloseButton: {
    padding: 8,
    width: 36,
    height: 36,
    justifyContent: 'center',
    alignItems: 'center',
  },
  phoneLoginCloseButtonText: {
    fontSize: 18,
    color: '#000',
  },
  phoneLoginTitle: {
    flex: 1,
    fontSize: 18,
    fontWeight: '600',
    color: '#000',
    textAlign: 'center',
    marginRight: 36, // 为了让标题真正居中
  },
  phoneLoginContent: {
    padding: 20,
    paddingBottom: Platform.OS === 'ios' ? 50 : 30,
    flex: 1,
  },
  phoneInputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    borderWidth: 1,
    borderColor: '#E1E1E1',
    borderRadius: 25,
    height: 50,
    marginBottom: 20,
    position: 'relative',
  },
  countrySelector: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 12,
    borderRightWidth: 1,
    borderRightColor: '#E1E1E1',
    backgroundColor: '#F7F7F7',
    height: '100%',
    minWidth: 90,
    width: 90,
    justifyContent: 'center',
  },
  countryFlag: {
    fontSize: 18,
    marginRight: 4,
  },
  countryCode: {
    fontSize: 12,
    color: '#333',
    marginRight: 4,
  },
  downArrow: {
    fontSize: 8,
    color: '#666',
  },
  phoneInput: {
    flex: 1,
    height: '100%',
    paddingHorizontal: 16,
    fontSize: 16,
    paddingRight: 36,
  },
  phoneClearButton: {
    position: 'absolute',
    right: 12,
    top: '50%',
    transform: [{ translateY: -12 }],
    height: 24,
    width: 24,
    justifyContent: 'center',
    alignItems: 'center',
  },
  phoneClearButtonText: {
    fontSize: 16,
    color: '#999',
    fontWeight: '500',
    textAlign: 'center',
  },
  phoneInfoText: {
    fontSize: 14,
    color: '#666',
    marginBottom: 32,
    lineHeight: 20,
  },
  phoneContinueButton: {
    height: 50,
    backgroundColor: '#0039CB',
    borderRadius: 25,
    justifyContent: 'center',
    alignItems: 'center',
  },
  phoneDisabledButton: {
    backgroundColor: '#CCCCCC',
  },
  phoneContinueButtonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
  
  // 国家选择模态框样式
  countryModalContainer: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'flex-end',
    zIndex: 999,
  },
  countryModalContent: {
    backgroundColor: '#fff',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    maxHeight: '80%',
    zIndex: 1000,
  },
  countryModalHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#E5E5E5',
  },
  countryModalCloseButton: {
    padding: 4,
  },
  countryModalCloseButtonText: {
    fontSize: 18,
    color: '#999',
  },
  countryModalTitle: {
    flex: 1,
    fontSize: 18,
    fontWeight: '600',
    textAlign: 'center',
    marginRight: 24, // Balance with close button
  },
  countryList: {
    padding: 8,
  },
  countryItem: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#F0F0F0',
  },
  countryItemFlag: {
    fontSize: 24,
    marginRight: 16,
  },
  countryItemContent: {
    flex: 1,
  },
  countryItemName: {
    fontSize: 16,
    color: '#333',
  },
  countryItemCode: {
    fontSize: 14,
    color: '#666',
    marginTop: 4,
  },
  // 密码输入框样式
  passwordInput: {
    flex: 1,
    height: '100%',
    paddingHorizontal: 16,
    fontSize: 16,
  },
  passwordErrorContainer: {
    borderColor: '#FF3B30',
  },
  passwordErrorIcon: {
    position: 'absolute',
    right: 12,
    top: '50%',
    transform: [{ translateY: -12 }],
    width: 24,
    height: 24,
    backgroundColor: '#FF3B30',
    borderRadius: 12,
    justifyContent: 'center',
    alignItems: 'center',
  },
  passwordErrorIconText: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 16,
  },
  passwordErrorText: {
    color: '#FF3B30',
    fontSize: 14,
    marginTop: -12,
    marginBottom: 16,
    paddingHorizontal: 5,
  },
  forgotPasswordLink: {
    alignItems: 'center',
    marginTop: 5,
  },
  forgotPasswordLinkText: {
    color: '#0066FF',
    fontSize: 14,
  },
});