"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TokenUsageMetrics = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Card_1 = require("../common/Card");
const TokenUsageMetrics = ({ timePeriod = 'today', showBreakdown = true, showCosts = true, chartType = 'donut', showLimits = true, alertThreshold = 80, refreshInterval = 30000, onDataUpdate, }) => {
    const [data, setData] = (0, react_1.useState)({
        totalTokens: 0,
        inputTokens: 0,
        outputTokens: 0,
        estimatedCost: 0,
        usagePercentage: 0,
        byProvider: {},
    });
    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
    (0, react_1.useEffect)(() => {
        const fetchData = async () => {
            setIsLoading(true);
            try {
                // Mock data - replace with actual API call
                const mockData = {
                    totalTokens: 125000,
                    inputTokens: 75000,
                    outputTokens: 50000,
                    estimatedCost: 2.45,
                    usagePercentage: 62,
                    byProvider: {
                        'openai': { tokens: 85000, cost: 1.70 },
                        'anthropic': { tokens: 40000, cost: 0.75 },
                    },
                };
                setData(mockData);
                onDataUpdate?.(mockData);
            }
            catch (error) {
                console.error('Failed to fetch token usage data:', error);
            }
            finally {
                setIsLoading(false);
            }
        };
        fetchData();
        if (refreshInterval > 0) {
            const interval = setInterval(fetchData, refreshInterval);
            return () => clearInterval(interval);
        }
    }, [timePeriod, refreshInterval, onDataUpdate]);
    const formatNumber = (num) => {
        return new Intl.NumberFormat().format(num);
    };
    const formatCurrency = (amount) => {
        return new Intl.NumberFormat('en-US', {
            style: 'currency',
            currency: 'USD',
        }).format(amount);
    };
    if (isLoading) {
        return ((0, jsx_runtime_1.jsx)(Card_1.Card, { className: "token-usage-metrics", children: (0, jsx_runtime_1.jsx)("div", { className: "loading-state p-6", children: (0, jsx_runtime_1.jsxs)("div", { className: "animate-pulse space-y-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-4 bg-gray-200 rounded w-1/4" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-3 bg-gray-200 rounded" }), (0, jsx_runtime_1.jsx)("div", { className: "h-3 bg-gray-200 rounded w-5/6" })] })] }) }) }));
    }
    return ((0, jsx_runtime_1.jsx)(Card_1.Card, { className: "token-usage-metrics", 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: "Token Usage" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-gray-500", children: timePeriod.charAt(0).toUpperCase() + timePeriod.slice(1) })] }), data.usagePercentage >= alertThreshold && ((0, jsx_runtime_1.jsx)("div", { className: "bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-yellow-600 mr-2", children: "\u26A0\uFE0F" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-sm text-yellow-800", children: ["Usage is at ", data.usagePercentage, "% of limit"] })] }) })), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4 mb-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-blue-50 rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm text-blue-600 font-medium", children: "Total Tokens" }), (0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-blue-900", children: formatNumber(data.totalTokens) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-green-50 rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm text-green-600 font-medium", children: "Input Tokens" }), (0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-green-900", children: formatNumber(data.inputTokens) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-purple-50 rounded-lg p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm text-purple-600 font-medium", children: "Output Tokens" }), (0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold text-purple-900", children: formatNumber(data.outputTokens) })] })] }), showCosts && ((0, jsx_runtime_1.jsxs)("div", { className: "bg-gray-50 rounded-lg p-4 mb-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-600 font-medium", children: "Estimated Cost" }), (0, jsx_runtime_1.jsx)("div", { className: "text-3xl font-bold text-gray-900", children: formatCurrency(data.estimatedCost) })] })), (0, jsx_runtime_1.jsx)("div", { className: "mb-6", children: (0, jsx_runtime_1.jsx)("div", { className: "h-64 bg-gray-100 rounded-lg flex items-center justify-center", children: (0, jsx_runtime_1.jsxs)("div", { className: "text-center text-gray-500", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-lg font-medium mb-2", children: [chartType.charAt(0).toUpperCase() + chartType.slice(1), " Chart"] }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm", children: "Chart visualization placeholder" })] }) }) }), showBreakdown && Object.keys(data.byProvider).length > 0 && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h4", { className: "text-md font-semibold mb-4", children: "By Provider" }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: Object.entries(data.byProvider).map(([provider, providerData]) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center p-3 bg-gray-50 rounded-lg", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-3 h-3 rounded-full bg-blue-500 mr-3" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium capitalize", children: provider })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-right", children: [(0, jsx_runtime_1.jsxs)("div", { className: "font-medium", children: [formatNumber(providerData.tokens), " tokens"] }), showCosts && ((0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-500", children: formatCurrency(providerData.cost) }))] })] }, provider))) })] })), showLimits && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between text-sm text-gray-600 mb-2", children: [(0, jsx_runtime_1.jsx)("span", { children: "Usage Limit" }), (0, jsx_runtime_1.jsxs)("span", { children: [data.usagePercentage, "%"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "w-full bg-gray-200 rounded-full h-2", children: (0, jsx_runtime_1.jsx)("div", { className: `h-2 rounded-full ${data.usagePercentage >= alertThreshold ? 'bg-yellow-500' : 'bg-blue-500'}`, style: { width: `${Math.min(data.usagePercentage, 100)}%` } }) })] }))] }) }));
};
exports.TokenUsageMetrics = TokenUsageMetrics;
exports.default = exports.TokenUsageMetrics;
//# sourceMappingURL=TokenUsageMetrics.js.map