/**
 * Latency View
 *
 * Performance and latency metrics:
 * - Average and P95 latency
 * - Target achievement rate
 * - First token latency (streaming)
 * - Latency by operation type
 * - Response time histogram
 */
import React from 'react';
import { Box, Text } from 'ink';
import { useTheme } from '../../context/theme-context.js';
import { MetricCard, MetricRow } from '../components/metric-card.js';
import { Sparkline, Histogram, BarChart, ProgressRing } from '../components/mini-chart.js';
import { LATENCY_THRESHOLDS } from '../../../optimization/latency-optimizer.js';
/**
 * Get status based on latency
 */
function getLatencyStatus(latency) {
    if (latency <= LATENCY_THRESHOLDS.FAST)
        return 'success';
    if (latency <= LATENCY_THRESHOLDS.ACCEPTABLE)
        return 'warning';
    return 'error';
}
/**
 * Format milliseconds
 */
function formatMs(ms) {
    if (ms >= 1000) {
        return `${(ms / 1000).toFixed(2)}s`;
    }
    return `${Math.round(ms)}ms`;
}
/**
 * Latency View Component
 */
export function LatencyView({ data }) {
    const { colors } = useTheme();
    const { state: _state, latency, providers, responseTimeHistory } = data;
    // Get latency trend data
    const latencyTrend = responseTimeHistory.slice(-30).map((p) => p.value);
    // Prepare provider latency data for bar chart
    const providerLatencyData = providers
        .filter((p) => p.totalRequests > 0)
        .map((p) => ({
        label: `${p.provider}`.slice(0, 10),
        value: p.avgLatency,
        color: getLatencyStatus(p.avgLatency) === 'success'
            ? colors.success
            : getLatencyStatus(p.avgLatency) === 'warning'
                ? colors.warning
                : colors.error,
    }))
        .sort((a, b) => b.value - a.value);
    // Calculate latency distribution
    const latencyValues = responseTimeHistory.map((p) => p.value);
    // Get thresholds for display
    const thresholds = [
        { name: 'Instant', value: LATENCY_THRESHOLDS.INSTANT, color: colors.success },
        { name: 'Fast', value: LATENCY_THRESHOLDS.FAST, color: colors.success },
        { name: 'Acceptable', value: LATENCY_THRESHOLDS.ACCEPTABLE, color: colors.warning },
        { name: 'Slow', value: LATENCY_THRESHOLDS.SLOW, color: colors.warning },
        { name: 'Very Slow', value: LATENCY_THRESHOLDS.VERY_SLOW, color: colors.error },
    ];
    return (React.createElement(Box, { flexDirection: "column", paddingX: 1 },
        React.createElement(Box, { marginBottom: 1 },
            React.createElement(Text, { bold: true, color: colors.primary }, "\u26A1 Latency Analysis"),
            React.createElement(Text, { dimColor: true },
                " \u2022 ",
                latency.totalOperations,
                " operations tracked")),
        React.createElement(Box, { borderStyle: "round", borderColor: colors.border, paddingX: 1, paddingY: 0, marginBottom: 1 },
            React.createElement(Box, { flexDirection: "column" },
                React.createElement(Text, { bold: true, color: colors.info }, "Performance Summary"),
                React.createElement(Box, { marginTop: 1 },
                    React.createElement(MetricRow, { gap: 3 },
                        React.createElement(MetricCard, { icon: "\uD83D\uDCCA", label: "Average", value: formatMs(latency.avgDuration), status: getLatencyStatus(latency.avgDuration) }),
                        React.createElement(MetricCard, { icon: "\uD83D\uDCC8", label: "P95", value: formatMs(latency.p95), status: getLatencyStatus(latency.p95) }),
                        React.createElement(MetricCard, { icon: "\uD83C\uDFAF", label: "Target Met", value: `${latency.metTarget}%`, status: latency.metTarget >= 80 ? 'success' : latency.metTarget >= 50 ? 'warning' : 'error' }),
                        React.createElement(MetricCard, { icon: "\u23F1", label: "First Token", value: formatMs(latency.avgFirstToken), status: getLatencyStatus(latency.avgFirstToken) }))),
                React.createElement(Box, { marginTop: 1 },
                    React.createElement(Box, { width: 15 },
                        React.createElement(Text, { color: colors.textMuted }, "Target:")),
                    React.createElement(ProgressRing, { progress: latency.metTarget, size: "medium", autoColor: true, showLabel: true })))),
        providerLatencyData.length > 0 && (React.createElement(Box, { borderStyle: "round", borderColor: colors.border, paddingX: 1, paddingY: 0, marginBottom: 1 },
            React.createElement(Box, { flexDirection: "column" },
                React.createElement(Text, { bold: true, color: colors.info }, "Latency by Provider"),
                React.createElement(Box, { marginTop: 1 },
                    React.createElement(BarChart, { data: providerLatencyData, maxBarWidth: 25, showValues: true, labelWidth: 12 }))))),
        React.createElement(Box, { borderStyle: "round", borderColor: colors.border, paddingX: 1, paddingY: 0, marginBottom: 1 },
            React.createElement(Box, { flexDirection: "column" },
                React.createElement(Text, { bold: true, color: colors.info }, "Response Time Trend"),
                React.createElement(Box, { marginTop: 1 }, latencyTrend.length > 0 ? (React.createElement(Sparkline, { data: latencyTrend, width: 40, color: colors.primary, showLabels: true })) : (React.createElement(Text, { dimColor: true }, "No latency data yet"))))),
        latencyValues.length > 5 && (React.createElement(Box, { borderStyle: "round", borderColor: colors.border, paddingX: 1, paddingY: 0, marginBottom: 1 },
            React.createElement(Box, { flexDirection: "column" },
                React.createElement(Text, { bold: true, color: colors.info }, "Latency Distribution"),
                React.createElement(Box, { marginTop: 1 },
                    React.createElement(Histogram, { data: latencyValues, buckets: 15, height: 4, showLabels: true }))))),
        React.createElement(Box, { borderStyle: "round", borderColor: colors.border, paddingX: 1, paddingY: 0 },
            React.createElement(Box, { flexDirection: "column" },
                React.createElement(Text, { bold: true, color: colors.info }, "Latency Thresholds"),
                React.createElement(Box, { marginTop: 1, flexDirection: "column" }, thresholds.map((t, index) => (React.createElement(Box, { key: index },
                    React.createElement(Box, { width: 12 },
                        React.createElement(Text, { color: t.color }, t.name)),
                    React.createElement(Text, { dimColor: true },
                        "\u2264 ",
                        formatMs(t.value))))))))));
}
export default LatencyView;
//# sourceMappingURL=latency-view.js.map