import * as Toast from '@radix-ui/react-toast'
import { AnimatePresence, motion } from 'framer-motion'
import { CheckCircle2, CircleAlert, Info, X } from 'lucide-react'
import { useAppStore } from '../../store/useAppStore'

const icons = {
  success: CheckCircle2,
  danger: CircleAlert,
  info: Info,
}

export default function Toaster() {
  const toasts = useAppStore((state) => state.toasts)
  const removeToast = useAppStore((state) => state.removeToast)

  return (
    <Toast.Provider swipeDirection="right">
      <AnimatePresence>
        {toasts.map((toast) => {
          const Icon = icons[toast.variant] || Info
          return (
            <Toast.Root
              key={toast.id}
              open
              asChild
              onOpenChange={(open) => {
                if (!open) removeToast(toast.id)
              }}
            >
              <motion.div
                initial={{ opacity: 0, y: 16, scale: 0.96 }}
                animate={{ opacity: 1, y: 0, scale: 1 }}
                exit={{ opacity: 0, y: 16, scale: 0.96 }}
                className="rounded-[24px] border border-border/70 bg-card/96 p-4 shadow-panel backdrop-blur-2xl"
              >
                <div className="flex items-start gap-3">
                  <div className="mt-0.5 rounded-2xl bg-secondary p-2 text-accent">
                    <Icon className="h-4 w-4" />
                  </div>
                  <div className="flex-1">
                    <Toast.Title className="text-sm font-semibold text-foreground">
                      {toast.title}
                    </Toast.Title>
                    {toast.description ? (
                      <Toast.Description className="mt-1 text-sm text-muted-foreground">
                        {toast.description}
                      </Toast.Description>
                    ) : null}
                  </div>
                  <button
                    type="button"
                    onClick={() => removeToast(toast.id)}
                    className="rounded-full p-1 text-muted-foreground transition hover:bg-secondary hover:text-foreground"
                  >
                    <X className="h-4 w-4" />
                  </button>
                </div>
              </motion.div>
            </Toast.Root>
          )
        })}
      </AnimatePresence>
      <Toast.Viewport className="fixed bottom-4 right-4 z-[70] flex w-[min(24rem,calc(100vw-2rem))] flex-col gap-3 outline-none" />
    </Toast.Provider>
  )
}