import React, { useState } from "react";
import { useParams } from "react-router-dom";

// 求种任务示例数据
const begSeedList = [
    {
        beg_id: "beg001",
        info: "求《三体》高清资源",
        beg_count: 5,
        reward_magic: 100,
        deadline: "2025-06-10T23:59:59",
        has_match: 0,
    },
    {
        beg_id: "beg002",
        info: "求《灌篮高手》国语配音版",
        beg_count: 3,
        reward_magic: 50,
        deadline: "2024-05-01T23:59:59",
        has_match: 1,
    },
    {
        beg_id: "beg003",
        info: "求《黑暗之魂3》PC版种子",
        beg_count: 2,
        reward_magic: 80,
        deadline: "2024-04-01T23:59:59",
        has_match: 0,
    },
];

// SubmitSeed表示例数据
const submitSeedList = [
    { beg_id: "beg001", seed_id: "seed001", votes: 3 },
    { beg_id: "beg001", seed_id: "seed002", votes: 1 },
    { beg_id: "beg002", seed_id: "seed003", votes: 2 },
];

// 种子信息映射
const seedInfoMap = {
    seed001: { title: "三体 1080P 蓝光", subtitle: "高码率无水印" },
    seed002: { title: "三体 720P", subtitle: "清晰版" },
    seed003: { title: "灌篮高手 国语配音", subtitle: "全剧集" },
};

export default function BegInfo() {
    const { begid } = useParams();
    const beg = begSeedList.find((b) => b.beg_id === begid);
    const [seeds, setSeeds] = useState(
        submitSeedList.filter((s) => s.beg_id === begid)
    );
    const [showForm, setShowForm] = useState(false);
    const [formData, setFormData] = useState({
        title: "",
        subtitle: "",
        torrentFile: null,
    });

    if (!beg) return <div style={{ padding: 40 }}>未找到该求种信息</div>;

    const isExpired = new Date(beg.deadline) < new Date();
    const isFinished = beg.has_match === 1;
    const isActive = !isExpired && !isFinished;

    // 投票功能（前端+1）
    const handleVote = (seed_id) => {
        setSeeds((prev) =>
            prev.map((s) =>
                s.seed_id === seed_id ? { ...s, votes: s.votes + 1 } : s
            )
        );
    };

    // 上传表单处理
    const handleFormChange = (e) => {
        const { name, value, files } = e.target;
        if (name === "torrentFile") {
            setFormData((f) => ({ ...f, torrentFile: files[0] }));
        } else {
            setFormData((f) => ({ ...f, [name]: value }));
        }
    };

    const handleSubmitSeed = (e) => {
        e.preventDefault();
        // 这里只做前端演示，实际应上传到后端
        const newSeedId = "seed" + Math.floor(Math.random() * 10000);
        setSeeds((prev) => [
            ...prev,
            {
                beg_id: begid,
                seed_id: newSeedId,
                votes: 0,
            },
        ]);
        seedInfoMap[newSeedId] = {
            title: formData.title,
            subtitle: formData.subtitle,
        };
        setShowForm(false);
        setFormData({ title: "", subtitle: "", torrentFile: null });
        alert("提交成功（前端演示）");
    };

    return (
        <div className="container">
            <h1 style={{ margin: "24px 0 32px 0", color: "#1976d2" }}>
                求种详情
            </h1>
            <div
                style={{
                    background: "#e3f7e7",
                    border: "1.5px solid #b2d8ea",
                    borderRadius: 12,
                    padding: 24,
                    maxWidth: 600,
                    margin: "0 auto 32px auto",
                    boxShadow: "0 2px 8px #e0e7ff",
                }}
            >
                <div style={{ fontWeight: 600, fontSize: 20, marginBottom: 12 }}>
                    {beg.info}
                </div>
                <div>求种人数：{beg.beg_count}</div>
                <div>悬赏魔力值：{beg.reward_magic}</div>
                <div>截止时间：{new Date(beg.deadline).toLocaleString()}</div>
                <div>
                    状态：
                    {isFinished
                        ? "已完成"
                        : isExpired
                            ? "已过期"
                            : "进行中"}
                </div>
            </div>

            <h2 style={{ margin: "24px 0 12px 0" }}>已提交种子</h2>
            <table className="movie-table" style={{ maxWidth: 700, margin: "0 auto" }}>
                <thead>
                    <tr>
                        <th>标题</th>
                        <th>简介</th>
                        <th>投票数</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {seeds.length === 0 ? (
                        <tr>
                            <td colSpan={4} style={{ textAlign: "center" }}>暂无提交的种子</td>
                        </tr>
                    ) : (
                        seeds.map((s) => (
                            <tr key={s.seed_id}>
                                <td>{seedInfoMap[s.seed_id]?.title || "未知标题"}</td>
                                <td>{seedInfoMap[s.seed_id]?.subtitle || "无简介"}</td>
                                <td>{s.votes}</td>
                                <td>
                                    {isActive ? (
                                        <button
                                            onClick={() => handleVote(s.seed_id)}
                                            style={{
                                                background: "#1976d2",
                                                color: "#fff",
                                                border: "none",
                                                borderRadius: 6,
                                                padding: "6px 18px",
                                                fontWeight: 500,
                                                cursor: "pointer",
                                                transition: "background 0.2s",
                                            }}
                                        >
                                            投票
                                        </button>
                                    ) : (
                                        <span style={{ color: "#b0b0b0" }}>不可投票</span>
                                    )}
                                </td>
                            </tr>
                        ))
                    )}
                </tbody>
            </table>

            {isActive && (
                <div style={{ margin: "32px 0", textAlign: "center" }}>
                    <button
                        onClick={() => setShowForm(true)}
                        style={{
                            fontSize: 18,
                            padding: "12px 36px",
                            background: "linear-gradient(90deg, #42a5f5 0%, #1976d2 100%)",
                            color: "#fff",
                            border: "none",
                            borderRadius: 8,
                            fontWeight: 600,
                            boxShadow: "0 2px 8px #b2d8ea",
                            cursor: "pointer",
                            transition: "background 0.2s",
                        }}
                    >
                        提交悬赏种子
                    </button>
                </div>
            )}

            {showForm && isActive && (
                <div
                    style={{
                        background: "#fff",
                        border: "1.5px solid #b2d8ea",
                        borderRadius: 12,
                        padding: 24,
                        maxWidth: 480,
                        margin: "0 auto",
                        boxShadow: "0 2px 8px #e0e7ff",
                    }}
                >
                    <h3 style={{ color: "#1976d2", marginBottom: 18 }}>上传种子</h3>
                    <form onSubmit={handleSubmitSeed}>
                        <div style={{ marginBottom: 16 }}>
                            <label style={{ display: "inline-block", width: 60 }}>标题：</label>
                            <input
                                type="text"
                                name="title"
                                value={formData.title}
                                onChange={handleFormChange}
                                required
                                style={{
                                    padding: "6px 12px",
                                    borderRadius: 6,
                                    border: "1px solid #b2d8ea",
                                    width: 280,
                                }}
                            />
                        </div>
                        <div style={{ marginBottom: 16 }}>
                            <label style={{ display: "inline-block", width: 60 }}>简介：</label>
                            <input
                                type="text"
                                name="subtitle"
                                value={formData.subtitle}
                                onChange={handleFormChange}
                                style={{
                                    padding: "6px 12px",
                                    borderRadius: 6,
                                    border: "1px solid #b2d8ea",
                                    width: 280,
                                }}
                            />
                        </div>
                        <div style={{ marginBottom: 16 }}>
                            <label style={{ display: "inline-block", width: 60 }}>种子文件：</label>
                            <input
                                type="file"
                                name="torrentFile"
                                accept=".torrent"
                                onChange={handleFormChange}
                                required
                                style={{
                                    padding: "6px 0",
                                    borderRadius: 6,
                                    border: "1px solid #b2d8ea",
                                    width: 280,
                                }}
                            />
                        </div>
                        <div style={{ marginTop: 18 }}>
                            <button
                                type="submit"
                                style={{
                                    background: "#1976d2",
                                    color: "#fff",
                                    border: "none",
                                    borderRadius: 6,
                                    padding: "8px 28px",
                                    fontWeight: 500,
                                    fontSize: 16,
                                    marginRight: 18,
                                    cursor: "pointer",
                                }}
                            >
                                提交
                            </button>
                            <button
                                type="button"
                                onClick={() => setShowForm(false)}
                                style={{
                                    background: "#b0b0b0",
                                    color: "#fff",
                                    border: "none",
                                    borderRadius: 6,
                                    padding: "8px 28px",
                                    fontWeight: 500,
                                    fontSize: 16,
                                    cursor: "pointer",
                                }}
                            >
                                取消
                            </button>
                        </div>
                    </form>
                </div>
            )}
        </div>
    );
}