"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PerformanceMonitor = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Card_1 = require("../common/Card");
const Select_1 = require("../forms/Select");
const PerformanceMonitor = ({ metrics: initialMetrics = [], refreshInterval = 5000, onRefresh, showAlerts = true, thresholds = {
    latency: 1000,
    errorRate: 5,
    cpuUsage: 80,
    memoryUsage: 85,
}, timeRange: initialTimeRange = '15m', }) => {
    const [metrics, setMetrics] = (0, react_1.useState)(initialMetrics);
    const [timeRange, setTimeRange] = (0, react_1.useState)(initialTimeRange);
    const [alerts, setAlerts] = (0, react_1.useState)([]);
    (0, react_1.useEffect)(() => {
        const interval = setInterval(async () => {
            if (onRefresh) {
                const newMetrics = await onRefresh();
                setMetrics(newMetrics);
            }
            else {
                // Generate mock data
                const newMetric = {
                    timestamp: new Date(),
                    latency: Math.random() * 500 + 100,
                    throughput: Math.random() * 1000 + 500,
                    errorRate: Math.random() * 3,
                    activeConnections: Math.floor(Math.random() * 100) + 20,
                    cpuUsage: Math.random() * 60 + 20,
                    memoryUsage: Math.random() * 70 + 15,
                };
                setMetrics(prev => [...prev.slice(-100), newMetric]);
            }
        }, refreshInterval);
        return () => clearInterval(interval);
    }, [refreshInterval, onRefresh]);
    // Check for alerts
    (0, react_1.useEffect)(() => {
        const currentMetric = metrics[metrics.length - 1];
        if (!currentMetric)
            return;
        const newAlerts = [];
        if (currentMetric.latency > thresholds.latency) {
            newAlerts.push(`High latency: ${currentMetric.latency.toFixed(0)}ms`);
        }
        if (currentMetric.errorRate > thresholds.errorRate) {
            newAlerts.push(`High error rate: ${currentMetric.errorRate.toFixed(1)}%`);
        }
        if (currentMetric.cpuUsage > thresholds.cpuUsage) {
            newAlerts.push(`High CPU usage: ${currentMetric.cpuUsage.toFixed(0)}%`);
        }
        if (currentMetric.memoryUsage > thresholds.memoryUsage) {
            newAlerts.push(`High memory usage: ${currentMetric.memoryUsage.toFixed(0)}%`);
        }
        setAlerts(newAlerts);
    }, [metrics, thresholds]);
    const getTimeRangeMinutes = () => {
        const map = {
            '5m': 5,
            '15m': 15,
            '1h': 60,
            '6h': 360,
            '24h': 1440,
        };
        return map[timeRange];
    };
    const filteredMetrics = metrics.filter(m => {
        const now = new Date();
        const cutoff = new Date(now.getTime() - getTimeRangeMinutes() * 60 * 1000);
        return m.timestamp > cutoff;
    });
    const currentMetric = metrics[metrics.length - 1];
    const formatValue = (value, unit) => {
        return `${value.toFixed(unit === 'ms' ? 0 : 1)}${unit}`;
    };
    const getStatusColor = (value, threshold) => {
        if (value > threshold)
            return 'text-red-600';
        if (value > threshold * 0.8)
            return 'text-yellow-600';
        return 'text-green-600';
    };
    const renderSparkline = (data, color) => {
        if (data.length === 0)
            return null;
        const max = Math.max(...data);
        const min = Math.min(...data);
        const height = 40;
        const width = 100;
        const points = data.map((value, i) => {
            const x = (i / (data.length - 1)) * width;
            const y = height - ((value - min) / (max - min)) * height;
            return `${x},${y}`;
        }).join(' ');
        return ((0, jsx_runtime_1.jsx)("svg", { width: width, height: height, className: "inline-block", children: (0, jsx_runtime_1.jsx)("polyline", { points: points, fill: "none", stroke: color, strokeWidth: "2" }) }));
    };
    return ((0, jsx_runtime_1.jsx)(Card_1.Card, { className: "performance-monitor", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center mb-6", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold", children: "Performance Monitor" }), (0, jsx_runtime_1.jsxs)(Select_1.Select, { value: timeRange, onChange: (e) => setTimeRange(e.target.value), className: "w-32", children: [(0, jsx_runtime_1.jsx)("option", { value: "5m", children: "Last 5m" }), (0, jsx_runtime_1.jsx)("option", { value: "15m", children: "Last 15m" }), (0, jsx_runtime_1.jsx)("option", { value: "1h", children: "Last 1h" }), (0, jsx_runtime_1.jsx)("option", { value: "6h", children: "Last 6h" }), (0, jsx_runtime_1.jsx)("option", { value: "24h", children: "Last 24h" })] })] }), showAlerts && alerts.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "mb-6 bg-red-50 border border-red-200 rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)("h4", { className: "font-medium text-red-800 mb-2", children: "Active Alerts" }), (0, jsx_runtime_1.jsx)("ul", { className: "space-y-1", children: alerts.map((alert, index) => ((0, jsx_runtime_1.jsxs)("li", { className: "text-sm text-red-700", children: ["\u26A0\uFE0F ", alert] }, index))) })] })), currentMetric && ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-gray-50 rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-600 mb-1", children: "Latency" }), (0, jsx_runtime_1.jsx)("div", { className: `text-2xl font-bold ${getStatusColor(currentMetric.latency, thresholds.latency)}`, children: formatValue(currentMetric.latency, 'ms') }), (0, jsx_runtime_1.jsx)("div", { className: "mt-2", children: renderSparkline(filteredMetrics.map(m => m.latency), currentMetric.latency > thresholds.latency ? '#ef4444' : '#10b981') })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-gray-50 rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-600 mb-1", children: "Throughput" }), (0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-blue-600", children: formatValue(currentMetric.throughput, '/s') }), (0, jsx_runtime_1.jsx)("div", { className: "mt-2", children: renderSparkline(filteredMetrics.map(m => m.throughput), '#3b82f6') })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-gray-50 rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-600 mb-1", children: "Error Rate" }), (0, jsx_runtime_1.jsx)("div", { className: `text-2xl font-bold ${getStatusColor(currentMetric.errorRate, thresholds.errorRate)}`, children: formatValue(currentMetric.errorRate, '%') }), (0, jsx_runtime_1.jsx)("div", { className: "mt-2", children: renderSparkline(filteredMetrics.map(m => m.errorRate), currentMetric.errorRate > thresholds.errorRate ? '#ef4444' : '#10b981') })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-gray-50 rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-600 mb-1", children: "Connections" }), (0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-purple-600", children: currentMetric.activeConnections }), (0, jsx_runtime_1.jsx)("div", { className: "mt-2", children: renderSparkline(filteredMetrics.map(m => m.activeConnections), '#9333ea') })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-gray-50 rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-600 mb-1", children: "CPU Usage" }), (0, jsx_runtime_1.jsx)("div", { className: `text-2xl font-bold ${getStatusColor(currentMetric.cpuUsage, thresholds.cpuUsage)}`, children: formatValue(currentMetric.cpuUsage, '%') }), (0, jsx_runtime_1.jsx)("div", { className: "mt-2", children: renderSparkline(filteredMetrics.map(m => m.cpuUsage), currentMetric.cpuUsage > thresholds.cpuUsage ? '#ef4444' : '#10b981') })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-gray-50 rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-600 mb-1", children: "Memory" }), (0, jsx_runtime_1.jsx)("div", { className: `text-2xl font-bold ${getStatusColor(currentMetric.memoryUsage, thresholds.memoryUsage)}`, children: formatValue(currentMetric.memoryUsage, '%') }), (0, jsx_runtime_1.jsx)("div", { className: "mt-2", children: renderSparkline(filteredMetrics.map(m => m.memoryUsage), currentMetric.memoryUsage > thresholds.memoryUsage ? '#ef4444' : '#10b981') })] })] })), (0, jsx_runtime_1.jsxs)("div", { className: "mt-6 border rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)("h4", { className: "font-medium text-gray-700 mb-4", children: "Performance Trends" }), (0, jsx_runtime_1.jsx)("div", { className: "h-64 flex items-center justify-center text-gray-500", children: (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-4xl mb-2", children: "\uD83D\uDCC8" }), (0, jsx_runtime_1.jsx)("p", { children: "Performance chart visualization" }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm mt-2", children: "Integrate with your preferred charting library" })] }) })] })] }) }));
};
exports.PerformanceMonitor = PerformanceMonitor;
exports.default = exports.PerformanceMonitor;
//# sourceMappingURL=PerformanceMonitor.js.map