import React from 'react';
import { View, Text, Image } from '@tarojs/components';
import { Button, Avatar } from '@nutui/nutui-react-taro';
import { useUser } from '@/hooks/useUser';
import navTo from '@/utils/common';

// 用户资料组件示例
const UserProfile: React.FC = () => {
  const {
    user,
    isLoggedIn,
    loading,
    logoutUser,
    fetchUserInfo,
    getAvatarUrl,
    getDisplayName,
    isCertified,
    getBalance,
    getPoints
  } = useUser();

  // 处理登录跳转
  const handleLogin = () => {
    navTo('/pages/login/index');
  };

  // 处理退出登录
  const handleLogout = () => {
    logoutUser();
    navTo('/pages/index/index');
  };

  // 刷新用户信息
  const handleRefresh = async () => {
    await fetchUserInfo();
  };

  if (loading) {
    return (
      <View className="user-profile loading">
        <Text>加载中...</Text>
      </View>
    );
  }

  if (!isLoggedIn) {
    return (
      <View className="user-profile not-logged-in">
        <View className="login-prompt">
          <Text>请先登录</Text>
          <Button type="primary" onClick={handleLogin}>
            立即登录
          </Button>
        </View>
      </View>
    );
  }

  return (
    <View className="user-profile">
      <View className="user-header">
        <Avatar
          size="large"
          src={getAvatarUrl()}
          alt={getDisplayName()}
        />
        <View className="user-info">
          <Text className="username">{getDisplayName()}</Text>
          <Text className="user-id">ID: {user?.userId}</Text>
          {isCertified() && (
            <Text className="certified">已实名认证</Text>
          )}
        </View>
      </View>

      <View className="user-stats">
        <View className="stat-item">
          <Text className="stat-value">¥{getBalance()}</Text>
          <Text className="stat-label">余额</Text>
        </View>
        <View className="stat-item">
          <Text className="stat-value">{getPoints()}</Text>
          <Text className="stat-label">积分</Text>
        </View>
      </View>

      <View className="user-actions">
        <Button onClick={handleRefresh}>
          刷新信息
        </Button>
        <Button type="danger" onClick={handleLogout}>
          退出登录
        </Button>
      </View>
    </View>
  );
};

export default UserProfile;