import { useChatStatus } from '@/hooks/useChatStatus';
import { useChatThroughput } from '@/hooks/useChatThroughput';
import { cn } from '@/lib/utils';

interface Props {
  chatId: string | null | undefined;
  className?: string;
}

// v1.12.2: inline throughput readout. Renders next to StatusDot while the
// chat is streaming or running a tool. Hidden in idle/error/waiting states
// — the dot already communicates those.
export function ChatThroughput({ chatId, className }: Props) {
  const status = useChatStatus(chatId);
  const t = useChatThroughput(chatId);
  if (!chatId || !t) return null;
  if (status !== 'streaming' && status !== 'tool_running') return null;
  const tps = t.tps != null && t.tps > 0 ? Math.round(t.tps) : null;
  const showCtx = t.ctx_used != null && t.ctx_max != null;
  if (tps === null && !showCtx) return null;
  return (
    <span className={cn('text-xs text-muted-foreground tabular-nums', className)}>
      {tps !== null && `${tps} tok/s`}
      {tps !== null && showCtx && ' · '}
      {showCtx && `${t.ctx_used!.toLocaleString()}/${t.ctx_max!.toLocaleString()}`}
    </span>
  );
}