import { useApp } from '../context/AppContext'
import { CheckCircle2, XCircle, AlertTriangle, Info, X } from 'lucide-react'

const CONFIG = {
  sukses:     { Icon: CheckCircle2,  bg: 'bg-emerald-50', border: 'border-emerald-200', text: 'text-emerald-800', icon: 'text-emerald-500', bar: 'bg-emerald-500' },
  error:      { Icon: XCircle,       bg: 'bg-red-50',     border: 'border-red-200',     text: 'text-red-800',     icon: 'text-red-500',     bar: 'bg-red-500'     },
  peringatan: { Icon: AlertTriangle, bg: 'bg-amber-50',   border: 'border-amber-200',   text: 'text-amber-800',   icon: 'text-amber-500',   bar: 'bg-amber-500'   },
  info:       { Icon: Info,          bg: 'bg-sky-50',     border: 'border-sky-200',      text: 'text-sky-800',     icon: 'text-sky-500',     bar: 'bg-sky-500'     },
}

export default function ToastContainer() {
  const { toasts, tutupToast } = useApp()
  if (!toasts?.length) return null

  return (
    <div className="fixed bottom-5 right-5 z-[9999] flex flex-col gap-2.5" style={{ maxWidth: 380, minWidth: 300 }}>
      {toasts.map(toast => {
        const cfg = CONFIG[toast.tipe] || CONFIG.info
        const { Icon } = cfg
        return (
          <div
            key={toast.id}
            className={`relative overflow-hidden rounded-xl border ${cfg.bg} ${cfg.border} shadow-lg animate-slideUp`}
            style={{ animation: 'slideInRight 0.25s cubic-bezier(0.34,1.56,0.64,1) both' }}
          >
            {/* Colored bar di kiri */}
            <div className={`absolute left-0 top-0 bottom-0 w-1 ${cfg.bar}`} />

            <div className="flex items-start gap-3 px-4 py-3.5 pl-5">
              <Icon size={18} className={`${cfg.icon} mt-0.5 shrink-0`} />
              <p className={`flex-1 text-[13px] font-medium leading-relaxed ${cfg.text}`}>
                {toast.pesan}
              </p>
              <button
                onClick={() => tutupToast(toast.id)}
                className={`shrink-0 rounded-md p-1 ${cfg.text} opacity-50 hover:opacity-100 hover:bg-black/5 border-none cursor-pointer bg-transparent`}
              >
                <X size={14} />
              </button>
            </div>
          </div>
        )
      })}

      <style>{`
        @keyframes slideInRight {
          from { opacity: 0; transform: translateX(24px) scale(0.96); }
          to   { opacity: 1; transform: translateX(0) scale(1); }
        }
      `}</style>
    </div>
  )
}