src/pages/UserCenter/UserProfile.jsx

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import './UserProfile.css';
import UserNav from './UserNav';
import Header from '../../components/Header';
import { useUser } from '../../context/UserContext';

const DEFAULT_AVATAR_URL = `${process.env.PUBLIC_URL}/default-avatar.png`;

const UserProfile = () => {
  const { user, loading } = useUser();
  const [userProfile, setUserProfile] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (loading) return;
    if (!user || !user.userId) {
      setError('未登录或用户信息缺失');
      setUserProfile(null);
      return;
    }

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

        if (!raw) {
          setError('用户数据为空');
          setUserProfile(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,
        };

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

    fetchUserProfile();
  }, [user, loading]);

  const handleAvatarUpload = async (e) => {
    const file = e.target.files[0];
    if (!file) return;

    const formData = new FormData();
    formData.append('file', file);

    try {
      const { data } = await axios.post(
        `/echo/user/${user.userId}/uploadAvatar`,
        formData,
        { headers: { 'Content-Type': 'multipart/form-data' } }
      );

      if (data?.avatarUrl) {
        setUserProfile((prev) => ({
          ...prev,
          avatarUrl: `${process.env.REACT_APP_AVATAR_BASE_URL}${data.avatarUrl}`,
        }));
        alert('头像上传成功');
      } else {
        alert('头像上传成功，但未返回新头像地址');
      }
    } catch (err) {
      console.error('上传失败:', err);
      alert('头像上传失败，请重试');
    }
  };

  if (loading) return <p>正在加载用户信息...</p>;
  if (error) return <p className="error">{error}</p>;
  if (!userProfile) return null;

  const {
    avatarUrl,
    nickname,
    email,
    gender,
    bio,
    interests,
    level,
    experience,
    uploadAmount,
    downloadAmount,
    shareRate,
    joinedDate,
  } = userProfile;

  return (
    <div className="user-profile-container">
      <Header />
      <div className="user-center">
        <div className="user-nav-container">
          <UserNav />
        </div>
        <div className="common-card">
          <div className="right-content">
            <div className="profile-header">
              <div className="avatar-wrapper">
                <img src={avatarUrl} alt={nickname} className="avatar" />
                <label htmlFor="avatar-upload" className="avatar-upload-label">
                  上传头像
                </label>
                <input
                  type="file"
                  id="avatar-upload"
                  accept="image/*"
                  style={{ display: 'none' }}
                  onChange={handleAvatarUpload}
                />
              </div>
              <h1>{nickname}</h1>
            </div>

            <div className="profile-details">
              <p><strong>邮箱：</strong>{email}</p>
              <p><strong>性别：</strong>{gender}</p>
              <p><strong>个人简介：</strong>{bio}</p>
              <p><strong>兴趣：</strong>{interests.length > 0 ? interests.join(', ') : '无'}</p>
              <p><strong>等级：</strong>{level}</p>
              <p><strong>经验：</strong>{experience}</p>
              <p><strong>上传量：</strong>{uploadAmount}</p>
              <p><strong>下载量：</strong>{downloadAmount}</p>
              <p><strong>分享率：</strong>{(shareRate * 100).toFixed(2)}%</p>
              <p><strong>加入时间：</strong>{new Date(joinedDate).toLocaleDateString()}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default UserProfile;