//@ts-nocheck
import React, { useEffect } from 'react';
import { Alert, ScrollView, TextStyle, View, ViewStyle } from 'react-native';
import { commonStyles } from '../CommonStyles';
import MHeader from '../../components/MHeader';
import { MText } from '../../components/MText';
import { CommonActions, useNavigation } from '@react-navigation/native';
import { formatDDMMYYY, formatMoney } from '../../utils';
import { IconNotify } from '../../assets/svgs';
import MButton from '../../components/MButton';
import LinearGradient from 'react-native-linear-gradient';
import { ScreenNames } from '../../navigation';
import { Api } from '../../services/api';
import Loading from '../../components/Loading';

export default function LoanInterestRate(props) {
  const loan = props?.route?.params?.loan;

  const navigation = useNavigation();
  const [isLoading, setIsLoading] = React.useState(false);
  const [data, setData] = React.useState(null);

  const getData = async () => {
    setIsLoading(true);
    try {
      const response = await Api.getInstance().getPaymentPlan(loan?.id);
      setIsLoading(false);
      if (response.kind === 'ok') {
        if (response.data?.meta?.errorCode === 200) {
          setData(response.data?.data);
        } else {
          Alert.alert(
            'Thông báo',
            response.data?.meta?.message ||
              'Có lỗi xảy ra, vui lòng thử lại sau'
          );
        }
      } else {
        Alert.alert('Thông báo', 'Có lỗi xảy ra, vui lòng thử lại sau');
      }
    } catch (error) {
      console.error('Error fetching data:', error);
      setIsLoading(false);
      Alert.alert('Thông báo', 'Có lỗi xảy ra, vui lòng thử lại sau');
    }
  };

  useEffect(() => {
    getData();
  }, []);

  const acceptLoan = async () => {
    if (loan?.step === 5) {
      setIsLoading(true);
      try {
        const response = await Api.getInstance().changePipeline({
          LoanBriefId: loan?.id,
          TypeId: 1,
        });
        setIsLoading(false);
        if (response.kind === 'ok') {
          if (response.data?.meta?.errorCode === 200) {
            navigation.push(ScreenNames.LivenessV2, { loan });
          } else {
            Alert.alert('Thông báo', response.data?.meta?.errorMessage);
          }
        } else {
          Alert.alert('Thông báo', 'Có lỗi xảy ra. Vui lòng thử lại sau');
        }
      } catch (error) {
        setIsLoading(false);
      }
    } else {
      navigation.push(ScreenNames.LivenessV2, { loan });
    }
  };

  return (
    <View style={commonStyles.fill}>
      <MHeader title="Vay trực tuyến 24/7" />
      <View style={commonStyles.fill}>
        <View style={$h} />
        <View style={$bg}>
          <MText style={$title}>Bảng biểu lãi phí đơn vay</MText>
          <ScrollView>
            <View
              style={{
                borderWidth: 1,
                borderColor: '#FF8E4F',
                borderRadius: 8,
                paddingHorizontal: 16,
                paddingVertical: 12,
                marginHorizontal: 16,
              }}
            >
              <View
                style={{
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                }}
              >
                <MText
                  style={{
                    fontSize: 12,
                    color: '#333333',
                  }}
                >
                  Mã HĐ giải ngân
                </MText>
                <MText
                  style={{
                    fontSize: 12,
                    color: '#333333',
                    fontWeight: 'bold',
                  }}
                >
                  HD-{data?.loanBriefId}
                </MText>
              </View>
              <MText
                ellipsizeMode="clip"
                numberOfLines={1}
                style={{
                  flex: 1,
                  color: '#D1D1D6',
                  textAlign: 'center',
                }}
              >
                --------------------------------------------------------------------------------------------------------
              </MText>
              <View
                style={{
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                }}
              >
                <MText
                  style={{
                    fontSize: 12,
                    color: '#333333',
                  }}
                >
                  Số tiền vay (1)+(2)
                </MText>
                <MText
                  style={{
                    fontSize: 12,
                    color: '#EF592E',
                    fontWeight: 'bold',
                  }}
                >
                  {formatMoney(data?.totalMoney)} đ
                </MText>
              </View>
              <View
                style={{
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  marginTop: 5,
                }}
              >
                <MText
                  style={{
                    fontSize: 12,
                    color: '#999999',
                    marginLeft: 24,
                  }}
                >
                  Số tiền giải ngân (1)
                </MText>
                <MText
                  style={{
                    fontSize: 12,
                    color: '#333333',
                  }}
                >
                  {formatMoney(data?.totalLoanAmount)} đ
                </MText>
              </View>
              <View
                style={{
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  marginTop: 4,
                }}
              >
                <MText
                  style={{
                    fontSize: 12,
                    color: '#999999',
                    marginLeft: 24,
                  }}
                >
                  Số tiền bảo hiểm (2)
                </MText>
                <MText
                  style={{
                    fontSize: 12,
                    color: '#333333',
                  }}
                >
                  {formatMoney(data?.totalMoneyInsurance)} đ
                </MText>
              </View>
              <MText
                ellipsizeMode="clip"
                numberOfLines={1}
                style={{
                  flex: 1,
                  color: '#D1D1D6',
                  textAlign: 'center',
                }}
              >
                --------------------------------------------------------------------------------------------------------
              </MText>
              <View
                style={{
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                }}
              >
                <MText
                  style={{
                    fontSize: 12,
                    color: '#333333',
                  }}
                >
                  Thời hạn
                </MText>
                <MText
                  style={{
                    fontSize: 12,
                    color: '#333333',
                    fontWeight: 'bold',
                  }}
                >
                  {data?.loanTime} tháng
                </MText>
              </View>
              <View
                style={{
                  flexDirection: 'row',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  marginTop: 8,
                }}
              >
                <MText
                  style={{
                    fontSize: 12,
                    color: '#333333',
                  }}
                >
                  Ngày dự kiến giải ngân
                </MText>
                <MText
                  style={{
                    fontSize: 12,
                    color: '#333333',
                    fontWeight: 'bold',
                  }}
                >
                  {formatDDMMYYY(data?.expectedDisbursementDate)}
                </MText>
              </View>
            </View>
            <View
              style={{
                backgroundColor: '#FFF3E9',
                marginTop: 16,
                flexDirection: 'row',
                paddingHorizontal: 16,
                paddingVertical: 10,
              }}
            >
              <MText
                style={{
                  fontSize: 10,
                  color: '#333333',
                  width: '25%',
                  textAlign: 'center',
                }}
              >
                Ngày thanh toán
              </MText>
              <MText
                style={{
                  fontSize: 10,
                  color: '#333333',
                  width: '25%',
                  textAlign: 'center',
                }}
              >
                Gốc trả kỳ
              </MText>
              <MText
                style={{
                  fontSize: 10,
                  color: '#333333',
                  width: '25%',
                  textAlign: 'center',
                }}
              >
                Tổng lãi phí
              </MText>
              <MText
                style={{
                  fontSize: 10,
                  color: '#333333',
                  width: '25%',
                  textAlign: 'center',
                }}
              >
                Tổng trả kỳ
              </MText>
            </View>
            {data?.listPaymentSchedule?.map((item, index) => (
              <View
                key={index}
                style={{
                  flexDirection: 'row',
                  paddingHorizontal: 16,
                  paddingVertical: 16,
                  borderBottomWidth: 1,
                  borderBottomColor: '#F0F0F0',
                }}
              >
                <MText
                  style={{
                    fontSize: 10,
                    color: '#333333',
                    width: '25%',
                    textAlign: 'center',
                  }}
                >
                  {item?.payDate}
                </MText>
                <MText
                  style={{
                    fontSize: 10,
                    color: '#333333',
                    width: '25%',
                    textAlign: 'center',
                  }}
                >
                  {formatMoney(item?.moneyOriginal)} đ
                </MText>
                <MText
                  style={{
                    fontSize: 10,
                    color: '#333333',
                    width: '25%',
                    textAlign: 'center',
                  }}
                >
                  {formatMoney(item?.totalInterest)} đ
                </MText>
                <MText
                  style={{
                    fontSize: 10,
                    color: 'rgba(239, 89, 46, 1)',
                    width: '25%',
                    textAlign: 'center',
                    fontWeight: 'bold',
                  }}
                >
                  {formatMoney(item?.totalMoneyNeedPayment)} đ
                </MText>
              </View>
            ))}

            <MText style={$des}>
              <MText style={{ fontSize: 10, color: '#E40010' }}>*</MText> Đây là
              lãi suất áp dụng cho khách hàng có điểm tín dụng tốt. Lãi suất
              thực tế sẽ hiển thị sau khi hoàn thiện vay
            </MText>
            <View
              style={{
                backgroundColor: '#FFF8F2',
                borderRadius: 8,
                paddingHorizontal: 12,
                paddingVertical: 8,
                marginHorizontal: 16,
                marginTop: 16,
                marginBottom: 24,
              }}
            >
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  gap: 5,
                }}
              >
                <IconNotify />
                <MText
                  style={{
                    color: '#EF592E',
                    fontWeight: 'bold',
                  }}
                >
                  Bước cuối cùng rồi!!!
                </MText>
              </View>
              <MText
                style={{
                  color: '#828282',
                  marginTop: 10,
                }}
              >
                Vui lòng eKYC - hoàn thiện xác thực khuôn mặt và ký hợp đồng để
                được giải ngân nhanh nhất!
              </MText>
            </View>
          </ScrollView>
          {loan?.step === 6 ? (
            <MButton
              onPress={() => {
                acceptLoan();
              }}
              style={{
                marginVertical: 24,
                marginHorizontal: 16,
              }}
            >
              <LinearGradient
                start={{ x: 1, y: 0 }}
                end={{ x: 0, y: 1 }}
                style={{
                  height: 40,
                  marginVertical: 16,
                  borderRadius: 30,
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
                colors={['#FF7A00', '#EF4123']}
              >
                <MText
                  style={{
                    color: 'white',
                    fontSize: 16,
                  }}
                >
                  Đi tới eKYC
                </MText>
              </LinearGradient>
            </MButton>
          ) : (
            <></>
          )}
        </View>
      </View>
      <Loading isLoading={isLoading} />
    </View>
  );
}

const $des: TextStyle = {
  fontSize: 10,
  color: '#828282',
  paddingHorizontal: 16,
  fontStyle: 'italic',
  marginTop: 16,
};

const $title: TextStyle = {
  fontSize: 16,
  fontWeight: 'bold',
  color: '#333333',
  textAlign: 'center',
  paddingVertical: 16,
};

const $h: ViewStyle = {
  backgroundColor: '#EF592E',
  position: 'absolute',
  height: 30,
  width: '100%',
};

const $bg: ViewStyle = {
  borderTopLeftRadius: 30,
  borderTopRightRadius: 30,
  backgroundColor: 'white',
  flex: 1,
};
