"use client"

import { useTheme } from "next-themes"
import { Toaster as Sonner, type ToasterProps } from "sonner"
import { InfoIcon, TriangleAlertIcon, Loader2Icon } from "lucide-react"

const getGifUrl = (type: "success" | "error") => {
  const d = window.wawpDashboardData;
  if (type === "success") return d?.icons?.successGif || (d?.global?.pluginUrl + "assets/img/success.gif");
  return d?.icons?.errorGif || (d?.global?.pluginUrl + "assets/img/error.gif");
};

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = "system" } = useTheme()

  return (
    <Sonner
      theme={theme as ToasterProps["theme"]}
      className="toaster group"
      icons={{
        success: (
          <img
            src={getGifUrl("success")}
            alt="Success"
            style={{ width: 32, height: 32, objectFit: "contain", flexShrink: 0 }}
          />
        ),
        info: (
          <InfoIcon className="size-[18px] shrink-0 text-blue-500" />
        ),
        warning: (
          <TriangleAlertIcon className="size-[18px] shrink-0 text-amber-500" />
        ),
        error: (
          <img
            src={getGifUrl("error")}
            alt="Error"
            style={{ width: 32, height: 32, objectFit: "contain", flexShrink: 0 }}
          />
        ),
        loading: (
          <Loader2Icon className="size-[18px] shrink-0 animate-spin text-slate-400" />
        ),
      }}
      style={
        {
          "--normal-bg": "#ffffff",
          "--normal-text": "#1e293b",
          "--normal-border": "#e2e8f0",
          "--border-radius": "12px",
          fontFamily: "inherit",
        } as React.CSSProperties
      }
      toastOptions={{
        classNames: {
          toast:
            "wawp-toast !bg-white !border !border-slate-200 !shadow-[0_8px_30px_rgba(0,0,0,0.08)] !rounded-xl !py-3.5 !px-4 !items-start !gap-3 font-sans",
          title: "!text-[13px] !font-bold !leading-tight",
          description: "!text-[12px] !font-medium !leading-snug !mt-0.5",
          icon: "!mt-0 !mr-0",
          closeButton:
            "!bg-slate-100 !border-slate-200 !text-slate-500 hover:!bg-slate-200 hover:!text-slate-700 !rounded-full !transition-all",
          success:
            "!border-emerald-200/80 [&_[data-title]]:!text-emerald-700 [&_[data-description]]:!text-emerald-600/80",
          error:
            "!border-red-200/80 [&_[data-title]]:!text-red-700 [&_[data-description]]:!text-red-600/80",
          warning:
            "!border-amber-200/80 [&_[data-title]]:!text-amber-700 [&_[data-description]]:!text-amber-600/80",
          info:
            "!border-blue-200/80 [&_[data-title]]:!text-blue-700 [&_[data-description]]:!text-blue-600/80",
        },
      }}
      {...props}
    />
  )
}

export { Toaster }