import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Alert } from 'react-native';
import { useTranslation } from 'react-i18next';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useAuth } from '../contexts/AuthContext';
import { useNavigation } from '@react-navigation/native';
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { RootStackParamList } from '../types/navigation';
import { userApi } from '../services/api/userApi';

export const ProfileScreen = () => {
  const { t } = useTranslation();
  const { logout } = useAuth();
  const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();

  const handleClearLanguage = async () => {
    try {
      await AsyncStorage.removeItem('selectedCountry');
      // 设置清除标记
      await AsyncStorage.setItem('languageCleared', 'true');
      // 使用 replace 而不是 reset，这样会替换当前路由而不是重置整个导航栈
      navigation.replace('CountrySelect');
    } catch (error) {
      Alert.alert(t('error'), t('clearLanguageError'));
    }
  };

  const handleClearLogin = async () => {
    Alert.alert(
      t('clearLoginTitle'),
      t('clearLoginMessage'),
      [
        {
          text: t('cancel'),
          style: 'cancel',
        },
        {
          text: t('confirm'),
          onPress: async () => {
            try {
              await logout();
              Alert.alert(t('success'), t('loginCleared'));
            } catch (error) {
              Alert.alert(t('error'), t('clearLoginError'));
            }
          },
        },
      ]
    );
    };

    const handleLogin = async () => {
      const params = {
        grant_type:'password',
        username:'test',
        password:'string',
        client_id:'2',
        client_secret:'',
        scope:'',
      }
      const res = await userApi.login(params);
      const token = res.token_type + ' ' + res.access_token;
      await AsyncStorage.setItem('token', token);
      navigation.navigate('Home');
    }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>{t('profile')}</Text>
      
      <View style={styles.buttonContainer}>
        <TouchableOpacity 
          style={[styles.button, styles.clearButton]} 
          onPress={handleClearLanguage}
        >
          <Text style={styles.buttonText}>{t('clearLanguage')}</Text>
        </TouchableOpacity>

        <TouchableOpacity 
          style={[styles.button, styles.clearButton]} 
          onPress={handleClearLogin}
        >
          <Text style={styles.buttonText}>{t('clearLogin')}</Text>
        </TouchableOpacity>

        <TouchableOpacity
           style={[styles.button, styles.clearButton]}
           onPress={handleLogin}  
        >
          <Text style={styles.buttonText}>模拟登录</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  buttonContainer: {
    gap: 12,
  },
  button: {
    backgroundColor: '#0066FF',
    padding: 15,
    borderRadius: 8,
    alignItems: 'center',
  },
  clearButton: {
    backgroundColor: '#FF3B30',
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
});