import React from 'react';
import { useNavigate,useLocation, Outlet } from 'react-router-dom';
import './Personal.css';
import ActionCard from './ActionCard';

const Personal = () => {
  const navigate = useNavigate();
  const location = useLocation(); // 获取路由信息
  
  // 模拟用户数据
  const userData = {
    username: 'PT爱好者',
    avatar: 'https://via.placeholder.com/150',
    joinDate: '2023-01-15',
    level: '中级会员',
    points: 1250,
    upload: '3.2TB',
    download: '1.5TB',
    ratio: '2.13',
    downloadQuota: {
      total: 10,  // 10GB
      used: 3.7,  // 已使用3.7GB
      remaining: 6.3  // 剩余6.3GB
    }
  };

  const features = [
    { 
      title: '我的收藏', 
      description: '查看收藏的资源',
      path: '/personal/Favorite' // 相对路径
    },
    { 
      title: '上传记录', 
      description: '管理上传的资源',
      path: '/personal/Upload' 
    },
    { 
      title: '消息通知', 
      description: '查看系统消息',
      path: '/personal/Notice' 
    },
    { 
      title: '设置', 
      description: '修改个人资料',
      path: '/personal/Setting' 
    }
  ];

  const handleCardClick = (path) => {
    navigate(path); // 相对导航
  };

  const handleBack = () => {
    if (location.state?.fromSubpage) {
      // 如果是从子页面返回，则继续返回到Dashboard
      navigate(`/dashboard/${location.state.dashboardTab || ''}`, {
        replace: true
      });
    } else {
      // 普通返回逻辑
      navigate(-1);
    }
  };

  return (
    <div className="personal-container">
      {/* 返回按钮 */}
      <button className="back-button" onClick={handleBack}>
        &larr; 返回
      </button>
      
      {/* 用户基本信息卡片 */}
      <div className="profile-card">
        <div className="profile-header">
          <img 
            src={userData.avatar} 
            alt={userData.username} 
            className="profile-avatar"
          />
          <div className="profile-info">
            <h2 className="username">{userData.username}</h2>
            <div className="user-meta">
              <span>加入时间: {userData.joinDate}</span>
              <span>等级: {userData.level}</span>
            </div>
          </div>
        </div>
        
        {/* 用户数据统计 */}
        <div className="stats-grid">
          <div className="stat-item">
            <div className="stat-label">积分</div>
            <div className="stat-value">{userData.points}</div>
          </div>
          <div className="stat-item">
            <div className="stat-label">上传量</div>
            <div className="stat-value">{userData.upload}</div>
          </div>
          <div className="stat-item">
            <div className="stat-label">下载量</div>
            <div className="stat-value">{userData.download}</div>
          </div>
          <div className="stat-item">
            <div className="stat-label">分享率</div>
            <div className="stat-value">{userData.ratio}</div>
          </div>
        </div>
      </div>
      
      {/* 下载额度卡片 */}
      <div className="quota-card">
        <h3>下载额度</h3>
        <div className="quota-info">
          <span className="quota-used">{userData.downloadQuota.used}GB 已使用</span>
          <span className="quota-remaining">{userData.downloadQuota.remaining}GB 剩余</span>
        </div>
        <div className="progress-bar">
          <div 
            className="progress-fill"
            style={{ width: `${(userData.downloadQuota.used / userData.downloadQuota.total) * 100}%` }}
          ></div>
        </div>
        <div className="quota-total">总额度: {userData.downloadQuota.total}GB</div>
      </div>
      
      {/* 功能卡片区 */}
      <div className="action-cards">
        {features.map((feature) => (
          <div 
            key={feature.path}
            className="action-card"
            onClick={() => handleCardClick(feature.path)}
          >
            <h3>{feature.title}</h3>
            <p>{feature.description}</p>
          </div>
        ))}
      </div>

      {/* 子路由出口 */}
      <div className="subpage-container">
        <Outlet />
      </div>
    </div>
  );
};

export default Personal;