import { Fonts } from "@/constants/Fonts";
import { fetchApi } from "@/lib/server-api-util";
import { User } from "@/types/user";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { StyleSheet, TouchableOpacity, View } from "react-native";
import { ThemedText } from "../ThemedText";
import Button from "./ui/Button";
import TextInput from "./ui/TextInput";

interface LoginProps {
    setIsSignUp?: (isSignUp: string) => void;
    closeModal?: () => void;
    updateUrlParam?: (status: string, value: string) => void;
    setError: (error: string) => void;
}

const ForgetPwd = ({ setIsSignUp, updateUrlParam, setError }: LoginProps) => {
    const { t } = useTranslation();
    const [loading, setLocading] = useState(false);
    const [isDisabled, setIsDisabled] = useState(false);
    const [email, setEmail] = useState('');
    const [countdown, setCountdown] = useState(0);

    useEffect(() => {
        if (countdown > 0) {
            const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
            return () => clearTimeout(timer);
        } else if (countdown === 0 && isDisabled) {
            setIsDisabled(false);
        }
    }, [countdown, isDisabled]);

    const handleSubmit = () => {
        if (!email) {
            setError(t('auth.forgetPwd.emailPlaceholder', { ns: 'login' }));
            return;
        }

        setLocading(true);
        const body = {
            email: email,
        }

        fetchApi<User>('/iam/reset-password-session', {
            method: 'POST',
            body: JSON.stringify(body),
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then((_) => {
                setIsDisabled(true);
                setCountdown(60);
            })
            .catch((error) => {
                setError(error.message || t('auth.forgetPwd.sendEmailError', { ns: 'login' }));
            })
            .finally(() => {
                setLocading(false);
            });
    };

    const handleBackToLogin = () => {
        if (setIsSignUp) {
            setIsSignUp('login');
        }
        if (updateUrlParam) {
            updateUrlParam('status', 'login');
        }
    }

    return (
        <View style={styles.container}>
            {/* 邮箱 */}
            <TextInput
                label={t('auth.forgetPwd.title', { ns: 'login' })}
                placeholder={t('auth.forgetPwd.emailPlaceholder', { ns: 'login' })}
                onChangeText={setEmail}
                autoCapitalize="none"
                value={email}
            />
            {/* 发送邮箱 */}
            <Button
                isLoading={isDisabled || loading}
                handleLogin={handleSubmit}
                text={isDisabled
                    ? `${t("auth.forgetPwd.sendEmailBtnDisabled", { ns: "login" })} (${countdown}s)`
                    : t("auth.forgetPwd.sendEmailBtn", { ns: "login" })}
            />

            {/* 返回登录 */}
            <TouchableOpacity
                style={styles.backButton}
                onPress={handleBackToLogin}
            >
                <ThemedText type='inter' color="bgSecondary" size="sm">
                    {t('auth.forgetPwd.goback', { ns: 'login' })}
                </ThemedText>
            </TouchableOpacity>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        width: '100%',
    },
    inputContainer: {
        marginBottom: 20,
    },
    inputLabel: {
        fontSize: Fonts['base'],
        color: Fonts['textPrimary'],
        fontWeight: Fonts['bold'],
        fontFamily: Fonts['sfPro'],
        marginBottom: 8,
        marginLeft: 8,
    },
    textInput: {
        borderRadius: Fonts['xs'],
        paddingHorizontal: Fonts['base'],
        paddingVertical: Fonts['xs'],
        fontSize: Fonts['sm'],
        lineHeight: Fonts['base'],
        textAlignVertical: 'center',
        backgroundColor: Fonts['bgInput'],
        color: Fonts['textSecondary'],
        fontFamily: Fonts['inter'],
        paddingRight: Fonts['5xl'],
    },
    submitButton: {
        width: '100%',
        backgroundColor: '#E2793F',
        borderRadius: 28,
        padding: 16,
        alignItems: 'center',
    },
    disabledButton: {
        opacity: 0.5,
    },
    buttonText: {
        color: '#FFFFFF',
        fontWeight: '600',
    },
    backButton: {
        alignSelf: 'center',
        marginTop: 24,
    }
});

export default ForgetPwd;