import React, { useEffect, useState } from 'react';
import Taro from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
import { FaUser, FaSignOutAlt, FaCog, FaQuestionCircle, FaHistory } from 'react-icons/fa';
import Button from '../../components/base/Button';
import TabBarLayout from '../../components/layout/TabBarLayout';
import { useUser } from '../../contexts/UserContext';
import './index.scss';

const Profile: React.FC = () => {
  const { user, logout } = useUser();
  
  const handleLogout = () => {
    Taro.showModal({
      title: '确认登出',
      content: '确定要退出登录吗？',
      success: (res) => {
        if (res.confirm) {
          logout();
          Taro.showToast({ title: '已退出登录', icon: 'success' });
        }
      }
    });
  };

  const goToGameHistory = () => {
    Taro.navigateTo({ url: '/pages/game-history/index' });
  };

  if (!user) {
    // 如果未登录，跳转到登录页
    Taro.redirectTo({ url: '/pages/login/index' });
    return null;
  }

  return (
    <TabBarLayout>
      <View className='profile'>
        <View className='profile-header'>
          <Image className='avatar' src={user.avatarUrl} mode='aspectFill' />
          <Text className='nickname'>{user.nickName}</Text>
        </View>
        
        <View className='profile-info'>
          <View className='info-item'>
            <View className='info-icon'>
              <FaUser size={18} color="#4285f4" />
            </View>
            <View className='info-content'>
              <Text className='info-label'>用户ID</Text>
              <Text className='info-value'>{user.userId}</Text>
            </View>
          </View>
        </View>
        
        <View className='profile-actions'>
          <View className='action-item' onClick={goToGameHistory}>
            <View className='action-icon'>
              <FaHistory size={18} color="#4285f4" />
            </View>
            <Text className='action-text'>游戏历史</Text>
          </View>
          
          <View className='action-item'>
            <View className='action-icon'>
              <FaQuestionCircle size={18} color="#4285f4" />
            </View>
            <Text className='action-text'>帮助中心</Text>
          </View>
          
          <View className='action-item'>
            <View className='action-icon'>
              <FaCog size={18} color="#4285f4" />
            </View>
            <Text className='action-text'>设置</Text>
          </View>
        </View>
        
        <Button 
          type='outline' 
          block 
          className='logout-button'
          onClick={handleLogout}
          icon={<FaSignOutAlt size={18} />}
        >
          退出登录
        </Button>
      </View>
    </TabBarLayout>
  );
};

export default Profile; 