src/pages/UserCenter/UserProfile.jsx

// import React, { useEffect, useState } from 'react';
// import axios from 'axios';
// import './UserProfile.css';
// import { useUser } from '../../context/UserContext';
// import { useLocation } from 'wouter';

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

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

//   // 修改密码状态
//   const [showPwdModal, setShowPwdModal] = useState(false);
//   const [oldPassword, setOldPassword] = useState('');
//   const [newPassword, setNewPassword] = useState('');
//   const [confirmPassword, setConfirmPassword] = useState('');

//   // 退出登录
//   const [, setLocation] = useLocation();

//   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);
//       }
//     };

//     const fetchExperienceInfo = async () => {
//       try {
//         const { data } = await axios.get('/echo/level/getExperience', {
//           params: { user_id: user.userId },
//         });
//         setExperienceInfo(data);
//       } catch (err) {
//         console.error('经验信息获取失败:', err);
//       }
//     };

//     fetchUserProfile();
//     fetchExperienceInfo();
//   }, [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('头像上传失败，请重试');
//     }
//   };

//   const handleLogout = () => {
//     logout();
//     setLocation('/auth'); // 退出后跳转登录页
//     // window.location.reload(); // 或跳转登录页
//   };

//   const handleChangePassword = async () => {
//     if (!oldPassword || !newPassword || !confirmPassword) {
//       alert('请填写所有字段');
//       return;
//     }
//     if (newPassword !== confirmPassword) {
//       alert('两次输入的新密码不一致');
//       return;
//     }

//     try {
//       // await axios.post('/echo/user/password', {
//       //   user_id: user.userId,
//       //   oldPassword,
//       //   newPassword,
//       // });
//       await axios.post('/echo/user/password', {
//         user_id: user.userId,
//         old_password: oldPassword,
//         new_password: newPassword,
//         confirm_password: confirmPassword,
//       });
//       alert('密码修改成功，请重新登录');
//       logout();
//       window.location.reload();
//     } catch (err) {
//       alert(err.response?.data?.message || '密码修改失败，请检查原密码是否正确');
//     }
//   };

//   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;

//   const progressPercent = experienceInfo
//     ? Math.min(
//         100,
//         ((experienceInfo.current_experience || 0) /
//           (experienceInfo.next_level_experience || 1)) *
//           100
//       ).toFixed(2)
//     : 0;

//   const expToNextLevel = experienceInfo
//     ? (experienceInfo.next_level_experience - experienceInfo.current_experience)
//     : null;

//   return (
//     <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>

//           {experienceInfo && (
//             <>
//               <p><strong>距离下一等级还需：</strong>{expToNextLevel} 经验值</p>
//               <div className="exp-bar-wrapper">
//                 <div className="exp-bar" style={{ width: `${progressPercent}%` }} />
//               </div>
//               <p className="exp-progress-text">{progressPercent}%</p>
//             </>
//           )}

//           {/* 修改密码与退出登录按钮 */}
//           <div className="profile-actions">
//             <button onClick={() => setShowPwdModal(true)}>修改密码</button>
//             <button onClick={handleLogout}>退出登录</button>
//           </div>

//           {/* 修改密码弹窗 */}
//           {showPwdModal && (
//             <div className="modal">
//               <div className="modal-content">
//                 <h3>修改密码</h3>
//                 <input
//                   type="password"
//                   placeholder="原密码"
//                   value={oldPassword}
//                   onChange={(e) => setOldPassword(e.target.value)}
//                 />
//                 <input
//                   type="password"
//                   placeholder="新密码"
//                   value={newPassword}
//                   onChange={(e) => setNewPassword(e.target.value)}
//                 />
//                 <input
//                   type="password"
//                   placeholder="确认新密码"
//                   value={confirmPassword}
//                   onChange={(e) => setConfirmPassword(e.target.value)}
//                 />
//                 <div className="modal-buttons">
//                   <button onClick={handleChangePassword}>确认修改</button>
//                   <button onClick={() => setShowPwdModal(false)}>取消</button>
//                 </div>
//               </div>
//             </div>
//           )}
//         </div>
//       </div>
//     </div>
//   );
// };

// export default UserProfile;

import React from 'react';
import UserProfileBase from './UserProfileBase';
import UserLevelExperience from './UserLevelExperience';
import './UserProfile.css';

const UserProfile = () => {
  const [userId, setUserId] = React.useState(null);

  const loadExperienceInfo = (id) => {
    setUserId(id);
  };

  return (
    <div>
      <UserProfileBase onLoadExperienceInfo={loadExperienceInfo} />
      {userId && <UserLevelExperience userId={userId} />}
    </div>
  );
};

export default UserProfile;