import * as React from "react";
import * as ToastPrimitive from "@radix-ui/react-toast";
import { X, CheckCircle2, XCircle, AlertTriangle, Info } from "lucide-react";
import { cn } from "@/lib/utils";

export type ToastVariant = "success" | "error" | "warning" | "info";

const variantConfig: Record<
  ToastVariant,
  { icon: React.ElementType; containerClass: string; iconClass: string; progressClass: string }
> = {
  success: {
    icon: CheckCircle2,
    containerClass: "border-green-200 bg-white",
    iconClass: "text-green-500",
    progressClass: "bg-green-500",
  },
  error: {
    icon: XCircle,
    containerClass: "border-red-200 bg-white",
    iconClass: "text-red-500",
    progressClass: "bg-red-500",
  },
  warning: {
    icon: AlertTriangle,
    containerClass: "border-yellow-200 bg-white",
    iconClass: "text-yellow-500",
    progressClass: "bg-yellow-500",
  },
  info: {
    icon: Info,
    containerClass: "border-blue-200 bg-white",
    iconClass: "text-blue-500",
    progressClass: "bg-blue-500",
  },
};

export interface ToastItem {
  id: string;
  title: string;
  description?: string;
  variant: ToastVariant;
  duration?: number;
}

interface ToastProps {
  toast: ToastItem;
  onDismiss: (id: string) => void;
}

export function ToastNotification({ toast, onDismiss }: ToastProps) {
  const { icon: Icon, containerClass, iconClass, progressClass } = variantConfig[toast.variant];
  const duration = toast.duration ?? 4000;

  return (
    <ToastPrimitive.Root
      duration={duration}
      onOpenChange={(open) => { if (!open) onDismiss(toast.id); }}
      className={cn(
        "group relative flex w-full items-start gap-3 overflow-hidden rounded-xl border bg-white p-4 shadow-lg",
        "data-[state=open]:animate-in data-[state=closed]:animate-out",
        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
        "data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-right-full",
        "transition-all duration-300",
        containerClass
      )}
    >
      {/* Icon */}
      <div className={cn("mt-0.5 shrink-0", iconClass)}>
        <Icon className="h-5 w-5" />
      </div>

      {/* Content */}
      <div className="flex-1 min-w-0">
        <ToastPrimitive.Title className="text-sm font-semibold text-gray-900 leading-snug">
          {toast.title}
        </ToastPrimitive.Title>
        {toast.description && (
          <ToastPrimitive.Description className="mt-0.5 text-sm text-gray-500 leading-snug">
            {toast.description}
          </ToastPrimitive.Description>
        )}
      </div>

      {/* Close */}
      <ToastPrimitive.Close
        className="shrink-0 rounded-md p-1 text-gray-400 opacity-0 transition-opacity hover:text-gray-600 group-hover:opacity-100"
        aria-label="Close"
      >
        <X className="h-4 w-4" />
      </ToastPrimitive.Close>

      {/* Progress bar */}
      <div
        className={cn("absolute bottom-0 left-0 h-[3px] rounded-full", progressClass)}
        style={{ animation: `shrink ${duration}ms linear forwards` }}
      />
    </ToastPrimitive.Root>
  );
}

export const ToastProvider = ToastPrimitive.Provider;

export const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitive.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitive.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitive.Viewport
    ref={ref}
    className={cn(
      "fixed bottom-4 right-4 z-[100] flex flex-col gap-2 w-full max-w-sm",
      className
    )}
    {...props}
  />
));
ToastViewport.displayName = "ToastViewport";