import React from 'react'
import { X } from 'lucide-react'
import { useToastStore } from '../store/useToastStore'

// the reference builder toaster (components/ui/toast.jsx): bottom-centre, dark, status dot, title + optional description.
const DOT = {
  success: 'bg-emerald-400',
  error: 'bg-rose-400',
  info: 'bg-sky-400',
  warning: 'bg-amber-400',
}

export function ToastContainer() {
  const toasts = useToastStore((state) => state.toasts)
  const removeToast = useToastStore((state) => state.removeToast)

  if (toasts.length === 0) return null
  const t = toasts[toasts.length - 1]

  return (
    <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-[99999] pointer-events-none select-none" style={{ position: 'fixed', bottom: 24, left: '50%', transform: 'translateX(-50%)', zIndex: 99999 }}>
      <div
        key={t.id}
        role={t.type === 'error' ? 'alert' : 'status'}
        aria-live={t.type === 'error' ? 'assertive' : 'polite'}
        data-toast={t.type}
        className="pointer-events-auto flex items-start gap-3 min-w-[280px] sm:min-w-[320px] max-w-[min(480px,calc(100vw-32px))] px-4 py-3 rounded-xl bg-slate-900/95 text-white shadow-2xl shadow-slate-950/30 backdrop-blur-sm wpvfb-toast-up"
      >
        <span className={`mt-1.5 w-2 h-2 rounded-full flex-shrink-0 ${DOT[t.type] || DOT.info}`} aria-hidden="true" />
        <div className="flex-1 min-w-0">
          <div className="text-sm font-medium leading-snug break-words">{t.message}</div>
          {t.description && <div className="text-xs text-slate-300 mt-0.5 leading-snug break-words">{t.description}</div>}
        </div>
        <button
          type="button"
          onClick={() => removeToast(t.id)}
          aria-label="Dismiss notification"
          title="Dismiss"
          className="w-6 h-6 -mr-1 flex items-center justify-center rounded-md text-slate-400 hover:text-white hover:bg-white/10 transition-colors flex-shrink-0 cursor-pointer"
        >
          <X className="w-3.5 h-3.5" aria-hidden="true" />
        </button>
      </div>
    </div>
  )
}