expo-popcore-app/components/blocks/AuthForm.tsx

import React, { useState, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { ActivityIndicator, TextInput, Pressable } from "react-native";
import { authClient, setAuthToken, useSession } from "../../lib/auth";
import type { ApiError } from "../../lib/types";
import { Block } from "../ui";
import { Button } from "../ui/button";
import Text from "../ui/Text";
import { storage } from "../../lib/storage";

type AuthMode = "login" | "register";

const signIn = authClient.signIn
const signUp = authClient.signUp

interface AuthFormProps {
  mode?: AuthMode;
  onSuccess?: () => void;
  onModeChange?: (mode: AuthMode) => void;
}

export function AuthForm({ mode = "login", onSuccess, onModeChange }: AuthFormProps) {
  const { t } = useTranslation();
  const [currentMode, setCurrentMode] = useState<AuthMode>(mode);
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [rememberPassword, setRememberPassword] = useState(false);

  const isLogin = currentMode === "login";

  useEffect(() => {
    const loadSavedCredentials = async () => {
      const saved = await storage.getItem("saved_credentials");
      if (saved) {
        const { username: savedUsername, password: savedPassword } = JSON.parse(saved);
        setUsername(savedUsername);
        setPassword(savedPassword);
        setRememberPassword(true);
      }
    };
    loadSavedCredentials();
  }, []);

  // 根据错误代码获取翻译后的错误信息
  const getErrorMessage = (error: ApiError): string => {
    if (error.code) {
      const key = `authForm.errors.${error.code}`;
      const translated = t(key);
      // 如果翻译存在，返回翻译结果
      if (translated !== key) {
        return translated;
      }
    }
    // 返回 message 或默认错误信息
    return error.message || t("authForm.errors.UNKNOWN_ERROR");
  };

  const handleSubmit = async () => {
    if (!username.trim() || !password.trim()) {
      setError(t("authForm.fillCompleteInfo"));
      return;
    }

    if (!isLogin && !email.trim()) {
      setError(t("authForm.fillEmail"));
      return;
    }

    setLoading(true);
    setError("");

    try {
      if (isLogin) {
        const result = await signIn.username({ username, password }, {
          onSuccess: async (ctx) => {
            const authToken = ctx.response.headers.get('set-auth-token')
            if (authToken) {
              await setAuthToken(authToken)
            }
          },
          onError: (ctx) => {
            setError(getErrorMessage(ctx.error));
          },
        });

        // 检查返回结果中是否有错误
        if (result.error) {
          setError(getErrorMessage(result.error));
          return;
        }

        // 登录成功后保存凭证
        if (rememberPassword) {
          await storage.setItem("saved_credentials", JSON.stringify({ username, password }));
        } else {
          await storage.removeItem("saved_credentials");
        }

        onSuccess?.();
      } else {
        const result = await signUp.email({ email, password, name: username }, {
          onSuccess: async (ctx) => {
            const authToken = ctx.response.headers.get('set-auth-token')
            if (authToken) {
              await setAuthToken(authToken)
            }
          },
          onError: (ctx) => {
            setError(getErrorMessage(ctx.error));
            console.error(`[REGISTER] email register error`, ctx)
          },
        });

        // 检查返回结果中是否有错误
        if (result.error) {
          setError(getErrorMessage(result.error));
          return;
        }

        // 注册成功
        onSuccess?.();
      }
    } catch (e: unknown) {
      const msg = e instanceof Error ? e.message : (isLogin ? t("authForm.loginFailed") : t("authForm.registerFailed"));
      setError(msg);
    } finally {
      setLoading(false);
    }
  };

  const toggleMode = () => {
    const newMode = isLogin ? "register" : "login";
    setCurrentMode(newMode);
    onModeChange?.(newMode);
    setEmail("");
    setError("");
  };

  return (
    <Block className="w-full px-6">
      <Text className="text-2xl font-bold text-center text-white mb-8">
        {isLogin ? t("authForm.login") : t("authForm.register")}
      </Text>

      <TextInput
        className="w-full h-12 px-4 mb-4 bg-white/10 rounded-lg"
        style={{ color: '#ffffff' }}
        placeholder={t("authForm.username")}
        placeholderTextColor="#999"
        value={username}
        onChangeText={setUsername}
        autoCapitalize="none"
      />

      {!isLogin && (
        <TextInput
          className="w-full h-12 px-4 mb-4 bg-white/10 rounded-lg"
          style={{ color: '#ffffff' }}
          placeholder={t("authForm.email")}
          placeholderTextColor="#999"
          value={email}
          onChangeText={setEmail}
          autoCapitalize="none"
          keyboardType="email-address"
        />
      )}

      <TextInput
        className="w-full h-12 px-4 mb-4 bg-white/10 rounded-lg"
        style={{ color: '#ffffff' }}
        placeholder={t("authForm.password")}
        placeholderTextColor="#999"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />

      {isLogin && (
        <Pressable
          onPress={() => setRememberPassword(!rememberPassword)}
          className="flex-row items-center mb-4"
        >
          <Block
            className="w-5 h-5 rounded border-2 border-white/30 mr-2 items-center justify-center"
            style={{ backgroundColor: rememberPassword ? '#ffffff' : 'transparent' }}
          >
            {rememberPassword && <Text style={{ color: '#000', fontSize: 12 }}>✓</Text>}
          </Block>
          <Text className="text-white/70 text-sm">{t("authForm.rememberPassword")}</Text>
        </Pressable>
      )}

      {error ? (
        <Text style={{ color: '#ef4444' }} className="text-sm mb-4 text-center">
          {error}
        </Text>
      ) : null}

      <Button
        variant="gradient"
        className="w-full h-16 rounded-lg px-0"
        onPress={handleSubmit}
        disabled={loading}
      >
        {loading ? (
          <ActivityIndicator color="#fff" />
        ) : (
          <Text className="text-white font-medium">
            {isLogin ? t("authForm.login") : t("authForm.register")}
          </Text>
        )}
      </Button>

      <Text
        className="text-gray-400 text-center mt-6"
        onClick={toggleMode}
      >
        {isLogin ? t("authForm.noAccountRegister") : t("authForm.haveAccountLogin")}
      </Text>
    </Block>
  );
}

export { useSession };