import type { ReactNode } from 'react'
import { cn } from '@/lib/utils'

export interface GenerationStatusBarProps {
  children?: ReactNode
  status?: string
  icon?: ReactNode
  time?: string
  className?: string
}

function StatusWithAnimatedDots({ content }: { content: string }) {
  const baseText = content.replace(/\.+$/, '')
  return (
    <span className="text-sm leading-sm font-medium text-primary-active">
      {baseText}
      <span className="status-dots-anim" style={{ fontFamily: 'inherit' }}>
        ...
      </span>
    </span>
  )
}

export const GenerationStatusBar = ({
  children,
  status,
  icon,
  time,
  className = '',
}: GenerationStatusBarProps) => {
  const content = status ?? (typeof children === 'string' ? children : null)
  const hasContent = content != null || children != null

  if (!hasContent && !icon && !time) return null

  const containerStyles = cn(
    'flex w-full h-9 items-center gap-2 rounded-t-xl bg-primary-bg px-3 text-sm leading-sm',
    className
  )

  return (
    <div className={containerStyles}>
      <style>{`
        @keyframes status-dots {
          0%, 100% { opacity: 0.4; }
          50% { opacity: 1; }
        }
        .status-dots-anim {
          animation: status-dots 1.2s ease-in-out infinite;
        }
      `}</style>
      {icon && (
        <span className="flex h-4 w-4 shrink-0 items-center justify-center text-primary-active">
          {icon}
        </span>
      )}
      {content != null && <StatusWithAnimatedDots content={String(content)} />}
      {content == null && children != null && (
        <span className="font-medium text-primary-active">
          {children}
        </span>
      )}
      {time && (
        <span className="ml-auto font-medium font-mono text-primary-active">
          {time}
        </span>
      )}
    </div>
  )
}

GenerationStatusBar.displayName = 'GenerationStatusBar'