import { CircleCheck, CircleX, Hourglass, LoaderCircle } from 'lucide-react'
import type { LucideIcon } from 'lucide-react'

import { StatusBadge } from '@/components/StatusBadge'
import type { StatusTone } from '@/components/StatusBadge'
import { cn } from '@/lib/utils'
import { generationStateHelp, generationStateLabel } from '@/pages/Ai/ImageGenerator/labels'
import type { GenerationState } from '@/pages/Ai/ImageGenerator/types'

/**
 * Estado de un pedido de imagen, con la misma paleta cerrada que un lote.
 *
 * Cuatro estados y cuatro siluetas: en escala de grises se tienen que seguir
 * distinguiendo (RT-04). El único que se mueve es «en curso», y el movimiento
 * es parte de lo que significa.
 */
const STATES: Record<GenerationState, { icon: LucideIcon; tone: StatusTone; className?: string }> =
  {
    QUEUED: { icon: Hourglass, tone: 'neutral' },
    RUNNING: {
      icon: LoaderCircle,
      tone: 'neutral',
      className: '[&>svg]:animate-spin',
    },
    COMPLETED: { icon: CircleCheck, tone: 'positive' },
    FAILED: { icon: CircleX, tone: 'critical' },
  }

export function GenerationStateBadge({
  state,
  className,
}: {
  state: GenerationState
  className?: string
}) {
  const style = STATES[state]
  return (
    <StatusBadge
      tone={style.tone}
      icon={style.icon}
      help={generationStateHelp(state)}
      className={cn(style.className, className)}
    >
      {generationStateLabel(state)}
    </StatusBadge>
  )
}