import React, { useCallback } from 'react';
import {
  BackHandler,
  Image,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import { useFocusEffect } from '@react-navigation/native';
import { StackScreenProps } from '@react-navigation/stack';
import { LoginParamList } from '@app/routes/login/LoginParamList.ts';
import RNExitApp from 'react-native-exit-app';
import LinearGradient from 'react-native-linear-gradient';
import { useCommon } from '@common/contexts/useCommon.ts';
import { showErrorMessage } from '@common/ToastHelper.ts';

type Props = StackScreenProps<LoginParamList, 'Agreement'>;

export default function AgreementScreen(props: Props) {
  const { navigation } = props;

  useFocusEffect(
    useCallback(() => {
      const backHandler = BackHandler.addEventListener(
        'hardwareBackPress',
        () => true,
      );
      return () => backHandler.remove();
    }, []),
  );

  const {
    actions: { save },
  } = useCommon();

  return (
    <View style={styles.container}>
      <View style={[StyleSheet.absoluteFill, styles.background]} />
      <View style={styles.content}>
        <LinearGradient
          style={styles.header}
          start={{ x: 0.5, y: 0 }}
          end={{ x: 0.5, y: 1 }}
          colors={['#198CFF', '#2195FE']}
        >
          <Image
            style={styles.headerImage}
            source={require('@app/assets/images/common/common_logo.png')}
          />
          <Text style={styles.title} numberOfLines={1}>
            用户协议和个人信息保护政策
          </Text>
        </LinearGradient>
        <ScrollView style={styles.scroll} scrollIndicatorInsets={{ right: 1 }}>
          <Text style={styles.message}>
            {
              '　　欢迎您使用医网信！\n　　为了给您更好的体验，我们依据相关法律制定了'
            }
            <Text
              style={styles.highlightText}
              onPress={() => {
                navigation.navigate('AgreementContent');
              }}
            >
              {'《用户服务协议》'}
            </Text>
            {'及'}
            <Text
              style={styles.highlightText}
              onPress={() => {
                navigation.navigate('WebView', {
                  url: 'https://www.51trust.com/privacy.html',
                  title: '用户隐私政策',
                });
              }}
            >
              {'《隐私政策》'}
            </Text>
            {
              '，特此向您推送本提示。请您仔细阅读并充分理解相关协议和隐私政策各条款，包括但不限于服务使用须知、用户行为规范，以及为了向您提供服务而收集、使用、存储您个人信息的情况。如果您选择"同意并继续"，代表您已同意前述协议，我们将尽力保障您的权益并为您提供更优质的产品和服务。如您不同意，很遗憾我们将无法继续为您提供服务。'
            }
          </Text>
        </ScrollView>
        <View style={styles.bottom}>
          <View style={styles.buttonView}>
            <TouchableOpacity
              style={styles.leftButton}
              onPress={() => {
                RNExitApp.exitApp();
              }}
            >
              <Text numberOfLines={1} style={styles.leftText}>
                {'不同意'}
              </Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.rightButton}
              onPress={() => {
                save('policyAccepted', true)
                  .then(() => {
                    navigation.pop();
                  })
                  .catch(e => {
                    showErrorMessage(e.message);
                  });
              }}
            >
              <Text numberOfLines={1} style={styles.rightText}>
                同意并继续
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  background: {
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
  },
  content: {
    width: 250,
    backgroundColor: '#FFFFFF',
    borderRadius: 5,
  },
  header: {
    height: 60,
    backgroundColor: 'red',
    borderTopLeftRadius: 5,
    borderTopRightRadius: 5,
    alignItems: 'center',
    justifyContent: 'center',
  },
  headerImage: {
    position: 'absolute',
    width: 60,
    height: 49,
    right: 40,
    bottom: 2,
  },
  title: {
    fontSize: 16,
    color: '#FFFFFF',
    fontWeight: '700',
  },
  scroll: {
    paddingHorizontal: 15,
    minHeight: 100,
    maxHeight: 300,
  },
  message: {
    fontSize: 14,
    marginVertical: 15,
    color: '#11102C',
  },
  highlightText: {
    fontSize: 14,
    lineHeight: 18,
    color: '#18ABFB',
  },
  bottom: {
    borderBottomLeftRadius: 5,
    borderBottomRightRadius: 5,
    padding: 15,
    alignItems: 'center',
  },
  buttonView: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  leftButton: {
    flexShrink: 1,
    minWidth: 90,
    minHeight: 34,
    paddingHorizontal: 8,
    paddingVertical: 7,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#F6F8FB',
    borderRadius: 5,
    marginRight: 10,
  },
  leftText: {
    fontSize: 14,
    color: '#8685A3',
    fontWeight: '500',
  },
  rightButton: {
    flexShrink: 1,
    minWidth: 90,
    minHeight: 34,
    paddingHorizontal: 8,
    paddingVertical: 7,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#0E84FA',
    borderRadius: 5,
  },
  rightText: {
    fontSize: 14,
    color: '#FFFFFF',
    fontWeight: '500',
  },
  bottomButton: {
    marginTop: 15,
  },
});
