app/loginHas.txt

import React, { useEffect, useState, useRef } from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  StatusBar,
  Platform,
  BackHandler,
  Image,
  Modal,
  SafeAreaView,
  Alert
} from "react-native";
import { useTranslation } from "react-i18next";
import { useNavigation } from "@react-navigation/native";
import type { NativeStackNavigationProp } from "@react-navigation/native-stack";
import fontSize from "../../utils/fontsizeUtils";
import EmailLoginModal from "./EmailLoginModal";
import PhoneLoginModal from "./PhoneLoginModal";
import { loginApi } from "../../services/api/login";
import { userApi } from "../../services";
import useUserStore from "../../store/user";

// 使用标准的ES6模块导入
import {
  GoogleSignin,
  statusCodes,
} from "@react-native-google-signin/google-signin";

import { LoginManager, AccessToken, Settings } from "react-native-fbsdk-next";

const isDevelopment = __DEV__; // 开发模式检测

// 移出条件块，始终尝试配置 Google 登录
try {
  // 配置 Google 登录
  GoogleSignin.configure({
    iosClientId: "YOUR_IOS_CLIENT_ID_HERE.apps.googleusercontent.com", // iOS CLIENT_ID
    webClientId:
      "449517618313-av37nffa7rqkefu0ajh5auou3pb0mt51.apps.googleusercontent.com", // <-- 更新为此 Web Client ID
    scopes: ["profile", "email"],
    offlineAccess: false, // <-- 确保为 false 或移除
    forceCodeForRefreshToken: false, // <-- 确保为 false 或移除
  });
} catch (error) {
  console.log("Google Sign-in模块配置错误:", error); // 稍微修改了日志信息
}

type RootStackParamList = {
  Login: undefined;
  EmailLogin: undefined;
  MainTabs: { screen: string };
  Google: undefined;
  Home: { screen: string };
};

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

export const LoginScreen = ({ onClose, isModal }: LoginScreenProps) => {
  const { setUser } = useUserStore();
  const { t } = useTranslation();
  const navigation =
    useNavigation<NativeStackNavigationProp<RootStackParamList>>();

  // 全新的状态管理方式
  const [emailModalVisible, setEmailModalVisible] = useState(false);
  const [phoneModalVisible, setPhoneModalVisible] = useState(false);

  // 防止多次触发
  const isProcessingEmail = useRef(false);
  const isProcessingPhone = useRef(false);

  // 处理Android返回按钮
  useEffect(() => {
    const backAction = () => {
      if (emailModalVisible) {
        setEmailModalVisible(false);
        return true;
      }
      if (phoneModalVisible) {
        setPhoneModalVisible(false);
        return true;
      }
      handleClose();
      return true;
    };

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

    return () => backHandler.remove();
  }, [emailModalVisible, phoneModalVisible]);

  // 关闭主屏幕
  const handleClose = () => {
    if (isModal && onClose) {
      onClose();
    } else {
      navigation.goBack();
    }
  };

  // 处理谷歌登录
  const handleGoogleLogin = async () => {
    try {
      if (!GoogleSignin || typeof GoogleSignin.signIn !== "function") {
        console.log("Google Sign-in模块未正确初始化或配置失败");
        return;
      }
      await GoogleSignin.hasPlayServices();
      const userInfo = await GoogleSignin.signIn();
      console.log("Google 登录成功:", userInfo);
      try {
        const res = await loginApi.googleLogin(userInfo);
        const user = await userApi.getProfile();
        setUser(user);
        navigation.navigate("MainTabs", { screen: "Home" });
      } catch (err) {
        console.log("Google 登录失败:", err);
        navigation.navigate("Login");
      }
      // 这里可以处理登录成功后的逻辑
      // 比如导航到主页面或保存用户信息
      // navigation.navigate("MainTabs", { screen: "Home" });
    } catch (error: any) {
      console.log("Google 登录错误:", error);
      // 开发模式下的错误处理
      if (isDevelopment) {
        console.log("开发模式：忽略Google登录错误，但已尝试真实登录"); // 修改日志，表明已尝试真实登录
        return;
      }
      if (statusCodes && error.code === statusCodes.SIGN_IN_CANCELLED) {
        console.log("用户取消登录");
      } else if (statusCodes && error.code === statusCodes.IN_PROGRESS) {
        console.log("登录正在进行中");
      } else if (
        statusCodes &&
        error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE
      ) {
        console.log("Play Services 不可用");
      } else {
        console.log("其他错误:", error.message);
        navigation.navigate("Login");
      }
    }
  };
  const [userInfo, setUserInfo] = useState<any>(null);

  useEffect(() => {
    // 确保在 App 启动时初始化 SDK。这通常在您的 App.js 的顶层完成。
    // 如果您在 app.json 中配置了 Facebook App ID，这里可以省略 Settings.setAppID 和 Settings.setDisplayName
    Settings.initializeSDK();

    // 在应用程序启动时检查是否已经登录（可选）
    AccessToken.getCurrentAccessToken().then(data => {
      if (data) {
        console.log("已登录 Facebook，Token:", data.accessToken);
        // 可以尝试获取用户信息
        // fetchFacebookProfile(data.accessToken);
      }
    });

  }, []);


  // 辅助函数：获取 Facebook 用户资料 (可选，需要 'public_profile' 权限)
  const fetchFacebookProfile = async (token:string) => {
    try {
      const response = await fetch(`https://graph.facebook.com/me?fields=id,name,email&access_token=${token}`);
      const profile = await response.json();
      setUserInfo(profile);
      console.log('Facebook User Info:', profile);
      return profile;
    } catch (error) {
      console.error('获取 Facebook 用户资料错误:', error);
      Alert.alert("获取资料失败", "无法从 Facebook 获取用户详细资料，请检查网络或权限设置。");
      return null;
    }
  };

  // 处理Facebook登录
  const handleFacebookLogin = async () => {
    try {
      // 可选: 先退出登录，确保每次都是全新登录 (主要用于测试)
      // await LoginManager.logOut();

      const result = await LoginManager.logInWithPermissions([
        "public_profile",
        "email",
      ]);

      if (result.isCancelled) {
        Alert.alert("登录取消", "用户取消了 Facebook 登录。");
        return;
      }

      const data = await AccessToken.getCurrentAccessToken();
      // 确保 accessToken 存在且为字符串
      if (!data || !data.accessToken) {
        Alert.alert("登录失败", "无法获取有效的 Facebook AccessToken。");
        return;
      }

      const tokenString = data.accessToken.toString();
      console.log("Facebook Access Token:", tokenString);

      // 获取 Facebook 用户信息
      const profile = await fetchFacebookProfile(tokenString);
      
      if (profile) {
        try {
          // 准备发送给后端的数据 - 扁平化格式
          const facebookData = {
            id: profile.id,
            name: profile.name,
            email: profile.email,
            access_token: tokenString
          };

          console.log("发送给后端的Facebook数据:", facebookData);
          
          // 调用后端Facebook登录API
          const res = await loginApi.facebookLogin(facebookData);
          console.log("Facebook 后端登录响应:", res);
          
          // 获取用户信息并更新状态
          const user = await userApi.getProfile();
          setUser(user);
          
          // 导航到主页面
          navigation.navigate("MainTabs", { screen: "Home" });
          
        } catch (err) {
          console.log("Facebook 后端登录失败:", err);
          Alert.alert("登录失败", "Facebook 登录验证失败，请重试。");
        }
      } else {
        Alert.alert("登录失败", "无法获取 Facebook 用户信息，请重试。");
      }

    } catch (error: any) {
      console.error("Facebook 登录或获取资料时发生错误:", error);
      let errorMessage = "发生未知错误";
      if (error && typeof error.message === 'string') {
        errorMessage = error.message;
      }
      Alert.alert("登录错误", `Facebook 操作失败：${errorMessage}`);
    }
  };

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

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

  // 显示邮箱登录
  const showEmailModal = () => {
    if (isProcessingEmail.current) return;

    isProcessingEmail.current = true;
    // 确保手机模态框已关闭
    setPhoneModalVisible(false);

    // 延迟打开邮箱模态框，避免冲突
    setTimeout(() => {
      setEmailModalVisible(true);
      isProcessingEmail.current = false;
    }, 100);
  };

  // 显示手机登录
  const showPhoneModal = () => {
    if (isProcessingPhone.current) return;

    isProcessingPhone.current = true;
    // 确保邮箱模态框已关闭
    setEmailModalVisible(false);

    // 延迟打开手机模态框，避免冲突
    setTimeout(() => {
      setPhoneModalVisible(true);
      isProcessingPhone.current = false;
    }, 100);
  };

  // 关闭邮箱登录
  const hideEmailModal = () => {
    console.log("Hiding email modal");
    setEmailModalVisible(false);
  };

  // 关闭手机登录
  const hidePhoneModal = () => {
    console.log("Hiding phone modal");
    setPhoneModalVisible(false);
  };

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

  return (
    <SafeAreaView style={styles.safeArea}>
      <StatusBar barStyle="light-content" backgroundColor="#0066FF" />
      <View style={styles.safeAreaContent}>
        {/* 顶部蓝色背景区域 */}
        <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.subtitle}>{t("loginSubtitle")}</Text>
          </View>

          {/* 登录按钮 */}
          <TouchableOpacity
            style={styles.loginButton}
            onPress={handleGoogleLogin}
          >
            <View style={styles.loginButtonIcon}>
              <Image
                source={require("../../../assets/img/google.png")}
                style={{ width: 20, height: 20 }}
              />
            </View>
            <Text style={styles.loginButtonText}>
              {isDevelopment
                ? "🧪 " + t("continueWithGoogle") + " (测试模式)"
                : 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={showEmailModal}>
            <View style={styles.loginButtonIcon}>
              <Text>✉️</Text>
            </View>
            <Text style={styles.loginButtonText}>{t("continueWithEmail")}</Text>
          </TouchableOpacity>

          <TouchableOpacity style={styles.loginButton} onPress={showPhoneModal}>
            <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>
      </View>

      {/* 邮箱登录模态框 - 直接渲染 */}
      <EmailLoginModal visible={emailModalVisible} onClose={hideEmailModal} />

      {/* 手机登录模态框 - 直接渲染 */}
      <PhoneLoginModal visible={phoneModalVisible} onClose={hidePhoneModal} />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
  },
  safeAreaContent: {
    flex: 1,
    paddingTop: 0,
  },
  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: fontSize(24),
    fontWeight: "300",
  },
  blueHeader: {
    backgroundColor: "#0066FF",
    paddingHorizontal: 20,
    paddingBottom: 20,
    paddingTop: Platform.OS === "ios" ? 60 : 40,
    borderBottomLeftRadius: 24,
    borderBottomRightRadius: 24,
  },
  logo: {
    fontSize: 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: fontSize(12),
  },
  featureText: {
    fontSize: fontSize(14),
    color: "#fff",
  },
  loginContainer: {
    flex: 1,
    paddingHorizontal: 20,
    paddingTop: Platform.OS === "ios" ? 40 : 20,
  },
  titleContainer: {
    alignItems: "center",
    marginBottom: 30,
    paddingTop: 20,
    position: "relative",
  },
  subtitle: {
    fontSize: 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: fontSize(16),
    color: "#000",
    textAlign: "center",
    marginRight: 16,
  },
  forgotPassword: {
    alignItems: "center",
    marginVertical: 20,
  },
  forgotPasswordText: {
    color: "#0066FF",
    fontSize: fontSize(14),
  },
  termsContainer: {
    alignItems: "center",
    marginTop: 10,
  },
  terms: {
    fontSize: fontSize(12),
    color: "#666",
    textAlign: "center",
    lineHeight: 18,
  },
  link: {
    color: "#0066FF",
  },
});

export default LoginScreen;