'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useTranslation } from 'react-i18next';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../ui/tooltip.js';
import { useNpmVersionCheck } from '../../../hooks/use-npm-version-check.js';
import { useCliUpgrade } from '../../../hooks/use-cli-upgrade.js';
export function VersionBadge({ version, branch, commitHash, isDev = false, packageName = '@shepai/cli', description, instancePath, }) {
    const { t } = useTranslation('web');
    const shortHash = commitHash?.slice(0, 7);
    const { latest, updateAvailable } = useNpmVersionCheck(version);
    const { status: upgradeStatus, startUpgrade } = useCliUpgrade();
    // In dev mode show "1.92.2-dev", in production show "v1.92.2"
    const displayVersion = isDev ? `${version}-dev` : `v${version}`;
    const isUpgrading = upgradeStatus === 'upgrading';
    const isRestarting = upgradeStatus === 'restarting';
    const didUpgrade = upgradeStatus === 'upgraded';
    const upgradeError = upgradeStatus === 'error';
    return (_jsx(TooltipProvider, { delayDuration: 200, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("span", { className: "text-muted-foreground/80 hover:text-muted-foreground relative cursor-default text-[11px] leading-tight transition-colors", "data-testid": "version-label", children: [displayVersion, updateAvailable && !didUpgrade && !isRestarting ? (_jsx("span", { className: "absolute -top-0.5 -right-1.5 size-1.5 rounded-full bg-emerald-400", "data-testid": "update-dot" })) : null] }) }), _jsxs(TooltipContent, { side: "right", className: "max-w-[280px] space-y-1 p-3 text-start", children: [_jsx("div", { className: "mb-1.5 text-xs font-semibold", children: packageName }), description ? (_jsx("div", { className: "text-[10px] leading-snug opacity-70", children: description })) : null, _jsxs("div", { className: "border-t border-white/10 pt-1.5", children: [_jsx(Row, { label: t('versionBadge.version'), value: displayVersion }), isDev && branch ? _jsx(Row, { label: t('versionBadge.branch'), value: branch }) : null, isDev && shortHash ? (_jsx(Row, { label: t('versionBadge.commit'), value: shortHash, mono: true })) : null, isDev && instancePath ? (_jsx(Row, { label: t('versionBadge.path'), value: instancePath, mono: true })) : null, latest ? (_jsx(Row, { label: "Latest", value: `v${latest}`, highlight: updateAvailable })) : null] }), isRestarting ? (_jsx("div", { className: "border-t border-white/10 pt-1.5", children: _jsx("span", { className: "text-[10px] font-medium text-emerald-400", "data-testid": "upgrade-restarting", children: "Restarting..." }) })) : didUpgrade ? (_jsx("div", { className: "border-t border-white/10 pt-1.5", children: _jsx("span", { className: "text-[10px] font-medium text-emerald-400", "data-testid": "upgrade-success", children: "Upgraded successfully" }) })) : upgradeError ? (_jsx("div", { className: "border-t border-white/10 pt-1.5", children: _jsx("span", { className: "text-[10px] font-medium text-red-400", "data-testid": "upgrade-error", children: "Upgrade failed" }) })) : updateAvailable ? (_jsx("div", { className: "border-t border-white/10 pt-1.5", children: _jsx("button", { type: "button", onClick: startUpgrade, disabled: isUpgrading || isRestarting, className: "inline-flex items-center gap-1 text-[10px] font-medium text-emerald-400 transition-colors hover:text-emerald-300 disabled:opacity-50", "data-testid": "upgrade-button", children: isUpgrading
                                    ? 'Upgrading...'
                                    : isRestarting
                                        ? 'Restarting...'
                                        : `Upgrade to v${latest}` }) })) : null] })] }) }));
}
function Row({ label, value, highlight, mono, }) {
    return (_jsxs("div", { className: "flex items-center justify-between gap-4 text-[10px]", children: [_jsx("span", { className: "opacity-60", children: label }), _jsx("span", { className: [
                    highlight ? 'font-medium text-emerald-400' : '',
                    mono || !highlight ? 'font-mono' : '',
                ]
                    .filter(Boolean)
                    .join(' '), children: value })] }));
}
