import React, { useState } from "react";
import HelpIcon from "@mui/icons-material/Help";
import { useNavigate } from "react-router-dom";

// 初始硬编码数据
const initialBegSeedList = [
    {
        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,
    },
];

export default function BegSeedPage() {
    const navigate = useNavigate();
    const now = new Date();
    const [begSeedList, setBegSeedList] = useState(initialBegSeedList);
    const [showForm, setShowForm] = useState(false);
    const [formData, setFormData] = useState({
        info: "",
        reward_magic: "",
        deadline: "",
    });

    // 表单输入处理
    const handleFormChange = (e) => {
        const { name, value } = e.target;
        setFormData((prev) => ({
            ...prev,
            [name]: value,
        }));
    };

    // 提交新求种任务
    const handleSubmit = (e) => {
        e.preventDefault();
        const newBegId = "beg" + Math.floor(Math.random() * 10000);
        setBegSeedList([
            {
                beg_id: newBegId,
                info: formData.info,
                beg_count: 1,
                reward_magic: Number(formData.reward_magic),
                deadline: formData.deadline,
                has_match: 0,
            },
            ...begSeedList,
        ]);
        setShowForm(false);
        setFormData({ info: "", reward_magic: "", deadline: "" });
        alert("发布成功（前端演示）");
    };

    return (
        <div className="container">
            <h1 style={{ margin: "24px 0 32px 0", color: "#1976d2" }}>
                <HelpIcon style={{ verticalAlign: "middle", marginRight: 8 }} />
                求种列表
            </h1>
            <div style={{ margin: "0 0 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 && (
                <div
                    style={{
                        background: "#fff",
                        border: "1.5px solid #b2d8ea",
                        borderRadius: 12,
                        padding: 24,
                        maxWidth: 480,
                        margin: "0 auto 32px auto",
                        boxShadow: "0 2px 8px #e0e7ff",
                    }}
                >
                    <h3 style={{ color: "#1976d2", marginBottom: 18 }}>发布求种任务</h3>
                    <form onSubmit={handleSubmit}>
                        <div style={{ marginBottom: 16 }}>
                            <label style={{ display: "inline-block", width: 80 }}>求种信息：</label>
                            <input
                                type="text"
                                name="info"
                                value={formData.info}
                                onChange={handleFormChange}
                                required
                                style={{
                                    padding: "6px 12px",
                                    borderRadius: 6,
                                    border: "1px solid #b2d8ea",
                                    width: 260,
                                }}
                            />
                        </div>
                        <div style={{ marginBottom: 16 }}>
                            <label style={{ display: "inline-block", width: 80 }}>悬赏魔力值：</label>
                            <input
                                type="number"
                                name="reward_magic"
                                value={formData.reward_magic}
                                onChange={handleFormChange}
                                required
                                min={1}
                                style={{
                                    padding: "6px 12px",
                                    borderRadius: 6,
                                    border: "1px solid #b2d8ea",
                                    width: 120,
                                }}
                            />
                        </div>
                        <div style={{ marginBottom: 16 }}>
                            <label style={{ display: "inline-block", width: 80 }}>截止日期：</label>
                            <input
                                type="datetime-local"
                                name="deadline"
                                value={formData.deadline}
                                onChange={handleFormChange}
                                required
                                style={{
                                    padding: "6px 12px",
                                    borderRadius: 6,
                                    border: "1px solid #b2d8ea",
                                    width: 200,
                                }}
                            />
                        </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 style={{ display: "flex", flexWrap: "wrap", gap: 24 }}>
                {begSeedList.map((beg) => {
                    const isExpired =
                        new Date(beg.deadline) < now || beg.has_match === 1;
                    return (
                        <div
                            key={beg.beg_id}
                            style={{
                                background: isExpired ? "#f0f0f0" : "#e3f7e7",
                                color: isExpired ? "#b0b0b0" : "#222",
                                border: "1.5px solid #b2d8ea",
                                borderRadius: 12,
                                padding: 18,
                                minWidth: 320,
                                maxWidth: 420,
                                boxShadow: "0 2px 8px #e0e7ff",
                                opacity: isExpired ? 0.6 : 1,
                                cursor: "pointer",
                                marginBottom: 12,
                                transition: "box-shadow 0.2s",
                            }}
                            onClick={() => navigate(`/begseed/${beg.beg_id}`)}
                        >
                            <div style={{ fontWeight: 600, fontSize: 18, marginBottom: 8 }}>
                                {beg.info}
                            </div>
                            <div>求种人数：{beg.beg_count}</div>
                            <div>悬赏魔力值：{beg.reward_magic}</div>
                            <div>
                                截止时间：{new Date(beg.deadline).toLocaleString()}
                            </div>
                            <div>
                                状态：
                                {beg.has_match === 1
                                    ? "已完成"
                                    : new Date(beg.deadline) < now
                                        ? "已过期"
                                        : "进行中"}
                            </div>
                        </div>
                    );
                })}
            </div>
        </div>
    );
}