import { motion, AnimatePresence } from 'framer-motion'
import { Check, AlertCircle, Info } from '../../lib/icons'
import { useToastStore } from '../../stores/toast-store'

/**
 * Global toast outlet. Renders short-lived status messages at the bottom
 * of the viewport. Mount once near the app root; everywhere else calls
 * `toast(message, tone)` from `stores/toast-store`.
 */
export default function ToastHost() {
  const toasts = useToastStore(s => s.toasts)
  return (
    <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-toast flex flex-col gap-2 items-center pointer-events-none">
      <AnimatePresence>
        {toasts.map(t => {
          const Icon = t.tone === 'success' ? Check : t.tone === 'error' ? AlertCircle : Info
          const tint =
            t.tone === 'success' ? 'text-success' :
            t.tone === 'error' ? 'text-error' :
            'text-accent'
          return (
            <motion.div
              key={t.id}
              initial={{ opacity: 0, y: 12, scale: 0.97 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, y: 12, scale: 0.97 }}
              transition={{ duration: 0.22, ease: [0.16, 1, 0.3, 1] }}
              className="inline-flex items-center gap-2 h-10 px-4 rounded-full bg-black/90 backdrop-blur-xl border border-white/12 shadow-2xl text-[12.5px] font-medium tracking-tight text-white pointer-events-auto"
              role="status"
            >
              <Icon size={13} className={tint} />
              <span>{t.message}</span>
            </motion.div>
          )
        })}
      </AnimatePresence>
    </div>
  )
}
