// src/pages/UserInfo.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { useLocation } from 'wouter';

const DEFAULT_AVATAR_URL = '/default-avatar.png'; // 替换为你的默认头像地址

const UserInfo = () => {
  const [location] = useLocation();
  const userId = location.split('/').pop();
  const [userInfo, setUserInfo] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUserInfo = async () => {
      try {
        setError(null);
        const { data: raw } = await axios.get(`/echo/user/${userId}/getProfile`);

        if (!raw) {
          setError('用户数据为空');
          setUserInfo(null);
          return;
        }

        const profile = {
          avatarUrl: raw.avatarUrl
            ? `${process.env.REACT_APP_AVATAR_BASE_URL}${raw.avatarUrl}`
            : DEFAULT_AVATAR_URL,
          nickname: raw.username || '未知用户',
          email: raw.email || '未填写',
          gender: raw.gender || '保密',
          bio: raw.description || '无',
          interests: raw.hobbies ? raw.hobbies.split(',') : [],
          level: raw.level || '未知',
          experience: raw.experience ?? 0,
          uploadAmount: raw.uploadCount ?? 0,
          downloadAmount: raw.downloadCount ?? 0,
          shareRate: raw.shareRate ?? 0,
          joinedDate: raw.registrationTime,
        };

        setUserInfo(profile);
      } catch (err) {
        setError(err.response?.status === 404 ? '用户不存在' : '请求失败，请稍后再试');
        setUserInfo(null);
      }
    };

    fetchUserInfo();
  }, [userId]);

  if (error) return <p>{error}</p>;
  if (!userInfo) return <p>加载中...</p>;

  return (
    <div className="user-profile">
      <img src={userInfo.avatarUrl} alt="头像" />
      <h2>{userInfo.nickname}</h2>
      <p>邮箱：{userInfo.email}</p>
      <p>性别：{userInfo.gender}</p>
      <p>简介：{userInfo.bio}</p>
      <p>兴趣爱好：{userInfo.interests.join('、')}</p>
      <p>等级：{userInfo.level}</p>
      <p>经验值：{userInfo.experience}</p>
      <p>上传量：{userInfo.uploadAmount}</p>
      <p>下载量：{userInfo.downloadAmount}</p>
      <p>分享率：{userInfo.shareRate}</p>
      <p>注册时间：{userInfo.joinedDate}</p>
    </div>
  );
};

export default UserInfo;