import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useMemo, useState } from "react";
import { useEditContext } from "../client/editContext";
import { loadQuotaUsers, requestQuota, } from "../services/aiService";
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: "rounded border border-gray-100 bg-gray-50 p-3", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("p", { className: "text-sm font-medium text-gray-700", children: title }), _jsxs("p", { className: "text-xs text-gray-500", children: ["Max: ", valueFormatter(maxValue), " ", unit] })] }), _jsx("div", { className: "h-36 rounded border border-gray-100 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 rounded-t-sm ${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: "mt-2 grid text-[10px] text-gray-500", 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: "mt-2 text-xs text-gray-500", 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 [quotaUsers, setQuotaUsers] = useState([]);
    const [scopedQuotaInfo, setScopedQuotaInfo] = useState(null);
    const [isLoadingScopedQuota, setIsLoadingScopedQuota] = useState(false);
    const [scopeError, setScopeError] = useState(null);
    const quotaInfo = isAdministrator && selectedScope !== "me" ? scopedQuotaInfo : liveQuotaInfo;
    useEffect(() => {
        if (selectedUserName || !currentUserName)
            return;
        setSelectedUserName(currentUserName);
    }, [currentUserName, selectedUserName]);
    const availableQuotaUsers = useMemo(() => {
        const withCurrentUser = currentUserName &&
            !quotaUsers.some((user) => user.userName.toLowerCase() === currentUserName.toLowerCase())
            ? [
                ...quotaUsers,
                { userName: currentUserName, displayName: currentUserName },
            ]
            : quotaUsers;
        return [...withCurrentUser].sort((a, b) => a.userName.localeCompare(b.userName, undefined, { sensitivity: "base" }));
    }, [currentUserName, quotaUsers]);
    useEffect(() => {
        if (!isAdministrator)
            return;
        let cancelled = false;
        async function fetchQuotaUsers() {
            const response = await loadQuotaUsers();
            if (cancelled)
                return;
            if (response.type === "success") {
                setQuotaUsers(response.data ?? []);
                setScopeError(null);
            }
            else {
                setScopeError(response.details ?? "Failed to load users");
            }
        }
        void fetchQuotaUsers();
        return () => {
            cancelled = true;
        };
    }, [isAdministrator]);
    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: "rounded-lg border border-gray-200 bg-white p-4", "data-testid": "quota-admin-scope-panel", children: [_jsx("h3", { className: "mb-3 text-lg font-semibold text-gray-800", children: "Usage Scope" }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "quota-scope-select", className: "mb-1 block text-sm font-medium text-gray-500", children: "View" }), _jsxs("select", { id: "quota-scope-select", value: selectedScope, onChange: (event) => setSelectedScope(event.target.value), className: "w-full rounded border border-gray-200 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none", "data-testid": "quota-scope-select", children: [_jsx("option", { value: "me", children: "Me" }), _jsx("option", { value: "all", children: "All users" }), _jsx("option", { value: "user", children: "Select user" })] })] }), selectedScope === "user" && (_jsxs("div", { children: [_jsx("label", { htmlFor: "quota-user-select", className: "mb-1 block text-sm font-medium text-gray-500", children: "User" }), _jsxs("select", { id: "quota-user-select", value: selectedUserName, onChange: (event) => setSelectedUserName(event.target.value), className: "w-full rounded border border-gray-200 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none", "data-testid": "quota-user-select", children: [availableQuotaUsers.length === 0 && (_jsx("option", { value: "", children: "No users available" })), availableQuotaUsers.map((user) => (_jsxs("option", { value: user.userName, children: [user.displayName, " (", user.userName, ")"] }, user.userName)))] })] }))] }), scopeError && (_jsx("p", { className: "mt-3 text-xs text-red-600", "data-testid": "quota-scope-error", children: scopeError }))] })) : null;
    if (!quotaInfo) {
        return (_jsxs("div", { className: "space-y-6 p-4", "data-testid": "quota-info-section", children: [adminScopePanel, _jsx("div", { className: "rounded-lg border border-gray-200 bg-white p-4", children: _jsx("p", { className: "text-gray-600", children: isLoadingScopedQuota
                            ? "Loading quota information..."
                            : "No quota information available" }) })] }));
    }
    return (_jsxs("div", { className: "space-y-6 p-4", "data-testid": "quota-info-section", children: [adminScopePanel, _jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-4", children: [_jsx("h3", { className: "mb-3 text-lg font-semibold text-gray-800", children: "Token Usage" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("label", { className: "text-sm font-medium text-gray-500", children: "Total Usage" }), _jsxs("span", { className: "text-sm text-gray-600", 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: "h-2 w-full rounded-full bg-gray-200", children: _jsx("div", { className: `h-2 rounded-full ${getQuotaStatus(quotaInfo.usage.totalTokens, quotaInfo.limits.totalTokens) === "exceeded"
                                                ? "bg-red-500"
                                                : getQuotaStatus(quotaInfo.usage.totalTokens, quotaInfo.limits.totalTokens) === "warning"
                                                    ? "bg-orange-500"
                                                    : getQuotaStatus(quotaInfo.usage.totalTokens, quotaInfo.limits.totalTokens) === "caution"
                                                        ? "bg-yellow-500"
                                                        : "bg-green-500"}`, style: {
                                                width: `${getProgressWidth(quotaInfo.usage.totalTokens, quotaInfo.limits.totalTokens)}%`,
                                            } }) })), _jsxs("p", { className: "mt-1 text-xs text-gray-500", 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-sm font-medium text-gray-500", children: "Daily Usage" }), _jsxs("span", { className: "text-sm text-gray-600", 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: "h-2 w-full rounded-full bg-gray-200", children: _jsx("div", { className: `h-2 rounded-full ${getQuotaStatus(quotaInfo.usage.dailyTokens, quotaInfo.limits.dailyTokens) === "exceeded"
                                                ? "bg-red-500"
                                                : getQuotaStatus(quotaInfo.usage.dailyTokens, quotaInfo.limits.dailyTokens) === "warning"
                                                    ? "bg-orange-500"
                                                    : getQuotaStatus(quotaInfo.usage.dailyTokens, quotaInfo.limits.dailyTokens) === "caution"
                                                        ? "bg-yellow-500"
                                                        : "bg-green-500"}`, style: {
                                                width: `${getProgressWidth(quotaInfo.usage.dailyTokens, quotaInfo.limits.dailyTokens)}%`,
                                            } }) })), _jsx("p", { className: "mt-1 text-xs text-gray-500", children: quotaInfo.limits.dailyTokens === -1
                                            ? "No daily limit"
                                            : `${formatQuotaPercentage(quotaInfo.usage.dailyTokens, quotaInfo.limits.dailyTokens)} used today` })] })] })] }), _jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-4", children: [_jsx("h3", { className: "mb-3 text-lg font-semibold text-gray-800", children: "Image Usage" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("label", { className: "text-sm font-medium text-gray-500", children: "Total Usage" }), _jsxs("span", { className: "text-sm text-gray-600", 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: "h-2 w-full rounded-full bg-gray-200", children: _jsx("div", { className: `h-2 rounded-full ${getQuotaStatus(quotaInfo.usage.totalImages, quotaInfo.limits.totalImages) === "exceeded"
                                                ? "bg-red-500"
                                                : getQuotaStatus(quotaInfo.usage.totalImages, quotaInfo.limits.totalImages) === "warning"
                                                    ? "bg-orange-500"
                                                    : getQuotaStatus(quotaInfo.usage.totalImages, quotaInfo.limits.totalImages) === "caution"
                                                        ? "bg-yellow-500"
                                                        : "bg-green-500"}`, style: {
                                                width: `${getProgressWidth(quotaInfo.usage.totalImages, quotaInfo.limits.totalImages)}%`,
                                            } }) })), _jsxs("p", { className: "mt-1 text-xs text-gray-500", 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-sm font-medium text-gray-500", children: "Daily Usage" }), _jsxs("span", { className: "text-sm text-gray-600", 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: "h-2 w-full rounded-full bg-gray-200", children: _jsx("div", { className: `h-2 rounded-full ${getQuotaStatus(quotaInfo.usage.dailyImages, quotaInfo.limits.dailyImages) === "exceeded"
                                                ? "bg-red-500"
                                                : getQuotaStatus(quotaInfo.usage.dailyImages, quotaInfo.limits.dailyImages) === "warning"
                                                    ? "bg-orange-500"
                                                    : getQuotaStatus(quotaInfo.usage.dailyImages, quotaInfo.limits.dailyImages) === "caution"
                                                        ? "bg-yellow-500"
                                                        : "bg-green-500"}`, style: {
                                                width: `${getProgressWidth(quotaInfo.usage.dailyImages, quotaInfo.limits.dailyImages)}%`,
                                            } }) })), _jsx("p", { className: "mt-1 text-xs text-gray-500", children: quotaInfo.limits.dailyImages === -1
                                            ? "No daily limit"
                                            : `${formatQuotaPercentage(quotaInfo.usage.dailyImages, quotaInfo.limits.dailyImages)} used today` })] })] })] }), _jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-4", "data-testid": "quota-daily-usage-chart", children: [_jsxs("div", { className: "mb-3 flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold text-gray-800", children: "Daily Usage Chart" }), _jsx("p", { className: "text-xs text-gray-500", 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: selectedMonth, onChange: (event) => setSelectedMonth(Number(event.target.value)), className: "rounded border border-gray-200 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none", "data-testid": "quota-usage-month-select", children: MONTH_NAMES.map((monthName, index) => (_jsx("option", { value: index, children: monthName }, monthName))) }), _jsx("label", { className: "sr-only", htmlFor: "quota-usage-year", children: "Select year" }), _jsx("select", { id: "quota-usage-year", value: selectedYear, onChange: (event) => setSelectedYear(Number(event.target.value)), className: "rounded border border-gray-200 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none", "data-testid": "quota-usage-year-select", children: availableYears.map((year) => (_jsx("option", { value: year, children: year }, year))) })] })] }), _jsxs("div", { className: "mb-4 grid gap-3 sm:grid-cols-5", children: [_jsxs("div", { className: "rounded border border-blue-100 bg-blue-50 p-3", children: [_jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-blue-700", children: "Tokens this month" }), _jsx("p", { className: "mt-1 text-lg font-semibold text-blue-900", children: selectedMonthTotals.tokens.toLocaleString() })] }), _jsxs("div", { className: "rounded border border-emerald-100 bg-emerald-50 p-3", children: [_jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-emerald-700", children: "Cost Tokens this month" }), _jsxs("p", { className: "mt-1 text-lg font-semibold text-emerald-900", children: ["$", selectedMonthTotals.tokenCost.toFixed(2)] })] }), _jsxs("div", { className: "rounded border border-purple-100 bg-purple-50 p-3", children: [_jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-purple-700", children: "Images this month" }), _jsx("p", { className: "mt-1 text-lg font-semibold text-purple-900", children: selectedMonthTotals.images.toLocaleString() })] }), _jsxs("div", { className: "rounded border border-teal-100 bg-teal-50 p-3", children: [_jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-teal-700", children: "Cost Images this month" }), _jsxs("p", { className: "mt-1 text-lg font-semibold text-teal-900", children: ["$", selectedMonthTotals.imageCost.toFixed(2)] })] }), _jsxs("div", { className: "rounded border border-amber-100 bg-amber-50 p-3", children: [_jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-amber-700", children: "Total Cost this month" }), _jsxs("p", { className: "mt-1 text-lg font-semibold text-amber-900", children: ["$", (selectedMonthTotals.tokenCost + selectedMonthTotals.imageCost).toFixed(2)] })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsx(DailyUsageBarChart, { title: "Tokens / day", unit: "tokens", colorClass: "bg-blue-500", valueFormatter: (value) => value.toLocaleString(), points: dailyChartPoints.map((point) => ({
                                    day: point.day,
                                    value: point.tokens,
                                })) }), _jsx(DailyUsageBarChart, { title: "Cost Tokens / day", unit: "USD", colorClass: "bg-emerald-500", valueFormatter: (value) => value.toFixed(2), points: dailyChartPoints.map((point) => ({
                                    day: point.day,
                                    value: point.tokenCost,
                                })) }), _jsx(DailyUsageBarChart, { title: "Images / day", unit: "images", colorClass: "bg-purple-500", valueFormatter: (value) => value.toLocaleString(), points: dailyChartPoints.map((point) => ({
                                    day: point.day,
                                    value: point.images,
                                })) }), _jsx(DailyUsageBarChart, { title: "Cost Images / day", unit: "USD", colorClass: "bg-teal-500", 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-amber-500", valueFormatter: (value) => value.toFixed(2), points: dailyChartPoints.map((point) => ({
                                    day: point.day,
                                    value: point.tokenCost + point.imageCost,
                                })) })] }), dailyHistory.length === 0 && (_jsx("p", { className: "mt-3 text-xs text-gray-500", children: "No historical usage payload received yet. The chart will populate as daily usage data is sent from the server." }))] }), _jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-4", children: [_jsx("h3", { className: "mb-3 text-lg font-semibold text-gray-800", children: "Cost Summary" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-sm font-medium text-gray-500", children: "Total (All Time)" }), _jsxs("span", { className: "text-lg font-semibold text-gray-800", children: ["$", (quotaInfo.usage.totalCost ?? 0).toFixed(2)] })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("label", { className: "text-sm font-medium text-gray-500", children: "Today" }), _jsxs("span", { className: "text-lg font-semibold text-gray-800", children: ["$", (quotaInfo.usage.dailyCost ?? 0).toFixed(2)] })] })] })] }), _jsxs("div", { className: "rounded-lg border border-gray-200 bg-white p-4", "data-testid": "quota-status-summary", children: [_jsx("h4", { className: "mb-2 text-sm font-medium text-gray-700", children: "Quota Status" }), _jsxs("div", { className: "space-y-1 text-sm", children: [editContext?.isQuotaExceeded && (_jsx("p", { className: "font-medium text-red-600", "data-testid": "quota-exceeded-message", children: "\u26A0\uFE0F Quota limits have been exceeded" })), editContext?.getQuotaWarningMessage &&
                                editContext.getQuotaWarningMessage() &&
                                !editContext.isQuotaExceeded && (_jsxs("p", { className: "text-orange-600", children: ["\u26A0\uFE0F ", editContext.getQuotaWarningMessage()] })), !editContext?.isQuotaExceeded &&
                                !editContext?.getQuotaWarningMessage?.() && (_jsx("p", { className: "text-green-600", children: "\u2705 All quotas are within limits" }))] })] })] }));
}
//# sourceMappingURL=QuotaInfo.js.map