import React from "react";
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 "./App.css";
import { useNavigate } from "react-router-dom";

const navItems = [
  { 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: <AccountCircleIcon />, path: "/publish" }, // Added Publish option
];

const sportTypes = [""];

const areaTabs = [
  { label: "篮球", icon: <MovieIcon fontSize="small" /> },
  { label: "足球", icon: <EmailIcon fontSize="small" /> },
  { label: "羽毛球", icon: <EmojiPeopleIcon fontSize="small" /> },
  { label: "排球", icon: <PersonIcon fontSize="small" /> },
  { label: "电竞", icon: <PersonIcon fontSize="small" />, active: true },
];

const exampleTorrents = [
  { type: "Soccer", title: "实例1", id: 1 },
  { type: "Basketball", title: "实例2", id: 2 },
  { type: "Tennis", title: "实例3", id: 3 },
];

export default function SportPage() {
  const navigate = useNavigate();
  const [activeTab, setActiveTab] = React.useState(0);
  const [sportList, setSportList] = React.useState([]);

  // 每个tab对应的运动类型
  const sportTypesList = [
    ["篮球赛事", "篮球技巧", "篮球明星"], // 篮球
    ["足球赛事", "足球技巧", "足球明星"], // 足球
    ["羽毛球赛事", "羽毛球技巧"], // 羽毛球
    ["排球赛事", "排球技巧"], // 排球
    ["电竞赛事", "电竞技巧"], // 电竞
  ];
  const sportTypes = sportTypesList[activeTab] || [];

  React.useEffect(() => {
    // 假设后端接口为 /api/sports?area=篮球
    const area = areaTabs[activeTab].label;
    fetch(`http://192.168.5.9:8080/api/get-seed-list-by-tag?tag=${encodeURIComponent(area)}`)
      .then(res => res.json())
      .then(data => setSportList(data))
      .catch(() => setSportList([]));
  }, [activeTab]);

  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="search-section card">
        <input className="search-input" placeholder="输入搜索关键词" />
        <button className="search-btn">
          <span role="img" aria-label="search">
            🔍
          </span>
        </button>
      </div>
      <div
        className="area-tabs"
        style={{
          display: "flex",
          justifyContent: "center",
          gap: 24,
          margin: "18px 0",
        }}
      >
        {areaTabs.map((tab, idx) => (
          <div
            key={tab.label}
            className={activeTab === idx ? "area-tab active" : "area-tab"}
            onClick={() => setActiveTab(idx)}
          >
            {tab.icon} <span>{tab.label}</span>
          </div>
        ))}
      </div>
      <div className="table-section">
        <table className="sport-table">
          <thead>
            <tr>
              <th>体育类型</th>
              <th>标题</th>
              <th>发布者</th>
            </tr>
          </thead>
          <tbody>
            {sportList.length > 0 ? (
              sportList.map((item, index) => (
                <tr key={item.id || index}>
                  <td>
                    <a href={`/torrent/${item.seedid}`} style={{ color: "#1a237e", textDecoration: "none" }}>
                      {item.seedtag}
                    </a>
                  </td>
                  <td>
                    <a href={`/torrent/${item.seedid}`} style={{ color: "#1a237e", textDecoration: "none" }}>
                      {item.title}
                    </a>
                  </td>
                  <td>{item.user.username}</td>
                </tr>
              ))
            ) : (
              sportTypes.map((type, index) => (
                <tr key={type}>
                  <td>
                    <a href={`/torrent/${type}`} style={{ color: "#1a237e", textDecoration: "none" }}>
                      {type}
                    </a>
                  </td>
                  <td>
                    <a href={`/torrent/${type}`} style={{ color: "#1a237e", textDecoration: "none" }}>
                      种子{index + 1}
                    </a>
                  </td>
                  <td>发布者{index + 1}</td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>
      <div style={{ height: 32 }} />
      <Pagination />
    </div>
  );
}

function Pagination() {
  const [page, setPage] = React.useState(3);
  const total = 5;
  return (
    <div className="pagination">
      <button
        onClick={() => setPage((p) => Math.max(1, p - 1))}
        disabled={page === 1}
      >
        上一页
      </button>
      <span className="page-num">
        {page}/{total}
      </span>
      <button
        onClick={() => setPage((p) => Math.min(total, p + 1))}
        disabled={page === total}
      >
        下一页
      </button>
      <span className="page-info">
        第 <b>{page}</b> 页
      </span>
    </div>
  );
}