src/pages/UserCenter/UserLevelExperience.jsx

// import React, { useState, useEffect } from 'react';
// import axios from 'axios';

// const UserLevelExperience = ({ userId }) => {
//   const [experienceInfo, setExperienceInfo] = useState(null);
//   const [error, setError] = useState(null);
//   const [isLoading, setIsLoading] = useState(false);
//   const [upgradeResult, setUpgradeResult] = useState(null);
//   const [hasCheckedIn, setHasCheckedIn] = useState(false);
//   const [isUpgrading, setIsUpgrading] = useState(false);
//   const [lastUpgradeTime, setLastUpgradeTime] = useState(null);
//   const [justUpgraded, setJustUpgraded] = useState(false); // 新增

//   useEffect(() => {
//     if (!userId) return;
//     fetchAllLevelData();
//   }, [userId]);

//   useEffect(() => {
//     if (
//       experienceInfo &&
//       experienceInfo.current_experience >= experienceInfo.next_level_experience &&
//       !isUpgrading &&
//       !justUpgraded &&
//       (!lastUpgradeTime || Date.now() - lastUpgradeTime > 2000)
//     ) {
//       checkUpgrade();
//     }
//   }, [experienceInfo, isUpgrading, lastUpgradeTime, justUpgraded]);

//   const fetchAllLevelData = async () => {
//     try {
//       setIsLoading(true);
//       setError(null);

//       const { data } = await axios.get('/echo/level/getExperience', {
//         params: { user_id: userId },
//       });

//       const normalizedData = {
//         ...data,
//         current_level: data.current_level || data.level,
//       };

//       setExperienceInfo(normalizedData);

//       const today = new Date().toDateString();
//       const lastCheckIn = localStorage.getItem('lastCheckIn');
//       setHasCheckedIn(lastCheckIn === today);
//     } catch (err) {
//       console.error('经验信息获取失败:', err);
//       setError('获取经验信息失败');
//     } finally {
//       setIsLoading(false);
//     }
//   };

//   const updateExperience = async (source, amount = 10) => {
//     try {
//       setIsLoading(true);
//       setError(null);

//       const { data } = await axios.post('/echo/level/updateExperience', {
//         user_id: userId,
//         experience: amount,
//         source: source,
//       });

//       setExperienceInfo((prev) => ({
//         ...prev,
//         current_experience: data.current_experience,
//       }));

//       alert(`获得${amount}点经验值！来源：${source}`);

//       if (source === 'check-in') {
//         localStorage.setItem('lastCheckIn', new Date().toDateString());
//         setHasCheckedIn(true);
//       }
//     } catch (err) {
//       console.error('更新经验失败:', err);
//       setError(err.response?.data?.message || '更新经验失败');
//     } finally {
//       setIsLoading(false);
//     }
//   };

//   const checkUpgrade = async () => {
//     if (isUpgrading) return;

//     try {
//       setIsLoading(true);
//       setIsUpgrading(true);
//       setError(null);

//       const { data } = await axios.get('/echo/level/upgrade-check', {
//         params: { user_id: userId },
//       });

//       if (data.can_upgrade) {
//         if (window.confirm('您已满足升级条件，是否要升级？')) {
//           await performUpgrade();
//         }
//       } else {
//         if (data.is_max_level) {
//           alert('您已达到最高等级！');
//         } else {
//           alert(`还不能升级，还需要${data.next_level_experience - data.current_experience}点经验值`);
//         }
//       }
//     } catch (err) {
//       console.error('检查升级失败:', err);
//       setError(err.response?.data?.message || '检查升级失败');
//     } finally {
//       setIsLoading(false);
//       setIsUpgrading(false);
//     }
//   };

//   const performUpgrade = async () => {
//     try {
//       setIsUpgrading(true);
//       setIsLoading(true);
//       setError(null);

//       const { data } = await axios.post('/echo/level/upgrades', {
//         user_id: userId,
//         can_upgrade: true,
//       });

//       console.log('升级响应数据:', data);

//       if (data.status === 'success') {
//         setExperienceInfo((prev) => ({
//           ...prev,
//           current_level: data.new_level,
//           current_experience: data.current_experience || 0,
//           next_level_experience: data.next_level_experience || prev.next_level_experience * 2,
//         }));

//         setUpgradeResult(data);
//         setLastUpgradeTime(Date.now());
//         setJustUpgraded(true); // 标记为刚升级过
//         setTimeout(() => setJustUpgraded(false), 3000); // 3 秒冷却期
//         alert(`恭喜！您已升级到等级 ${data.new_level}！`);

//         // 再次拉取最新经验数据，避免经验值仍然满足升级条件
//         await fetchAllLevelData();
//       } else {
//         throw new Error(data.message || '升级失败');
//       }
//     } catch (err) {
//       console.error('升级失败:', err);
//       setError(err.message || '升级失败');
//       alert(err.message || '升级失败，请稍后再试');
//     } finally {
//       setIsLoading(false);
//       setIsUpgrading(false);
//     }
//   };

//   if (error) return <p className="error">{error}</p>;
//   if (isLoading) return <p>加载中...</p>;
//   if (!experienceInfo) return <p>加载经验信息中...</p>;

//   const { current_experience, next_level_experience, current_level } = experienceInfo;
//   const progressPercent = Math.min(
//     100,
//     (current_experience / (next_level_experience || 1)) * 100
//   ).toFixed(2);

//   const expToNextLevel = Math.max(0, next_level_experience - current_experience);

//   return (
//     <div className="level-experience-section">
//       <h3>等级与经验</h3>
//       <p><strong>当前等级：</strong>{current_level || '未知'}</p>
//       <p><strong>当前经验：</strong>{current_experience}</p>
//       <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>

//       {upgradeResult && (
//         <div className="upgrade-success">
//           <p>恭喜！您已成功升级到等级 {upgradeResult.new_level}！</p>
//         </div>
//       )}

//       {error && (
//         <div className="upgrade-error">
//           <p>{error}</p>
//         </div>
//       )}

//       <div className="level-actions">
//         <button onClick={() => updateExperience('check-in', 15)} disabled={hasCheckedIn}>
//           {hasCheckedIn ? '今日已签到' : '每日签到 (+15经验)'}
//         </button>
//         <button onClick={() => updateExperience('task', 30)}>完成任务 (+30经验)</button>
//         <button onClick={() => updateExperience('upload', 50)}>上传种子 (+50经验)</button>
//         <button onClick={checkUpgrade} disabled={isUpgrading}>
//           {isUpgrading ? '升级中...' : '检查升级'}
//         </button>
//       </div>
//     </div>
//   );
// };

// export default UserLevelExperience;