//@ts-nocheck
import React from 'react';
import {
  Image,
  Linking,
  Modal,
  SafeAreaView,
  ScrollView,
  TextStyle,
  TouchableOpacity,
  View,
} from 'react-native';
import { MText } from '../../components/MText';
import { IconHome } from '../../assets/v3';
import { useNavigation } from '@react-navigation/native';
import { ScreenNames } from '../../navigation';
import LinearGradient from 'react-native-linear-gradient';
import { Api } from '../../services/api';

export default function MySignViettel(props: any) {
  const navigation = useNavigation();
  const { url, id } = props?.route?.params || {};
  const [link, setLink] = React.useState<string>(url);
  const [loading, setLoading] = React.useState<boolean>(false);
  const [showError, setShowError] = React.useState<boolean>(false);

  const getUrl = async () => {
    try {
      setLoading(true);
      const response = await Api.getInstance().getLinkEsign(id);
      if (response.kind === 'ok' && response.data?.meta?.errorCode === 200) {
        setLink(response.data.data);
        Linking.openURL(response.data.data);
      } else {
        setShowError(true);
      }
    } catch (error) {
      console.error('Error fetching URL:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <View style={{ flex: 1, backgroundColor: '#FFFFFF' }}>
      <SafeAreaView style={{ flex: 1, backgroundColor: '#FFFFFF' }}>
        <View
          style={{
            paddingVertical: 16,
            flexDirection: 'row',
            alignItems: 'center',
            paddingHorizontal: 16,
            borderBottomWidth: 1,
            borderColor: '#F2F2F2',
          }}
        >
          <TouchableOpacity
            style={{ zIndex: 10000 }}
            onPress={() => {
              navigation.navigate(ScreenNames.Main);
            }}
          >
            <IconHome />
          </TouchableOpacity>

          <MText style={$header}>Chữ ký số</MText>
        </View>

        <ScrollView>
          <View
            style={{
              paddingHorizontal: 16,
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'space-between',
              borderBottomWidth: 1,
              borderColor: '#F2F2F2',
              paddingVertical: 10,
            }}
          >
            <MText
              style={{
                color: '#828282',
              }}
            >
              Trạng thái
            </MText>
            <View
              style={{
                backgroundColor: '#FFEDED',
                paddingHorizontal: 8,
                paddingVertical: 10,
                borderRadius: 4,
              }}
            >
              <MText
                style={{
                  color: '#EE595C',
                  fontSize: 12,
                  fontWeight: 'bold',
                }}
              >
                Chưa ký
              </MText>
            </View>
          </View>
          <View
            style={{
              flexDirection: 'column',
              alignItems: 'center',
              marginTop: 24,
            }}
          >
            <Image
              source={require('./Layer_3.png')}
              style={{
                width: '100%',
                height: 120,
                resizeMode: 'contain',
              }}
            />
            <MText
              style={{
                textAlign: 'center',
                fontWeight: 'bold',
                marginTop: 24,
                paddingHorizontal: 24,
              }}
            >
              Quý khách vui lòng nhấn “Đi đến ký hợp đồng” hoặc kiểm tra
              email/SMS để thực hiện ký số hợp đồng điện tử
            </MText>
            <TouchableOpacity
              disabled={loading}
              onPress={() => {
                if (link) {
                  Linking.openURL(link);
                } else {
                  getUrl();
                }
              }}
              style={{
                marginTop: 16,
              }}
            >
              <LinearGradient
                start={{ x: 1, y: 0 }}
                end={{ x: 0, y: 1 }}
                style={{
                  height: 40,
                  marginVertical: 16,
                  borderRadius: 30,
                  alignItems: 'center',
                  justifyContent: 'center',
                  paddingHorizontal: 24,
                }}
                colors={['#FF7A00', '#EF4123']}
              >
                <MText
                  style={{
                    color: 'white',
                    fontSize: 16,
                  }}
                >
                  Đi đến ký hợp đồng
                </MText>
              </LinearGradient>
            </TouchableOpacity>
          </View>

          <MText
            style={{
              color: '#828282',
              fontSize: 12,
              paddingHorizontal: 16,
            }}
          >
            Để thực hiện ký số, Quý khách vui lòng thực hiện theo một trong hai
            cách sau đây:
          </MText>
          <MText
            style={{
              fontSize: 12,
              paddingHorizontal: 16,
              marginTop: 16,
              fontWeight: 'bold',
            }}
          >
            Cách 1: Ký bằng chứng thư số qua Ứng dụng Mysign Viettel
          </MText>
          <TouchableOpacity
            onPress={() => {
              Linking.openURL(
                'https://cdn.tima.vn/file-pdf/viettel_mysign.pdf'
              );
            }}
            style={{
              paddingHorizontal: 16,
              marginTop: 5,
            }}
          >
            <MText
              style={{
                color: '#0079E9',
                fontSize: 12,
                fontWeight: 'bold',
              }}
            >
              Hướng dẫn ký số qua Ứng dụng Mysign
            </MText>
          </TouchableOpacity>
          <MText
            style={{
              fontSize: 12,
              paddingHorizontal: 16,
              marginTop: 16,
              fontWeight: 'bold',
            }}
          >
            Cách 2: Ký 1 lần bằng OTP
          </MText>
          <TouchableOpacity
            onPress={() => {
              Linking.openURL('https://cdn.tima.vn/file-pdf/viettel_otp.pdf');
            }}
            style={{
              paddingHorizontal: 16,
              marginTop: 5,
            }}
          >
            <MText
              style={{
                color: '#0079E9',
                fontSize: 12,
                fontWeight: 'bold',
              }}
            >
              Hướng dẫn ký số bằng OTP
            </MText>
          </TouchableOpacity>

          <View
            style={{
              marginTop: 24,
              marginHorizontal: 16,
              backgroundColor: '#FFEDED',
              borderRadius: 8,
              paddingHorizontal: 10,
              paddingVertical: 16,
            }}
          >
            <MText
              style={{
                color: '#EE595C',
                fontSize: 12,
                fontWeight: 'bold',
              }}
            >
              Lưu ý:{' '}
              <MText
                style={{
                  fontSize: 12,
                  fontWeight: '400',
                }}
              >
                Để bảo mật thông tin cá nhân, hợp đồng sẽ được ký tại Viettel
                (Ứng dụng MySign, Website hopdongdientu.viettel.vn,...)
              </MText>
            </MText>
          </View>

          <View
            style={{
              marginTop: 10,
              marginHorizontal: 16,
              backgroundColor: '#F1FFEF',
              borderRadius: 8,
              paddingHorizontal: 10,
              paddingVertical: 16,
            }}
          >
            <MText
              style={{
                fontSize: 12,
                fontWeight: '400',
              }}
            >
              Tima hợp tác với Viettel cung cấp dịch vụ chữ ký số từ xa cho
              khách hàng của Tima.
            </MText>
          </View>
        </ScrollView>
      </SafeAreaView>

      <Modal
        visible={showError}
        transparent={true}
        animationType="fade"
        onRequestClose={() => setShowError(false)}
      >
        <View
          style={{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
          }}
        >
          <View
            style={{
              backgroundColor: 'white',
              padding: 20,
              borderRadius: 10,
              width: '80%',
              alignItems: 'center',
            }}
          >
            <Image
              source={require('./Frame.png')}
              style={{
                width: 150,
                height: 150,
                resizeMode: 'contain',
                marginBottom: 20,
              }}
            />
            <MText
              style={{
                fontSize: 18,
                fontWeight: 'bold',
                marginBottom: 10,
                textAlign: 'center',
              }}
            >
              Thông báo
            </MText>

            <MText
              style={{
                fontSize: 14,
                textAlign: 'center',
                marginBottom: 20,
                color: '#828282',
              }}
            >
              Hợp đồng đang được gửi sang đối tác cung cấp dịch vụ chữ ký số,
              Quý khách vui lòng cập nhật lại sau giây lát!
            </MText>
            <TouchableOpacity
              onPress={() => setShowError(false)}
              style={{
                backgroundColor: 'white',
                paddingHorizontal: 20,
                paddingVertical: 10,
                borderRadius: 24,
                borderWidth: 1,
                borderColor: '#EF592E',
                width: '100%',
                alignItems: 'center',
              }}
            >
              <MText style={{ color: '#EF592E' }}>Đã hiểu</MText>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </View>
  );
}
const $header: TextStyle = {
  fontSize: 16,
  fontWeight: 'bold',
  textAlign: 'center',
  position: 'absolute',
  left: 0,
  right: 0,
};
