import { useEffect, useRef } from 'react'

import { cn } from '@/lib/utils'

/**
 * Lo que se guardó, anunciado donde se guardó.
 *
 * Es enfocable y vive en el pie de su propia tarjeta: cuando varias acciones
 * vuelven a la misma dirección, un aviso arriba de todo dejaría sin saber cuál
 * respondió (RT-11). Nació en el perfil, donde tres formularios comparten
 * pantalla, y se sacó a una pieza cuando la configuración de IA necesitó el
 * mismo aviso con el mismo comportamiento.
 *
 * Se monta sólo cuando hay algo que anunciar, así que el efecto que mueve el
 * foco corre una vez por acción; y la tarjeta que lo hospeda no rinde su pie
 * cuando no está, que es lo que evita una franja vacía debajo del formulario.
 */
export function SavedNotice({ message, className }: { message: string; className?: string }) {
  const announcement = useRef<HTMLParagraphElement>(null)

  useEffect(() => {
    announcement.current?.focus()
  }, [])

  return (
    <p
      ref={announcement}
      role="status"
      aria-live="polite"
      tabIndex={-1}
      className={cn(
        'focus-visible:ring-ring text-muted-foreground rounded text-sm focus-visible:ring-2 focus-visible:outline-none',
        className
      )}
    >
      {message}
    </p>
  )
}