"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AgentFleetMetrics = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@chakra-ui/react");
const LineChart_js_1 = require("../data/LineChart.js");
const BarChart_js_1 = require("../data/BarChart.js");
const AgentFleetMetrics = ({ fleetStatus }) => {
    const cardBg = (0, react_1.useColorModeValue)('white', 'gray.800');
    const borderColor = (0, react_1.useColorModeValue)('gray.200', 'gray.600');
    // Mock time series data for charts
    const performanceData = [
        { time: '00:00', responseTime: 245, throughput: 12.5, errors: 0 },
        { time: '04:00', responseTime: 220, throughput: 14.2, errors: 1 },
        { time: '08:00', responseTime: 280, throughput: 18.7, errors: 2 },
        { time: '12:00', responseTime: 350, throughput: 22.1, errors: 1 },
        { time: '16:00', responseTime: 290, throughput: 19.8, errors: 0 },
        { time: '20:00', responseTime: 250, throughput: 15.3, errors: 0 },
    ];
    const taskDistribution = [
        { name: 'Content Analysis', completed: 45, failed: 2, running: 3 },
        { name: 'SEO Optimization', completed: 38, failed: 1, running: 2 },
        { name: 'Translation', completed: 32, failed: 3, running: 1 },
        { name: 'Summarization', completed: 27, failed: 1, running: 1 },
    ];
    const getSuccessRate = () => {
        const total = fleetStatus.completedTasks + fleetStatus.failedTasks;
        return total > 0 ? ((fleetStatus.completedTasks / total) * 100).toFixed(1) : '0';
    };
    return ((0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 6, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_1.Grid, { templateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Card, { bg: cardBg, borderColor: borderColor, size: "sm", children: (0, jsx_runtime_1.jsx)(react_1.CardBody, { children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { align: "start", spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", color: "gray.500", children: "Success Rate" }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "xl", fontWeight: "bold", color: "green.500", children: [getSuccessRate(), "%"] }), (0, jsx_runtime_1.jsx)(react_1.Progress, { value: parseFloat(getSuccessRate()), size: "sm", colorScheme: "green", w: "full" })] }) }) }), (0, jsx_runtime_1.jsx)(react_1.Card, { bg: cardBg, borderColor: borderColor, size: "sm", children: (0, jsx_runtime_1.jsx)(react_1.CardBody, { children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { align: "start", spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", color: "gray.500", children: "Avg Response Time" }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "xl", fontWeight: "bold", children: [fleetStatus.avgResponseTime, "ms"] }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs", color: "gray.600", children: "Target: <300ms" })] }) }) }), (0, jsx_runtime_1.jsx)(react_1.Card, { bg: cardBg, borderColor: borderColor, size: "sm", children: (0, jsx_runtime_1.jsx)(react_1.CardBody, { children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { align: "start", spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", color: "gray.500", children: "Queue Depth" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xl", fontWeight: "bold", color: "blue.500", children: fleetStatus.runningTasks }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "xs", color: "gray.600", children: [fleetStatus.totalTasks - fleetStatus.runningTasks - fleetStatus.completedTasks, " queued"] })] }) }) }), (0, jsx_runtime_1.jsx)(react_1.Card, { bg: cardBg, borderColor: borderColor, size: "sm", children: (0, jsx_runtime_1.jsx)(react_1.CardBody, { children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { align: "start", spacing: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", color: "gray.500", children: "Active Agents" }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "xl", fontWeight: "bold", color: "purple.500", children: [fleetStatus.activeAgents, "/", fleetStatus.totalAgents] }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "xs", color: "gray.600", children: [Math.round((fleetStatus.activeAgents / fleetStatus.totalAgents) * 100), "% utilization"] })] }) }) })] }), (0, jsx_runtime_1.jsxs)(react_1.Grid, { templateColumns: { base: '1fr', lg: '1fr 1fr' }, gap: 6, children: [(0, jsx_runtime_1.jsx)(react_1.Card, { bg: cardBg, borderColor: borderColor, children: (0, jsx_runtime_1.jsx)(react_1.CardBody, { children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { align: "stretch", spacing: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "md", fontWeight: "semibold", children: "Performance Over Time" }), (0, jsx_runtime_1.jsx)(react_1.Box, { height: "300px", children: (0, jsx_runtime_1.jsx)(LineChart_js_1.LineChart, { data: performanceData, xKey: "time", yKeys: [
                                                { key: 'responseTime', name: 'Response Time (ms)', color: '#3182CE' },
                                                { key: 'throughput', name: 'Throughput (tasks/min)', color: '#38A169' }
                                            ] }) })] }) }) }), (0, jsx_runtime_1.jsx)(react_1.Card, { bg: cardBg, borderColor: borderColor, children: (0, jsx_runtime_1.jsx)(react_1.CardBody, { children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { align: "stretch", spacing: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "md", fontWeight: "semibold", children: "Task Distribution by Type" }), (0, jsx_runtime_1.jsx)(react_1.Box, { height: "300px", children: (0, jsx_runtime_1.jsx)(BarChart_js_1.BarChart, { data: taskDistribution, xKey: "name", yKeys: [
                                                { key: 'completed', name: 'Completed', color: '#38A169' },
                                                { key: 'failed', name: 'Failed', color: '#E53E3E' },
                                                { key: 'running', name: 'Running', color: '#3182CE' }
                                            ] }) })] }) }) })] }), (0, jsx_runtime_1.jsx)(react_1.Card, { bg: cardBg, borderColor: borderColor, children: (0, jsx_runtime_1.jsx)(react_1.CardBody, { children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { align: "stretch", spacing: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "md", fontWeight: "semibold", children: "Resource Utilization" }), (0, jsx_runtime_1.jsxs)(react_1.Grid, { templateColumns: "repeat(auto-fit, minmax(250px, 1fr))", gap: 6, children: [(0, jsx_runtime_1.jsxs)(react_1.VStack, { align: "stretch", spacing: 3, children: [(0, jsx_runtime_1.jsxs)(react_1.HStack, { justify: "space-between", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: "CPU Usage" }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", fontWeight: "medium", children: [fleetStatus.resourceUtilization.cpu, "%"] })] }), (0, jsx_runtime_1.jsx)(react_1.Progress, { value: fleetStatus.resourceUtilization.cpu, colorScheme: fleetStatus.resourceUtilization.cpu > 80 ? 'red' : 'blue', size: "md" }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "xs", color: "gray.500", children: ["Threshold: 80% (currently ", fleetStatus.resourceUtilization.cpu > 80 ? 'exceeded' : 'normal', ")"] })] }), (0, jsx_runtime_1.jsxs)(react_1.VStack, { align: "stretch", spacing: 3, children: [(0, jsx_runtime_1.jsxs)(react_1.HStack, { justify: "space-between", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: "Memory Usage" }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", fontWeight: "medium", children: [fleetStatus.resourceUtilization.memory, "%"] })] }), (0, jsx_runtime_1.jsx)(react_1.Progress, { value: fleetStatus.resourceUtilization.memory, colorScheme: fleetStatus.resourceUtilization.memory > 85 ? 'red' : 'orange', size: "md" }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "xs", color: "gray.500", children: ["Threshold: 85% (currently ", fleetStatus.resourceUtilization.memory > 85 ? 'exceeded' : 'normal', ")"] })] }), (0, jsx_runtime_1.jsxs)(react_1.VStack, { align: "stretch", spacing: 3, children: [(0, jsx_runtime_1.jsxs)(react_1.HStack, { justify: "space-between", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: "Token Usage" }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "sm", fontWeight: "medium", children: [fleetStatus.resourceUtilization.tokens, "%"] })] }), (0, jsx_runtime_1.jsx)(react_1.Progress, { value: fleetStatus.resourceUtilization.tokens, colorScheme: fleetStatus.resourceUtilization.tokens > 90 ? 'red' : 'green', size: "md" }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "xs", color: "gray.500", children: ["Threshold: 90% (currently ", fleetStatus.resourceUtilization.tokens > 90 ? 'exceeded' : 'normal', ")"] })] })] })] }) }) }), (0, jsx_runtime_1.jsx)(react_1.Card, { bg: cardBg, borderColor: borderColor, children: (0, jsx_runtime_1.jsx)(react_1.CardBody, { children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { align: "stretch", spacing: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "md", fontWeight: "semibold", children: "Fleet Health Summary" }), (0, jsx_runtime_1.jsxs)(react_1.Grid, { templateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: 4, children: [(0, jsx_runtime_1.jsxs)(react_1.HStack, { justify: "space-between", p: 3, borderRadius: "md", bg: (0, react_1.useColorModeValue)('green.50', 'green.900'), children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: "Healthy Agents" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "lg", fontWeight: "bold", color: "green.500", children: fleetStatus.activeAgents + fleetStatus.idleAgents })] }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { justify: "space-between", p: 3, borderRadius: "md", bg: (0, react_1.useColorModeValue)('red.50', 'red.900'), children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: "Error Agents" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "lg", fontWeight: "bold", color: "red.500", children: fleetStatus.errorAgents })] }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { justify: "space-between", p: 3, borderRadius: "md", bg: (0, react_1.useColorModeValue)('blue.50', 'blue.900'), children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: "Tasks/Hour" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "lg", fontWeight: "bold", color: "blue.500", children: Math.round(fleetStatus.throughput * 60) })] }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { justify: "space-between", p: 3, borderRadius: "md", bg: (0, react_1.useColorModeValue)('purple.50', 'purple.900'), children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: "Uptime" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "lg", fontWeight: "bold", color: "purple.500", children: "99.8%" })] })] })] }) }) })] }));
};
exports.AgentFleetMetrics = AgentFleetMetrics;
//# sourceMappingURL=AgentFleetMetrics.js.map