import { Ionicons } from "@expo/vector-icons";
import { router } from "expo-router";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { ActivityIndicator, TextInput, TouchableOpacity, View } from "react-native";
import { useAuth } from "../../contexts/auth-context";
import { fetchApi } from "../../lib/server-api-util";
import { User } from "../../types/user";
import { ThemedText } from "../ThemedText";

const REMEMBER_ACCOUNT_KEY = 'fairclip_remembered_account';
interface LoginProps {
    updateUrlParam: (status: string, value: string) => void;
    setError: (error: string) => void;
    setShowPassword: (showPassword: boolean) => void;
    showPassword: boolean;
}

const Login = ({ updateUrlParam, setError, setShowPassword, showPassword }: LoginProps) => {
    const { t } = useTranslation();
    const { login } = useAuth();
    const [isLoading, setIsLoading] = useState(false);
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [rememberMe, setRememberMe] = useState(false);

    const handleLogin = async () => {
        if (!email) {
            setError(t('auth.login.emailPlaceholder', { ns: 'login' }));
            return;
        };
        if (!password) {
            setError(t('auth.login.passwordPlaceholder', { ns: 'login' }));
            return;
        }
        setIsLoading(true);
        try {
            const body = {
                account: email,
                password: password,
            };

            const res = await fetchApi<User>('/iam/login/password-login', {
                method: 'POST',
                body: JSON.stringify(body),
            });
            login({ ...res, email: res?.account }, res.access_token || '');
            const userInfo = await fetchApi<User>("/iam/user-info");
            if (userInfo?.nickname) {
                router.replace('/ask');
            } else {
                router.replace('/user-message');
            }
        } catch (error) {
        } finally {
            setIsLoading(false);
        }
    };

    const handleForgotPassword = () => {
        updateUrlParam('status', 'forgetPwd');
    };

    const handleSignUp = () => {
        updateUrlParam('status', 'signUp');
    };
    return <View>
        {/* 邮箱输入框 */}
        <View className="mb-5">
            <ThemedText className="text-base !text-textPrimary mb-2 ml-2">
                {t('auth.login.email', { ns: 'login' })}
            </ThemedText>
            <TextInput
                className="border border-gray-300 rounded-2xl p-3 text-base bg-inputBackground"
                placeholder={t('auth.login.accountPlaceholder', { ns: 'login' })}
                placeholderTextColor="#ccc"
                value={email}
                onChangeText={(text) => {
                    setEmail(text);
                    setError('123');
                }}
                keyboardType="email-address"
                autoCapitalize="none"
            />
        </View>
        {/* 密码输入框 */}
        <View className="mb-2">
            <ThemedText className="text-base !text-textPrimary mb-2 ml-2">
                {t('auth.login.password', { ns: 'login' })}
            </ThemedText>
            <View className="relative">
                <TextInput
                    className="border border-gray-300 rounded-2xl p-3 text-base bg-inputBackground pr-12"
                    placeholder={t('auth.login.passwordPlaceholder', { ns: 'login' })}
                    placeholderTextColor="#ccc"
                    value={password}
                    onChangeText={(text) => {
                        setPassword(text);
                        setError('123');
                    }}
                    secureTextEntry={!showPassword}
                />
                <TouchableOpacity
                    className="absolute right-3 top-3.5"
                    onPress={() => setShowPassword(!showPassword)}
                >
                    <Ionicons
                        name={showPassword ? 'eye' : 'eye-off'}
                        size={20}
                        color="#666"
                    />
                </TouchableOpacity>
            </View>
        </View>

        {/* 忘记密码链接 */}
        <TouchableOpacity
            className="self-end mb-6"
            onPress={handleForgotPassword}
        >
            <ThemedText className="!text-textPrimary text-sm">
                {t('auth.login.forgotPassword', { ns: 'login' })}
            </ThemedText>
        </TouchableOpacity>

        {/* 登录按钮 */}
        <TouchableOpacity
            className={`w-full bg-[#E2793F] rounded-full text-[#fff] p-4 items-center mb-6 ${isLoading ? 'opacity-70' : ''}`}
            onPress={handleLogin}
            disabled={isLoading}
        >
            {isLoading ? (
                <ActivityIndicator color="#fff" />
            ) : (
                <ThemedText className="!text-white font-semibold">
                    {t('auth.login.loginButton', { ns: 'login' })}
                </ThemedText>
            )}
        </TouchableOpacity>

        {/* 注册链接 */}
        <View className="flex-row justify-center mt-2">
            <ThemedText className="!text-textPrimary text-sm">
                {t('auth.login.signUpMessage', { ns: 'login' })}
            </ThemedText>
            <TouchableOpacity onPress={handleSignUp}>
                <ThemedText className="!text-[#E2793F] text-sm font-semibold ml-1">
                    {t('auth.login.signUp', { ns: 'login' })}
                </ThemedText>
            </TouchableOpacity>
        </View>
    </View>
}


export default Login