"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AgentFleetDashboard = 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 AgentFleetMetrics_js_1 = require("./AgentFleetMetrics.js");
const AgentFleetOrchestration_js_1 = require("./AgentFleetOrchestration.js");
const AgentFleetLogs_js_1 = require("./AgentFleetLogs.js");
const AgentFleetTopology_js_1 = require("./AgentFleetTopology.js");
const AgentFleetDashboard = ({ refreshInterval = 30000, onAgentAction }) => {
    const [fleetStatus, setFleetStatus] = (0, react_1.useState)(null);
    const [loading, setLoading] = (0, react_1.useState)(true);
    const [error, setError] = (0, react_1.useState)(null);
    const [activeTab, setActiveTab] = (0, react_1.useState)(0);
    const cardBg = (0, react_2.useColorModeValue)('white', 'gray.800');
    const borderColor = (0, react_2.useColorModeValue)('gray.200', 'gray.600');
    (0, react_1.useEffect)(() => {
        const fetchFleetStatus = async () => {
            try {
                // TODO: Replace with actual API call
                const mockData = {
                    totalAgents: 12,
                    activeAgents: 8,
                    idleAgents: 3,
                    errorAgents: 1,
                    totalTasks: 156,
                    runningTasks: 7,
                    completedTasks: 142,
                    failedTasks: 7,
                    avgResponseTime: 250,
                    throughput: 15.3,
                    resourceUtilization: {
                        cpu: 67,
                        memory: 72,
                        tokens: 45
                    },
                    recentActivity: [
                        {
                            id: '1',
                            timestamp: new Date(Date.now() - 300000).toISOString(),
                            type: 'task_completed',
                            agentId: 'agent-001',
                            agentName: 'Content Analyzer',
                            message: 'Completed sentiment analysis for 50 documents'
                        },
                        {
                            id: '2',
                            timestamp: new Date(Date.now() - 600000).toISOString(),
                            type: 'agent_scaled',
                            agentId: 'agent-002',
                            agentName: 'SEO Optimizer',
                            message: 'Scaled up to 3 instances due to high demand'
                        },
                        {
                            id: '3',
                            timestamp: new Date(Date.now() - 900000).toISOString(),
                            type: 'task_failed',
                            agentId: 'agent-003',
                            agentName: 'Translation Service',
                            message: 'Translation task failed: API rate limit exceeded'
                        }
                    ]
                };
                setFleetStatus(mockData);
                setError(null);
            }
            catch (err) {
                setError(err instanceof Error ? err.message : 'Failed to fetch fleet status');
            }
            finally {
                setLoading(false);
            }
        };
        fetchFleetStatus();
        const interval = setInterval(fetchFleetStatus, refreshInterval);
        return () => clearInterval(interval);
    }, [refreshInterval]);
    const getHealthScore = (status) => {
        const totalAgents = status.totalAgents;
        if (totalAgents === 0)
            return 0;
        const healthyAgents = status.activeAgents + status.idleAgents;
        return Math.round((healthyAgents / totalAgents) * 100);
    };
    const getHealthColor = (score) => {
        if (score >= 90)
            return 'green';
        if (score >= 70)
            return 'yellow';
        return 'red';
    };
    if (loading) {
        return ((0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", justifyContent: "center", alignItems: "center", height: "400px", children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xl" }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: "Loading agent fleet status..." })] }) }));
    }
    if (error) {
        return ((0, jsx_runtime_1.jsxs)(react_2.Alert, { status: "error", children: [(0, jsx_runtime_1.jsx)(react_2.AlertIcon, {}), (0, jsx_runtime_1.jsx)(react_2.AlertTitle, { children: "Failed to load fleet status" }), (0, jsx_runtime_1.jsx)(react_2.AlertDescription, { children: error })] }));
    }
    if (!fleetStatus) {
        return ((0, jsx_runtime_1.jsxs)(react_2.Alert, { status: "warning", children: [(0, jsx_runtime_1.jsx)(react_2.AlertIcon, {}), (0, jsx_runtime_1.jsx)(react_2.AlertTitle, { children: "No fleet data available" }), (0, jsx_runtime_1.jsx)(react_2.AlertDescription, { children: "Unable to retrieve agent fleet information" })] }));
    }
    const healthScore = getHealthScore(fleetStatus);
    const healthColor = getHealthColor(healthScore);
    return ((0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 6, align: "stretch", w: "full", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { justify: "space-between", align: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "lg", children: "Agent Fleet Dashboard" }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 3, children: [(0, jsx_runtime_1.jsx)(react_2.Button, { leftIcon: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: fi_1.FiRefreshCw }), variant: "outline", size: "sm", onClick: () => window.location.reload(), children: "Refresh" }), (0, jsx_runtime_1.jsxs)(react_2.Badge, { colorScheme: healthColor, fontSize: "sm", px: 3, py: 1, children: ["Health: ", healthScore, "%"] })] })] }), (0, jsx_runtime_1.jsxs)(react_2.Grid, { templateColumns: "repeat(auto-fit, minmax(250px, 1fr))", gap: 6, 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", children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: "gray.500", children: "Total Agents" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "2xl", fontWeight: "bold", children: fleetStatus.totalAgents }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.Badge, { colorScheme: "green", size: "sm", children: [fleetStatus.activeAgents, " active"] }), (0, jsx_runtime_1.jsxs)(react_2.Badge, { colorScheme: "gray", size: "sm", children: [fleetStatus.idleAgents, " idle"] }), fleetStatus.errorAgents > 0 && ((0, jsx_runtime_1.jsxs)(react_2.Badge, { colorScheme: "red", size: "sm", children: [fleetStatus.errorAgents, " error"] }))] })] }), (0, jsx_runtime_1.jsx)(react_2.Icon, { as: fi_1.FiUsers, size: "24px", color: "blue.500" })] }) }) }), (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", children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: "gray.500", children: "Task Queue" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "2xl", fontWeight: "bold", children: fleetStatus.runningTasks }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: "gray.600", children: [fleetStatus.totalTasks, " total \u2022 ", fleetStatus.completedTasks, " completed"] })] }), (0, jsx_runtime_1.jsx)(react_2.Icon, { as: fi_1.FiActivity, size: "24px", color: "purple.500" })] }) }) }), (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", children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: "gray.500", children: "Throughput" }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "2xl", fontWeight: "bold", children: [fleetStatus.throughput, "/min"] }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: "gray.600", children: ["Avg response: ", fleetStatus.avgResponseTime, "ms"] })] }), (0, jsx_runtime_1.jsx)(react_2.Icon, { as: fi_1.FiTrendingUp, size: "24px", color: "green.500" })] }) }) }), (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", children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: "gray.500", children: "Resource Usage" }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 2, w: "full", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { w: "full", justify: "space-between", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", children: "CPU" }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", children: [fleetStatus.resourceUtilization.cpu, "%"] })] }), (0, jsx_runtime_1.jsx)(react_2.Progress, { value: fleetStatus.resourceUtilization.cpu, size: "sm", w: "full", colorScheme: "blue" }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { w: "full", justify: "space-between", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", children: "Memory" }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", children: [fleetStatus.resourceUtilization.memory, "%"] })] }), (0, jsx_runtime_1.jsx)(react_2.Progress, { value: fleetStatus.resourceUtilization.memory, size: "sm", w: "full", colorScheme: "orange" })] })] }), (0, jsx_runtime_1.jsx)(react_2.Icon, { as: fi_1.FiCpu, size: "24px", color: "orange.500" })] }) }) })] }), (0, jsx_runtime_1.jsxs)(react_2.Card, { bg: cardBg, borderColor: borderColor, children: [(0, jsx_runtime_1.jsx)(react_2.CardHeader, { children: (0, jsx_runtime_1.jsx)(react_2.Tabs, { index: activeTab, onChange: setActiveTab, children: (0, jsx_runtime_1.jsxs)(react_2.TabList, { children: [(0, jsx_runtime_1.jsx)(react_2.Tab, { children: "Fleet Metrics" }), (0, jsx_runtime_1.jsx)(react_2.Tab, { children: "Orchestration" }), (0, jsx_runtime_1.jsx)(react_2.Tab, { children: "Activity Logs" }), (0, jsx_runtime_1.jsx)(react_2.Tab, { children: "Topology" })] }) }) }), (0, jsx_runtime_1.jsx)(react_2.CardBody, { children: (0, jsx_runtime_1.jsx)(react_2.Tabs, { index: activeTab, onChange: setActiveTab, isLazy: true, children: (0, jsx_runtime_1.jsxs)(react_2.TabPanels, { children: [(0, jsx_runtime_1.jsx)(react_2.TabPanel, { p: 0, children: (0, jsx_runtime_1.jsx)(AgentFleetMetrics_js_1.AgentFleetMetrics, { fleetStatus: fleetStatus }) }), (0, jsx_runtime_1.jsx)(react_2.TabPanel, { p: 0, children: (0, jsx_runtime_1.jsx)(AgentFleetOrchestration_js_1.AgentFleetOrchestration, { fleetStatus: fleetStatus, onAgentAction: onAgentAction }) }), (0, jsx_runtime_1.jsx)(react_2.TabPanel, { p: 0, children: (0, jsx_runtime_1.jsx)(AgentFleetLogs_js_1.AgentFleetLogs, { activities: fleetStatus.recentActivity }) }), (0, jsx_runtime_1.jsx)(react_2.TabPanel, { p: 0, children: (0, jsx_runtime_1.jsx)(AgentFleetTopology_js_1.AgentFleetTopology, { fleetStatus: fleetStatus }) })] }) }) })] }), (0, jsx_runtime_1.jsxs)(react_2.Card, { bg: cardBg, borderColor: borderColor, children: [(0, jsx_runtime_1.jsx)(react_2.CardHeader, { children: (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "md", children: "Recent Activity" }) }), (0, jsx_runtime_1.jsx)(react_2.CardBody, { children: (0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 3, align: "stretch", children: fleetStatus.recentActivity.slice(0, 5).map((activity) => ((0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 3, p: 3, borderRadius: "md", bg: (0, react_2.useColorModeValue)('gray.50', 'gray.700'), children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: activity.type === 'task_completed' ? fi_1.FiCheckCircle :
                                            activity.type === 'task_failed' ? fi_1.FiAlertCircle : fi_1.FiClock, color: activity.type === 'task_completed' ? 'green.500' :
                                            activity.type === 'task_failed' ? 'red.500' : 'blue.500' }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "start", spacing: 0, flex: "1", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { justify: "space-between", w: "full", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: "medium", children: activity.agentName }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: "gray.500", children: new Date(activity.timestamp).toLocaleTimeString() })] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: "gray.600", children: activity.message })] })] }, activity.id))) }) })] })] }));
};
exports.AgentFleetDashboard = AgentFleetDashboard;
//# sourceMappingURL=AgentFleetDashboard.js.map