import { X } from 'lucide-react'
import { useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { cn } from '@/shared/lib/cn'
import { useToastContext } from './toast-store'

export function Toaster() {
  const { toasts, dismiss } = useToastContext()

  return (
    <div className="pointer-events-none fixed bottom-4 right-4 z-[10000] flex flex-col gap-2">
      {toasts.map((t) => (
        <ToastItem key={t.id} id={t.id} message={t.message} variant={t.variant} onDismiss={dismiss} />
      ))}
    </div>
  )
}

function ToastItem({
  id,
  message,
  variant,
  onDismiss,
}: {
  id: number
  message: string
  variant: 'default' | 'success' | 'error'
  onDismiss: (id: number) => void
}) {
  const { t } = useTranslation()

  useEffect(() => {
    const timeout = setTimeout(() => onDismiss(id), 4000)
    return () => clearTimeout(timeout)
  }, [id, onDismiss])

  // Живой регион остаётся обычным контейнером, а закрытие висит на настоящей кнопке: обработчик
  // клика на самом сообщении недоступен с клавиатуры, и скринридер о нём никак не сообщает.
  return (
    <div
      className={cn(
        'crt-panel pointer-events-auto flex items-start gap-3 rounded-md px-4 py-3 text-sm shadow-lg',
        variant === 'success' && 'border-primary/60',
        variant === 'error' && 'border-red-700/60 text-red-400',
      )}
      role="status"
    >
      <span className="flex-1">{message}</span>
      <button
        type="button"
        onClick={() => onDismiss(id)}
        aria-label={t('common.close')}
        className="shrink-0 opacity-60 hover:opacity-100"
      >
        <X className="h-4 w-4" />
      </button>
    </div>
  )
}