import React from "react";

const Download: React.FC = () => {
  const downloadItems = [
    {
      title: "CS7 阶段数据",
      description: "小鼠胚胎 CS7 发育阶段的完整空间转录组数据",
      files: [
        { name: "CS7.h5ad", size: "45.2 MB", format: "AnnData" },
        { name: "CS7_metadata.csv", size: "2.1 MB", format: "CSV" },
      ]
    },
    {
      title: "CS8 阶段数据", 
      description: "小鼠胚胎 CS8 发育阶段的完整空间转录组数据",
      files: [
        { name: "CS8.h5ad", size: "52.8 MB", format: "AnnData" },
        { name: "CS8_metadata.csv", size: "2.3 MB", format: "CSV" },
      ]
    },
    {
      title: "CS9 阶段数据",
      description: "小鼠胚胎 CS9 发育阶段的完整空间转录组数据", 
      files: [
        { name: "CS9.h5ad", size: "61.4 MB", format: "AnnData" },
        { name: "CS9_metadata.csv", size: "2.7 MB", format: "CSV" },
      ]
    },
    {
      title: "模拟数据集",
      description: "用于测试和开发的 3D 表达数据模拟集",
      files: [
        { name: "embryo_mock_3D_expression.h5ad", size: "18.9 MB", format: "AnnData" },
      ]
    }
  ];

  return (
    <div className="page-container">
      <div className="page-header">
        <h1>Download</h1>
        <p className="page-description">
          我们为研究社区提供处理后的数据和元数据下载
        </p>
      </div>

      <div className="page-content">
        <div className="download-notice">
          <h2>使用协议</h2>
          <p>
            下载和使用这些数据时，请遵守以下协议：
          </p>
          <ul>
            <li>数据仅限于学术研究用途</li>
            <li>如果使用这些数据发表论文，请引用我们的工作</li>
            <li>禁止重新分发原始数据</li>
            <li>商业用途需要单独授权</li>
          </ul>
        </div>

        <div className="downloads-section">
          <h2>可下载数据</h2>
          <div className="download-grid">
            {downloadItems.map((item, index) => (
              <div key={index} className="download-card">
                <h3>{item.title}</h3>
                <p className="download-description">{item.description}</p>
                <div className="download-files">
                  {item.files.map((file, fileIndex) => (
                    <div key={fileIndex} className="download-file">
                      <div className="file-info">
                        <span className="file-name">{file.name}</span>
                        <span className="file-meta">
                          {file.size} | {file.format}
                        </span>
                      </div>
                      <button className="download-btn">下载</button>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="bulk-download">
          <h2>批量下载</h2>
          <div className="bulk-options">
            <div className="bulk-option">
              <h3>完整数据集</h3>
              <p>下载所有阶段的数据和元数据（约 185 MB）</p>
              <button className="bulk-download-btn">下载全部</button>
            </div>
            <div className="bulk-option">
              <h3>元数据包</h3>
              <p>仅下载所有阶段的元数据文件（约 7 MB）</p>
              <button className="bulk-download-btn">下载元数据</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Download; 