import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useMemo } from 'react';
import { estimateModelCostUsd } from '@agi-cli/sdk/browser';
import { Clock, DollarSign, GitBranch, ArrowUpRight, Share2, ExternalLink, RefreshCw, } from 'lucide-react';
import { useParentSession } from '../../hooks/useBranch';
import { useShareStatus } from '../../hooks/useShareStatus';
import { ProviderLogo } from '../common/ProviderLogo';
export function SessionHeader({ session, onNavigateToSession, }) {
    const { data: parentData } = useParentSession(session.sessionType === 'branch' ? session.id : undefined);
    const { data: shareStatus } = useShareStatus(session.id);
    const estimatedCost = useMemo(() => {
        const inputTokens = session.totalInputTokens || 0;
        const outputTokens = session.totalOutputTokens || 0;
        const cachedInputTokens = session.totalCachedTokens || 0;
        const cacheCreationInputTokens = session.totalCacheCreationTokens || 0;
        return (estimateModelCostUsd(session.provider, session.model, {
            inputTokens,
            outputTokens,
            cachedInputTokens,
            cacheCreationInputTokens,
        }) ?? 0);
    }, [
        session.provider,
        session.model,
        session.totalInputTokens,
        session.totalOutputTokens,
        session.totalCachedTokens,
        session.totalCacheCreationTokens,
    ]);
    const formatDuration = (ms) => {
        if (!ms)
            return '0s';
        const seconds = Math.floor(ms / 1000);
        const minutes = Math.floor(seconds / 60);
        const hours = Math.floor(minutes / 60);
        if (hours > 0)
            return `${hours}h ${minutes % 60}m`;
        if (minutes > 0)
            return `${minutes}m ${seconds % 60}s`;
        return `${seconds}s`;
    };
    const formatNumber = (num) => num.toLocaleString('en-US');
    const formatCompactNumber = (num) => {
        if (num >= 1000000)
            return `${(num / 1000000).toFixed(1)}M`;
        if (num >= 1000)
            return `${(num / 1000).toFixed(1)}K`;
        return num.toString();
    };
    const contextTokens = session.currentContextTokens || 0;
    const outputTokens = session.totalOutputTokens || 0;
    const isBranch = session.sessionType === 'branch';
    const parentSession = parentData?.parent;
    return (_jsx("div", { className: "border-b border-border bg-background/95 backdrop-blur-sm", children: _jsxs("div", { className: "max-w-3xl mx-auto px-6 py-6", children: [isBranch && (_jsxs("div", { className: "flex items-center gap-2 mb-3 text-sm", children: [_jsx(GitBranch, { className: "h-4 w-4 text-violet-500" }), _jsx("span", { className: "text-violet-600 dark:text-violet-400 font-medium", children: "Branch" }), parentSession && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground", children: "from" }), _jsxs("button", { type: "button", onClick: () => onNavigateToSession?.(parentSession.id), className: "text-primary hover:underline flex items-center gap-1", children: [parentSession.title ||
                                            `Session ${parentSession.id.slice(0, 8)}`, _jsx(ArrowUpRight, { className: "h-3 w-3" })] })] })), !parentSession && session.parentSessionId && (_jsx("span", { className: "text-muted-foreground italic text-xs", children: "(parent deleted)" }))] })), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("h1", { className: "text-2xl font-semibold text-foreground leading-tight truncate", children: session.title || 'Untitled Session' }), shareStatus?.shared && (_jsxs("a", { href: shareStatus.url, target: "_blank", rel: "noopener noreferrer", className: "flex items-center gap-1.5 px-2 py-1 rounded-md bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 hover:bg-emerald-500/20 transition-colors text-xs font-medium flex-shrink-0", children: [_jsx(Share2, { className: "h-3 w-3" }), _jsx("span", { children: "Shared" }), shareStatus.pendingMessages &&
                                    shareStatus.pendingMessages > 0 ? (_jsxs("span", { className: "flex items-center gap-0.5 text-amber-600 dark:text-amber-400", children: [_jsx(RefreshCw, { className: "h-2.5 w-2.5" }), shareStatus.pendingMessages] })) : (_jsx(ExternalLink, { className: "h-2.5 w-2.5 opacity-60" }))] }))] }), _jsxs("div", { className: "flex flex-wrap items-center gap-x-5 gap-y-2 mt-4 text-sm text-muted-foreground", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex items-center gap-1.5", title: `Current context window: ${formatNumber(contextTokens)} tokens`, children: [_jsx("span", { className: "text-xs opacity-70", children: "ctx" }), _jsx("span", { className: "font-medium text-foreground", children: formatCompactNumber(contextTokens) })] }), _jsxs("div", { className: "flex items-center gap-1.5", title: `Total output: ${formatNumber(outputTokens)} tokens`, children: [_jsx("span", { className: "text-xs opacity-70", children: "out" }), _jsx("span", { className: "font-medium text-foreground", children: formatCompactNumber(outputTokens) })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Clock, { className: "w-4 h-4" }), _jsx("span", { className: "font-medium text-foreground", children: formatDuration(session.totalToolTimeMs) })] }), estimatedCost > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(DollarSign, { className: "w-4 h-4" }), _jsx("span", { className: "font-medium text-foreground", children: estimatedCost.toFixed(4) })] })), _jsxs("div", { className: "flex items-center gap-2 ml-auto", children: [_jsx(ProviderLogo, { provider: session.provider, size: 18 }), _jsx("span", { className: "font-medium text-foreground truncate max-w-48", children: session.model })] })] })] }) }));
}
//# sourceMappingURL=SessionHeader.js.map