import React, { useState, useEffect } 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 "./App.css";
import { useNavigate } from "react-router-dom";
import { API_BASE_URL } from "./config";

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 areaTabs = [
  { label: "古典音乐", icon: <MovieIcon fontSize="small" /> },
  { label: "流行音乐", icon: <EmailIcon fontSize="small" /> },
  { label: "摇滚", icon: <PersonIcon fontSize="small" /> },
  { label: "电子音乐", icon: <EmojiPeopleIcon fontSize="small" /> },
  { label: "说唱", icon: <PersonIcon fontSize="small" /> },
];

export default function MusicPage() {
  const navigate = useNavigate();
  const [searchText, setSearchText] = useState('');
  const [userInfo, setUserInfo] = useState({ avatar_url: '', username: '' });
  const [userPT, setUserPT] = useState({ magic: 0, ratio: 0, upload: 0, download: 0 });
  const [activeTab, setActiveTab] = useState(0);
  const [musicList, setMusicList] = useState([]);

  useEffect(() => {
    const match = document.cookie.match('(^|;)\\s*userId=([^;]+)');
    const userId = match ? match[2] : null;
    if (!userId) return;
    fetch(`${API_BASE_URL}/api/get-userpt?userid=${encodeURIComponent(userId)}`)
      .then(res => res.json())
      .then(data => {
        setUserInfo({ avatar_url: data.user.avatar_url, username: data.user.username });
        setUserPT({
          magic: data.magic_value || data.magic || 0,
          ratio: data.share_ratio || data.share || 0,
          upload: data.upload_amount || data.upload || 0,
          download: data.download_amount || data.download || 0,
        });
      })
      .catch(err => console.error('Fetching user profile failed', err));
  }, []);

  // 每个tab对应的音乐类型
  const musicTypesList = [
    ["华语音乐（大陆）", "欧美音乐", "日韩音乐", "港台音乐", "其他"], // 古典音乐
    ["港台流行", "港台摇滚", "港台其他"], // 流行音乐
    ["欧美流行", "欧美摇滚", "欧美其他"], // 摇滚
    ["日韩流行", "日韩其他"], // 电子音乐
    ["其他类型1", "其他类型2"] // 说唱
  ];
  const musicTypes = musicTypesList[activeTab] || [];

  useEffect(() => {
    const area = areaTabs[activeTab].label;
    fetch(`${API_BASE_URL}/api/get-seed-list-by-tag?tag=${encodeURIComponent(area)}`)
      .then(res => res.json())
      .then(data => setMusicList(data))
      .catch(() => setMusicList([]));
  }, [activeTab]);

  // 搜索按钮处理
  const handleSearch = () => {
    const area = areaTabs[activeTab].label;
    fetch(`${API_BASE_URL}/api/search-seeds?tag=${encodeURIComponent(area)}&keyword=${encodeURIComponent(searchText)}`)
      .then(res => res.json())
      .then(data => {
        setMusicList(data);
      })
      .catch(() => setMusicList([]));
  };

  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')}>
          {userInfo.avatar_url ? (
            <img src={userInfo.avatar_url} alt="用户头像" style={{ width: 38, height: 38, borderRadius: '50%', objectFit: 'cover' }} />
          ) : (
            <AccountCircleIcon style={{ fontSize: 38, color: '#1a237e', background: '#e0f3ff', borderRadius: '50%' }} />
          )}
        </div>
        <div style={{ color: '#222', fontWeight: 500, marginRight: 24 }}>{userInfo.username || '用户栏'}</div>
        <div style={{ display: 'flex', gap: 28, flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}>
          <span style={{ color: '#1976d2', fontWeight: 500 }}>魔力值: <b>{userPT.magic}</b></span>
          <span style={{ color: '#1976d2', fontWeight: 500 }}>分享率: <b>{userPT.ratio}</b></span>
          <span style={{ color: '#1976d2', fontWeight: 500 }}>上传量: <b>{userPT.upload}</b></span>
          <span style={{ color: '#1976d2', fontWeight: 500 }}>下载量: <b>{userPT.download}</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="输入搜索关键词"
          value={searchText}
          onChange={e => setSearchText(e.target.value)}
        />
        <button className="search-btn" onClick={handleSearch}>
          <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="music-table">
          <thead>
            <tr>
              <th>音乐类型</th>
              <th>标题</th>
              <th>发布者</th>
              <th>大小</th>
              <th>热度</th>
              <th>折扣倍率</th>
            </tr>
          </thead>
          <tbody>
            {musicList.length > 0 ? (
              musicList.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.username}</td>
                  <td>{item.seedsize}</td>
                  <td>{item.downloadtimes}</td>
                  <td>{item.discount == null ? 1 : item.discount}</td>
                </tr>
              ))
            ) : (
              musicTypes.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>
                  <td>--</td>
                  <td>--</td>
                  <td>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>
  );
}