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

type AuthMode = "login" | "register";

type AuthResponse = { data: unknown; error: { message: string } | null };
type SignInFn = (params: { username: string; password: string }) => Promise<AuthResponse>;
type SignUpFn = (params: { email: string; password: string; name: string }) => Promise<AuthResponse>;

const signIn = authClient.signIn as unknown as { username: SignInFn };
const signUp = authClient.signUp as unknown as { email: SignUpFn };

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 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 res = await signIn.username({ username, password });
        if (res.error) throw new Error(res.error.message);
      } else {
        const res = await signUp.email({ email, password, name: username });
        if (res.error) throw new Error(res.error.message);
      }
      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 };