import React, { useState } from "react";

// 示例申诉数据
const appeals = [
    {
        appeal_id: "a001",
        user_id: "u001",
        content: "我没有作弊，请审核我的账号。",
        file_url: "http://sse.bjtu.edu.cn/media/attachments/2024/10/20241012160658.pdf",
        status: 0,
    },
    {
        appeal_id: "a002",
        user_id: "u002",
        content: "误封申诉，详见附件。",
        file_url: "http://sse.bjtu.edu.cn/media/attachments/2024/10/20241012160658.pdf",
        status: 1,
    },
];

// 简单PDF预览组件
function FileViewer({ url }) {
    if (!url) return <div>无附件</div>;
    if (url.endsWith(".pdf")) {
        return (
            <iframe
                src={url}
                title="PDF预览"
                width="100%"
                height="400px"
                style={{ border: "1px solid #ccc", borderRadius: 8 }}
            />
        );
    }
    // 这里只做PDF示例，实际可扩展为DOC等
    return <a href={url} target="_blank" rel="noopener noreferrer">下载附件</a>;
}

export default function AppealPage() {
    const [selectedId, setSelectedId] = useState(appeals[0].appeal_id);
    const selectedAppeal = appeals.find(a => a.appeal_id === selectedId);

    const handleApprove = () => {
        alert("已通过申诉（示例，无实际状态变更）");
    };
    const handleReject = () => {
        alert("已拒绝申诉（示例，无实际状态变更）");
    };

    return (
        <div style={{ display: "flex", minHeight: "100vh", background: "#f7faff" }}>
            {/* 侧栏 */}
            <div style={{ width: 180, background: "#fff", borderRight: "1px solid #e0e7ff", padding: 0 }}>
                <h3 style={{ textAlign: "center", padding: "18px 0 0 0", color: "#1976d2" }}>申诉列表</h3>
                <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 18 }}>
                    {appeals.map(a => (
                        <div
                            key={a.appeal_id}
                            onClick={() => setSelectedId(a.appeal_id)}
                            style={{
                                margin: "0 12px",
                                padding: "16px 10px",
                                borderRadius: 8,
                                background: selectedId === a.appeal_id ? "#e3f2fd" : "#fff",
                                border: `2px solid ${a.status === 1 ? "#43a047" : "#e53935"}`,
                                color: a.status === 1 ? "#43a047" : "#e53935",
                                fontWeight: 600,
                                cursor: "pointer",
                                boxShadow: selectedId === a.appeal_id ? "0 2px 8px #b2d8ea" : "none",
                                transition: "all 0.2s"
                            }}
                        >
                            {a.appeal_id}
                            <span style={{
                                float: "right",
                                fontSize: 12,
                                color: a.status === 1 ? "#43a047" : "#e53935"
                            }}>
                                {a.status === 1 ? "已审核" : "未审核"}
                            </span>
                        </div>
                    ))}
                </div>
            </div>
            {/* 申诉详情 */}
            <div style={{ flex: 1, padding: "40px 48px" }}>
                <h2 style={{ marginBottom: 24, color: "#1976d2" }}>申诉详情</h2>
                <div style={{ background: "#fff", borderRadius: 12, padding: 32, boxShadow: "0 2px 8px #e0e7ff", marginBottom: 32 }}>
                    <div style={{ marginBottom: 18 }}>
                        <b>申诉ID：</b>{selectedAppeal.appeal_id}
                    </div>
                    <div style={{ marginBottom: 18 }}>
                        <b>用户ID：</b>{selectedAppeal.user_id}
                    </div>
                    <div style={{ marginBottom: 18 }}>
                        <b>申诉内容：</b>{selectedAppeal.content}
                    </div>
                    <div style={{ marginBottom: 18 }}>
                        <b>申诉文件：</b>
                        <FileViewer url={selectedAppeal.file_url} />
                    </div>
                </div>
                {/* 审核按钮 */}
                <div style={{ display: "flex", gap: 32, justifyContent: "center" }}>
                    <button
                        style={{
                            background: selectedAppeal.status === 1 ? "#bdbdbd" : "#43a047",
                            color: "#fff",
                            border: "none",
                            borderRadius: 8,
                            padding: "10px 38px",
                            fontWeight: 600,
                            fontSize: 18,
                            cursor: selectedAppeal.status === 1 ? "not-allowed" : "pointer"
                        }}
                        disabled={selectedAppeal.status === 1}
                        onClick={handleApprove}
                    >
                        通过
                    </button>
                    <button
                        style={{
                            background: selectedAppeal.status === 1 ? "#bdbdbd" : "#e53935",
                            color: "#fff",
                            border: "none",
                            borderRadius: 8,
                            padding: "10px 38px",
                            fontWeight: 600,
                            fontSize: 18,
                            cursor: selectedAppeal.status === 1 ? "not-allowed" : "pointer"
                        }}
                        disabled={selectedAppeal.status === 1}
                        onClick={handleReject}
                    >
                        不通过
                    </button>
                </div>
            </div>
        </div>
    );
}