//@ts-nocheck
import React, { useEffect, useState } from 'react';
import {
  Alert,
  Image,
  ImageStyle,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
  View,
} from 'react-native';
import { commonStyles } from '../CommonStyles';
import { IconBackWhite } from '../../assets/icons';
import { MText } from '../../components/MText';
import {
  CodeField,
  Cursor,
  useBlurOnFulfill,
  useClearByFocusCell,
} from 'react-native-confirmation-code-field';
import { Api } from '../../services/api';
import Loading from '../../components/Loading';
import { ScreenNames } from '../../navigation';
import { CommonActions, useNavigation } from '@react-navigation/native';
import appStore from '../../AppStore';
import { logEvent, logEventFb } from '../../utils';

const logoView: ImageStyle = {
  position: 'absolute',
  width: '100%',
  height: '100%',
  resizeMode: 'cover',
};

export default function TTSOTP({ route }: any) {
  const navigation = useNavigation();
  const loan = route?.params?.loan;
  const [description, setDescription] = useState(
    'Vui lòng click “Gửi mã OTP” để nhận mã xác thực được gửi vào số điện thoại của bạn'
  );
  const [timeLeft, setTimeLeft] = useState(300);
  const [isResendEnabled, setIsResendEnabled] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [isCounting, setIsCounting] = useState(false);
  const CELL_COUNT = 6;
  const [value, setValue] = useState('');
  const ref = useBlurOnFulfill({ value, cellCount: CELL_COUNT });

  const [props, getCellOnLayoutHandler] = useClearByFocusCell({
    value,
    setValue,
  });

  useEffect(() => {
    let interval: NodeJS.Timeout;
    if (isCounting && timeLeft > 0) {
      interval = setInterval(() => {
        setTimeLeft((prev) => prev - 1);
      }, 1000);
    } else if (timeLeft === 0) {
      setIsCounting(false);
      setIsResendEnabled(true);
    }
    return () => clearInterval(interval);
  }, [isCounting, timeLeft]);

  const sendOtp = async () => {
    setIsLoading(true);
    const response = await Api.getInstance().signContractForBorrower({
      loanBriefId: loan.id,
    });

    setIsLoading(false);
    if (response.kind === 'ok' && response.data.meta.errorCode === 200) {
      setTimeLeft(300);
      setDescription(
        'Mã xác thực OTP của bạn sẽ được gửi vào số điện thoại của bạn, vui lòng nhập mã để hoàn thành ký hợp đồng.'
      );
      setIsCounting(true);
    } else {
      Alert.alert('Thông báo', response.data.meta.errorMessage);
      setValue('');
    }
  };

  const resendOtp = async () => {
    setIsLoading(true);
    const response = await Api.getInstance().eSignSendOTP({
      customerId: loan?.id,
    });
    setIsLoading(false);
    if (response.kind === 'ok' && response.data.meta.errorCode === 200) {
      setDescription(
        'Mã xác thực OTP đã được gửi lại vào số điện thoại của bạn, vui lòng nhập mã để hoàn thành ký hợp đồng.'
      );
      setTimeLeft(300);
      setIsCounting(true);
      setIsResendEnabled(false);
      setValue('');
    } else {
      Alert.alert('Thông báo', response.data.meta.errorMessage, [
        { text: 'Đồng ý' },
      ]);
      setValue('');
    }
  };

  const onSubmit = async () => {
    if (value.length === CELL_COUNT) {
      setIsLoading(true);
      const response = await Api.getInstance().confirmSignContractForBorrower({
        loanBriefId: loan.id,
        otp: value,
      });
      setIsLoading(false);
      if (response.kind === 'ok' && response.data.meta.errorCode === 200) {
        Api.getInstance().verifySign({
          loanBriefId: loan?.id,
        });
        await logEvent('kyhopdong_completed', {
          event: 'kyhopdong_completed',
          createdAt: new Date(),
          deviceId: appStore.deviceId,
          loanId: String(loan?.id),
          utmSource: loan?.utmSource,
        });
        logEventFb('kyhopdong_completed');
        Alert.alert('Thông báo', 'Ký hợp đồng thành công', [
          {
            text: 'Đồng ý',
            onPress: () => {
              navigation.dispatch(
                CommonActions.reset({
                  index: 1,
                  routes: [
                    {
                      name: ScreenNames.Main,
                    },
                  ],
                })
              );
            },
          },
        ]);
      } else {
        Alert.alert('Thông báo', response.data.meta.errorMessage, [
          { text: 'Đồng ý' },
        ]);
        setValue('');
      }
    } else {
      Alert.alert('Thông báo', 'Vui lòng nhập đầy đủ mã OTP gồm 6 chữ số.');
      setValue('');
    }
  };

  const formatTime = (seconds: number) => {
    const m = Math.floor(seconds / 60)
      .toString()
      .padStart(2, '0');
    const s = (seconds % 60).toString().padStart(2, '0');
    return `${m}:${s}`;
  };

  return (
    <View style={commonStyles.fill}>
      <Image source={require('../../assets/tts/otp.png')} style={logoView} />
      <SafeAreaView style={commonStyles.fill}>
        <View
          style={{
            paddingVertical: 16,
          }}
        >
          <TouchableOpacity
            onPress={() => {
              navigation.goBack();
            }}
            style={{
              position: 'absolute',
              left: 10,
              top: 16,
              width: 25,
              height: 25,
              zIndex: 1000,
              alignItems: 'center',
            }}
          >
            <IconBackWhite />
          </TouchableOpacity>
          <MText
            style={{
              fontSize: 16,
              color: '#FDFDFD',
              fontWeight: 'bold',
              textAlign: 'center',
            }}
          >
            Xác thực OTP
          </MText>
        </View>
        <ScrollView>
          <MText
            style={{
              color: '#FFFFFF',
              textAlign: 'center',
              marginTop: 16,
              paddingHorizontal: 24,
            }}
          >
            {description}
          </MText>
          <CodeField
            ref={ref}
            {...props}
            value={value}
            onChangeText={setValue}
            cellCount={CELL_COUNT}
            rootStyle={styles.codeFieldRoot}
            keyboardType="number-pad"
            textContentType="oneTimeCode"
            renderCell={({ index, symbol, isFocused }) => (
              <View
                key={index}
                style={[styles.cell, isFocused && styles.focusCell]}
                onLayout={getCellOnLayoutHandler(index)}
              >
                <MText style={styles.cellText}>
                  {symbol || (isFocused ? <Cursor /> : null)}
                </MText>
              </View>
            )}
          />
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'center',
              marginTop: 40,
            }}
          >
            {isCounting ? (
              <TouchableOpacity
                onPress={() => {
                  onSubmit();
                }}
                style={{
                  backgroundColor: 'white',
                  borderRadius: 4,
                  height: 40,
                  alignItems: 'center',
                  paddingHorizontal: 20,
                  justifyContent: 'center',
                }}
              >
                <MText
                  style={{
                    color: 'rgba(239, 89, 46, 1)',
                    fontSize: 16,
                  }}
                >
                  Xác nhận
                </MText>
              </TouchableOpacity>
            ) : isResendEnabled ? (
              <TouchableOpacity
                onPress={() => {
                  resendOtp();
                }}
                style={{
                  backgroundColor: 'white',
                  borderRadius: 4,
                  height: 40,
                  alignItems: 'center',
                  paddingHorizontal: 20,
                  justifyContent: 'center',
                }}
              >
                <MText
                  style={{
                    color: 'rgba(239, 89, 46, 1)',
                    fontSize: 16,
                  }}
                >
                  Gửi lại mã OTP
                </MText>
              </TouchableOpacity>
            ) : (
              <TouchableOpacity
                onPress={() => {
                  sendOtp();
                }}
                style={{
                  backgroundColor: 'white',
                  borderRadius: 4,
                  height: 40,
                  alignItems: 'center',
                  paddingHorizontal: 20,
                  justifyContent: 'center',
                }}
              >
                <MText
                  style={{
                    color: 'rgba(239, 89, 46, 1)',
                    fontSize: 16,
                  }}
                >
                  Gửi mã OTP
                </MText>
              </TouchableOpacity>
            )}
          </View>
          {isCounting && (
            <MText
              style={{
                textAlign: 'center',
                marginTop: 16,
                color: '#FFFFFF',
                fontSize: 14,
              }}
            >
              Gửi lại mã OTP sau{' '}
              <MText
                style={{
                  color: '#FFFFFF',
                  fontWeight: 'bold',
                }}
              >
                ({formatTime(timeLeft)})
              </MText>
            </MText>
          )}
        </ScrollView>
      </SafeAreaView>
      <Loading isLoading={isLoading} />
    </View>
  );
}

const styles = StyleSheet.create({
  codeFieldRoot: {
    width: '85%',
    alignSelf: 'center',
    marginTop: 24,
  },

  cell: {
    width: 50,
    height: 50,
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(253, 253, 253, 0.3)',
  },
  focusCell: {
    // backgroundColor: '#FFFFFF',
    // borderRadius: 8,
    // borderWidth: 1,
    // borderColor: '#EF592E',
  },

  cellText: {
    fontSize: 24,
    textAlign: 'center',
    color: '#FFFFFF',
    fontWeight: 'bold',
  },
});
