"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FleetHealthMonitor = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@chakra-ui/react");
const fi_1 = require("react-icons/fi");
const client_1 = require("@apollo/client");
const queries_js_1 = require("../../graphql/queries.js");
const subscriptions_js_1 = require("../../graphql/subscriptions.js");
const MetricChart_js_1 = require("../charts/MetricChart.js");
const FleetHealthMonitor = ({ fleetId, refreshInterval = 30000, }) => {
    const cardBg = (0, react_1.useColorModeValue)('white', 'gray.800');
    const borderColor = (0, react_1.useColorModeValue)('gray.200', 'gray.600');
    // Query initial health data
    const { data, loading, error } = (0, client_1.useQuery)(queries_js_1.GET_FLEET_HEALTH_METRICS, {
        variables: { fleetId },
        pollInterval: refreshInterval,
    });
    // Subscribe to real-time health updates
    const { data: subData } = (0, client_1.useSubscription)(subscriptions_js_1.FLEET_HEALTH_SUBSCRIPTION, {
        variables: { fleetId },
    });
    // Merge query and subscription data
    const healthData = subData?.fleetHealth || data?.fleetHealth;
    if (loading) {
        return ((0, jsx_runtime_1.jsx)(react_1.Box, { p: 4, children: (0, jsx_runtime_1.jsx)(react_1.Progress, { size: "xs", isIndeterminate: true }) }));
    }
    if (error) {
        return ((0, jsx_runtime_1.jsx)(react_1.Box, { p: 4, bg: "red.50", color: "red.500", borderRadius: "md", children: (0, jsx_runtime_1.jsxs)(react_1.HStack, { children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: fi_1.FiAlertTriangle }), (0, jsx_runtime_1.jsxs)(react_1.Text, { children: ["Error loading health metrics: ", error.message] })] }) }));
    }
    if (!healthData) {
        return ((0, jsx_runtime_1.jsx)(react_1.Box, { p: 4, children: (0, jsx_runtime_1.jsx)(react_1.Text, { children: "No health data available" }) }));
    }
    const healthScore = Math.round(((healthData.activeAgents / healthData.agentCount) * 100 +
        (100 - healthData.errorRate) +
        (100 - healthData.cpuUsage) +
        (100 - healthData.memoryUsage)) /
        4);
    return ((0, jsx_runtime_1.jsx)(react_1.Box, { p: 4, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 6, align: "stretch", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { p: 6, bg: cardBg, borderRadius: "lg", borderWidth: "1px", borderColor: borderColor, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_1.HStack, { justify: "space-between", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "lg", fontWeight: "bold", children: "Fleet Health Score" }), (0, jsx_runtime_1.jsxs)(react_1.Badge, { colorScheme: healthScore >= 90
                                            ? 'green'
                                            : healthScore >= 70
                                                ? 'yellow'
                                                : healthScore >= 50
                                                    ? 'orange'
                                                    : 'red', fontSize: "sm", children: [healthScore, "%"] })] }), (0, jsx_runtime_1.jsx)(react_1.Progress, { value: healthScore, colorScheme: healthScore >= 90
                                    ? 'green'
                                    : healthScore >= 70
                                        ? 'yellow'
                                        : healthScore >= 50
                                            ? 'orange'
                                            : 'red', size: "lg", borderRadius: "full" })] }) }), (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.Stat, { p: 4, bg: cardBg, borderRadius: "lg", borderWidth: "1px", borderColor: borderColor, children: [(0, jsx_runtime_1.jsx)(react_1.StatLabel, { children: "Active Agents" }), (0, jsx_runtime_1.jsxs)(react_1.StatNumber, { children: [healthData.activeAgents, "/", healthData.agentCount] }), (0, jsx_runtime_1.jsxs)(react_1.StatHelpText, { children: [(0, jsx_runtime_1.jsx)(react_1.StatArrow, { type: healthData.activeAgents >= healthData.agentCount * 0.8 ? 'increase' : 'decrease' }), Math.round((healthData.activeAgents / healthData.agentCount) * 100), "% Online"] })] }), (0, jsx_runtime_1.jsxs)(react_1.Stat, { p: 4, bg: cardBg, borderRadius: "lg", borderWidth: "1px", borderColor: borderColor, children: [(0, jsx_runtime_1.jsx)(react_1.StatLabel, { children: "Error Rate" }), (0, jsx_runtime_1.jsxs)(react_1.StatNumber, { children: [healthData.errorRate.toFixed(2), "%"] }), (0, jsx_runtime_1.jsxs)(react_1.StatHelpText, { children: [(0, jsx_runtime_1.jsx)(react_1.StatArrow, { type: healthData.errorRate <= 1 ? 'decrease' : 'increase' }), "Last 5 minutes"] })] }), (0, jsx_runtime_1.jsxs)(react_1.Stat, { p: 4, bg: cardBg, borderRadius: "lg", borderWidth: "1px", borderColor: borderColor, children: [(0, jsx_runtime_1.jsx)(react_1.StatLabel, { children: "CPU Usage" }), (0, jsx_runtime_1.jsxs)(react_1.StatNumber, { children: [healthData.cpuUsage.toFixed(1), "%"] }), (0, jsx_runtime_1.jsxs)(react_1.StatHelpText, { children: [(0, jsx_runtime_1.jsx)(react_1.StatArrow, { type: healthData.cpuUsage <= 80 ? 'decrease' : 'increase' }), "Across all agents"] })] }), (0, jsx_runtime_1.jsxs)(react_1.Stat, { p: 4, bg: cardBg, borderRadius: "lg", borderWidth: "1px", borderColor: borderColor, children: [(0, jsx_runtime_1.jsx)(react_1.StatLabel, { children: "Memory Usage" }), (0, jsx_runtime_1.jsxs)(react_1.StatNumber, { children: [healthData.memoryUsage.toFixed(1), "%"] }), (0, jsx_runtime_1.jsxs)(react_1.StatHelpText, { children: [(0, jsx_runtime_1.jsx)(react_1.StatArrow, { type: healthData.memoryUsage <= 80 ? 'decrease' : 'increase' }), "Across all agents"] })] })] }), (0, jsx_runtime_1.jsxs)(react_1.Grid, { templateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: 6, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { p: 4, bg: cardBg, borderRadius: "lg", borderWidth: "1px", borderColor: borderColor, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "md", fontWeight: "bold", children: "Request Rate" }), (0, jsx_runtime_1.jsx)(MetricChart_js_1.MetricChart, { data: healthData.metrics.map((m) => ({
                                            timestamp: m.timestamp,
                                            value: m.values.requestsPerSecond,
                                        })), yAxisLabel: "Requests/sec", height: 200 })] }) }), (0, jsx_runtime_1.jsx)(react_1.Box, { p: 4, bg: cardBg, borderRadius: "lg", borderWidth: "1px", borderColor: borderColor, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "md", fontWeight: "bold", children: "Average Latency" }), (0, jsx_runtime_1.jsx)(MetricChart_js_1.MetricChart, { data: healthData.metrics.map((m) => ({
                                            timestamp: m.timestamp,
                                            value: m.values.averageLatency,
                                        })), yAxisLabel: "ms", height: 200 })] }) })] }), (0, jsx_runtime_1.jsx)(react_1.Box, { p: 4, bg: cardBg, borderRadius: "lg", borderWidth: "1px", borderColor: borderColor, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_1.HStack, { justify: "space-between", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "md", fontWeight: "bold", children: "Cost Analysis" }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "lg", fontWeight: "bold", color: "blue.500", children: ["$", healthData.costPerHour.toFixed(2), "/hour"] })] }), (0, jsx_runtime_1.jsx)(MetricChart_js_1.MetricChart, { data: healthData.metrics.map((m) => ({
                                    timestamp: m.timestamp,
                                    value: m.values.costPerHour,
                                })), yAxisLabel: "$/hour", height: 150 })] }) }), healthData.alerts.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Box, { p: 4, bg: cardBg, borderRadius: "lg", borderWidth: "1px", borderColor: borderColor, children: (0, jsx_runtime_1.jsxs)(react_1.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "md", fontWeight: "bold", children: "Active Alerts" }), healthData.alerts.map((alert) => ((0, jsx_runtime_1.jsxs)(react_1.HStack, { p: 3, bg: (0, react_1.useColorModeValue)('gray.50', 'gray.700'), borderRadius: "md", borderLeft: "4px solid", borderLeftColor: alert.severity === 'critical'
                                    ? 'red.500'
                                    : alert.severity === 'high'
                                        ? 'orange.500'
                                        : alert.severity === 'medium'
                                            ? 'yellow.500'
                                            : 'blue.500', children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: fi_1.FiAlertTriangle, color: alert.severity === 'critical'
                                            ? 'red.500'
                                            : alert.severity === 'high'
                                                ? 'orange.500'
                                                : alert.severity === 'medium'
                                                    ? 'yellow.500'
                                                    : 'blue.500' }), (0, jsx_runtime_1.jsxs)(react_1.VStack, { align: "start", spacing: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", children: alert.message }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xs", color: "gray.500", children: new Date(alert.timestamp).toLocaleString() })] })] }, alert.id)))] }) }))] }) }));
};
exports.FleetHealthMonitor = FleetHealthMonitor;
exports.default = exports.FleetHealthMonitor;
//# sourceMappingURL=FleetHealthMonitor.js.map