import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { useMcpServers } from '../contexts/McpContext';
import { ServerManagerInner } from './ServerManager';
import { useTheme } from '../theme';
export const McpServerSection = () => {
    const { servers, addServer } = useMcpServers();
    // const [showServers, setShowServers] = React.useState(true)
    const topServers = servers.slice(0, 3);
    const theme = useTheme();
    const handleAddServer = React.useCallback(() => {
        addServer({
            url: '',
            autoFetch: false,
            headers: {},
            serverName: 'New MCP Server',
            serverEnabled: true,
        });
    }, [addServer]);
    return (_jsxs("div", { className: theme.mcpServerSection.container, children: [_jsx("div", { className: theme.mcpServerSection.header, children: _jsxs("div", { className: 'flex-1', children: [_jsxs("div", { className: 'flex items-center justify-between', children: [_jsxs("div", { children: [_jsx("h2", { className: theme.mcpServerSection.heading, children: "MCP Servers" }), _jsx("p", { className: theme.mcpServerSection.description, children: "Review and configure Model Context Protocol servers." })] }), _jsx("button", { type: 'button', onClick: handleAddServer, className: theme.mcpServerSection.addButton, children: "Add server" })] }), _jsx("div", { className: 'mt-2', children: _jsxs("span", { className: theme.mcpServerSection.countBadge, children: [servers.length, " ", servers.length === 1 ? 'server' : 'servers'] }) })] }) }), _jsxs("div", { className: 'space-y-4', children: [_jsxs("div", { className: theme.mcpServerSection.summary, children: [topServers.length > 0 && (_jsxs("ul", { className: theme.mcpServerSection.summaryList, children: [topServers.map(({ id, options }) => (_jsxs("li", { children: [_jsx("span", { className: theme.mcpServerSection.summaryItem, children: options.serverName || 'Unnamed server' }), _jsxs("span", { className: theme.mcpServerSection.summaryItemMuted, children: [" \u00B7 ", options.url || 'No URL set'] })] }, id))), servers.length > topServers.length && (_jsxs("li", { className: `${theme.mcpServerSection.summaryItemMuted} italic`, children: [servers.length - topServers.length, " more ", servers.length - topServers.length === 1 ? 'server' : 'servers'] }))] })), topServers.length === 0 && (_jsx("p", { className: theme.mcpServerSection.summaryEmpty, children: "No servers configured yet." }))] }), _jsx("div", { className: theme.mcpServerSection.managerSection, children: _jsx(ServerManagerInner, {}) })] })] }));
};
