import { Keyboard, KeyboardAvoidingView, Platform, ScrollView, Text, View } from "react-native"
import { kycVerificationStyle } from "./kycVerification.style";
import { useTheme } from "@react-navigation/native";
import { useTranslation } from "react-i18next";
import { useContext, useEffect, useState } from "react";
import File from '../../assets/svg/attach-file.svg';
import CustomDocumentPicker from "../components/CustomTextInput/CustomDocumentPicker/CustomDocumentPicker";
import { handleToaster } from "../../utils/CustomAlert/handleAlert";
import CustomButton from "../components/Buttons/CustomButton/CustomButton";
import { getInfo, postInfoUsingFormData } from "../../features/auth/login/loginApi";
import { useDispatch, useSelector } from "react-redux";
import { NetworkContext } from "../../utils/Network/NetworkProvider";
import config from "../../../config";
import { identityVerify } from "../../features/slices/kycVerify/getIdentityVerification";
import useFileDownload from "../../utils/FileDownload/useFileDownload";
import { addressVerify } from "../../features/slices/kycVerify/getAddressVerification";
import Loader from "../../utils/Loader/Loader";
import { rs } from "../../utils/styles/responsiveSize";
import { convertString } from "../../utils/ConvertString/convertString";
import { getAllPreference } from "../../features/slices/preferenceSlice/preferenceSlice";
import DownloadFileButton from "./DownloadFileButton";
import { useDocumentUploader } from "../components/CustomTextInput/DocumentUploader/useDocumentUploader";

const errorTextAddress = {
    addressFile: false,
};

const AddressVerification = () => {
    const { colors } = useTheme();
    const { t: trans } = useTranslation();
    const {
        user: { token },
    } = useSelector(state => state.loginUserReducer);
    const { preferenceData } = useSelector(state => state.systemPreference);
    const { isConnected } = useContext(NetworkContext);
    const { addressVerifyData, loading: addressVerifyLoading } = useSelector(state => state.getAddressVerify);
    const { identityVerifyData } = useSelector(state => state.getIdentityVerify);
    const addressVerified = addressVerifyData?.verification?.status?.toLowerCase() == "approved"
    const identityVerified = identityVerifyData?.verification?.status?.toLowerCase() == "approved"
    const styles = kycVerificationStyle(colors, identityVerified, addressVerified);
    const [loading, setLoading] = useState(false);
    const [downloadLoading, setDownloadLoading] = useState(false);
    const [errorAddress, setErrorAddress] = useState(errorTextAddress);
    const [addressFile, setAddressFile] = useState('');
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(addressVerify({ token }))
    }, []);

    // for error handle 
    const handleErrorAddress = () => {
        const errorAddressFile = addressFile === '' ? true : false;
        setErrorAddress({
            ...errorAddress,
            addressFile: errorAddressFile,
        });
    };

    const handleDocumentUpload = useDocumentUploader({
        maxFileSizeMB: preferenceData?.file_size,
        handleToaster,
        trans,
        colors,
    });
    const handleFileUpload = () => handleDocumentUpload(setAddressFile);

    const HandleProceedAddress = async () => {
        if (isConnected && addressFile) {
            // CRITICAL: Check if provider data is loaded (prevents race condition)
            if (!addressVerifyData?.provider?.id) {
                handleToaster(trans('Please wait, loading verification data...'), 'warning', colors);
                return;
            }
            try {
                setLoading(true);
                const URL = `${config.BASE_URL_VERSION}/process-address-verification`;
                const formData = new FormData();
                formData.append('verification_type', "address");
                formData.append('verification_file', addressFile);
                formData.append('provider_id', addressVerifyData?.provider?.id);
                if (addressVerifyData?.verification?.fileid) {
                    formData.append('existing_file_id', addressVerifyData?.verification?.fileid);
                }
                const res = await postInfoUsingFormData(formData, URL, token, 'POST');
                const { status } = res?.response || {};
                if (status?.code === 200) {
                    handleToaster(trans('Successfully uploaded information!'), 'success', colors);
                    dispatch(addressVerify({ token }));
                    dispatch(identityVerify({ token }));
                    dispatch(getAllPreference({token}));
                    setAddressFile('');
                } else {
                    switch (status?.code) {
                        case 403:
                            return handleToaster(trans('You are not permitted for this transaction!'), 'error', colors);
                        case 400:
                            return handleToaster(trans('Your account has been suspended!'), 'error', colors);
                        default:
                            return handleToaster(status?.message || trans('Verification failed!'), 'error', colors);
                    }
                }
            } catch (error) {
                handleToaster(trans('Something went wrong, please try again'), 'error', colors);
            } finally {
                setLoading(false);
                setErrorAddress(errorTextAddress);
            }
        } else {
            if (isConnected) handleErrorAddress();
        }
    };


    const [checkPermission] = useFileDownload();

    const handleDownloadAddress = async (fileName, setLoading) => {
        setLoading(true);
        checkPermission(fileName, setLoading);
    }


    return (
        <>
            <KeyboardAvoidingView
                style={styles.onKeyboard}
                behavior={Platform.OS === 'ios' ? 'padding' : ''}>
                <ScrollView
                    showsVerticalScrollIndicator={false}
                    style={styles.scroll_view}
                    keyboardShouldPersistTaps={'always'}>
                    <View style={[styles.contentWidth, styles.mt_24]}>
                        <Text style={styles.verifyType}>
                            {trans('Attach Address Proof') + ' '}
                            {addressVerifyData?.verification?.status && <Text style={styles.addressStatusText}>{trans(`(${addressVerifyData?.verification?.status})`)}</Text>}
                        </Text>
                        <View style={styles.mb_16}>
                            <CustomDocumentPicker
                                onPress={handleFileUpload}
                                icon={<File fill={colors.filePrimary} />}
                                value={addressFile && [addressFile]}
                                info={trans("Upload your documents (Max: {{x}} mb)", { x: preferenceData?.file_size })}
                                isError={(errorAddress.addressFile && !addressFile)}
                                error={errorAddress.addressFile && !addressFile
                                    ? trans('This field is required.')
                                    : ''
                                }
                                title={trans('Choose file')}
                            />
                        </View>
                        {addressVerifyData?.verification?.verification_file &&
                            <DownloadFileButton
                                    label={convertString(addressVerifyData?.verification?.verification_type)}
                                    loading={downloadLoading}
                                    onDownloadPress={() =>
                                        handleDownloadAddress(
                                            addressVerifyData?.verification?.verification_file,
                                            setDownloadLoading
                                        )
                                    }
                                />
                            }
                    </View>

                </ScrollView>
            </KeyboardAvoidingView>

            <View style={styles.proceedWidth}>
                <CustomButton
                    onPress={!loading && !addressVerifyLoading ? HandleProceedAddress : null}
                    disabled={loading || addressVerifyLoading}
                    title={
                        !loading ? (
                            trans('Address Verify')
                        ) : (
                            <View>
                                <Loader
                                    source={require('../../assets/lottie/loader.json')}
                                    size={{ width: rs(65), height: rs(55) }}
                                    color={colors.white}
                                />
                            </View>
                        )
                    }
                    bgColor={colors.cornflowerBlue}
                    style={styles.btnWidth}
                    color={colors.white}
                />
            </View>
        </>
    )
}

export default AddressVerification