import React, { memo } from 'react';
import { Box, Text } from 'ink';

export interface StatusBarProps {
  sessionId: string;
  messageCount: number;
  model: string;
  tokenUsage?: {
    input: number;
    output: number;
  };
  isStreaming?: boolean;
}

function formatTokens(n: number): string {
  if (n >= 1000) {
    return `${(n / 1000).toFixed(1)}k`;
  }
  return String(n);
}

export const StatusBar = memo(function StatusBar({
  sessionId,
  messageCount,
  model,
  tokenUsage,
  isStreaming,
}: StatusBarProps): React.ReactElement {
  // Extract short model name (e.g., "claude-opus-4-5-20251101" -> "opus-4.5")
  const shortModel = model
    .replace('claude-', '')
    .replace(/-\d{8}$/, '')
    .replace('-4-5', '-4.5');

  return (
    <Box borderStyle="single" borderColor="gray" paddingX={1}>
      <Box flexGrow={1}>
        <Text color="cyan">Flynn</Text>
        {isStreaming && (
          <>
            <Text color="gray"> | </Text>
            <Text color="yellow">streaming...</Text>
          </>
        )}
      </Box>
      <Box>
        <Text color="gray">Model: </Text>
        <Text color="green">{shortModel}</Text>
        <Text color="gray"> | </Text>
        <Text color="gray">Msgs: </Text>
        <Text>{messageCount}</Text>
        {tokenUsage && (
          <>
            <Text color="gray"> | </Text>
            <Text color="gray">Tokens: </Text>
            <Text>{formatTokens(tokenUsage.input)}/{formatTokens(tokenUsage.output)}</Text>
          </>
        )}
      </Box>
    </Box>
  );
});