import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo, useMemo } from 'react';
import { Modal } from '../ui/Modal';
import { useUsageStore } from '../../stores/usageStore';
import { ProviderLogo } from './ProviderLogo';
function formatTimeRemaining(resetsAt) {
    if (!resetsAt)
        return 'Unknown';
    const now = Date.now();
    const reset = new Date(resetsAt).getTime();
    const diff = reset - now;
    if (diff <= 0)
        return 'Now';
    const days = Math.floor(diff / 86_400_000);
    const hours = Math.floor((diff % 86_400_000) / 3_600_000);
    const minutes = Math.floor((diff % 3_600_000) / 60_000);
    if (days > 0)
        return `${days}d ${hours}h`;
    if (hours > 0)
        return `${hours}h ${minutes}m`;
    return `${minutes}m`;
}
function windowLabel(seconds) {
    if (seconds <= 18000)
        return '5 Hour';
    if (seconds <= 86400)
        return '24 Hour';
    return '7 Day';
}
function UsageBar({ label, window: w, }) {
    const percent = Math.min(w.usedPercent, 100);
    const barColor = percent >= 90
        ? 'bg-red-500'
        : percent >= 70
            ? 'bg-amber-500'
            : 'bg-blue-500';
    return (_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: label }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "font-medium text-foreground", children: [Math.round(percent), "%"] }), w.resetsAt && (_jsxs("span", { className: "text-xs text-muted-foreground", children: ["resets in ", formatTimeRemaining(w.resetsAt)] }))] })] }), _jsx("div", { className: "h-2 rounded-full bg-muted overflow-hidden", children: _jsx("div", { className: `h-full rounded-full transition-all duration-500 ${barColor}`, style: { width: `${percent}%` } }) })] }));
}
export const UsageModal = memo(function UsageModal() {
    const isOpen = useUsageStore((s) => s.isModalOpen);
    const provider = useUsageStore((s) => s.modalProvider);
    const closeModal = useUsageStore((s) => s.closeModal);
    const usage = useUsageStore((s) => provider ? s.usage[provider] : undefined);
    const title = useMemo(() => (_jsxs("div", { className: "flex items-center gap-2", children: [provider && _jsx(ProviderLogo, { provider: provider, size: 20 }), _jsx("span", { children: "Usage & Limits" })] })), [provider]);
    if (!usage)
        return null;
    return (_jsx(Modal, { isOpen: isOpen, onClose: closeModal, title: title, maxWidth: "sm", children: _jsxs("div", { className: "space-y-5", children: [usage.limitReached && (_jsxs("div", { className: "flex items-center gap-2 px-3 py-2 rounded-md bg-red-500/10 border border-red-500/20", children: [_jsx("span", { className: "w-2 h-2 rounded-full bg-red-500 flex-shrink-0" }), _jsx("span", { className: "text-sm text-red-600 dark:text-red-400 font-medium", children: "Rate limit reached" })] })), usage.primaryWindow && (_jsx(UsageBar, { label: `${windowLabel(usage.primaryWindow.windowSeconds)} Window`, window: usage.primaryWindow })), usage.secondaryWindow && (_jsx(UsageBar, { label: `${windowLabel(usage.secondaryWindow.windowSeconds)} Window`, window: usage.secondaryWindow })), usage.sonnetWindow && usage.sonnetWindow.usedPercent > 0 && (_jsx(UsageBar, { label: "Sonnet (7 Day)", window: {
                        usedPercent: usage.sonnetWindow.usedPercent,
                        windowSeconds: 604800,
                        resetsAt: usage.sonnetWindow.resetsAt,
                    } })), usage.extraUsage?.is_enabled && (_jsx("div", { className: "pt-2 border-t border-border space-y-1", children: _jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: "Extra Credits" }), _jsxs("span", { className: "font-medium text-foreground", children: ["$", usage.extraUsage.used_credits.toFixed(2), " / $", usage.extraUsage.monthly_limit] })] }) })), usage.credits?.has_credits && (_jsx("div", { className: "pt-2 border-t border-border space-y-1", children: _jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: "Credits" }), _jsx("span", { className: "font-medium text-foreground", children: usage.credits.balance !== null
                                    ? `$${usage.credits.balance.toFixed(2)}`
                                    : 'Available' })] }) })), usage.planType && (_jsx("div", { className: "pt-2 border-t border-border", children: _jsxs("div", { className: "flex items-center justify-between text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: "Plan" }), _jsx("span", { className: "font-medium text-foreground capitalize", children: usage.planType })] }) }))] }) }));
});
//# sourceMappingURL=UsageModal.js.map