import React from 'react';
import { useNavigate,useLocation } from 'react-router-dom';
import './personalSubpage.css';

const Upload = ({ onLogout }) => {
  const navigate = useNavigate();
  const location = useLocation();
  const [uploads] = React.useState([
    { id: 1, name: '星际穿越', status: '已发布', date: '2023-10-15', size: '15.2GB' },
    { id: 2, name: '黑暗骑士', status: '审核中', date: '2023-10-18', size: '12.7GB' }
  ]);

  const handleBack = () => {
    // 返回个人中心，并携带来源标记
    navigate('/personal', { 
      state: { 
        fromSubpage: true,  // 标记来自子页面
        dashboardTab: location.state?.dashboardTab // 保留Dashboard的标签页状态
      },
      replace: true  // 替换当前历史记录
    });
  };
  return (
    <div className="subpage-container">
      <button className="back-button" onClick={(handleBack)}>
        ← 返回个人中心
      </button>

      <h2 className="page-title">上传记录</h2>
      
      <table className="uploads-table">
        <thead>
          <tr>
            <th>资源名称</th>
            <th>大小</th>
            <th>状态</th>
            <th>上传时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {uploads.map(item => (
            <tr key={item.id} className="list-item">
              <td>{item.name}</td>
              <td>{item.size}</td>
              <td>
                <span className={`status-badge ${
                  item.status === '已发布' ? 'published' : 'pending'
                }`}>
                  {item.status}
                </span>
              </td>
              <td>{item.date}</td>
              <td>
                <button className="action-btn">详情</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default Upload;