'use client';
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { useId } from 'react';
import { SettingsCard } from './components.js';
const INPUT_CLASS = 'w-full rounded-md border border-border bg-input-background px-3 py-2 text-base text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60';
const LABEL_CLASS = 'mb-1 flex items-center gap-2 text-sm font-medium text-foreground';
function formatTokens(n) {
    if (n >= 1_000_000)
        return `${(n / 1_000_000).toFixed(n % 1_000_000 === 0 ? 0 : 1)}M`;
    if (n >= 1_000)
        return `${(n / 1_000).toFixed(n % 1_000 === 0 ? 0 : 1)}K`;
    return String(n);
}
/**
 * Monthly token usage meter + budget limit input. Usage is REAL (aggregated
 * from audit-log token totals) — it shows 0 until AI features have run, never a
 * fabricated number.
 */
export function MonthlyUsageCard({ usage, monthlyTokenLimit, onChangeLimit, budgetError, canEdit, }) {
    const limitId = useId();
    const used = usage?.totalTokens ?? 0;
    const limit = monthlyTokenLimit === '' ? undefined : Number(monthlyTokenLimit);
    const pct = limit && limit > 0 ? Math.min(100, Math.round((used / limit) * 100)) : null;
    const over = pct !== null && used > (limit ?? 0);
    const periodLabel = usage?.periodStart
        ? new Date(usage.periodStart).toLocaleDateString(undefined, { month: 'long', year: 'numeric' })
        : 'This month';
    return (_jsx(SettingsCard, { title: "Monthly Usage", description: `Token usage for ${periodLabel}. Aggregated from completed AI runs.`, children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsxs("div", { className: "mb-1 flex items-center justify-between text-sm", children: [_jsxs("span", { className: "text-foreground font-medium", children: [formatTokens(used), " tokens used"] }), limit && limit > 0 && (_jsxs("span", { className: "text-muted-foreground", children: ["of ", formatTokens(limit)] }))] }), pct !== null ? (_jsx("div", { className: "bg-muted h-2 w-full overflow-hidden rounded-full", role: "progressbar", "aria-valuenow": pct, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuetext": `${pct}% of monthly token budget used`, children: _jsx("div", { className: `h-full rounded-full transition-all ${over ? 'bg-destructive' : 'bg-brand'}`, style: { width: `${pct}%` } }) })) : (_jsx("p", { className: "text-muted-foreground text-sm", children: "No monthly limit set. Usage is tracked but not capped." })), over && (_jsx("p", { className: "text-destructive mt-1 text-sm", role: "status", children: "Usage has exceeded the monthly limit." }))] }), _jsxs("div", { children: [_jsx("label", { htmlFor: limitId, className: LABEL_CLASS, children: "Monthly token limit" }), _jsx("input", { id: limitId, type: "text", inputMode: "numeric", value: monthlyTokenLimit, disabled: !canEdit, placeholder: "No limit", "aria-invalid": Boolean(budgetError), "aria-describedby": budgetError ? `${limitId}-error` : undefined, onChange: (e) => onChangeLimit(e.target.value), className: INPUT_CLASS }), budgetError ? (_jsx("p", { id: `${limitId}-error`, className: "text-destructive mt-1 text-sm", children: budgetError })) : (_jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: "Leave blank for no limit. Enforcement and alerts arrive with usage metering." }))] })] }) }));
}
//# sourceMappingURL=MonthlyUsageCard.js.map