import { useEffect, useState } from 'react'

import { Spinner } from '@/components/ui/spinner'
import { t } from '@/lib/i18n'
import type { TranslationKey } from '@/lib/i18n'

/** Una frase de la espera, con su duración en milisegundos. Sin duración, se queda hasta el final. */
export interface LoaderStep {
  key: TranslationKey
  duration: number | null
}

/**
 * Las frases que rotan mientras se genera, con su duración en milisegundos.
 *
 * Son las del Project Designer de la landing, en el mismo orden y con los
 * mismos tiempos. La última no tiene duración: se queda hasta que llegue la
 * imagen. Nada de esto mide el avance real —el proveedor no lo publica—; es
 * compañía para un minuto de espera, y por eso ninguna frase promete un
 * porcentaje.
 */
export const GENERATION_STEPS: LoaderStep[] = [
  { key: 'ai.loader.step1', duration: 6000 },
  { key: 'ai.loader.step2', duration: 7000 },
  { key: 'ai.loader.step3', duration: 7000 },
  { key: 'ai.loader.step4', duration: 6000 },
  { key: 'ai.loader.step5', duration: 6000 },
  { key: 'ai.loader.step6', duration: 7000 },
  { key: 'ai.loader.step7', duration: 7000 },
  { key: 'ai.loader.step8', duration: null },
]

/**
 * Las frases del análisis, más cortas: mirar una foto tarda segundos, no un
 * minuto, y las de la generación hablan de un diseño que acá todavía no existe.
 */
export const ANALYSIS_STEPS: LoaderStep[] = [
  { key: 'ai.analysis.loader.step1', duration: 4000 },
  { key: 'ai.analysis.loader.step2', duration: 6000 },
  { key: 'ai.analysis.loader.step3', duration: null },
]

/**
 * Cuál frase toca, avanzando con `setTimeout` encadenados.
 *
 * No es un `setInterval`: el único reloj periódico del producto vive en
 * `useBatchPolling` (RT-13). Esto es una secuencia finita que arranca al
 * montar y se detiene sola en la última frase.
 */
export function useLoaderStep(steps: LoaderStep[], active: boolean): number {
  const [step, setStep] = useState(0)

  useEffect(() => {
    if (!active) return
    setStep(0)
    let current = 0
    let timer: ReturnType<typeof setTimeout> | null = null

    const schedule = () => {
      const duration = steps[current].duration
      if (duration === null) return
      timer = setTimeout(() => {
        current += 1
        setStep(current)
        schedule()
      }, duration)
    }
    schedule()

    return () => {
      if (timer !== null) clearTimeout(timer)
    }
  }, [steps, active])

  return step
}

interface Props {
  steps: LoaderStep[]
  active: boolean
  /** La línea de abajo: cuánto suele tardar. */
  eta: string
}

/** La espera: un giro, la frase que toca y cuánto suele tardar. */
export function LoaderPanel({ steps, active, eta }: Props) {
  const step = useLoaderStep(steps, active)
  return (
    <div
      role="status"
      aria-live="polite"
      className="flex min-h-40 flex-col items-center justify-center gap-4 text-center"
    >
      <Spinner className="size-8" />
      <p className="font-medium">{t(steps[step].key)}</p>
      <p className="text-muted-foreground">{eta}</p>
    </div>
  )
}