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

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

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 isLogin = currentMode === "login";

  // 根据错误代码获取翻译后的错误信息
  const getErrorMessage = (error: { message: string; code?: string }): string => {
    if (error.code) {
      const translated = t(`authForm.errors.${error.code}`);
      // 如果翻译不存在，返回原始 message
      if (!translated.includes('authForm.errors')) {
        return translated;
      }
    }
    return error.message;
  };

  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) {
        await signIn.username({ username, password }, {
          onSuccess: async (ctx) => {
            const authToken = ctx.response.headers.get('set-auth-token')
            if (authToken) {
              setAuthToken(authToken)
            }
          },
          onError: (ctx) => {
            setError(getErrorMessage(ctx.error));
            console.error(`[LOGIN] username login error`, ctx)
          },
        });
      } else {
        await signUp.email({ email, password, name: username }, {
          onSuccess: async (ctx) => {
            const authToken = ctx.response.headers.get('set-auth-token')
            if (authToken) {
              setAuthToken(authToken)
            }
          },
          onError: (ctx) => {
            setError(getErrorMessage(ctx.error));
            console.error(`[LOGIN] username login error`, ctx)
          },
        });
      }
      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
      />

      {error ? (
        <Text className="text-red-500 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 };