import { useState, useEffect } from "react";
import { Card, Table, Button, Loader, Center, Group, Anchor, Text } from "@mantine/core";
import { Link } from "react-router-dom";
import NodeStatus from "./NodeStatus";
import PaginationControl from "./PaginationControl";
import { apiRequest } from "../config/request";
import { MASTER_API } from "../config/api";

export function NodeTable({
    withSearch = false,
    withPagination = false,
    withActions = false,
    clusterData = null, // 直接传入数据（Dashboard 用）
    fetchDetail,        // 详情函数（NodePage 用）
    title,
    viewMoreLink,
}) {
    const [nodes, setNodes] = useState([]);
    const [page, setPage] = useState(1);
    const [pageSize, setPageSize] = useState(5);
    const [loading, setLoading] = useState(false);

    // 拉取节点数据（仅 NodePage 使用）
    const fetchNodes = async (params = {}) => {
        if (!withPagination && !withSearch) return; // Dashboard 只用 clusterData
        setLoading(true);
        try {
            const query = new URLSearchParams({
                page: params.page || page,
                limit: params.pageSize || pageSize,
            }).toString();

            const result = await apiRequest(`${MASTER_API.LIST}?${query}`);
            setNodes(result);
        } finally {
            setLoading(false);
        }
    };

    // 初始化加载
    useEffect(() => {
        if (withPagination || withSearch) {
            fetchNodes();
        } else if (clusterData) {
            setNodes(clusterData || []);
        }
    }, [clusterData]);

    // 表格行
    const rows = nodes.map((node) => (
        <Table.Tr key={node.id}>
            <Table.Td>{node.id}</Table.Td>
            <Table.Td>{node.name}</Table.Td>
            <Table.Td><NodeStatus status={node.status} /></Table.Td>
            <Table.Td>{node.type}</Table.Td>
            <Table.Td>{node.version}</Table.Td>
            {withActions && (
                <Table.Td>
                    <Button
                        size="xs"
                        variant="light"
                        onClick={() => fetchDetail && fetchDetail(node.id)}
                    >
                        查看详情
                    </Button>
                </Table.Td>
            )}
        </Table.Tr>
    ));

    return (
        <Card shadow="sm" radius="md" p="lg">
            {/* 标题 + 查看更多 */}


            {(title || viewMoreLink) && (
                <Group position="apart" mb="sm">
                    {title && <Text fw={700} size="lg">{title}</Text>}
                    {viewMoreLink && (
                        <Anchor component={Link} to={viewMoreLink} size="sm" underline>
                            查看更多
                        </Anchor>
                    )}
                </Group>
            )}
            {/* 搜索区域 */}
            {withSearch && (
                <div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
                    <Button onClick={() => fetchNodes()} variant="outline">刷新列表</Button>
                </div>
            )}

            {loading ? (
                <Center h={200}><Loader size="lg" /></Center>
            ) : (
                <>
                    <Table striped highlightOnHover withTableBorder>
                        <Table.Thead>
                            <Table.Tr>
                                <Table.Th>ID</Table.Th>
                                <Table.Th>名称</Table.Th>
                                <Table.Th>状态</Table.Th>
                                <Table.Th>类型</Table.Th>
                                <Table.Th>版本</Table.Th>
                                {withActions && <Table.Th>操作</Table.Th>}
                            </Table.Tr>
                        </Table.Thead>
                        <Table.Tbody>{rows}</Table.Tbody>
                    </Table>

                    {withPagination && (
                        <PaginationControl
                            page={page}
                            pageSize={pageSize}
                            hasPrevPage={page > 1}
                            hasNextPage={nodes.length === pageSize}
                            onPageChange={(p) => {
                                setPage(p);
                                fetchNodes({ page: p });
                            }}
                            onPageSizeChange={(size) => {
                                setPageSize(size);
                                setPage(1);
                                fetchNodes({ page: 1, pageSize: size });
                            }}
                        />
                    )}
                </>
            )}
        </Card>
    );
}
