import React from "react";
import HomeIcon from "@mui/icons-material/Home";
import MovieIcon from "@mui/icons-material/Movie";
import EmailIcon from "@mui/icons-material/Email";
import MusicNoteIcon from "@mui/icons-material/MusicNote";
import EmojiPeopleIcon from "@mui/icons-material/EmojiPeople";
import SportsEsportsIcon from "@mui/icons-material/SportsEsports";
import SportsMartialArtsIcon from "@mui/icons-material/SportsMartialArts";
import PersonIcon from "@mui/icons-material/Person";
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
import ForumIcon from "@mui/icons-material/Forum";
import HelpIcon from "@mui/icons-material/Help";
import { useNavigate } from "react-router-dom";
import "./App.css";

// 导航栏
const navItems = [
    { label: "首页", icon: <HomeIcon />, path: "/home" },
    { label: "电影", icon: <MovieIcon />, path: "/movie" },
    { label: "剧集", icon: <EmailIcon />, path: "/tv" },
    { label: "音乐", icon: <MusicNoteIcon />, path: "/music" },
    { label: "动漫", icon: <EmojiPeopleIcon />, path: "/anime" },
    { label: "游戏", icon: <SportsEsportsIcon />, path: "/game" },
    { label: "体育", icon: <SportsMartialArtsIcon />, path: "/sport" },
    { label: "资料", icon: <PersonIcon />, path: "/info" },
    { label: "论坛", icon: <ForumIcon />, path: "/forum" },
    { label: "发布", icon: <AccountCircleIcon />, path: "/publish" },
    { label: "求种", icon: <HelpIcon />, path: "/begseed" },
];

// 示例种子数据
const exampleSeeds = [
    {
        id: 1,
        tags: "电影,科幻",
        title: "三体 1080P 蓝光",
        popularity: 123,
        user: { username: "Alice" },
    },
    {
        id: 2,
        tags: "动漫,热血",
        title: "灌篮高手 国语配音",
        popularity: 88,
        user: { username: "Bob" },
    },
    {
        id: 3,
        tags: "音乐,流行",
        title: "周杰伦-稻香",
        popularity: 56,
        user: { username: "Jay" },
    },
    {
        id: 4,
        tags: "剧集,悬疑",
        title: "隐秘的角落",
        popularity: 77,
        user: { username: "小明" },
    },
];

export default function HomePage() {
    const navigate = useNavigate();

    return (
        <div className="container">
            {/* 顶部空白与电影界面一致 */}
            <div style={{ height: 80 }} />
            {/* 用户栏 */}
            <div className="user-bar" style={{ position: 'fixed', top: 18, right: 42, zIndex: 100, display: 'flex', alignItems: 'center', background: '#e0f3ff', borderRadius: 12, padding: '6px 18px', boxShadow: '0 2px 8px #b2d8ea', minWidth: 320, minHeight: 48, width: 420 }}>
                <div style={{ cursor: 'pointer', marginRight: 16 }} onClick={() => navigate('/user')}>
                    <AccountCircleIcon style={{ fontSize: 38, color: '#1a237e', background: '#e0f3ff', borderRadius: '50%' }} />
                </div>
                <div style={{ color: '#222', fontWeight: 500, marginRight: 24 }}>用户栏</div>
                <div style={{ display: 'flex', gap: 28, flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}>
                    <span style={{ color: '#1976d2', fontWeight: 500 }}>魔力值: <b>12345</b></span>
                    <span style={{ color: '#1976d2', fontWeight: 500 }}>分享率: <b>2.56</b></span>
                    <span style={{ color: '#1976d2', fontWeight: 500 }}>上传量: <b>100GB</b></span>
                    <span style={{ color: '#1976d2', fontWeight: 500 }}>下载量: <b>50GB</b></span>
                </div>
            </div>
            {/* 下方内容整体下移，留出与电影界面一致的间距 */}
            <div style={{ height: 32 }} />
            <nav className="nav-bar card">
                {navItems.map((item) => (
                    <div
                        key={item.label}
                        className={item.label === "首页" ? "nav-item active" : "nav-item"}
                        onClick={() => navigate(item.path)}
                    >
                        {item.icon}
                        <span>{item.label}</span>
                    </div>
                ))}
            </nav>
            <div className="table-section card">
                <table className="movie-table">
                    <thead>
                        <tr>
                            <th>标签</th>
                            <th>标题</th>
                            <th>热度</th>
                            <th>发布者</th>
                        </tr>
                    </thead>
                    <tbody>
                        {exampleSeeds.map((seed) => (
                            <tr key={seed.id}>
                                <td>{seed.tags}</td>
                                <td>
                                    <a href={`/torrent/${seed.id}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
                                        {seed.title}
                                    </a>
                                </td>
                                <td>{seed.popularity}</td>
                                <td>{seed.user.username}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
            <div style={{ height: 32 }} />
        </div>
    );
}