"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AgentFleetTopology = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_2 = require("@chakra-ui/react");
const fi_1 = require("react-icons/fi");
const AgentFleetTopology = ({ fleetStatus }) => {
    const [viewMode, setViewMode] = (0, react_1.useState)('logical');
    const [showConnections, setShowConnections] = (0, react_1.useState)(true);
    const [highlightNode, setHighlightNode] = (0, react_1.useState)(null);
    const cardBg = (0, react_2.useColorModeValue)('white', 'gray.800');
    const borderColor = (0, react_2.useColorModeValue)('gray.200', 'gray.600');
    const connectionColor = (0, react_2.useColorModeValue)('gray.300', 'gray.600');
    // Mock topology data
    const topologyNodes = [
        {
            id: 'api-gateway',
            name: 'API Gateway',
            type: 'api',
            status: 'active',
            connections: ['agent-001', 'agent-002', 'agent-003', 'task-queue'],
            metadata: { version: '2.1.0', load: 45, responseTime: 120 },
            position: { x: 2, y: 1 }
        },
        {
            id: 'agent-001',
            name: 'Content Analyzer',
            type: 'agent',
            status: 'active',
            connections: ['llm-service', 'vector-db'],
            metadata: { version: '1.5.2', instances: 2, load: 70, responseTime: 250 },
            position: { x: 1, y: 2 }
        },
        {
            id: 'agent-002',
            name: 'SEO Optimizer',
            type: 'agent',
            status: 'active',
            connections: ['search-api', 'content-db'],
            metadata: { version: '1.3.1', instances: 1, load: 45, responseTime: 180 },
            position: { x: 2, y: 2 }
        },
        {
            id: 'agent-003',
            name: 'Translation Service',
            type: 'agent',
            status: 'idle',
            connections: ['translation-api', 'cache-redis'],
            metadata: { version: '2.0.0', instances: 1, load: 15, responseTime: 300 },
            position: { x: 3, y: 2 }
        },
        {
            id: 'agent-004',
            name: 'Code Assistant',
            type: 'agent',
            status: 'error',
            connections: ['github-api'],
            metadata: { version: '1.1.0', instances: 1, load: 5, responseTime: 0 },
            position: { x: 4, y: 2 }
        },
        {
            id: 'task-queue',
            name: 'Task Queue',
            type: 'queue',
            status: 'active',
            connections: ['agent-001', 'agent-002', 'agent-003'],
            metadata: { version: '3.2.1', load: 35 },
            position: { x: 2, y: 0 }
        },
        {
            id: 'llm-service',
            name: 'LLM Service',
            type: 'service',
            status: 'active',
            connections: ['vector-db'],
            metadata: { version: '4.1.0', load: 60, responseTime: 400 },
            position: { x: 1, y: 3 }
        },
        {
            id: 'vector-db',
            name: 'Vector Database',
            type: 'database',
            status: 'active',
            connections: [],
            metadata: { version: '1.8.0', load: 25 },
            position: { x: 1, y: 4 }
        },
        {
            id: 'content-db',
            name: 'Content DB',
            type: 'database',
            status: 'active',
            connections: [],
            metadata: { version: '14.2', load: 40 },
            position: { x: 2, y: 3 }
        },
        {
            id: 'cache-redis',
            name: 'Redis Cache',
            type: 'database',
            status: 'active',
            connections: [],
            metadata: { version: '7.0', load: 20 },
            position: { x: 3, y: 3 }
        }
    ];
    const getNodeIcon = (type) => {
        switch (type) {
            case 'agent': return fi_1.FiActivity;
            case 'service': return fi_1.FiZap;
            case 'database': return fi_1.FiDatabase;
            case 'api': return fi_1.FiCloud;
            case 'queue': return fi_1.FiCpu;
            default: return fi_1.FiCircle;
        }
    };
    const getStatusColor = (status) => {
        switch (status) {
            case 'active': return 'green.500';
            case 'idle': return 'gray.500';
            case 'error': return 'red.500';
            case 'maintenance': return 'orange.500';
            default: return 'gray.500';
        }
    };
    const getNodeColor = (type) => {
        switch (type) {
            case 'agent': return 'blue.500';
            case 'service': return 'purple.500';
            case 'database': return 'orange.500';
            case 'api': return 'green.500';
            case 'queue': return 'yellow.500';
            default: return 'gray.500';
        }
    };
    const getLoadColor = (load) => {
        if (load >= 80)
            return 'red';
        if (load >= 60)
            return 'orange';
        if (load >= 40)
            return 'yellow';
        return 'green';
    };
    return ((0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 6, align: "stretch", children: [(0, jsx_runtime_1.jsx)(react_2.Card, { bg: cardBg, borderColor: borderColor, children: (0, jsx_runtime_1.jsx)(react_2.CardBody, { children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { justify: "space-between", wrap: "wrap", spacing: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.FormControl, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.FormLabel, { htmlFor: "view-mode", mb: "0", fontSize: "sm", mr: 2, children: "View:" }), (0, jsx_runtime_1.jsxs)(react_2.Select, { id: "view-mode", value: viewMode, onChange: (e) => setViewMode(e.target.value), size: "sm", w: "120px", children: [(0, jsx_runtime_1.jsx)("option", { value: "logical", children: "Logical" }), (0, jsx_runtime_1.jsx)("option", { value: "physical", children: "Physical" })] })] }), (0, jsx_runtime_1.jsxs)(react_2.FormControl, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.FormLabel, { htmlFor: "show-connections", mb: "0", fontSize: "sm", children: "Connections" }), (0, jsx_runtime_1.jsx)(react_2.Switch, { id: "show-connections", isChecked: showConnections, onChange: (e) => setShowConnections(e.target.checked), colorScheme: "blue" })] })] }), (0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 3, children: (0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", leftIcon: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: fi_1.FiSettings }), children: "Configure" }) })] }) }) }), (0, jsx_runtime_1.jsx)(react_2.Card, { bg: cardBg, borderColor: borderColor, children: (0, jsx_runtime_1.jsx)(react_2.CardBody, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", height: "600px", overflow: "auto", children: [(0, jsx_runtime_1.jsx)("svg", { width: "100%", height: "100%", viewBox: "0 0 1000 800", style: { position: 'absolute', top: 0, left: 0, zIndex: 1 }, children: showConnections && topologyNodes.map(node => node.connections.map(connectionId => {
                                    const targetNode = topologyNodes.find(n => n.id === connectionId);
                                    if (!targetNode)
                                        return null;
                                    const x1 = node.position.x * 200 + 100;
                                    const y1 = node.position.y * 150 + 100;
                                    const x2 = targetNode.position.x * 200 + 100;
                                    const y2 = targetNode.position.y * 150 + 100;
                                    return ((0, jsx_runtime_1.jsx)("line", { x1: x1, y1: y1, x2: x2, y2: y2, stroke: highlightNode && (highlightNode === node.id || highlightNode === connectionId)
                                            ? (0, react_2.useColorModeValue)('#3182CE', '#63B3ED')
                                            : connectionColor, strokeWidth: highlightNode && (highlightNode === node.id || highlightNode === connectionId) ? 3 : 1, strokeDasharray: node.type === 'queue' || targetNode.type === 'queue' ? '5,5' : 'none' }, `${node.id}-${connectionId}`));
                                })) }), topologyNodes.map(node => ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontWeight: "bold", children: node.name }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", children: ["Type: ", node.type] }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", children: ["Status: ", node.status] }), node.metadata.version && (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", children: ["Version: ", node.metadata.version] }), node.metadata.instances && (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", children: ["Instances: ", node.metadata.instances] }), node.metadata.load !== undefined && (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", children: ["Load: ", node.metadata.load, "%"] }), node.metadata.responseTime && (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", children: ["Response: ", node.metadata.responseTime, "ms"] })] }), placement: "top", children: (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${node.position.x * 200 + 50}px`, top: `${node.position.y * 150 + 50}px`, zIndex: 2, cursor: "pointer", onMouseEnter: () => setHighlightNode(node.id), onMouseLeave: () => setHighlightNode(null), children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 2, align: "center", children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { p: 3, borderRadius: "full", bg: highlightNode === node.id ? 'blue.100' : 'white', border: "2px solid", borderColor: getNodeColor(node.type), _dark: {
                                                    bg: highlightNode === node.id ? 'blue.900' : 'gray.800'
                                                }, position: "relative", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: getNodeIcon(node.type), size: "24px", color: getNodeColor(node.type) }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "-2px", right: "-2px", w: "12px", h: "12px", borderRadius: "full", bg: getStatusColor(node.status), border: "2px solid white", _dark: { border: '2px solid gray.800' } })] }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 0, align: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: "medium", textAlign: "center", maxW: "100px", children: node.name }), (0, jsx_runtime_1.jsx)(react_2.Badge, { size: "xs", colorScheme: node.type === 'agent' ? 'blue' : 'gray', children: node.type }), node.metadata.load !== undefined && ((0, jsx_runtime_1.jsxs)(react_2.Badge, { size: "xs", colorScheme: getLoadColor(node.metadata.load), children: [node.metadata.load, "%"] }))] })] }) }) }, node.id)))] }) }) }), (0, jsx_runtime_1.jsx)(react_2.Card, { bg: cardBg, borderColor: borderColor, children: (0, jsx_runtime_1.jsx)(react_2.CardBody, { children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 4, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "md", fontWeight: "semibold", children: "Legend" }), (0, jsx_runtime_1.jsxs)(react_2.Grid, { templateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: "medium", children: "Node Types" }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: fi_1.FiActivity, color: "blue.500" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", children: "Agent" })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: fi_1.FiZap, color: "purple.500" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", children: "Service" })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: fi_1.FiDatabase, color: "orange.500" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", children: "Database" })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: fi_1.FiCloud, color: "green.500" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", children: "API" })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: fi_1.FiCpu, color: "yellow.500" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", children: "Queue" })] })] }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: "medium", children: "Status" }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { w: "8px", h: "8px", borderRadius: "full", bg: "green.500" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", children: "Active" })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { w: "8px", h: "8px", borderRadius: "full", bg: "gray.500" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", children: "Idle" })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { w: "8px", h: "8px", borderRadius: "full", bg: "red.500" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", children: "Error" })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { w: "8px", h: "8px", borderRadius: "full", bg: "orange.500" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", children: "Maintenance" })] })] }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: "medium", children: "Load Levels" }), (0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 2, children: (0, jsx_runtime_1.jsx)(react_2.Badge, { size: "xs", colorScheme: "green", children: "Low (0-39%)" }) }), (0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 2, children: (0, jsx_runtime_1.jsx)(react_2.Badge, { size: "xs", colorScheme: "yellow", children: "Medium (40-59%)" }) }), (0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 2, children: (0, jsx_runtime_1.jsx)(react_2.Badge, { size: "xs", colorScheme: "orange", children: "High (60-79%)" }) }), (0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 2, children: (0, jsx_runtime_1.jsx)(react_2.Badge, { size: "xs", colorScheme: "red", children: "Critical (80%+)" }) })] })] })] }) }) })] }));
};
exports.AgentFleetTopology = AgentFleetTopology;
//# sourceMappingURL=AgentFleetTopology.js.map