import { useState } from "react";
import { Grid } from "@mantine/core";
import { apiRequest } from "../config/request";
import { MASTER_API } from "../config/api";
import { NodeTable } from "../components/NodeTable";
import NodeDetailDrawer from "../components/NodeDetailDrawer";

export default function NodePage() {
    const [selectedNodeId, setSelectedNodeId] = useState(null);
    const [drawerOpen, setDrawerOpen] = useState(false);
    const [detailLoading, setDetailLoading] = useState(false);

    // 获取节点详情
    const fetchNodeDetail = async (id) => {
        setDetailLoading(true);
        setDrawerOpen(true);
        try {
            const result = await apiRequest(MASTER_API.DETAIL(id));
            setSelectedNodeId(result.id);
        } finally {
            setDetailLoading(false);
        }
    };

    return (
        <Grid gutter="lg">
            {/* 左侧：节点表格 */}
            <Grid.Col span={drawerOpen ? 8 : 12}>
                <NodeTable
                    withSearch
                    withPagination
                    withActions
                    fetchDetail={fetchNodeDetail}
                />
            </Grid.Col>

            {/* 节点详情 Drawer */}
            <NodeDetailDrawer
                opened={drawerOpen}
                onClose={() => setDrawerOpen(false)}
                nodeId={selectedNodeId}
                loading={detailLoading}
            />
        </Grid>
    );
}
