import { View, Text, StyleSheet, Pressable } from 'react-native';
import { useState } from 'react';
import {
    forgetPasswordFormData,
    HandleForgetPasswordFormDataChange
} from '../../../../types/signup';
import NumberInput from '../../../global/number_input';
import NormalButton from '../../../global/normal_button';
import NormalInput from '../../../global/normal_input';
import { authenticationService } from '../../../../service/authService';

type ForgetPasswordPageProps = {
    forgetPasswordFormData: forgetPasswordFormData;
    setForgetPasswordFormData: React.Dispatch<
        React.SetStateAction<forgetPasswordFormData>
    >;
    setScreen: React.Dispatch<React.SetStateAction<number>>;
};

const ForgetPasswordPage: React.FC<ForgetPasswordPageProps> = ({
    forgetPasswordFormData,
    setForgetPasswordFormData,
    setScreen
}) => {
    const [authError, setAuthError] = useState('');
    const [error, setError] = useState('');
    const [canSendOtp, setCanSendOtp] = useState(true);
    const [lockEmailInput, setLockEmailInput] = useState(false);
    const [data, setData] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    const [isLoading2, setIsLoading2] = useState(false);

    const handleVerification = async () => {
        setIsLoading(true);
        if (!forgetPasswordFormData.otp && !forgetPasswordFormData.email) {
            setAuthError('請確保所有資料都已填寫');
        } else if (!forgetPasswordFormData.otp) {
            setAuthError('請輸入OTP驗證碼');
        } else {
            setAuthError('');
            try {
                const result =
                    await authenticationService.verifyingOtpForgetPassword(
                        forgetPasswordFormData.email.toLowerCase(),
                        forgetPasswordFormData.otp,
                        setForgetPasswordFormData,
                        setData
                    );
                if (result === false) {
                    setAuthError('驗證OTP時發生錯誤，請稍後再試');
                }
            } catch (error) {
                console.error('Error verifying OTP:', error);
                setAuthError('驗證OTP時發生錯誤，請稍後再試');
            }
        }
        setIsLoading(false);
    };

    const handleFormDataChange: HandleForgetPasswordFormDataChange = (
        field,
        value
    ) => {
        setForgetPasswordFormData((prevFormData) => ({
            ...prevFormData,
            [field]: value
        }));
    };

    const handleSubmitOtp = () => {
        if (forgetPasswordFormData.email) {
            if (canSendOtp) {
                const lowerCaseEmail =
                    forgetPasswordFormData.email.toLowerCase();
                setCanSendOtp(false);
                setLockEmailInput(true);
                authenticationService.sendForgetPasswordOtp(lowerCaseEmail);
                //can only request otp every 60 seconds
                setTimeout(() => {
                    setCanSendOtp(true);
                    setLockEmailInput(false);
                }, 60000);
                setAuthError('');
            } else {
                setAuthError('請等待一分鐘後再重新發送。');
            }
        } else {
            setAuthError('請確保所有資料都已填寫。');
        }
    };

    const handleFinishResetPassword = async () => {
        if (
            forgetPasswordFormData.newPassword !==
            forgetPasswordFormData.confirmedNewPassword
        ) {
            setError('請確保新密碼和確認密碼相同');
        } else {
            setError('');
            setIsLoading2(true);
            try {
                const success = await authenticationService.changePassword(
                    forgetPasswordFormData.confirmedNewPassword,
                    data
                );
                if (success) {
                    setScreen(1);
                } else {
                    setError('密碼重置失敗，請稍後再試');
                }
            } catch (error) {
                console.error('Error changing password:', error);
                setError('發生錯誤，請稍後再試');
            } finally {
                setIsLoading2(false);
            }
        }
    };

    return (
        <>
            <View style={styles.container}>
                <View style={styles.bottomContainer}>
                    <Text style={styles.text}>驗證電子郵件後即可重置密碼</Text>

                    <NormalInput
                        placeholder="請填寫您的電子郵件"
                        onChangeText={(email) =>
                            setForgetPasswordFormData({
                                ...forgetPasswordFormData,
                                email: email
                            })
                        }
                        editable={!lockEmailInput}
                        extendedStyle={{ opacity: !lockEmailInput ? 1 : 0.5 }}
                    />
                    <View
                        style={{
                            display: 'flex',
                            flexDirection: 'row',
                            paddingVertical: 10,
                            gap: 10
                        }}
                    >
                        <NumberInput
                            placeholder="OTP驗證碼"
                            onChangeText={(t) => handleFormDataChange('otp', t)}
                            editable={!forgetPasswordFormData.otpAuthCompleted}
                            extendedStyle={{
                                flex: 1,
                                opacity:
                                    !forgetPasswordFormData.otpAuthCompleted
                                        ? 1
                                        : 0.5
                            }}
                        />
                        <NormalButton
                            title={
                                <Text style={{ color: '#fff' }}>
                                    {lockEmailInput ? '已發送' : '發送'}
                                </Text>
                            }
                            onPress={handleSubmitOtp}
                            extendedStyle={{ flex: 1 / 2 }}
                        />
                    </View>
                    <NormalButton
                        title={
                            <Text style={{ color: '#fff' }}>
                                {isLoading
                                    ? '驗證中...'
                                    : forgetPasswordFormData.otpAuthCompleted ==
                                      true
                                    ? '已驗證'
                                    : '驗證'}
                            </Text>
                        }
                        onPress={handleVerification}
                        extendedStyle={
                            forgetPasswordFormData.otpAuthCompleted == true
                                ? { backgroundColor: '#70787C' }
                                : {}
                        }
                    />

                    {authError && (
                        <Text style={styles.errorMessage}>{authError}</Text>
                    )}
                    {lockEmailInput && (
                        <Pressable
                            disabled={forgetPasswordFormData.otpAuthCompleted}
                            onPress={() => setLockEmailInput(false)}
                        >
                            <Text
                                style={[
                                    styles.footer,
                                    forgetPasswordFormData.otpAuthCompleted && {
                                        opacity: 0.5
                                    }
                                ]}
                            >
                                修改電子郵件
                            </Text>
                        </Pressable>
                    )}

                    {forgetPasswordFormData.otpAuthCompleted && (
                        <View
                            style={[
                                styles.hiddenPasswordFields,
                                forgetPasswordFormData.otpAuthCompleted
                                    ? styles.opacityFull
                                    : styles.opacityZero
                            ]}
                        >
                            <NormalInput
                                placeholder="新密碼"
                                onChangeText={(t) =>
                                    handleFormDataChange('newPassword', t)
                                }
                                secureTextEntry={true}
                                textContentType={'oneTimeCode'}
                            />
                            <NormalInput
                                placeholder="確認密碼"
                                onChangeText={(t) =>
                                    handleFormDataChange(
                                        'confirmedNewPassword',
                                        t
                                    )
                                }
                                secureTextEntry={true}
                                textContentType={'oneTimeCode'}
                            />
                            <NormalButton
                                title={
                                    <Text style={{ color: '#fff' }}>
                                        {isLoading ? '重置中...' : '重置'}
                                    </Text>
                                }
                                onPress={handleFinishResetPassword}
                                extendedStyle={{}}
                            />
                        </View>
                    )}

                    {error && <Text style={styles.errorMessage}>{error}</Text>}
                </View>
            </View>
        </>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginHorizontal: 20
    },

    titleText: {
        fontSize: 24,
        fontWeight: '300'
    },
    bottomContainer: {
        flex: 3,
        paddingBottom: 100
    },
    breakline: {
        width: 24,
        height: 1,
        backgroundColor: '#000000',
        marginVertical: 17
    },
    text: {
        fontSize: 18,
        paddingBottom: 10
    },
    hiddenPasswordFields: {
        gap: 10,
        paddingTop: 10
    },
    opacityZero: {
        opacity: 0
    },
    opacityFull: {
        opacity: 1
    },
    errorMessage: {
        fontSize: 14,
        color: '#ff0033',
        fontWeight: '400',
        marginLeft: 10,
        marginTop: 10
    },
    footer: { color: '#02677D', fontSize: 16, paddingVertical: 10 }
});

export default ForgetPasswordPage;
