import { Streamdown } from 'streamdown';
import { code } from '@streamdown/code';

interface Props {
  text: string;
  toolName?: string;
}

/** Friendly label for SDK tool names */
function toolLabel(name: string): string {
  const labels: Record<string, string> = {
    Read: 'Reading file',
    Write: 'Writing file',
    Edit: 'Editing file',
    Bash: 'Running command',
    Grep: 'Searching code',
    Glob: 'Finding files',
    Task: 'Running task',
    WebFetch: 'Fetching URL',
    WebSearch: 'Searching web',
  };
  return labels[name] || `Using ${name}`;
}

export default function TypingIndicator({ text, toolName }: Props) {
  // Dots-only indicator — small content-sized bubble
  if (!text) {
    return (
      <div className="flex justify-start">
        <div className="rounded-2xl px-4 py-2.5 text-sm bg-muted text-foreground">
          <span className="inline-flex items-center gap-1 h-5">
            <span className="w-1.5 h-1.5 rounded-full bg-muted-foreground/60 animate-bounce" style={{ animationDelay: '0ms' }} />
            <span className="w-1.5 h-1.5 rounded-full bg-muted-foreground/60 animate-bounce" style={{ animationDelay: '150ms' }} />
            <span className="w-1.5 h-1.5 rounded-full bg-muted-foreground/60 animate-bounce" style={{ animationDelay: '300ms' }} />
          </span>
          {/* Tool activity label — hidden for now (will be used for skill UI later)
          {toolName && (
            <div className="flex items-center gap-1.5 mt-1 text-xs text-muted-foreground">
              <div className="w-2.5 h-2.5 border-[1.5px] border-muted-foreground/30 border-t-primary rounded-full animate-spin" />
              <span>{toolLabel(toolName)}...</span>
            </div>
          )}
          */}
        </div>
      </div>
    );
  }

  // Streaming text — full-width bubble matching assistant MessageBubble
  return (
    <div className="flex flex-col items-start">
      <div className="w-full rounded-2xl px-4 py-2.5 text-sm leading-relaxed bg-muted text-foreground prose prose-sm prose-invert max-w-none [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 break-words">
        <Streamdown
          mode="streaming"
          isAnimating
          caret="block"
          plugins={{ code }}
          controls={false}
          shikiTheme={['github-dark', 'github-dark']}
          lineNumbers={false}
        >
          {text}
        </Streamdown>
        {/* Tool activity label — hidden for now (will be used for skill UI later)
        {toolName && (
          <div className="flex items-center gap-1.5 mt-1 text-xs text-muted-foreground">
            <div className="w-2.5 h-2.5 border-[1.5px] border-muted-foreground/30 border-t-primary rounded-full animate-spin" />
            <span>{toolLabel(toolName)}...</span>
          </div>
        )}
        */}
      </div>
    </div>
  );
}