/**
 * Costs View
 *
 * Detailed cost breakdown and budget tracking:
 * - Total cost and budget progress
 * - Cost by provider/model
 * - Token usage breakdown
 * - Cost trends over time
 */
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 { BarChart, Sparkline, ProgressRing } from '../components/mini-chart.js';
/**
 * Format cost
 */
function formatCost(cost) {
    if (cost === 0)
        return '$0.00';
    if (cost < 0.001)
        return `$${(cost * 10000).toFixed(2)}×10⁻⁴`;
    if (cost < 0.01)
        return `$${(cost * 1000).toFixed(2)}m`;
    if (cost < 1)
        return `$${cost.toFixed(4)}`;
    return `$${cost.toFixed(2)}`;
}
/**
 * Format token count
 */
function formatTokens(count) {
    if (count >= 1_000_000)
        return `${(count / 1_000_000).toFixed(2)}M`;
    if (count >= 1_000)
        return `${(count / 1_000).toFixed(1)}K`;
    return count.toString();
}
/**
 * Costs View Component
 */
export function CostsView({ data, budget = 10 }) {
    const { colors } = useTheme();
    const { state, providers, costHistory } = data;
    // Calculate budget progress
    const budgetProgress = budget > 0 ? (state.totalCost / budget) * 100 : 0;
    const budgetStatus = budgetProgress < 50 ? 'success' : budgetProgress < 80 ? 'warning' : 'error';
    // Sort providers by cost
    const sortedProviders = [...providers].sort((a, b) => b.totalCost - a.totalCost);
    // Prepare chart data
    const providerCostData = sortedProviders.slice(0, 5).map((p) => ({
        label: `${p.provider}/${p.model}`.slice(0, 14),
        value: p.totalCost,
        color: colors.primary,
    }));
    // Token breakdown
    const totalPromptTokens = providers.reduce((sum, p) => sum + p.promptTokens, 0);
    const totalCompletionTokens = providers.reduce((sum, p) => sum + p.completionTokens, 0);
    // Cost history for sparkline
    const recentCosts = costHistory.slice(-30).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\uDCB0 Cost Analysis"),
            React.createElement(Text, { dimColor: true },
                " \u2022 Budget: ",
                formatCost(budget))),
        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 }, "Budget Status"),
                React.createElement(Box, { marginTop: 1, justifyContent: "space-between" },
                    React.createElement(Box, { flexDirection: "column", width: "60%" },
                        React.createElement(Box, null,
                            React.createElement(Box, { width: 12 },
                                React.createElement(Text, { color: colors.textMuted }, "Spent:")),
                            React.createElement(Text, { bold: true, color: budgetStatus === 'error' ? colors.error : budgetStatus === 'warning' ? colors.warning : colors.success }, formatCost(state.totalCost)),
                            React.createElement(Text, { dimColor: true },
                                " / ",
                                formatCost(budget))),
                        React.createElement(Box, null,
                            React.createElement(Box, { width: 12 },
                                React.createElement(Text, { color: colors.textMuted }, "Remaining:")),
                            React.createElement(Text, { color: colors.success }, formatCost(Math.max(0, budget - state.totalCost)))),
                        React.createElement(Box, null,
                            React.createElement(Box, { width: 12 },
                                React.createElement(Text, { color: colors.textMuted }, "Rate:")),
                            React.createElement(Text, null,
                                formatCost(state.costPerHour),
                                "/hr"))),
                    React.createElement(Box, { flexDirection: "column", alignItems: "center", width: "40%" },
                        React.createElement(ProgressRing, { progress: Math.min(100, budgetProgress), size: "large", autoColor: true, showLabel: true }),
                        React.createElement(Text, { dimColor: true }, "of budget used"))),
                budgetProgress > 80 && (React.createElement(Box, { marginTop: 1 },
                    React.createElement(Text, { color: colors.error },
                        "\u26A0 Warning: ",
                        budgetProgress >= 100 ? 'Budget exceeded!' : 'Approaching budget limit'))))),
        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 }, "Cost by Provider"),
                providerCostData.length > 0 ? (React.createElement(Box, { marginTop: 1 },
                    React.createElement(BarChart, { data: providerCostData, maxBarWidth: 25, showValues: true, labelWidth: 16 }))) : (React.createElement(Text, { dimColor: true }, "No provider data yet")))),
        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 }, "Token Usage"),
                React.createElement(Box, { marginTop: 1 },
                    React.createElement(MetricRow, { gap: 4 },
                        React.createElement(MetricCard, { icon: "\uD83D\uDCE5", label: "Input Tokens", value: formatTokens(totalPromptTokens), status: "neutral" }),
                        React.createElement(MetricCard, { icon: "\uD83D\uDCE4", label: "Output Tokens", value: formatTokens(totalCompletionTokens), status: "neutral" }),
                        React.createElement(MetricCard, { icon: "\uD83D\uDCCA", label: "Total", value: formatTokens(state.totalTokens), detail: `${state.tokensPerMinute.toFixed(0)}/min`, status: "neutral" }))),
                state.totalTokens > 0 && (React.createElement(Box, { marginTop: 1 },
                    React.createElement(Text, { color: colors.textMuted }, "Ratio: "),
                    React.createElement(Text, { color: colors.primary },
                        ((totalPromptTokens / state.totalTokens) * 100).toFixed(0),
                        "% input"),
                    React.createElement(Text, { dimColor: true }, " / "),
                    React.createElement(Text, { color: colors.secondary },
                        ((totalCompletionTokens / state.totalTokens) * 100).toFixed(0),
                        "% output"))))),
        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 }, "Cost Trend"),
                React.createElement(Box, { marginTop: 1 }, recentCosts.length > 0 ? (React.createElement(Sparkline, { data: recentCosts, width: 40, color: colors.warning, showLabels: true })) : (React.createElement(Text, { dimColor: true }, "No cost data yet")))))));
}
export default CostsView;
//# sourceMappingURL=costs-view.js.map