import { jsxs, jsx } from 'react/jsx-runtime';
import React__default, { useMemo } from 'react';
import { tokenCounterTheme } from './TokenCounter.theme.js';
import { MODEL_CONFIGS, estimateTokens, calculateCost, formatTokenCount, formatCost } from './tokenUtils.js';
import { cn } from '../../../utils/cn.js';
import { CircleStackIcon } from '@heroicons/react/16/solid';

/**
 * TokenCounter - Real-time token usage display with cost estimation
 *
 * Estimates token count from text using a word-based heuristic.
 * Supports multiple AI models with their specific pricing.
 *
 * @example
 * ```tsx
 * <TokenCounter text={inputValue} model="gpt-4" />
 *
 * <TokenCounter
 *   text={inputValue}
 *   model="claude-3-sonnet"
 *   showCost
 *   maxTokens={4000}
 * />
 * ```
 */
const TokenCounter = React__default.forwardRef(({ text = "", tokens: providedTokens, model = "gpt-4", maxTokens, showCost = false, costPer1kTokens, size = "md", format = "compact", icon, className, theme: customTheme = {}, ...props }, ref) => {
    var _a;
    // Get model config
    const modelConfig = MODEL_CONFIGS[model];
    const effectiveMaxTokens = maxTokens || modelConfig.maxTokens;
    const effectiveCostPer1k = costPer1kTokens !== null && costPer1kTokens !== void 0 ? costPer1kTokens : modelConfig.costPer1kTokens;
    // Calculate token count
    const tokenCount = useMemo(() => {
        if (providedTokens !== undefined)
            return providedTokens;
        return estimateTokens(text);
    }, [text, providedTokens]);
    // Calculate cost
    const cost = useMemo(() => {
        return calculateCost(tokenCount, effectiveCostPer1k);
    }, [tokenCount, effectiveCostPer1k]);
    // Progress percentage
    const progressPercent = Math.min((tokenCount / effectiveMaxTokens) * 100, 100);
    const isOverLimit = tokenCount > effectiveMaxTokens;
    // Merge theme
    const sizeConfig = {
        ...tokenCounterTheme.sizes[size],
        ...(_a = customTheme.sizes) === null || _a === void 0 ? void 0 : _a[size],
    };
    const baseStyle = customTheme.baseStyle || tokenCounterTheme.baseStyle;
    const iconStyle = customTheme.iconStyle || tokenCounterTheme.iconStyle;
    const countStyle = customTheme.countStyle || tokenCounterTheme.countStyle;
    const labelStyle = customTheme.labelStyle || tokenCounterTheme.labelStyle;
    const costStyle = customTheme.costStyle || tokenCounterTheme.costStyle;
    const progressStyle = customTheme.progressStyle || tokenCounterTheme.progressStyle;
    const progressBarStyle = customTheme.progressBarStyle || tokenCounterTheme.progressBarStyle;
    return (jsxs("div", { ref: ref, className: cn(baseStyle, sizeConfig.container, className), ...props, children: [icon || jsx(CircleStackIcon, { className: cn(iconStyle, sizeConfig.icon) }), jsx("span", { className: cn(countStyle, sizeConfig.text, isOverLimit && "text-[var(--color-danger)]"), children: formatTokenCount(tokenCount) }), maxTokens && format === "detailed" && (jsxs("span", { className: cn(labelStyle, sizeConfig.text), children: ["/ ", formatTokenCount(effectiveMaxTokens)] })), jsx("span", { className: cn(labelStyle, sizeConfig.text), children: "tokens" }), showCost && (jsxs("span", { className: cn(costStyle, sizeConfig.text), children: ["(", formatCost(cost), ")"] })), format === "detailed" && maxTokens && (jsx("div", { className: cn(progressStyle, "w-16 ml-2"), children: jsx("div", { className: cn(progressBarStyle, isOverLimit && "bg-[var(--color-danger)]"), style: { width: `${progressPercent}%` } }) }))] }));
});
TokenCounter.displayName = "TokenCounter";

export { TokenCounter };
