/**
 * Overview View
 *
 * Main dashboard view showing key metrics at a glance:
 * - Session status and uptime
 * - Token usage and cost summary
 * - Error rate and response time
 * - Quick activity indicators
 */
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, ProgressRing } from '../components/mini-chart.js';
/**
 * Format duration in human-readable format
 */
function formatDuration(ms) {
    const seconds = Math.floor(ms / 1000);
    const minutes = Math.floor(seconds / 60);
    const hours = Math.floor(minutes / 60);
    if (hours > 0) {
        return `${hours}h ${minutes % 60}m`;
    }
    else if (minutes > 0) {
        return `${minutes}m ${seconds % 60}s`;
    }
    else {
        return `${seconds}s`;
    }
}
/**
 * Format cost
 */
function formatCost(cost) {
    if (cost === 0)
        return '$0.00';
    if (cost < 0.01)
        return `$${(cost * 1000).toFixed(2)}m`;
    if (cost < 1)
        return `$${cost.toFixed(3)}`;
    return `$${cost.toFixed(2)}`;
}
/**
 * Overview View Component
 */
export function OverviewView({ data }) {
    const { colors } = useTheme();
    const { state, tokenHistory, responseTimeHistory, errors } = data;
    // Determine status colors
    const _getErrorStatus = (rate) => {
        if (rate === 0)
            return 'success';
        if (rate < 5)
            return 'warning';
        return 'error';
    };
    const getCostStatus = (cost) => {
        if (cost < 1)
            return 'success';
        if (cost < 5)
            return 'warning';
        return 'error';
    };
    // Extract recent values for sparklines
    const recentTokens = tokenHistory.slice(-20).map((p) => p.value);
    const recentLatency = responseTimeHistory.slice(-20).map((p) => p.value);
    return (React.createElement(Box, { flexDirection: "column", paddingX: 1 },
        React.createElement(Box, { marginBottom: 1 },
            React.createElement(Text, { bold: true, color: colors.primary }, "\uD83D\uDCCA Dashboard Overview"),
            React.createElement(Text, { dimColor: true },
                " \u2022 Updated ",
                new Date(data.lastUpdate).toLocaleTimeString())),
        React.createElement(Box, { borderStyle: "round", borderColor: colors.border, paddingX: 1, paddingY: 0, marginBottom: 1 },
            React.createElement(Box, { flexDirection: "column" },
                React.createElement(Box, { justifyContent: "space-between", marginBottom: 1 },
                    React.createElement(Box, null,
                        React.createElement(Text, { color: state.activeSession ? colors.success : colors.textMuted }, state.activeSession ? '● Active' : '○ Idle'),
                        React.createElement(Text, { dimColor: true },
                            " \u2022 Uptime: ",
                            formatDuration(state.uptime))),
                    React.createElement(Box, null,
                        React.createElement(Text, { dimColor: true },
                            "Sessions: ",
                            state.totalSessions))),
                React.createElement(MetricRow, { gap: 4 },
                    React.createElement(MetricCard, { icon: "\uD83C\uDFAF", label: "Total Tokens", value: state.totalTokens.toLocaleString(), detail: `${state.tokensPerMinute.toFixed(0)}/min`, status: "neutral" }),
                    React.createElement(MetricCard, { icon: "\uD83D\uDCB0", label: "Total Cost", value: formatCost(state.totalCost), detail: `${formatCost(state.costPerHour)}/hr`, status: getCostStatus(state.totalCost) }),
                    React.createElement(MetricCard, { icon: "\uD83D\uDD27", label: "Tool Calls", value: state.totalToolCalls.toString(), status: "neutral" }),
                    React.createElement(MetricCard, { icon: "\u26A1", label: "Avg Response", value: `${Math.round(state.avgResponseTime)}ms`, status: state.avgResponseTime > 2000 ? 'warning' : 'success' })))),
        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 }, "Activity"),
                React.createElement(Box, { marginTop: 1 },
                    React.createElement(Box, { width: 15 },
                        React.createElement(Text, { color: colors.textMuted }, "Tokens:")),
                    recentTokens.length > 0 ? (React.createElement(Sparkline, { data: recentTokens, width: 30, color: colors.primary })) : (React.createElement(Text, { dimColor: true }, "No data yet"))),
                React.createElement(Box, null,
                    React.createElement(Box, { width: 15 },
                        React.createElement(Text, { color: colors.textMuted }, "Latency:")),
                    recentLatency.length > 0 ? (React.createElement(Sparkline, { data: recentLatency, width: 30, color: colors.warning })) : (React.createElement(Text, { dimColor: true }, "No data yet"))))),
        React.createElement(Box, { borderStyle: "round", borderColor: errors.length > 0 ? colors.error : colors.border, paddingX: 1, paddingY: 0 },
            React.createElement(Box, { flexDirection: "column" },
                React.createElement(Box, { justifyContent: "space-between" },
                    React.createElement(Box, null,
                        React.createElement(Text, { bold: true, color: colors.info }, "Error Rate")),
                    React.createElement(Box, null,
                        React.createElement(ProgressRing, { progress: state.errorRate, size: "small", autoColor: true }))),
                errors.length > 0 ? (React.createElement(Box, { marginTop: 1, flexDirection: "column" },
                    React.createElement(Text, { color: colors.warning },
                        "Recent Errors (",
                        errors.length,
                        "):"),
                    errors.slice(0, 3).map((error, index) => (React.createElement(Box, { key: index },
                        React.createElement(Text, { dimColor: true }, "\u2022 "),
                        React.createElement(Text, { color: colors.error },
                            error.type,
                            ": "),
                        React.createElement(Text, { dimColor: true }, error.message.slice(0, 40))))))) : (React.createElement(Box, null,
                    React.createElement(Text, { color: colors.success }, "\u2713 No errors")))))));
}
export default OverviewView;
//# sourceMappingURL=overview-view.js.map