src/pages/Torrent/torrentDetail.tsx

import React, { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Button, Input, message, Spin, Tag, Card, Avatar, List, Pagination } from 'antd';
import { DownloadOutlined, ArrowLeftOutlined, SendOutlined } from '@ant-design/icons';
import {
    getTorrentInfo,
    downloadTorrent,
    addComment,
    getComments,
    getCategories,
} from '../../services/bt/index';

const PAGE_SIZE = 10;

const TorrentDetail: React.FC = () => {
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();

const [loading, setLoading] = useState(true);
const [torrent, setTorrent] = useState<any>(null);
const [categories, setCategories] = useState<any[]>([]);
const [comments, setComments] = useState<any[]>([]);
const [commentLoading, setCommentLoading] = useState(false);
const [comment, setComment] = useState('');
const [commentsTotal, setCommentsTotal] = useState(0);
const [pageNum, setPageNum] = useState(1);

useEffect(() => {
    setLoading(true);
    getTorrentInfo({ id: id! })
        .then((res) => setTorrent(res.data))
        .finally(() => setLoading(false));
    getCategories().then((res) => setCategories(res.data || []));
}, [id]);

useEffect(() => {
    fetchComments(pageNum);
    // eslint-disable-next-line
}, [id, pageNum]);

const fetchComments = (page: number) => {
    setCommentLoading(true);
    getComments({ torrentId: Number(id), pageNum: page, pageSize: PAGE_SIZE })
        .then((res) => {0
            setComments(res.data?.list || []);
            setCommentsTotal(res.data?.total || 0);
        })
        .finally(() => setCommentLoading(false));
};

const handleDownload = async () => {
    try {
        const res = await downloadTorrent({ id: id! });
        const blob = new Blob([res], { type: 'application/x-bittorrent' });
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `${torrent?.title || 'torrent'}.torrent`;
        a.click();
        window.URL.revokeObjectURL(url);
    } catch {
        message.error('下载失败');
    }
};

const handleAddComment = async () => {
    if (!comment.trim()) return;
    await addComment({ torrentId: Number(id), comment });
    setComment('');
    fetchComments(1);
    setPageNum(1);
    message.success('评论成功');
};

const getCategoryName = (catId: number) => {
    return categories.find((c) => c.id === catId)?.name || '未知分类';
};

const statusMap: Record<number, string> = {
    0: '候选中',
    1: '已发布',
    2: '审核不通过',
    3: '已上架修改重审中',
    10: '已下架',
};

// 星球主题样式
const planetBg = {
    background: 'radial-gradient(circle at 60% 40%, #2b6cb0 0%, #1a202c 100%)',
    minHeight: '100vh',
    padding: '32px 0',
};

return (
    <div style={planetBg}>
        <div style={{ maxWidth: 900, margin: '0 auto', background: 'rgba(255,255,255,0.08)', borderRadius: 16, boxShadow: '0 8px 32px rgba(0,0,0,0.2)', padding: 24 }}>
            <Button
                icon={<ArrowLeftOutlined />}
                type="link"
                onClick={() => navigate(-1)}
                style={{ color: '#fff', marginBottom: 16 }}
            >
                返回
            </Button>
            {loading ? (
                <Spin size="large" />
            ) : (
                <>
                    {torrent?.status !== 1 ? (
                        <div style={{ color: '#fff', fontSize: 24, textAlign: 'center', padding: '80px 0' }}>
                            当前状态：{statusMap[torrent?.status] || '未知状态'}
                        </div>
                    ) : (
                        <>
                            <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
                                <Avatar
                                    size={96}
                                    src={torrent?.cover || 'https://img.icons8.com/color/96/planet.png'}
                                    style={{ boxShadow: '0 0 24px #4299e1' }}
                                />
                                <div>
                                    <h1 style={{ color: '#fff', fontSize: 32, marginBottom: 8 }}>
                                        {torrent?.title}
                                    </h1>
                                    <div style={{ marginBottom: 8 }}>
                                        <Tag color="geekblue">{getCategoryName(torrent?.categoryId)}</Tag>
                                        {torrent?.tags?.map((tag: string) => (
                                            <Tag key={tag} color="blue">{tag}</Tag>
                                        ))}
                                    </div>
                                    <div style={{ color: '#cbd5e1', marginBottom: 8 }}>
                                        上传者：{torrent?.owner} | 上传时间：{torrent?.createdAt}
                                    </div>
                                    <Button
                                        type="primary"
                                        icon={<DownloadOutlined />}
                                        onClick={handleDownload}
                                        style={{ background: 'linear-gradient(90deg,#4299e1,#805ad5)', border: 'none' }}
                                    >
                                        下载种子
                                    </Button>
                                </div>
                            </div>
                            <Card
                                style={{
                                    marginTop: 32,
                                    background: 'rgba(255,255,255,0.12)',
                                    border: 'none',
                                    borderRadius: 12,
                                    color: '#fff',
                                }}
                                title={<span style={{ color: '#fff' }}>种子详情</span>}
                            >
                                <div dangerouslySetInnerHTML={{ __html: torrent?.description || '' }} />
                                <div style={{ marginTop: 16, color: '#cbd5e1' }}>
                                    <span>文件大小：{torrent?.size}</span>
                                    <span style={{ marginLeft: 24 }}>做种人数：{torrent?.seeders}</span>
                                    <span style={{ marginLeft: 24 }}>下载人数：{torrent?.leechers}</span>
                                    <span style={{ marginLeft: 24 }}>完成次数：{torrent?.completed}</span>
                                </div>
                            </Card>
                            <Card
                                style={{
                                    marginTop: 32,
                                    background: 'rgba(255,255,255,0.10)',
                                    border: 'none',
                                    borderRadius: 12,
                                    color: '#fff',
                                }}
                                title={<span style={{ color: '#fff' }}>星球评论</span>}
                            >
                                <List
                                    loading={commentLoading}
                                    dataSource={comments}
                                    locale={{ emptyText: '暂无评论' }}
                                    renderItem={(item: any) => {
                                        // 只渲染顶级评论（pid为null）
                                        if (item.pid !== null) return null;
                                        const [expanded, setExpanded] = useState(false);
                                        const [replyContent, setReplyContent] = useState('');
                                        const [replying, setReplying] = useState(false);

                                        const handleReply = async () => {
                                            if (!replyContent.trim()) return;
                                            setReplying(true);
                                            await addComment({ torrentId: Number(id), comment: replyContent, pid: item.id });
                                            setReplyContent('');
                                            setReplying(false);
                                            fetchComments(pageNum);
                                            message.success('回复成功');
                                        };

                                        return (
                                            <List.Item
                                                style={{
                                                    alignItems: 'flex-start',
                                                    border: 'none',
                                                    background: 'transparent',
                                                    padding: '20px 0',
                                                    borderBottom: '1px solid rgba(255,255,255,0.08)',
                                                }}
                                            >
                                                <List.Item.Meta
                                                    avatar={
                                                        <Avatar
                                                            src={item.avatar ? item.avatar.startsWith('http') ? item.avatar : `${item.avatar}` : 'https://img.icons8.com/color/48/planet.png'}
                                                            size={48}
                                                            style={{ boxShadow: '0 2px 8px #4299e1' }}
                                                        />
                                                    }
                                                    title={
                                                        <span style={{ color: '#fff', fontWeight: 500 }}>
                                                            {item.username || '匿名用户'}
                                                        </span>
                                                    }
                                                    description={
                                                        <span style={{ color: '#cbd5e1', fontSize: 16 }}>
                                                            {item.comment}
                                                            <span style={{ marginLeft: 16, fontSize: 12, color: '#a0aec0' }}>
                                                                {item.createTime}
                                                            </span>
                                                            <Button
                                                                type="link"
                                                                size="small"
                                                                style={{ marginLeft: 16, color: '#4299e1' }}
                                                                onClick={() => setExpanded((v) => !v)}
                                                            >
                                                                {expanded ? '收起回复' : `展开回复${item.children?.length ? ` (${item.children.length})` : ''}`}
                                                            </Button>
                                                        </span>
                                                    }
                                                />
                                                {expanded && (
                                                    <div style={{ width: '100%', marginTop: 12, marginLeft: 56 }}>
                                                        <List
                                                            dataSource={item.children}
                                                            itemLayout="horizontal"
                                                            locale={{ emptyText: '暂无子评论' }}
                                                            renderItem={(child: any) => (
                                                                <List.Item
                                                                    style={{
                                                                        border: 'none',
                                                                        background: 'transparent',
                                                                        padding: '12px 0 0 0',
                                                                        marginLeft: 0,
                                                                    }}
                                                                >
                                                                    <List.Item.Meta
                                                                        avatar={
                                                                            <Avatar
                                                                                src={child.avatar ? child.avatar.startsWith('http') ? child.avatar : `${child.avatar}` : 'https://img.icons8.com/color/48/planet.png'}
                                                                                size={36}
                                                                                style={{ boxShadow: '0 1px 4px #805ad5' }}
                                                                            />
                                                                        }
                                                                        title={
                                                                            <span style={{ color: '#c3bfff', fontWeight: 500, fontSize: 15 }}>
                                                                                {child.username || '匿名用户'}
                                                                            </span>
                                                                        }
                                                                        description={
                                                                            <span style={{ color: '#e0e7ef', fontSize: 15 }}>
                                                                                {child.comment}
                                                                                <span style={{ marginLeft: 12, fontSize: 12, color: '#a0aec0' }}>
                                                                                    {child.createTime}
                                                                                </span>
                                                                            </span>
                                                                        }
                                                                    />
                                                                </List.Item>
                                                            )}
                                                        />
                                                        <div style={{ display: 'flex', marginTop: 12, gap: 8 }}>
                                                            <Input.TextArea
                                                                value={replyContent}
                                                                onChange={e => setReplyContent(e.target.value)}
                                                                placeholder="回复该评论"
                                                                autoSize={{ minRows: 1, maxRows: 3 }}
                                                                style={{ background: 'rgba(255,255,255,0.15)', color: '#fff', border: 'none' }}
                                                            />
                                                            <Button
                                                                type="primary"
                                                                icon={<SendOutlined />}
                                                                loading={replying}
                                                                onClick={handleReply}
                                                                disabled={!replyContent.trim()}
                                                                style={{ background: 'linear-gradient(90deg,#4299e1,#805ad5)', border: 'none', height: 40 }}
                                                            >
                                                                发送
                                                            </Button>
                                                        </div>
                                                    </div>
                                                )}
                                            </List.Item>
                                        );
                                    }}
                                />
                                <Pagination
                                    style={{ marginTop: 16, textAlign: 'right' }}
                                    current={pageNum}
                                    pageSize={PAGE_SIZE}
                                    total={commentsTotal}
                                    onChange={setPageNum}
                                    showSizeChanger={false}
                                />
                                <div style={{ display: 'flex', marginTop: 24, gap: 8 }}>
                                    <Input.TextArea
                                        value={comment}
                                        onChange={e => setComment(e.target.value)}
                                        placeholder="在星球上留下你的评论吧~"
                                        autoSize={{ minRows: 2, maxRows: 4 }}
                                        style={{ background: 'rgba(255,255,255,0.15)', color: '#fff', border: 'none' }}
                                    />
                                    <Button
                                        type="primary"
                                        icon={<SendOutlined />}
                                        onClick={handleAddComment}
                                        disabled={!comment.trim()}
                                        style={{ background: 'linear-gradient(90deg,#4299e1,#805ad5)', border: 'none', height: 48 }}
                                    >
                                        发送
                                    </Button>
                                </div>
                            </Card>
                        </>
                    )}
                </>
            )}
        </div>
    </div>
);
};

export default TorrentDetail;