import { useBatchPolling } from '@/hooks/useBatchPolling'
import { AppLayout } from '@/layouts/AppLayout'
import { formatNumber } from '@/lib/format'
import { t } from '@/lib/i18n'

import { GenerationsTable } from './GenerationsTable'
import type { Generation, GenerationOrigin, GenerationState } from './ImageGenerator/types'

interface Props {
  generations: Generation[]
  /** Cuántas hay en total, que puede ser más de las que viajan. */
  total: number
  limit: number
  options: { origin: GenerationOrigin[]; state: GenerationState[]; service: string[] }
  /** Estados no terminales de toda la cola, no de la página. De acá sale el sondeo. */
  active_states: string[]
}

/**
 * Qué se pidió y en qué quedó, de cualquier versión y por cualquier puerta.
 *
 * Es un registro, no un lugar desde donde generar: lo que arranca trabajo vive
 * en el generador. Se recorta y el recorte se dice en la descripción.
 */
export default function Queue({ generations, total, limit, options, active_states }: Props) {
  useBatchPolling({ states: active_states, only: ['generations', 'total', 'active_states'] })

  const description =
    total > generations.length
      ? t('ai.queue.truncated', { shown: formatNumber(generations.length), total: formatNumber(total), limit: formatNumber(limit) })
      : t('ai.queue.description')

  return (
    <AppLayout title={t('ai.queue.title')} description={description}>
      <GenerationsTable
        generations={generations}
        options={options}
        caption={t('ai.queue.caption')}
        empty={{ title: t('ai.queue.empty.title'), description: t('ai.queue.empty.description') }}
      />
    </AppLayout>
  )
}