import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { API_BASE_URL } from "./config";

// 示例数据
const initialConfig = {
    FarmNumber: 3,
    FakeTime: 3,
    BegVote: 3,
    CheatTime: 5,
};

export default function AdminPage() {
    const navigate = useNavigate();
    const [config, setConfig] = useState(initialConfig);
    // state for users fetched from backend
    const [cheatUsers, setCheatUsers] = useState([]);
    const [suspiciousUsers, setSuspiciousUsers] = useState([]);

    // helper to get admin userId from cookie
    const getUserIdFromCookie = () => {
        const match = document.cookie.match('(^|;)\\s*userId=([^;]+)');
        return match ? match[2] : null;
    };

    // fetch cheat users list from backend
    const fetchCheatUsers = async () => {
        const adminId = getUserIdFromCookie();
        if (!adminId) return;
        try {
            const res = await fetch(`${API_BASE_URL}/api/admin/cheat-users?userid=${adminId}`);
            if (!res.ok) throw new Error('获取作弊用户失败');
            const data = await res.json();
            setCheatUsers(data);
        } catch (err) {
            console.error(err);
        }
    };

    // fetch suspicious users list from backend
    const fetchSuspiciousUsers = async () => {
        const adminId = getUserIdFromCookie();
        if (!adminId) return;
        try {
            const res = await fetch(`${API_BASE_URL}/api/admin/suspicious-users?userid=${adminId}`);
            if (!res.ok) throw new Error('获取可疑用户失败');
            const data = await res.json();
            setSuspiciousUsers(data);
        } catch (err) {
            console.error(err);
        }
    };

    const handleBan = (user) => {
        const adminId = getUserIdFromCookie();
        if (!adminId) {
            alert('无法获取用户ID');
            return;
        }
        fetch(`${API_BASE_URL}/api/admin/ban-user`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ userid: user.userid }),
        })
            .then((res) => { if (!res.ok) throw new Error('Network response was not ok'); return res.json(); })
            .then(() => {
                // 重新获取用户列表，触发页面重新渲染
                fetchSuspiciousUsers();
                fetchCheatUsers();
            })
            .catch((err) => console.error('封禁用户失败:', err));
    }

    // 解封作弊用户
    const handleUnban = (user) => {
        const adminId = getUserIdFromCookie();
        if (!adminId) {
            alert('无法获取用户ID');
            return;
        }
        fetch(`${API_BASE_URL}/api/admin/unban-user`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ userid: user.userid }),
        })
            .then((res) => { if (!res.ok) throw new Error('Network response was not ok'); return res.json(); })
            .then(() => {
                // 重新获取用户列表，触发页面重新渲染
                fetchCheatUsers();
                fetchSuspiciousUsers();
            })
            .catch((err) => console.error('解封用户失败:', err));
    };

    // 初始化时向后端请求系统参数及用户列表
    useEffect(() => {
        const match = document.cookie.match('(^|;)\\s*userId=([^;]+)');
        const userId = match ? match[2] : null;
        // console.log("User ID from cookie:", userId);
        if (userId) {
            // fetch config
            fetch(`${API_BASE_URL}/api/admin/config?userid=${userId}`)
                .then((res) => {
                    if (!res.ok) throw new Error('Network response was not ok');
                    return res.json();
                })
                .then((data) => {
                    // console.log("Fetched system config:", data);
                    setConfig(data);
                })
                .catch((err) => console.error('获取系统参数失败:', err));

            // 初始获取用户列表
            fetchCheatUsers();
            fetchSuspiciousUsers();
        }
    }, []);

    return (
        <div style={{ padding: 40, maxWidth: 900, margin: "0 auto" }}>
            <h1 style={{ textAlign: "center", marginBottom: 32 }}>管理员页面</h1>
            {/* 参数设置 */}
            <div style={{ marginBottom: 32, padding: 18, background: "#f7faff", borderRadius: 12, display: "flex", gap: 24, alignItems: "center", justifyContent: "space-between" }}>
                <b>系统参数：</b>
                <span>FarmNumber: {config.FarmNumber}</span>
                <span>FakeTime: {config.FakeTime}</span>
                <span>BegVote: {config.BegVote}</span>
                <span>CheatTime: {config.CheatTime}</span>
            </div>
            {/* 作弊用户 */}
            <div style={{ marginBottom: 32 }}>
                <h2 style={{ color: "#e53935" }}>作弊用户</h2>
                <table style={{ width: "100%", background: "#fff", borderRadius: 10, boxShadow: "0 2px 8px #e0e7ff", marginBottom: 18 }}>
                    <thead>
                        <tr style={{ background: "#f5f5f5" }}>
                            {/* <th>user_id</th> */}
                            <th>email</th>
                            <th>username</th>
                            <th>account_status</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {cheatUsers.map((u) => (
                            <tr key={u.userid}>
                                {/* <td>{u.userid}</td> */}
                                <td>{u.email}</td>
                                <td>{u.username}</td>
                                <td style={{ color: "#e53935" }}>
                                    {"封禁"}
                                </td>
                                <td>
                                    <button
                                        style={{ background: "#13F31E", color: "#fff", border: "none", borderRadius: 6, padding: "4px 14px", cursor: "pointer" }}
                                        onClick={() => handleUnban(u)}
                                    >
                                        解封
                                    </button>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
            {/* 可疑用户 */}
            <div style={{ marginBottom: 32 }}>
                <h2 style={{ color: "#ff9800" }}>可疑用户</h2>
                <table style={{ width: "100%", background: "#fff", borderRadius: 10, boxShadow: "0 2px 8px #e0e7ff" }}>
                    <thead>
                        <tr style={{ background: "#f5f5f5" }}>
                            {/* <th>user_id</th> */}
                            <th>email</th>
                            <th>username</th>
                            <th>account_status</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {suspiciousUsers.map((u) => (
                            <tr key={u.user_id}>
                                {/* <td>{u.user_id}</td> */}
                                <td>{u.email}</td>
                                <td>{u.username}</td>
                                <td style={{ color: u.account_status === 1 ? "#e53935" : "#43a047" }}>
                                    {u.account_status === 1 ? "封禁" : "正常"}
                                </td>
                                <td>
                                    <button
                                        style={{ background: "#e53935", color: "#fff", border: "none", borderRadius: 6, padding: "4px 14px", cursor: "pointer" }}
                                        onClick={() => handleBan(u)}
                                    >
                                        封禁
                                    </button>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
            {/* 跳转按钮 */}
            <div style={{ display: "flex", gap: 24, justifyContent: "center" }}>
                <button
                    style={{ background: "#1976d2", color: "#fff", border: "none", borderRadius: 8, padding: "10px 28px", fontWeight: 600, fontSize: 16, cursor: "pointer" }}
                    onClick={() => navigate("/appeal-review")}
                >
                    用户申诉
                </button>
                <button
                    style={{ background: "#43a047", color: "#fff", border: "none", borderRadius: 8, padding: "10px 28px", fontWeight: 600, fontSize: 16, cursor: "pointer" }}
                    onClick={() => navigate("/migration-review")}
                >
                    用户迁移
                </button>
                <button
                    style={{ background: "#ff9800", color: "#fff", border: "none", borderRadius: 8, padding: "10px 28px", fontWeight: 600, fontSize: 16, cursor: "pointer" }}
                    onClick={() => navigate("/seed-promotion")}
                >
                    促销管理
                </button>
            </div>
        </div>
    );
}