import React, {useState} from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  StyleSheet,
  Alert,
  KeyboardAvoidingView,
  Platform,
  StatusBar,
  ActivityIndicator,
  ToastAndroid
} from 'react-native';
import { useNavigation } from '@react-navigation/native';

const LoginScreen = ({}) => {
  const navigation = useNavigation();
  const [username, setUsername] = useState('manage1');
  const [password, setPassword] = useState('trops@2022');
  const [isLoading, setIsLoading] = useState(false);
  const [secureTextEntry, setSecureTextEntry] = useState(true);

  const handleLogin = async () => {
    if (!username || !password) {
      ToastAndroid.show('请输入用户名和密码',2000);
      return;
    }
    setIsLoading(true);
    try {
      let params = {
        username,
        password,
      };
      global.$http.common.getLogin(params).then((res:any) => {
        console.log("eeeeeee",res)
        if (res.data.access_token) {
          // let token = "JWT " + res.data.access_token;
          ToastAndroid.show('登录成功',2000);
          navigation.navigate('Home'); // 登录成功后跳转到主页
        }
      })
    } catch (error:any) {
      console.log(error);
      ToastAndroid.show(error.response?.data?.message || '网络请求失败',2000);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={styles.container}>
      <StatusBar backgroundColor="#1E90FF" barStyle="light-content" />

      <View style={styles.logoContainer}>
        <Text style={styles.logoText}>欢迎登录</Text>
      </View>

      <View style={styles.formContainer}>
        <TextInput
          style={styles.input}
          placeholder="用户名"
          placeholderTextColor="#999"
          value={username}
          onChangeText={setUsername}
          autoCapitalize="none"
          autoCorrect={false}
        />

        <View style={styles.passwordInputContainer}>
          <TextInput
            style={styles.input}
            placeholder="密码"
            placeholderTextColor="#999"
            secureTextEntry={secureTextEntry}
            value={password}
            onChangeText={setPassword}
            autoCapitalize="none"
            autoCorrect={false}
          />
          <TouchableOpacity
            style={styles.togglePassword}
            onPress={() => setSecureTextEntry(!secureTextEntry)}>
            <Text style={styles.togglePasswordText}>
              {secureTextEntry ? '显示' : '隐藏'}
            </Text>
          </TouchableOpacity>
        </View>

        <TouchableOpacity
          style={styles.loginButton}
          onPress={handleLogin}
          disabled={isLoading}>
          {isLoading ? (
            <ActivityIndicator size="small" color="#fff" />
          ) : (
            <Text style={styles.loginButtonText}>登录</Text>
          )}
        </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingHorizontal: 30,
  },
  logoContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  logoText: {
    fontSize: 32,
    fontWeight: 'bold',
    color: '#1E90FF',
  },
  formContainer: {
    flex: 2,
    justifyContent: 'center',
  },
  input: {
    height: 50,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
    paddingHorizontal: 15,
    marginBottom: 15,
    fontSize: 16,
  },
  passwordInputContainer: {
    position: 'relative',
  },
  togglePassword: {
    position: 'absolute',
    right: 15,
    top: 15,
  },
  togglePasswordText: {
    color: '#1E90FF',
    fontSize: 14,
  },
  loginButton: {
    height: 50,
    backgroundColor: '#1E90FF',
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 10,
  },
  loginButtonText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
  },
  footer: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: 20,
  },
  footerText: {
    color: '#666',
  },
  registerText: {
    color: '#1E90FF',
    marginLeft: 5,
    fontWeight: 'bold',
  },
});

export default LoginScreen;