import { useEffect, useState } from 'react'
import { CheckCircle2, XCircle, Info, X } from 'lucide-react'
import { subscribeToasts, dismiss, type ToastEntry } from '@/lib/toast'

/**
 * Контейнер тоастов: фиксированный top-right, max-width 380px, мобильно
 * растягивается на ширину экрана с padding. Подписывается на
 * `subscribeToasts()` и рендерит активные. Каждый тоаст знает свой
 * duration (5с по умолчанию) — setTimeout живёт в toast.ts, тут только
 * UI и кнопка закрыть вручную.
 */
export function Toaster() {
  const [items, setItems] = useState<ToastEntry[]>([])

  useEffect(() => {
    return subscribeToasts(setItems)
  }, [])

  if (items.length === 0) return null

  return (
    <div className="fixed top-4 right-4 z-[80] flex flex-col gap-2 max-w-[380px] w-[calc(100vw-2rem)] sm:w-[380px] pointer-events-none">
      {items.map(t => (
        <ToastCard key={t.id} entry={t} />
      ))}
    </div>
  )
}

function ToastCard({ entry }: { entry: ToastEntry }) {
  const palette = {
    success: 'bg-emerald-50 dark:bg-emerald-900/40 border-emerald-200 dark:border-emerald-800 text-emerald-900 dark:text-emerald-100',
    error: 'bg-red-50 dark:bg-red-900/40 border-red-200 dark:border-red-800 text-red-900 dark:text-red-100',
    info: 'bg-slate-50 dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-900 dark:text-slate-100',
  }[entry.kind]
  const iconColor = {
    success: 'text-emerald-600',
    error: 'text-red-600',
    info: 'text-slate-600',
  }[entry.kind]
  const Icon = entry.kind === 'success' ? CheckCircle2 : entry.kind === 'error' ? XCircle : Info

  return (
    <div
      role="alert"
      aria-live="polite"
      className={`pointer-events-auto flex gap-2 items-start px-3 py-2.5 rounded-md border shadow-sm ${palette}`}
    >
      <Icon className={`w-4 h-4 shrink-0 mt-0.5 ${iconColor}`} />
      <div className="flex-1 min-w-0 text-sm">
        {entry.title && <div className="font-semibold leading-tight">{entry.title}</div>}
        <div className="leading-snug break-words">{entry.message}</div>
      </div>
      <button
        onClick={() => dismiss(entry.id)}
        className="shrink-0 -mr-0.5 text-slate-400 hover:text-slate-600"
        aria-label="Закрыть"
      >
        <X className="w-4 h-4" />
      </button>
    </div>
  )
}
