//@ts-nocheck
import React, { useEffect } from 'react';
import { Alert, Image, TouchableOpacity, View } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import { IconMoney2, IconQuestion } from '../../assets/svgs';
import { MText } from '../../components/MText';
import { formatMoney } from '../../utils';
import {
  Icon1,
  Icon10,
  Icon11,
  Icon12,
  Icon2,
  Icon3,
  Icon4,
  Icon5,
  Icon7,
  Icon8,
  Icon9,
  IconSuccess,
} from '../../assets/v3';
import { ScreenNames } from '../../navigation';
import {
  CheckBox,
  CheckBoxActive,
  Close2Icon,
  IconCheck,
  Info,
} from '../../assets/icons';
import Modal from 'react-native-modal';
import { Api } from '../../services/api';

interface IProps {
  item?: any;
  navigation?: any;
  callback: () => void;
}
export default function ItemMotoBikeLoan({
  item,
  navigation,
  callback,
}: IProps) {
  const [showModal, setShowModal] = React.useState(false);
  const [showPolicy, setShowPolicy] = React.useState(false);
  const [check, setCheck] = React.useState(false);
  const [showModal2, setShowModal2] = React.useState(false);
  const [isLoading, setIsLoading] = React.useState(false);

  const confirm = async () => {
    try {
      setIsLoading(true);
      const response = await Api.getInstance().confirmF88({
        loanBriefId: item?.id,
      });
      if (response.kind === 'ok' && response.data?.meta?.errorCode === 200) {
        setShowPolicy(false);
        callback();
      } else {
        Alert.alert(
          'Thông báo',
          response?.data?.meta?.errorMessage ||
            'Có lỗi xảy ra, vui lòng thử lại sau!'
        );
      }
    } catch (error) {
      Alert.alert('Thông báo', 'Có lỗi xảy ra, vui lòng thử lại sau');
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    if (item?.step === 4) {
      setTimeout(() => {
        setShowPolicy(true);
      }, 300);
    } else if (item?.step === 5) {
      setTimeout(() => {
        setShowModal2(true);
      }, 300);
    }
  }, [item]);

  return (
    <View>
      <View
        style={{
          backgroundColor: '#FFFFFF',
          paddingHorizontal: 16,
          marginBottom: 16,
          borderRadius: 8,
          borderWidth: 0.5,
          borderColor: '#E0E0E0',
        }}
      >
        <LinearGradient
          colors={['#FF8E4F', '#EF592E']}
          style={{
            borderTopLeftRadius: 8,
            borderTopRightRadius: 8,
            marginHorizontal: -16,
          }}
        >
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
              paddingHorizontal: 16,
              paddingVertical: 8,
            }}
          >
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                gap: 8,
              }}
            >
              <IconMoney2 />
              <MText
                style={{
                  fontSize: 12,
                  color: 'white',
                }}
              >
                HD-{item?.id}
              </MText>
            </View>
            <MText
              style={{
                fontSize: 12,
                color: 'white',
                fontWeight: 'bold',
              }}
            >
              {formatMoney(item?.loanAmount)}đ
            </MText>
          </View>
        </LinearGradient>
        <View
          style={{
            flexDirection: 'row',
            paddingVertical: 16,
            alignItems: 'center',
            gap: 16,
          }}
        >
          <TouchableOpacity
            disabled={item?.step > 1 ? true : false}
            onPress={() => {
              if (item?.step === 0) {
                navigation.push(ScreenNames.OCR, {
                  loan: item,
                  front: true,
                });
              } else {
                navigation.push(ScreenNames.InfoLoanMotobike, {
                  loan: item,
                });
              }
            }}
            style={{
              backgroundColor:
                item?.step === 0 || item?.step === 1 ? '#FFF3E3' : '#ECFFE8',
              borderRadius: 8,
              paddingVertical: 8,
              paddingHorizontal: 12,
              flex: 1,
              borderWidth: 1,
              borderColor:
                item?.step === 0 || item?.step === 1 ? '#FFF3E3' : '#B1EB95',
            }}
          >
            <LinearGradient
              colors={
                item?.step === 0 || item?.step === 1
                  ? ['#FF8E4F', '#EF592E']
                  : ['#28A745', '#28A745']
              }
              style={{
                paddingVertical: 2,
                borderRadius: 40,
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'center',
                width: 50,
              }}
            >
              <MText style={{ fontSize: 8, color: 'white' }}>Bước 1</MText>
            </LinearGradient>
            <View
              style={{
                marginTop: 8,
                flexDirection: 'row',
                alignItems: 'center',
                gap: 4,
              }}
            >
              {item?.step === 0 || item?.step === 1 ? (
                <Icon3 />
              ) : (
                <IconSuccess />
              )}
              <MText
                style={{
                  fontSize: 10,
                }}
              >
                Thông tin cá nhân
              </MText>
            </View>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => {
              if (item?.step === 2) {
                navigation.push(ScreenNames.VehicleCamera, {
                  loan: item,
                  front: true,
                });
              } else {
                navigation.push(ScreenNames.ReviewLoanMotobike, {
                  loan: item,
                });
              }
            }}
            disabled={item?.step === 2 || item?.step === 3 ? false : true}
            style={{
              backgroundColor:
                item?.step < 2
                  ? '#FFFFFF'
                  : item?.step === 2 || item?.step === 3
                  ? '#FFF3E3'
                  : '#ECFFE8',
              borderRadius: 8,
              paddingVertical: 8,
              paddingHorizontal: 12,
              flex: 1,
              borderWidth: 1,
              borderColor:
                item?.step < 2
                  ? '#F2F2F7'
                  : item?.step === 2 || item?.step === 3
                  ? '#FFF3E3'
                  : '#B1EB95',
            }}
          >
            <LinearGradient
              colors={
                item?.step < 2
                  ? ['#C7C7CC', '#C7C7CC']
                  : item?.step === 2 || item?.step === 3
                  ? ['#FF8E4F', '#EF592E']
                  : ['#28A745', '#28A745']
              }
              style={{
                paddingVertical: 2,
                borderRadius: 40,
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'center',
                width: 50,
              }}
            >
              <MText style={{ fontSize: 8, color: 'white' }}>Bước 2</MText>
            </LinearGradient>
            <View
              style={{
                marginTop: 8,
                flexDirection: 'row',
                alignItems: 'center',
                gap: 4,
              }}
            >
              {item?.step < 2 ? (
                <Icon11 />
              ) : item?.step === 2 || item?.step === 3 ? (
                <Icon12 />
              ) : (
                <IconSuccess />
              )}
              <MText
                style={{
                  fontSize: 10,
                }}
              >
                Thông tin xe máy
              </MText>
            </View>
          </TouchableOpacity>
        </View>

        <View
          style={{
            backgroundColor: '#FFF3E9',
            flexDirection: 'row',
            alignItems: 'center',
            gap: 4,
            borderRadius: 4,
            paddingHorizontal: 8,
            paddingVertical: 10,
          }}
        >
          <IconQuestion />
          <MText
            style={{
              fontSize: 10,
              flex: 1,
            }}
          >
            Hướng dẫn các bước hoàn thiện đơn vay
          </MText>
          <TouchableOpacity onPress={() => setShowModal(true)}>
            <MText
              style={{
                fontSize: 10,
                color: '#EF592E',
                textDecorationLine: 'underline',
              }}
            >
              Xem thêm
            </MText>
          </TouchableOpacity>
        </View>
        <View
          style={{
            flexDirection: 'row',
            paddingBottom: 16,
            marginTop: 16,
          }}
        >
          <View style={{ flex: 1, paddingRight: 24 }}>
            <MText
              style={{
                color: '#999999',
                fontSize: 12,
              }}
            >
              Trạng thái
            </MText>
            <MText
              style={{
                fontSize: 12,
                fontWeight: 'bold',
              }}
            >
              {item?.step <= 1
                ? 'Chờ cập nhật thông tin cá nhân'
                : item?.step === 2 || item?.step === 3
                ? `Chờ cập nhật thông tin xe máy`
                : 'Đơn vay đang chờ phê duyệt'}
            </MText>
          </View>
          {item?.step <= 1 ? (
            <TouchableOpacity
              onPress={() => {
                if (item?.step === 0) {
                  navigation.push(ScreenNames.OCR, {
                    loan: item,
                    front: true,
                  });
                } else {
                  navigation.push(ScreenNames.InfoLoanMotobike, {
                    loan: item,
                  });
                }
              }}
            >
              <LinearGradient
                colors={['#FF8E4F', '#EF592E']}
                style={{
                  height: 30,
                  alignItems: 'center',
                  justifyContent: 'center',
                  borderRadius: 24,
                  paddingHorizontal: 10,
                }}
              >
                <MText
                  style={{
                    color: 'white',
                    fontSize: 12,
                  }}
                >
                  Cập nhật
                </MText>
              </LinearGradient>
            </TouchableOpacity>
          ) : item?.step === 2 || item?.step === 3 ? (
            <TouchableOpacity
              onPress={() => {
                if (item?.step === 2) {
                  navigation.push(ScreenNames.VehicleCamera, {
                    loan: item,
                    front: true,
                  });
                } else {
                  navigation.push(ScreenNames.ReviewLoanMotobike, {
                    loan: item,
                  });
                }
              }}
            >
              <LinearGradient
                colors={['#FF8E4F', '#EF592E']}
                style={{
                  height: 30,
                  alignItems: 'center',
                  justifyContent: 'center',
                  borderRadius: 24,
                  paddingHorizontal: 10,
                }}
              >
                <MText
                  style={{
                    color: 'white',
                    fontSize: 12,
                  }}
                >
                  Cập nhật
                </MText>
              </LinearGradient>
            </TouchableOpacity>
          ) : (
            <></>
          )}
        </View>
        {item?.step !== 5 ? (
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              gap: 8,
              backgroundColor: '#FFF2F2',
              marginHorizontal: -16,
              paddingVertical: 10,
              borderBottomRightRadius: 8,
              borderBottomLeftRadius: 8,
              paddingHorizontal: 10,
            }}
          >
            <Info />
            <MText
              style={[
                {
                  fontSize: 10,
                  color: '#E40010',
                  flex: 1,
                },
              ]}
            >
              {item?.step <= 1
                ? 'Vui lòng cập nhật thông tin cá nhân để được giải ngân sớm nhất!'
                : item?.step === 2 || item?.step === 3
                ? `Vui lòng cập nhật thông tin xe để được giải ngân sớm nhất!`
                : 'Đơn vay đang chờ phê duyệt'}
            </MText>
          </View>
        ) : (
          <></>
        )}
      </View>

      <Modal isVisible={showPolicy} backdropColor="#000" backdropOpacity={0.5}>
        <View
          style={{
            borderRadius: 12,
            backgroundColor: 'white',
            padding: 16,
          }}
        >
          <View
            style={{
              flexDirection: 'row-reverse',
            }}
          >
            <TouchableOpacity
              onPress={() => setShowPolicy(false)}
              style={{
                width: 30,
                height: 30,
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <Close2Icon />
            </TouchableOpacity>
          </View>
          <MText
            style={{ fontSize: 16, fontWeight: 'bold', textAlign: 'center' }}
          >
            Tiếp tục xử lý đơn vay của bạn
          </MText>
          <View
            style={{
              marginTop: 16,
              alignItems: 'center',
            }}
          >
            <Image
              source={require('../../assets/tts/f88.png')}
              style={{
                height: 60,
                resizeMode: 'contain',
              }}
            />
          </View>
          <MText
            style={{ color: '#828282', textAlign: 'center', marginTop: 16 }}
          >
            Tima sẽ chuyển thông tin đơn vay của bạn sang đối tác Công ty Cổ
            phần Kinh doanh F88 để hoàn thiện thủ tục giải ngân. Khi chọn “Đồng
            ý & Tiếp tục”, bạn xác nhận đồng ý cho việc thu thập, sử dụng và
            chia sẻ thông tin theo quy định về bảo vệ dữ liệu cá nhân.
          </MText>
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              marginTop: 24,
              gap: 8,
            }}
          >
            <TouchableOpacity
              onPress={() => {
                setCheck(!check);
              }}
            >
              {check ? <CheckBoxActive /> : <CheckBox />}
            </TouchableOpacity>
            <MText>
              Tôi đồng ý với{' '}
              <MText
                style={{ color: '#2F80ED' }}
                onPress={() => {
                  setShowPolicy(false);
                  navigation.navigate(ScreenNames.PolicyF88, { item });
                }}
              >
                điều kiện và điều khoản
              </MText>
            </MText>
          </View>
          <View>
            <TouchableOpacity
              disabled={check || isLoading ? false : true}
              onPress={() => {
                confirm();
              }}
            >
              <LinearGradient
                colors={check ? ['#FF8E4F', '#EF592E'] : ['#E0E0E0', '#E0E0E0']}
                style={{
                  height: 40,
                  alignItems: 'center',
                  justifyContent: 'center',
                  borderRadius: 24,
                  paddingHorizontal: 10,
                  marginTop: 24,
                }}
              >
                <MText
                  style={{
                    color: 'white',
                    fontWeight: 'bold',
                  }}
                >
                  Đồng ý & Tiếp tục
                </MText>
              </LinearGradient>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>

      <Modal isVisible={showModal2} backdropColor="#000" backdropOpacity={0.5}>
        <View
          style={{
            borderRadius: 12,
            backgroundColor: 'white',
          }}
        >
          <View
            style={{
              flexDirection: 'row-reverse',
            }}
          >
            <TouchableOpacity
              onPress={() => setShowModal2(false)}
              style={{
                width: 30,
                height: 30,
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <Close2Icon />
            </TouchableOpacity>
          </View>
          <Image
            source={require('../../assets/img/Frame1000011990.png')}
            style={{
              height: 230,
              resizeMode: 'contain',
              width: '100%',
            }}
          />
          <View
            style={{
              paddingHorizontal: 24,
              marginTop: 24,
              flexDirection: 'column',
              gap: 8,
              alignItems: 'center',
            }}
          >
            <MText
              style={{
                fontSize: 16,
                fontWeight: 'bold',
                textAlign: 'center',
              }}
            >
              Đơn vay đang chờ phê duyệt
            </MText>
            <MText
              style={{
                fontSize: 14,
                textAlign: 'center',
                color: '#828282',
              }}
            >
              Vui lòng chờ ít phút sau đó thực hiện eKYC để hoàn thiện khoản
              vay!
            </MText>
            <TouchableOpacity
              onPress={() => setShowModal2(false)}
              style={{
                borderWidth: 1,
                borderColor: '#EF592E',
                borderRadius: 24,
                height: 40,
                alignItems: 'center',
                justifyContent: 'center',
                paddingHorizontal: 50,
                marginBottom: 24,
                marginTop: 16,
              }}
            >
              <MText
                style={{
                  color: '#EF592E',
                }}
              >
                Đã hiểu
              </MText>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>

      <Modal
        isVisible={showModal}
        backdropColor="#000"
        backdropOpacity={0.5}
        onBackdropPress={() => setShowModal(false)}
      >
        <View
          style={{
            borderRadius: 12,
            backgroundColor: 'white',
            padding: 16,
          }}
        >
          <MText
            style={{
              fontSize: 16,
              fontWeight: 'bold',
              textAlign: 'center',
              marginTop: 16,
            }}
          >
            Các bước hoàn thiện khoản vay
          </MText>
          <MText
            style={{
              textAlign: 'center',
              color: '#828282',
            }}
          >
            Thực hiện theo các bước sau
          </MText>
          <View>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                gap: 8,
                marginTop: 16,
              }}
            >
              <View
                style={{
                  width: 30,
                  height: 30,
                  borderRadius: 4,
                  backgroundColor: '#FFF2F2',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <Icon3 />
              </View>
              <View>
                <MText
                  style={{ fontWeight: 'bold', fontSize: 8, color: '#EF592E' }}
                >
                  Bước 1
                </MText>
                <MText style={{ fontWeight: 'bold', fontSize: 10 }}>
                  THÔNG TIN CÁ NHÂN
                </MText>
              </View>
            </View>
            <MText style={{ fontSize: 10, marginTop: 5 }}>
              Thực hiện OCR giấy tờ CCCD/CC và chụp 1 ảnh chân dung
            </MText>
          </View>
          <View>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                gap: 8,
                marginTop: 16,
              }}
            >
              <View
                style={{
                  width: 30,
                  height: 30,
                  borderRadius: 4,
                  backgroundColor: '#FFF2F2',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <Icon2 />
              </View>
              <View>
                <MText
                  style={{ fontWeight: 'bold', fontSize: 8, color: '#EF592E' }}
                >
                  Bước 2
                </MText>
                <MText style={{ fontWeight: 'bold', fontSize: 10 }}>
                  THÔNG TIN XE MÁY
                </MText>
              </View>
            </View>
            <MText style={{ fontSize: 10, marginTop: 5 }}>
              Chụp 2 mặt hình ảnh Đăng ký xe
            </MText>
          </View>

          <View>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                gap: 8,
                marginTop: 16,
              }}
            >
              <View
                style={{
                  width: 30,
                  height: 30,
                  borderRadius: 4,
                  backgroundColor: '#FFF2F2',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <Icon2 />
              </View>
              <View>
                <MText
                  style={{ fontWeight: 'bold', fontSize: 8, color: '#EF592E' }}
                >
                  Bước 3
                </MText>
                <MText style={{ fontWeight: 'bold', fontSize: 10 }}>
                  NỘP HỒ SƠ VAY
                </MText>
              </View>
            </View>
            <MText style={{ fontSize: 10, marginTop: 5 }}>
              Xác nhận T&C{' '}
              <MText style={{ fontSize: 10, color: '#EF592E' }}>
                (Điều kiện & điều khoản)
              </MText>{' '}
              và nộp hồ sơ vay
            </MText>
          </View>

          <View
            style={{
              backgroundColor: '#FFF8F2',
              padding: 12,
              borderRadius: 8,
              marginTop: 16,
            }}
          >
            <MText style={{ fontSize: 12, fontWeight: 'bold' }}>
              Ý nghĩa biểu tượng
            </MText>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                gap: 16,
                marginTop: 8,
              }}
            >
              <MText style={{ fontSize: 10, width: '35%' }}>
                Đang cần thực hiện
              </MText>
              <View
                style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}
              >
                <Icon2 />
                <Icon3 />
                <Icon4 />
                <Icon5 />
              </View>
            </View>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                gap: 16,
                marginTop: 8,
              }}
            >
              <MText style={{ fontSize: 10, width: '35%' }}>
                Chưa thể thực hiện
              </MText>
              <View
                style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}
              >
                <Icon7 />
                <Icon8 />
                <Icon9 />
                <Icon10 />
              </View>
            </View>
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                gap: 16,
                marginTop: 8,
              }}
            >
              <MText style={{ fontSize: 10, width: '35%' }}>
                Đã hoàn thành
              </MText>
              <View
                style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}
              >
                <IconSuccess />
              </View>
            </View>
          </View>

          <TouchableOpacity
            style={{ position: 'absolute', top: 16, right: 16 }}
            onPress={() => setShowModal(false)}
          >
            <Close2Icon />
          </TouchableOpacity>
        </View>
      </Modal>
    </View>
  );
}
