frontend/my-app/src/pages/Home.jsx

import React, { useState, useEffect } from 'react';
import {
  Box, Container, Typography, Paper,
  List, ListItem, ListItemText, Chip, Stack, CircularProgress, Alert
} from '@mui/material';
import { Link } from 'react-router-dom'; // 假设你已经配置了 React Router

// import '../styles/base/base.css'; // ✅ 引入统一样式 - 我们将尝试用 sx prop 替代

// 模拟从API获取数据
const fetchTorrents = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        {
          id: 1,
          title: 'Ubuntu ISO 镜像',
          tags: ['Linux', '操作系统', 'ISO'],
          size: '2.1 GB',
          uploader: 'admin',
          description: '最新的 Ubuntu Desktop 长期支持版。适用于开发者和普通用户。'
        },
        {
          id: 2,
          title: '开源电影素材包 - Blender "Sintel"',
          tags: ['视频', '素材', '开源', 'Blender'],
          size: '800 MB',
          uploader: 'user001',
          description: '来自 Blender Foundation 的开源电影 "Sintel" 的原始素材，可用于学习和创作。'
        },
        {
          id: 3,
          title: 'React 学习资料大全',
          tags: ['React', 'JavaScript', '前端开发', '教程'],
          size: '150 MB',
          uploader: 'dev_guru',
          description: '包含 React 官方文档、优秀教程链接和项目示例。'
        }
      ]);
    }, 1500); // 模拟网络延迟
  });
};


function Home() {
  const [torrents, setTorrents] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    fetchTorrents()
      .then(data => {
        setTorrents(data);
        setLoading(false);
      })
      .catch(err => {
        console.error("Failed to fetch torrents:", err);
        setError("加载资源失败，请稍后再试。");
        setLoading(false);
      });
  }, []);

  return (
    <Box sx={{ minHeight: '100vh', py: 4, background: 'linear-gradient(135deg, #2c3e50, #4ca1af)', color: 'white' }}>
      <Container maxWidth="md" sx={{ position: 'relative', zIndex: 10 }}> {/* Changed to md for wider content */}
        <Typography variant="h4" sx={{ textAlign: 'center', mb: 3, fontWeight: 'bold' }}>
          🌐 首页 · Mini-Tracker
        </Typography>

        <Paper sx={{ position: 'relative', zIndex: 20, padding: '2rem', backgroundColor: 'rgba(30, 30, 30, 0.9)', borderRadius: '12px' }}>
          <Typography variant="h6" gutterBottom sx={{ mb: 2, color: '#eee' }}>
            最新种子资源
          </Typography>

          {loading && (
            <Box sx={{ display: 'flex', justifyContent: 'center', my: 3 }}>
              <CircularProgress color="inherit" />
            </Box>
          )}

          {error && (
            <Alert severity="error" sx={{ my: 2 }}>{error}</Alert>
          )}

          {!loading && !error && (
            <List sx={{ '& .MuiListItem-root:hover': { backgroundColor: 'rgba(255, 255, 255, 0.05)' }}}>
              {torrents.map(torrent => (
                <ListItem
                  key={torrent.id}
                  component={Link} // react-router-dom Link
                  to={`/detail/${torrent.id}`} // 假设的详情页路由
                  sx={{ 
                    color: 'white', 
                    textDecoration: 'none',
                    mb: 1.5, // 增加列表项间距
                    p: 1.5, // 增加列表项内边距
                    borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
                    '&:last-child': {
                        borderBottom: 'none' // 移除最后一个元素的边框
                    },
                    display: 'flex', // 确保内部元素正确对齐
                    flexDirection: { xs: 'column', sm: 'row' }, // 响应式布局
                    alignItems: { xs: 'flex-start', sm: 'center' }
                  }}
                  divider={false} // 使用自定义边框代替
                >
                  <ListItemText
                    primary={torrent.title}
                    secondary={`大小: ${torrent.size} · 上传者: ${torrent.uploader}`}
                    primaryTypographyProps={{ variant: 'h6', component: 'div', sx: { mb: 0.5, color: '#f5f5f5', fontWeight: 500 } }}
                    secondaryTypographyProps={{ sx: { color: '#bbb', fontSize: '0.85rem' } }}
                    sx={{ flexGrow: 1, mb: { xs: 1, sm: 0 }, mr: { sm: 2 } }} // 响应式边距
                  />
                  <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', gap: 0.5 }}> {/* 允许标签换行 */}
                    {torrent.tags.map(tag => (
                      <Chip
                        key={tag}
                        label={tag}
                        size="small"
                        sx={{ 
                          backgroundColor: 'rgba(255, 255, 255, 0.2)', // upload-chip 样式
                          color: 'white',
                          cursor: 'pointer',
                          '&:hover': {
                            backgroundColor: 'rgba(255, 255, 255, 0.3)',
                          }
                        }}
                      />
                    ))}
                  </Stack>
                </ListItem>
              ))}
            </List>
          )}
        </Paper>
      </Container>

      {/* 背景泡泡动画复用 - 这些类名 (.bubbles, .bubble) 和 @keyframes rise 应该在全局CSS或者下面的 <style> 标签中定义 */}
      <Box className="bubbles" sx={{
         pointerEvents: 'none',
         position: 'fixed',
         top: 0,
         left: 0,
         width: '100%',
         height: '100%',
         overflow: 'hidden',
         zIndex: 1, 
      }}>
        {[...Array(40)].map((_, i) => (
          <Box
            key={i}
            className="bubble"
            sx={{
              position: 'absolute',
              bottom: '-150px', // 确保从屏幕外开始
              background: `hsla(${Math.random() * 360}, 70%, 80%, 0.15)`, // 增加颜色多样性
              borderRadius: '50%',
              animation: 'rise 20s infinite ease-in',
              width: `${Math.random() * 25 + 10}px`, // 调整大小范围
              height: `${Math.random() * 25 + 10}px`,
              left: `${Math.random() * 100}%`,
              animationDuration: `${15 + Math.random() * 20}s`, // 调整动画时长
              animationDelay: `${Math.random() * 10}s`, // 调整动画延迟
              opacity: 0, // 初始透明
            }}
          />
        ))}
      </Box>
      {/* 定义动画和其他全局可能需要的样式 */}
      <style>
        {`
          body { /* 基本重置 */
            margin: 0;
            font-family: 'Roboto', sans-serif; /* 确保字体一致 */
          }

          @keyframes rise {
            0% {
              transform: translateY(0) scale(0.8);
              opacity: 0; /* 从透明开始 */
            }
            10% {
                opacity: 1; /* 渐显 */
            }
            90% {
                opacity: 1; /* 保持可见 */
            }
            100% {
              transform: translateY(-130vh) scale(0.3); /* 飘得更高更小 */
              opacity: 0; /* 渐隐 */
            }
          }

          /* 如果 .bubbles 和 .bubble 样式没有在 sx 中完全覆盖，可以在这里补充 */
          /* .bubbles { ... } */
          /* .bubble { ... } */
        `}
      </style>
    </Box>
  );
}

export default Home;