import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useMemo, useState } from "react";
import { Users, Coins, Image as ImageIcon, BarChart3, DollarSign, CheckCircle2, } from "lucide-react";
import { useEditContext } from "../client/editContext";
import { requestQuota } from "../services/aiService";
import { QuotaUserPicker } from "./QuotaUserPicker";
import { Select } from "../../components/ui/select";
const MONTH_NAMES = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December",
];
function parseUsageDate(rawDate) {
    if (!rawDate)
        return null;
    const normalized = rawDate.includes("T") ? rawDate : `${rawDate}T00:00:00Z`;
    const parsed = new Date(normalized);
    return isNaN(parsed.getTime()) ? null : parsed;
}
function DailyUsageBarChart(props) {
    const { title, unit, colorClass, valueFormatter, points } = props;
    const maxValue = Math.max(1, ...points.map((point) => point.value));
    const hasValues = points.some((point) => point.value > 0);
    return (_jsxs("div", { className: "bg-neutral-grey-5 rounded p-3", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("p", { className: "text-neutral-grey-100 text-sm font-medium", children: title }), _jsxs("p", { className: "text-neutral-grey-50 text-xs", children: ["Max: ", valueFormatter(maxValue), " ", unit] })] }), _jsx("div", { className: "h-36 rounded bg-white p-2", children: _jsx("div", { className: "flex h-full items-end gap-[2px]", children: points.map((point) => {
                        const heightPercent = point.value <= 0
                            ? 2
                            : Math.max(4, (point.value / maxValue) * 100);
                        return (_jsx("div", { className: "group relative flex h-full flex-1 items-end", children: _jsx("div", { className: `w-full ${colorClass} opacity-90 transition-opacity group-hover:opacity-100`, style: { height: `${heightPercent}%` }, title: `Day ${point.day}: ${valueFormatter(point.value)} ${unit}` }) }, point.day));
                    }) }) }), _jsx("div", { className: "text-neutral-grey-50 mt-2 grid text-[10px]", style: {
                    gridTemplateColumns: `repeat(${points.length}, minmax(0, 1fr))`,
                }, children: points.map((point) => {
                    const shouldShowLabel = point.day === 1 ||
                        point.day === points.length ||
                        point.day % 5 === 0;
                    return (_jsx("span", { className: "text-center", children: shouldShowLabel ? point.day : "" }, point.day));
                }) }), !hasValues && (_jsx("p", { className: "text-neutral-grey-50 mt-2 text-xs", children: "No usage recorded for this period." }))] }));
}
export function QuotaInfo() {
    const editContext = useEditContext();
    const liveQuotaInfo = editContext?.quotaInfo ?? null;
    const today = new Date();
    const currentYear = today.getFullYear();
    const [selectedMonth, setSelectedMonth] = useState(today.getMonth());
    const [selectedYear, setSelectedYear] = useState(currentYear);
    const isAdministrator = editContext?.user?.isAdministrator === true;
    const currentUserName = editContext?.user?.name ?? "";
    const [selectedScope, setSelectedScope] = useState("me");
    const [selectedUserName, setSelectedUserName] = useState("");
    const [selectedUserDisplayName, setSelectedUserDisplayName] = useState("");
    const [scopedQuotaInfo, setScopedQuotaInfo] = useState(null);
    const [isLoadingScopedQuota, setIsLoadingScopedQuota] = useState(false);
    const [scopeError, setScopeError] = useState(null);
    const quotaInfo = isAdministrator && selectedScope !== "me" ? scopedQuotaInfo : liveQuotaInfo;
    const loadScopedQuotaInfo = useCallback(async () => {
        if (!isAdministrator)
            return;
        if (selectedScope === "me") {
            setIsLoadingScopedQuota(false);
            setScopedQuotaInfo(null);
            setScopeError(null);
            return;
        }
        if (selectedScope === "user" && !selectedUserName) {
            setIsLoadingScopedQuota(false);
            setScopedQuotaInfo(null);
            return;
        }
        setIsLoadingScopedQuota(true);
        setScopedQuotaInfo(null);
        const response = await requestQuota({
            scope: selectedScope,
            userName: selectedScope === "user" ? selectedUserName : undefined,
        });
        if (response.type === "success" && response.data) {
            const payload = response.data;
            setScopedQuotaInfo({
                usage: {
                    totalTokens: payload.usage.totalTokens,
                    totalImages: payload.usage.totalImages,
                    dailyTokens: payload.usage.dailyTokens,
                    dailyImages: payload.usage.dailyImages,
                    totalCost: payload.usage.totalCost,
                    dailyCost: payload.usage.dailyCost,
                    dailyHistory: payload.usage.dailyHistory ?? [],
                },
                limits: {
                    totalTokens: payload.limits.totalTokens,
                    dailyTokens: payload.limits.dailyTokens,
                    monthlyTokens: -1,
                    totalImages: payload.limits.totalImages,
                    dailyImages: payload.limits.dailyImages,
                    monthlyImages: -1,
                },
            });
            setScopeError(null);
        }
        else {
            setScopedQuotaInfo(null);
            setScopeError(response.details ?? "Failed to load quota");
        }
        setIsLoadingScopedQuota(false);
    }, [isAdministrator, selectedScope, selectedUserName]);
    useEffect(() => {
        if (!isAdministrator)
            return;
        void loadScopedQuotaInfo();
    }, [isAdministrator, loadScopedQuotaInfo]);
    const dailyHistory = useMemo(() => quotaInfo?.usage.dailyHistory ?? [], [quotaInfo?.usage.dailyHistory]);
    const availableYears = useMemo(() => {
        const years = new Set([currentYear]);
        for (const point of dailyHistory) {
            const date = parseUsageDate(point.date);
            if (date)
                years.add(date.getUTCFullYear());
        }
        return Array.from(years).sort((a, b) => b - a);
    }, [dailyHistory, currentYear]);
    useEffect(() => {
        if (availableYears.length === 0)
            return;
        if (!availableYears.includes(selectedYear))
            setSelectedYear(availableYears[0]);
    }, [availableYears, selectedYear]);
    const dailyChartPoints = useMemo(() => {
        const daysInMonth = new Date(selectedYear, selectedMonth + 1, 0).getDate();
        const pointsByDay = new Map();
        for (let day = 1; day <= daysInMonth; day += 1) {
            pointsByDay.set(day, {
                day,
                tokens: 0,
                images: 0,
                tokenCost: 0,
                imageCost: 0,
            });
        }
        for (const point of dailyHistory) {
            const date = parseUsageDate(point.date);
            if (!date)
                continue;
            const year = date.getUTCFullYear();
            const month = date.getUTCMonth();
            const day = date.getUTCDate();
            if (year !== selectedYear || month !== selectedMonth)
                continue;
            const existing = pointsByDay.get(day);
            if (!existing)
                continue;
            existing.tokens += point.tokens ?? 0;
            existing.images += point.images ?? 0;
            existing.tokenCost += point.tokenCost ?? 0;
            existing.imageCost += point.imageCost ?? 0;
        }
        return Array.from(pointsByDay.values()).sort((a, b) => a.day - b.day);
    }, [dailyHistory, selectedMonth, selectedYear]);
    const selectedMonthTotals = useMemo(() => dailyChartPoints.reduce((acc, point) => {
        acc.tokens += point.tokens;
        acc.images += point.images;
        acc.tokenCost += point.tokenCost;
        acc.imageCost += point.imageCost;
        return acc;
    }, { tokens: 0, images: 0, tokenCost: 0, imageCost: 0 }), [dailyChartPoints]);
    const formatQuotaPercentage = (used, limit) => {
        if (!limit || limit === 0 || limit === -1)
            return "No limit";
        if (!used && used !== 0)
            return "0%";
        if (isNaN(used) || isNaN(limit))
            return "0%";
        const percentage = Math.round((used / limit) * 100);
        return `${percentage}%`;
    };
    const getQuotaStatus = (used, limit) => {
        if (!limit || limit === 0 || limit === -1)
            return "unlimited";
        if (!used && used !== 0)
            return "ok";
        if (isNaN(used) || isNaN(limit))
            return "ok";
        const percentage = (used / limit) * 100;
        if (percentage >= 100)
            return "exceeded";
        if (percentage >= 90)
            return "warning";
        if (percentage >= 75)
            return "caution";
        return "ok";
    };
    const getProgressWidth = (used, limit) => {
        if (!limit ||
            limit === 0 ||
            limit === -1 ||
            !used ||
            isNaN(used) ||
            isNaN(limit))
            return 0;
        return Math.min(100, (used / limit) * 100);
    };
    const adminScopePanel = isAdministrator ? (_jsxs("div", { className: "overflow-hidden rounded-lg bg-white", "data-testid": "quota-admin-scope-panel", children: [_jsx("div", { className: "border-border-default border-b px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Users, { className: "text-neutral-grey-50 h-4 w-4", strokeWidth: 1.5 }), _jsx("h3", { className: "text-neutral-grey-100 text-sm font-semibold", children: "Usage scope" })] }) }), _jsxs("div", { className: "p-4", children: [_jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { htmlFor: "quota-scope-select", className: "text-neutral-grey-50 block text-xs font-medium", children: "View" }), _jsx(Select, { id: "quota-scope-select", value: selectedScope, onValueChange: (value) => setSelectedScope(value), options: [
                                            { value: "me", label: "Me" },
                                            { value: "all", label: "All users" },
                                            { value: "user", label: "Select user" },
                                        ], "data-testid": "quota-scope-select" })] }), selectedScope === "user" && (_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "text-neutral-grey-50 block text-xs font-medium", children: "User" }), _jsx(QuotaUserPicker, { value: selectedUserName, displayValue: selectedUserDisplayName, placeholder: "Search and select user", buttonTestId: "quota-user-select", onChange: (next) => {
                                            setSelectedUserName(next.userName);
                                            setSelectedUserDisplayName(next.displayName);
                                        } })] }))] }), scopeError && (_jsx("p", { className: "text-feedback-red mt-3 text-xs", "data-testid": "quota-scope-error", children: scopeError }))] })] })) : null;
    if (!quotaInfo) {
        return (_jsxs("div", { className: "space-y-10 p-4", "data-testid": "quota-info-section", children: [adminScopePanel, _jsx("div", { className: "rounded-lg bg-white p-4", children: _jsx("p", { className: "text-neutral-grey-50 text-sm", children: isLoadingScopedQuota
                            ? "Loading quota information..."
                            : "No quota information available" }) })] }));
    }
    return (_jsxs("div", { className: "space-y-10 p-4", "data-testid": "quota-info-section", children: [adminScopePanel, _jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [_jsxs("div", { className: "overflow-hidden rounded-lg bg-white", children: [_jsx("div", { className: "border-border-default border-b px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Coins, { className: "text-neutral-grey-50 h-4 w-4", strokeWidth: 1.5 }), _jsx("h3", { className: "text-neutral-grey-100 text-sm font-semibold", children: "Token usage" })] }) }), _jsxs("div", { className: "space-y-4 p-4", children: [_jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("label", { className: "text-neutral-grey-50 text-sm font-medium", children: "Total Usage" }), _jsxs("span", { className: "text-neutral-grey-50 text-sm", children: [quotaInfo.usage.totalTokens.toLocaleString(), " /", " ", quotaInfo.limits.totalTokens &&
                                                                quotaInfo.limits.totalTokens > 0
                                                                ? quotaInfo.limits.totalTokens.toLocaleString()
                                                                : "∞"] })] }), quotaInfo.limits.totalTokens &&
                                                quotaInfo.limits.totalTokens > 0 && (_jsx("div", { className: "bg-neutral-grey-10 h-2 w-full rounded-full", children: _jsx("div", { className: `h-2 rounded-full ${getQuotaStatus(quotaInfo.usage.totalTokens, quotaInfo.limits.totalTokens) === "exceeded"
                                                        ? "bg-feedback-red"
                                                        : getQuotaStatus(quotaInfo.usage.totalTokens, quotaInfo.limits.totalTokens) === "warning"
                                                            ? "bg-component-shared"
                                                            : getQuotaStatus(quotaInfo.usage.totalTokens, quotaInfo.limits.totalTokens) === "caution"
                                                                ? "bg-feedback-orange"
                                                                : "bg-feedback-green"}`, style: {
                                                        width: `${getProgressWidth(quotaInfo.usage.totalTokens, quotaInfo.limits.totalTokens)}%`,
                                                    } }) })), _jsxs("p", { className: "text-neutral-grey-50 mt-1 text-xs", children: [formatQuotaPercentage(quotaInfo.usage.totalTokens, quotaInfo.limits.totalTokens), " ", "used"] })] }), _jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("label", { className: "text-neutral-grey-50 text-sm font-medium", children: "Daily Usage" }), _jsxs("span", { className: "text-neutral-grey-50 text-sm", children: [quotaInfo.usage.dailyTokens.toLocaleString(), " /", " ", quotaInfo.limits.dailyTokens &&
                                                                quotaInfo.limits.dailyTokens > 0
                                                                ? quotaInfo.limits.dailyTokens.toLocaleString()
                                                                : "∞"] })] }), quotaInfo.limits.dailyTokens &&
                                                quotaInfo.limits.dailyTokens > 0 && (_jsx("div", { className: "bg-neutral-grey-10 h-2 w-full rounded-full", children: _jsx("div", { className: `h-2 rounded-full ${getQuotaStatus(quotaInfo.usage.dailyTokens, quotaInfo.limits.dailyTokens) === "exceeded"
                                                        ? "bg-feedback-red"
                                                        : getQuotaStatus(quotaInfo.usage.dailyTokens, quotaInfo.limits.dailyTokens) === "warning"
                                                            ? "bg-component-shared"
                                                            : getQuotaStatus(quotaInfo.usage.dailyTokens, quotaInfo.limits.dailyTokens) === "caution"
                                                                ? "bg-feedback-orange"
                                                                : "bg-feedback-green"}`, style: {
                                                        width: `${getProgressWidth(quotaInfo.usage.dailyTokens, quotaInfo.limits.dailyTokens)}%`,
                                                    } }) })), _jsx("p", { className: "text-neutral-grey-50 mt-1 text-xs", children: quotaInfo.limits.dailyTokens === -1
                                                    ? "No daily limit"
                                                    : `${formatQuotaPercentage(quotaInfo.usage.dailyTokens, quotaInfo.limits.dailyTokens)} used today` })] })] })] }), _jsxs("div", { className: "overflow-hidden rounded-lg bg-white", children: [_jsx("div", { className: "border-border-default border-b px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ImageIcon, { className: "text-neutral-grey-50 h-4 w-4", strokeWidth: 1.5 }), _jsx("h3", { className: "text-neutral-grey-100 text-sm font-semibold", children: "Image usage" })] }) }), _jsxs("div", { className: "space-y-4 p-4", children: [_jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("label", { className: "text-neutral-grey-50 text-sm font-medium", children: "Total Usage" }), _jsxs("span", { className: "text-neutral-grey-50 text-sm", children: [quotaInfo.usage.totalImages.toLocaleString(), " /", " ", quotaInfo.limits.totalImages &&
                                                                quotaInfo.limits.totalImages > 0
                                                                ? quotaInfo.limits.totalImages.toLocaleString()
                                                                : "∞"] })] }), quotaInfo.limits.totalImages &&
                                                quotaInfo.limits.totalImages > 0 && (_jsx("div", { className: "bg-neutral-grey-10 h-2 w-full rounded-full", children: _jsx("div", { className: `h-2 rounded-full ${getQuotaStatus(quotaInfo.usage.totalImages, quotaInfo.limits.totalImages) === "exceeded"
                                                        ? "bg-feedback-red"
                                                        : getQuotaStatus(quotaInfo.usage.totalImages, quotaInfo.limits.totalImages) === "warning"
                                                            ? "bg-component-shared"
                                                            : getQuotaStatus(quotaInfo.usage.totalImages, quotaInfo.limits.totalImages) === "caution"
                                                                ? "bg-feedback-orange"
                                                                : "bg-feedback-green"}`, style: {
                                                        width: `${getProgressWidth(quotaInfo.usage.totalImages, quotaInfo.limits.totalImages)}%`,
                                                    } }) })), _jsxs("p", { className: "text-neutral-grey-50 mt-1 text-xs", children: [formatQuotaPercentage(quotaInfo.usage.totalImages, quotaInfo.limits.totalImages), " ", "used"] })] }), _jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("label", { className: "text-neutral-grey-50 text-sm font-medium", children: "Daily Usage" }), _jsxs("span", { className: "text-neutral-grey-50 text-sm", children: [quotaInfo.usage.dailyImages.toLocaleString(), " /", " ", quotaInfo.limits.dailyImages &&
                                                                quotaInfo.limits.dailyImages > 0
                                                                ? quotaInfo.limits.dailyImages.toLocaleString()
                                                                : "∞"] })] }), quotaInfo.limits.dailyImages &&
                                                quotaInfo.limits.dailyImages > 0 && (_jsx("div", { className: "bg-neutral-grey-10 h-2 w-full rounded-full", children: _jsx("div", { className: `h-2 rounded-full ${getQuotaStatus(quotaInfo.usage.dailyImages, quotaInfo.limits.dailyImages) === "exceeded"
                                                        ? "bg-feedback-red"
                                                        : getQuotaStatus(quotaInfo.usage.dailyImages, quotaInfo.limits.dailyImages) === "warning"
                                                            ? "bg-component-shared"
                                                            : getQuotaStatus(quotaInfo.usage.dailyImages, quotaInfo.limits.dailyImages) === "caution"
                                                                ? "bg-feedback-orange"
                                                                : "bg-feedback-green"}`, style: {
                                                        width: `${getProgressWidth(quotaInfo.usage.dailyImages, quotaInfo.limits.dailyImages)}%`,
                                                    } }) })), _jsx("p", { className: "text-neutral-grey-50 mt-1 text-xs", children: quotaInfo.limits.dailyImages === -1
                                                    ? "No daily limit"
                                                    : `${formatQuotaPercentage(quotaInfo.usage.dailyImages, quotaInfo.limits.dailyImages)} used today` })] })] })] })] }), _jsxs("div", { className: "overflow-hidden rounded-lg bg-white", "data-testid": "quota-daily-usage-chart", children: [_jsx("div", { className: "border-border-default border-b px-4 py-3", children: _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(BarChart3, { className: "text-neutral-grey-50 h-4 w-4", strokeWidth: 1.5 }), _jsxs("div", { children: [_jsx("h3", { className: "text-neutral-grey-100 text-sm font-semibold", children: "Daily usage chart" }), _jsx("p", { className: "text-neutral-grey-50 text-xs", children: "Month/year switchable daily usage across tokens, images, and cost." })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { className: "sr-only", htmlFor: "quota-usage-month", children: "Select month" }), _jsx(Select, { id: "quota-usage-month", value: String(selectedMonth), onValueChange: (value) => setSelectedMonth(Number(value)), options: MONTH_NAMES.map((monthName, index) => ({
                                                value: String(index),
                                                label: monthName,
                                            })), className: "w-36", "data-testid": "quota-usage-month-select" }), _jsx("label", { className: "sr-only", htmlFor: "quota-usage-year", children: "Select year" }), _jsx(Select, { id: "quota-usage-year", value: String(selectedYear), onValueChange: (value) => setSelectedYear(Number(value)), options: availableYears.map((year) => ({
                                                value: String(year),
                                                label: String(year),
                                            })), className: "w-28", "data-testid": "quota-usage-year-select" })] })] }) }), _jsxs("div", { className: "p-4", children: [_jsxs("div", { className: "mb-4 grid gap-3 sm:grid-cols-5", children: [_jsxs("div", { className: "bg-neutral-grey-5 rounded p-3", children: [_jsx("p", { className: "text-neutral-grey-50 text-xs font-medium", children: "Tokens this month" }), _jsx("p", { className: "text-neutral-grey-100 mt-1 text-base font-semibold", children: selectedMonthTotals.tokens.toLocaleString() })] }), _jsxs("div", { className: "bg-neutral-grey-5 rounded p-3", children: [_jsx("p", { className: "text-neutral-grey-50 text-xs font-medium", children: "Cost Tokens this month" }), _jsxs("p", { className: "text-neutral-grey-100 mt-1 text-base font-semibold", children: ["$", selectedMonthTotals.tokenCost.toFixed(2)] })] }), _jsxs("div", { className: "bg-neutral-grey-5 rounded p-3", children: [_jsx("p", { className: "text-neutral-grey-50 text-xs font-medium", children: "Images this month" }), _jsx("p", { className: "text-neutral-grey-100 mt-1 text-base font-semibold", children: selectedMonthTotals.images.toLocaleString() })] }), _jsxs("div", { className: "bg-neutral-grey-5 rounded p-3", children: [_jsx("p", { className: "text-neutral-grey-50 text-xs font-medium", children: "Cost Images this month" }), _jsxs("p", { className: "text-neutral-grey-100 mt-1 text-base font-semibold", children: ["$", selectedMonthTotals.imageCost.toFixed(2)] })] }), _jsxs("div", { className: "bg-neutral-grey-5 rounded p-3", children: [_jsx("p", { className: "text-neutral-grey-50 text-xs font-medium", children: "Total Cost this month" }), _jsxs("p", { className: "text-neutral-grey-100 mt-1 text-base font-semibold", children: ["$", (selectedMonthTotals.tokenCost + selectedMonthTotals.imageCost).toFixed(2)] })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(DailyUsageBarChart, { title: "Tokens / day", unit: "tokens", colorClass: "bg-feedback-blue", valueFormatter: (value) => value.toLocaleString(), points: dailyChartPoints.map((point) => ({
                                            day: point.day,
                                            value: point.tokens,
                                        })) }), _jsx(DailyUsageBarChart, { title: "Cost Tokens / day", unit: "USD", colorClass: "bg-feedback-green", valueFormatter: (value) => value.toFixed(2), points: dailyChartPoints.map((point) => ({
                                            day: point.day,
                                            value: point.tokenCost,
                                        })) }), _jsx(DailyUsageBarChart, { title: "Images / day", unit: "images", colorClass: "bg-highlight-100", valueFormatter: (value) => value.toLocaleString(), points: dailyChartPoints.map((point) => ({
                                            day: point.day,
                                            value: point.images,
                                        })) }), _jsx(DailyUsageBarChart, { title: "Cost Images / day", unit: "USD", colorClass: "bg-component-suggestions", valueFormatter: (value) => value.toFixed(2), points: dailyChartPoints.map((point) => ({
                                            day: point.day,
                                            value: point.imageCost,
                                        })) }), _jsx(DailyUsageBarChart, { title: "Total Cost / day", unit: "USD", colorClass: "bg-feedback-orange", valueFormatter: (value) => value.toFixed(2), points: dailyChartPoints.map((point) => ({
                                            day: point.day,
                                            value: point.tokenCost + point.imageCost,
                                        })) })] }), dailyHistory.length === 0 && (_jsx("p", { className: "text-neutral-grey-50 mt-3 text-xs", children: "No historical usage payload received yet. The chart will populate as daily usage data is sent from the server." }))] })] }), _jsxs("div", { className: "overflow-hidden rounded-lg bg-white", children: [_jsx("div", { className: "border-border-default border-b px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(DollarSign, { className: "text-neutral-grey-50 h-4 w-4", strokeWidth: 1.5 }), _jsx("h3", { className: "text-neutral-grey-100 text-sm font-semibold", children: "Cost summary" })] }) }), _jsxs("div", { className: "space-y-4 p-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-neutral-grey-50 text-sm font-medium", children: "Total (All Time)" }), _jsxs("span", { className: "text-neutral-grey-100 text-base font-semibold", children: ["$", (quotaInfo.usage.totalCost ?? 0).toFixed(2)] })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-neutral-grey-50 text-sm font-medium", children: "Today" }), _jsxs("span", { className: "text-neutral-grey-100 text-base font-semibold", children: ["$", (quotaInfo.usage.dailyCost ?? 0).toFixed(2)] })] })] })] }), _jsxs("div", { className: "overflow-hidden rounded-lg bg-white", "data-testid": "quota-status-summary", children: [_jsx("div", { className: "border-border-default border-b px-4 py-3", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(CheckCircle2, { className: "text-neutral-grey-50 h-4 w-4", strokeWidth: 1.5 }), _jsx("h3", { className: "text-neutral-grey-100 text-sm font-semibold", children: "Quota status" })] }) }), _jsxs("div", { className: "space-y-1 p-4 text-sm", children: [editContext?.isQuotaExceeded && (_jsx("p", { className: "text-feedback-red font-medium", "data-testid": "quota-exceeded-message", children: "\u26A0\uFE0F Quota limits have been exceeded" })), editContext?.getQuotaWarningMessage &&
                                editContext.getQuotaWarningMessage() &&
                                !editContext.isQuotaExceeded && (_jsxs("p", { className: "text-component-shared", children: ["\u26A0\uFE0F ", editContext.getQuotaWarningMessage()] })), !editContext?.isQuotaExceeded &&
                                !editContext?.getQuotaWarningMessage?.() && (_jsx("p", { className: "text-feedback-green", children: "\u2705 All quotas are within limits" }))] })] })] }));
}
//# sourceMappingURL=QuotaInfo.js.map