import { useChatStatus, type DerivedStatus } from '@/hooks/useChatStatus';
import { cn } from '@/lib/utils';

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

const STATUS_LABEL: Record<DerivedStatus, string> = {
  streaming: 'streaming',
  tool_running: 'running tool',
  waiting_for_input: 'waiting for input',
  idle_warm: 'idle',
  idle_cold: 'idle',
  error: 'error',
};

export function StatusDot({ chatId, className }: Props) {
  const status = useChatStatus(chatId);

  if (status === 'streaming') {
    return (
      <span
        aria-label="Status: streaming"
        title="streaming"
        className={cn('inline-block relative w-3 h-3 shrink-0', className)}
      >
        <span className="absolute inset-0 animate-spin-slow">
          <span className="absolute top-0 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-amber-500" />
          <span className="absolute bottom-0 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-amber-500/60" />
        </span>
      </span>
    );
  }

  if (status === 'tool_running') {
    return (
      <span
        aria-label="Status: running tool"
        title="running tool"
        className={cn(
          'inline-block w-3 h-3 rounded-full border-2 border-sky-500 border-t-transparent animate-spin shrink-0',
          className,
        )}
      />
    );
  }

  if (status === 'waiting_for_input') {
    return (
      <span
        aria-label="Status: waiting for input"
        title="waiting for input"
        className={cn(
          'inline-block w-1.5 h-1.5 rounded-full shrink-0 bg-violet-500',
          className,
        )}
      />
    );
  }

  const bg =
    status === 'idle_warm' ? 'bg-emerald-500'
      : status === 'error' ? 'bg-destructive'
      : 'bg-muted-foreground/40';

  return (
    <span
      aria-label={`Status: ${STATUS_LABEL[status]}`}
      title={STATUS_LABEL[status]}
      className={cn('inline-block w-1.5 h-1.5 rounded-full shrink-0', bg, className)}
    />
  );
}