"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MCPServerManager = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/**
 * MCP Server Manager Component
 * Manages MCP server instances, monitoring, and configuration
 */
const react_1 = require("react");
const react_2 = require("@chakra-ui/react");
const icons_1 = require("@chakra-ui/icons");
const react_query_1 = require("@tanstack/react-query");
const useApi_1 = require("../../hooks/useApi");
const ErrorBoundary_1 = require("../common/ErrorBoundary");
const StatusBadge_1 = require("../common/StatusBadge");
const ServerMetricsChart_1 = require("./ServerMetricsChart");
const ServerConfigModal_1 = require("./ServerConfigModal");
const DeleteConfirmationModal_1 = require("../common/DeleteConfirmationModal");
const MCPServerManager = ({ refreshInterval = 30000, onServerSelect, }) => {
    const toast = (0, react_2.useToast)();
    const queryClient = (0, react_query_1.useQueryClient)();
    const api = (0, useApi_1.useApi)();
    const [selectedServer, setSelectedServer] = (0, react_1.useState)(null);
    // Modal states
    const { isOpen: isConfigModalOpen, onOpen: onConfigModalOpen, onClose: onConfigModalClose, } = (0, react_2.useDisclosure)();
    const { isOpen: isDeleteModalOpen, onOpen: onDeleteModalOpen, onClose: onDeleteModalClose, } = (0, react_2.useDisclosure)();
    // Fetch servers
    const { data: servers, isLoading, error, refetch, } = (0, react_query_1.useQuery)({
        queryKey: ['mcp-servers'],
        queryFn: async () => {
            const response = await api.get('/api/mcp/servers');
            return response.data;
        },
        refetchInterval: refreshInterval,
    });
    // Mutations
    const deleteMutation = (0, react_query_1.useMutation)({
        mutationFn: async (serverId) => {
            await api.delete(`/api/mcp/servers/${serverId}`);
        },
        onSuccess: () => {
            queryClient.invalidateQueries({ queryKey: ['mcp-servers'] });
            toast({
                title: 'Server deleted',
                status: 'success',
                duration: 3000,
            });
            onDeleteModalClose();
        },
        onError: (error) => {
            toast({
                title: 'Error deleting server',
                description: error.message,
                status: 'error',
                duration: 5000,
            });
        },
    });
    const updateStatusMutation = (0, react_query_1.useMutation)({
        mutationFn: async ({ serverId, status }) => {
            await api.patch(`/api/mcp/servers/${serverId}/status`, { status });
        },
        onSuccess: () => {
            queryClient.invalidateQueries({ queryKey: ['mcp-servers'] });
            toast({
                title: 'Server status updated',
                status: 'success',
                duration: 3000,
            });
        },
        onError: (error) => {
            toast({
                title: 'Error updating server status',
                description: error.message,
                status: 'error',
                duration: 5000,
            });
        },
    });
    // Handlers
    const handleServerSelect = (0, react_1.useCallback)((server) => {
        setSelectedServer(server);
        onServerSelect?.(server);
    }, [onServerSelect]);
    const handleStatusChange = (0, react_1.useCallback)((serverId, status) => {
        updateStatusMutation.mutate({ serverId, status });
    }, [updateStatusMutation]);
    const handleDelete = (0, react_1.useCallback)((serverId) => {
        deleteMutation.mutate(serverId);
    }, [deleteMutation]);
    // Render loading state
    if (isLoading) {
        return ((0, jsx_runtime_1.jsx)(react_2.Flex, { justify: "center", align: "center", h: "200px", children: (0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xl" }) }));
    }
    // Render error state
    if (error) {
        return ((0, jsx_runtime_1.jsx)(react_2.Card, { children: (0, jsx_runtime_1.jsx)(react_2.CardBody, { children: (0, jsx_runtime_1.jsxs)(react_2.Stack, { spacing: 4, children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "md", color: "red.500", children: "Error Loading Servers" }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: error.message }), (0, jsx_runtime_1.jsx)(react_2.Button, { leftIcon: (0, jsx_runtime_1.jsx)(icons_1.RepeatIcon, {}), onClick: () => refetch(), children: "Retry" })] }) }) }));
    }
    return ((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { children: (0, jsx_runtime_1.jsxs)(react_2.Stack, { spacing: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { justify: "space-between", align: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "lg", children: "MCP Servers" }), (0, jsx_runtime_1.jsx)(react_2.Button, { leftIcon: (0, jsx_runtime_1.jsx)(icons_1.AddIcon, {}), colorScheme: "blue", onClick: () => {
                                setSelectedServer(null);
                                onConfigModalOpen();
                            }, children: "Add Server" })] }), (0, jsx_runtime_1.jsx)(react_2.Card, { children: (0, jsx_runtime_1.jsx)(react_2.CardBody, { children: (0, jsx_runtime_1.jsxs)(react_2.Table, { variant: "simple", children: [(0, jsx_runtime_1.jsx)(react_2.Thead, { children: (0, jsx_runtime_1.jsxs)(react_2.Tr, { children: [(0, jsx_runtime_1.jsx)(react_2.Th, { children: "Name" }), (0, jsx_runtime_1.jsx)(react_2.Th, { children: "Status" }), (0, jsx_runtime_1.jsx)(react_2.Th, { children: "Endpoint" }), (0, jsx_runtime_1.jsx)(react_2.Th, { children: "Version" }), (0, jsx_runtime_1.jsx)(react_2.Th, { children: "Metrics" }), (0, jsx_runtime_1.jsx)(react_2.Th, { children: "Actions" })] }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { children: servers?.map((server) => ((0, jsx_runtime_1.jsxs)(react_2.Tr, { cursor: "pointer", onClick: () => handleServerSelect(server), _hover: { bg: 'gray.50' }, children: [(0, jsx_runtime_1.jsx)(react_2.Td, { fontWeight: "medium", children: server.name }), (0, jsx_runtime_1.jsx)(react_2.Td, { children: (0, jsx_runtime_1.jsx)(StatusBadge_1.StatusBadge, { status: server.status }) }), (0, jsx_runtime_1.jsx)(react_2.Td, { children: server.endpoint }), (0, jsx_runtime_1.jsx)(react_2.Td, { children: server.version }), (0, jsx_runtime_1.jsx)(react_2.Td, { children: (0, jsx_runtime_1.jsx)(ServerMetricsChart_1.ServerMetricsChart, { metrics: server.metrics }) }), (0, jsx_runtime_1.jsx)(react_2.Td, { children: (0, jsx_runtime_1.jsxs)(react_2.Menu, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.IconButton, icon: (0, jsx_runtime_1.jsx)(icons_1.InfoIcon, {}), variant: "ghost", size: "sm" }), (0, jsx_runtime_1.jsxs)(react_2.MenuList, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.EditIcon, {}), onClick: (e) => {
                                                                        e.stopPropagation();
                                                                        setSelectedServer(server);
                                                                        onConfigModalOpen();
                                                                    }, children: "Edit Configuration" }), (0, jsx_runtime_1.jsx)(react_2.MenuItem, { icon: (0, jsx_runtime_1.jsx)(icons_1.DeleteIcon, {}), color: "red.500", onClick: (e) => {
                                                                        e.stopPropagation();
                                                                        setSelectedServer(server);
                                                                        onDeleteModalOpen();
                                                                    }, children: "Delete Server" })] })] }) })] }, server.id))) })] }) }) }), (0, jsx_runtime_1.jsx)(ServerConfigModal_1.ServerConfigModal, { isOpen: isConfigModalOpen, onClose: onConfigModalClose, server: selectedServer }), (0, jsx_runtime_1.jsx)(DeleteConfirmationModal_1.DeleteConfirmationModal, { isOpen: isDeleteModalOpen, onClose: onDeleteModalClose, title: "Delete MCP Server", message: `Are you sure you want to delete ${selectedServer?.name}? This action cannot be undone.`, onConfirm: () => selectedServer && handleDelete(selectedServer.id) })] }) }));
};
exports.MCPServerManager = MCPServerManager;
exports.default = exports.MCPServerManager;
//# sourceMappingURL=MCPServerManager.js.map