import React, { useEffect, useState } from 'react';
import { PlusOutlined, UploadOutlined } from '@ant-design/icons';
import {
Form,
Input,
Button,
Select,
Upload,
message,
Tag,
Space,
Typography,
Modal,
} from 'antd';
import{
    getCategories,
    addTorrent,
    uploadTorrentFile
}  from '../../services/bt/index';

const { Option } = Select;
const { TextArea } = Input;
const { Title } = Typography;

const TorrentUpload: React.FC = () => {
const [categories, setCategories] = useState<{ id: number; name: string }[]>([]);
const [tagOptions, setTagOptions] = useState<string[]>([]);
const [customTags, setCustomTags] = useState<string[]>([]);
const [fileList, setFileList] = useState<any[]>([]);
const [uploading, setUploading] = useState(false);
const [form] = Form.useForm();
const [tagInputVisible, setTagInputVisible] = useState(false);
const [tagInputValue, setTagInputValue] = useState('');

useEffect(() => {
    getCategories().then((res) => {
        if (Array.isArray(res.data)) {
            setCategories(res.data);
            setTagOptions(res.data.map((cat: { name: string }) => cat.name));
        }
    });
}, []);

const handleTagClose = (removedTag: string) => {
    setCustomTags(customTags.filter(tag => tag !== removedTag));
};

const showTagInput = () => setTagInputVisible(true);

const handleTagInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setTagInputValue(e.target.value);
};

const handleTagInputConfirm = () => {
    if (
        tagInputValue &&
        !customTags.includes(tagInputValue) &&
        !tagOptions.includes(tagInputValue)
    ) {
        setCustomTags([...customTags, tagInputValue]);
    }
    setTagInputVisible(false);
    setTagInputValue('');
};

const beforeUpload = (file: File) => {
    const isTorrent = file.name.endsWith('.torrent');
    if (!isTorrent) {
        message.error('只能上传.torrent文件');
    }
    setFileList([file]);
    return false;
};

const handleSubmit = async (values: any) => {
    if (fileList.length === 0) {
        message.error('请上传.torrent文件');
        return;
    }
    setUploading(true);
    try {
        // 1. 添加种子基本信息
        const addRes = await addTorrent({
            ...values,
            category: Number(values.category),
            description: values.description,
            name: values.name,
            title: values.title,
            subheading: values.subheading || '',
            remark: values.remark || '',
        });
        if (!addRes?.id) {
            throw new Error('种子信息添加失败');
        }
        // 2. 上传.torrent文件
        await uploadTorrentFile(fileList[0], addRes.id);

        message.success('种子上传成功');
        form.resetFields();
        setFileList([]);
        setCustomTags([]);
    } catch (err: any) {
        message.error(err.message || '上传失败');
    } finally {
        setUploading(false);
    }
};

return (
    <div
        style={{
            minHeight: '100vh',
            background: 'radial-gradient(ellipse at 50% 30%, #232946 60%, #0f1021 100%)',
            position: 'relative',
            overflow: 'hidden',
            padding: '0 0 80px 0',
        }}
    >
        {/* 星空背景装饰 */}
        <svg
            style={{
                position: 'absolute',
                top: 0,
                left: 0,
                width: '100vw',
                height: '100vh',
                zIndex: 0,
                pointerEvents: 'none',
            }}
        >
            {/* 随机星星 */}
            {Array.from({ length: 120 }).map((_, i) => (
                <circle
                    key={i}
                    cx={Math.random() * window.innerWidth}
                    cy={Math.random() * window.innerHeight}
                    r={Math.random() * 1.2 + 0.2}
                    fill="#fff"
                    opacity={Math.random() * 0.7 + 0.3}
                />
            ))}
            {/* 银河带 */}
            <ellipse
                cx={window.innerWidth / 2}
                cy={window.innerHeight / 2.5}
                rx={window.innerWidth / 2.2}
                ry={80}
                fill="url(#milkyway)"
                opacity="0.18"
            />
            <defs>
                <radialGradient id="milkyway" cx="50%" cy="50%" r="100%">
                    <stop offset="0%" stopColor="#fff" stopOpacity="0.8" />
                    <stop offset="100%" stopColor="#232946" stopOpacity="0" />
                </radialGradient>
            </defs>
        </svg>

        <div
            style={{
                maxWidth: 600,
                margin: '0 auto',
                marginTop: 80,
                background: 'rgba(30,34,60,0.92)',
                borderRadius: 24,
                boxShadow: '0 8px 32px 0 rgba(31,38,135,0.25)',
                padding: '48px 36px 32px 36px',
                position: 'relative',
                zIndex: 1,
                border: '1.5px solid #3a3f5c',
                backdropFilter: 'blur(2px)',
            }}
        >
            <div style={{ textAlign: 'center', marginBottom: 24 }}>
                <svg width="64" height="64" viewBox="0 0 64 64">
                    <defs>
                        <radialGradient id="star" cx="50%" cy="50%" r="50%">
                            <stop offset="0%" stopColor="#fffbe6" />
                            <stop offset="100%" stopColor="#667eea" />
                        </radialGradient>
                    </defs>
                    <circle cx="32" cy="32" r="28" fill="url(#star)" opacity="0.7" />
                    <polygon
                        points="32,12 36,28 52,28 38,36 42,52 32,42 22,52 26,36 12,28 28,28"
                        fill="#fff"
                        opacity="0.9"
                    />
                </svg>
                <Title
                    level={2}
                    style={{
                        color: '#fff',
                        margin: '12px 0 0 0',
                        letterSpacing: 2,
                        fontWeight: 700,
                        fontSize: 30,
                        textShadow: '0 2px 12px #667eea55',
                    }}
                >
                    星空PT · 种子上传
                </Title>
                <div style={{ color: '#bfcfff', fontSize: 16, marginTop: 4, letterSpacing: 1 }}>
                    分享你的资源，点亮星空
                </div>
            </div>
            <Form
                form={form}
                layout="vertical"
                onFinish={handleSubmit}
                initialValues={{ anonymous: 0 }}
                style={{ zIndex: 1, position: 'relative' }}
            >
                <Form.Item
                    label={<span style={{ color: '#bfcfff', fontWeight: 500 }}>主标题</span>}
                    name="title"
                    rules={[{ required: true, message: '请输入主标题' }]}
                >
                    <Input
                        placeholder="请输入主标题"
                        size="large"
                        style={{
                            background: 'rgba(255,255,255,0.06)',
                            border: '1px solid #3a3f5c',
                            color: '#fff',
                        }}
                    />
                </Form.Item>
                <Form.Item
                    label={<span style={{ color: '#bfcfff', fontWeight: 500 }}>副标题</span>}
                    name="subheading"
                >
                    <Input
                        placeholder="可选，副标题"
                        size="large"
                        style={{
                            background: 'rgba(255,255,255,0.06)',
                            border: '1px solid #3a3f5c',
                            color: '#fff',
                        }}
                    />
                </Form.Item>
                <Form.Item
                    label={<span style={{ color: '#bfcfff', fontWeight: 500 }}>种子名称</span>}
                    name="name"
                    rules={[{ required: true, message: '请输入种子名称' }]}
                >
                    <Input
                        placeholder="请输入种子名称"
                        size="large"
                        style={{
                            background: 'rgba(255,255,255,0.06)',
                            border: '1px solid #3a3f5c',
                            color: '#fff',
                        }}
                    />
                </Form.Item>
                <Form.Item
                    label={<span style={{ color: '#bfcfff', fontWeight: 500 }}>分类</span>}
                    name="category"
                    rules={[{ required: true, message: '请选择分类' }]}
                >
                    <Select
                        placeholder="请选择分类"
                        size="large"
                        dropdownStyle={{ background: '#232946', color: '#fff' }}
                        style={{
                            background: 'rgba(255,255,255,0.06)',
                            border: '1px solid #3a3f5c',
                            color: '#fff',
                        }}
                    >
                        {categories.map((cat) => (
                            <Option key={cat.id} value={cat.id}>
                                {cat.name}
                            </Option>
                        ))}
                    </Select>
                </Form.Item>
                <Form.Item label={<span style={{ color: '#bfcfff', fontWeight: 500 }}>标签</span>}>
                    <Space wrap>
                        {customTags.map((tag) => (
                            <Tag
                                key={tag}
                                closable
                                color="geekblue"
                                onClose={() => handleTagClose(tag)}
                                style={{
                                    marginBottom: 4,
                                    fontSize: 15,
                                    padding: '4px 12px',
                                    borderRadius: 8,
                                    background: 'rgba(102,126,234,0.18)',
                                    border: '1px solid #667eea',
                                    color: '#fff',
                                }}
                            >
                                {tag}
                            </Tag>
                        ))}
                        {tagInputVisible ? (
                            <Input
                                size="small"
                                style={{
                                    width: 120,
                                    background: 'rgba(255,255,255,0.08)',
                                    color: '#fff',
                                    border: '1px solid #667eea',
                                }}
                                value={tagInputValue}
                                onChange={handleTagInputChange}
                                onBlur={handleTagInputConfirm}
                                onPressEnter={handleTagInputConfirm}
                                autoFocus
                            />
                        ) : (
                            <Tag
                                onClick={showTagInput}
                                style={{
                                    background: 'rgba(102,126,234,0.10)',
                                    border: '1px dashed #667eea',
                                    cursor: 'pointer',
                                    color: '#bfcfff',
                                    fontSize: 15,
                                    borderRadius: 8,
                                    padding: '4px 12px',
                                }}
                            >
                                <PlusOutlined /> 自定义标签
                            </Tag>
                        )}
                    </Space>
                </Form.Item>
                <Form.Item
                    label={<span style={{ color: '#bfcfff', fontWeight: 500 }}>描述</span>}
                    name="description"
                    rules={[{ required: true, message: '请输入描述' }]}
                >
                    <TextArea
                        rows={6}
                        placeholder="请输入种子描述，支持Markdown"
                        style={{
                            background: 'rgba(255,255,255,0.06)',
                            border: '1px solid #3a3f5c',
                            color: '#fff',
                            fontSize: 15,
                        }}
                    />
                </Form.Item>
                <Form.Item
                    label={<span style={{ color: '#bfcfff', fontWeight: 500 }}>备注</span>}
                    name="remark"
                >
                    <Input
                        placeholder="可选，备注信息"
                        size="large"
                        style={{
                            background: 'rgba(255,255,255,0.06)',
                            border: '1px solid #3a3f5c',
                            color: '#fff',
                        }}
                    />
                </Form.Item>
                <Form.Item
                    label={<span style={{ color: '#bfcfff', fontWeight: 500 }}>匿名上传</span>}
                    name="anonymous"
                    valuePropName="checked"
                >
                    <Select
                        size="large"
                        style={{
                            background: 'rgba(255,255,255,0.06)',
                            border: '1px solid #3a3f5c',
                            color: '#fff',
                        }}
                    >
                        <Option value={0}>否</Option>
                        <Option value={1}>是</Option>
                    </Select>
                </Form.Item>
                <Form.Item
                    label={<span style={{ color: '#bfcfff', fontWeight: 500 }}>上传.torrent文件</span>}
                    required
                >
                    <Upload
                        beforeUpload={beforeUpload}
                        fileList={fileList}
                        onRemove={() => setFileList([])}
                        accept=".torrent"
                        maxCount={1}
                        showUploadList={{ showRemoveIcon: true }}
                        customRequest={() => {}}
                    >
                        <Button
                            icon={<UploadOutlined />}
                            size="large"
                            style={{
                                background: 'linear-gradient(90deg, #667eea 0%, #764ba2 100%)',
                                border: 'none',
                                color: '#fff',
                                fontWeight: 500,
                                boxShadow: '0 2px 8px #667eea33',
                            }}
                        >
                            选择.torrent文件
                        </Button>
                    </Upload>
                </Form.Item>
                <Form.Item>
                    <Button
                        type="primary"
                        htmlType="submit"
                        loading={uploading}
                        block
                        size="large"
                        style={{
                            background: 'linear-gradient(90deg, #667eea 0%, #764ba2 100%)',
                            border: 'none',
                            fontWeight: 600,
                            letterSpacing: 2,
                            fontSize: 18,
                            marginTop: 8,
                            boxShadow: '0 4px 16px 0 rgba(118,75,162,0.15)',
                        }}
                    >
                        上传
                    </Button>
                </Form.Item>
            </Form>
        </div>
        <div
            style={{
                position: 'fixed',
                bottom: 16,
                width: '100%',
                textAlign: 'center',
                color: '#bfcfff99',
                fontSize: 14,
                letterSpacing: 1,
                zIndex: 2,
                pointerEvents: 'none',
                textShadow: '0 2px 8px #232946',
            }}
        >
            星空PT · 让每一份分享都如星辰般闪耀
        </div>
    </div>
);
};

export default TorrentUpload;