"use client";

import { useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";

interface SuccessToastProps {
  show: boolean;
  message: string;
  onDone?: () => void;
  variant?: "success" | "info" | "warning";
}

const VARIANT_STYLES = {
  success: {
    bg: "bg-emerald-50 dark:bg-emerald-950/80 border-emerald-200 dark:border-emerald-800",
    text: "text-emerald-800 dark:text-emerald-200",
    icon: (
      <svg className="h-4 w-4 text-emerald-500 dark:text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
        <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
      </svg>
    ),
  },
  info: {
    bg: "bg-blue-50 dark:bg-blue-950/80 border-blue-200 dark:border-blue-800",
    text: "text-blue-800 dark:text-blue-200",
    icon: (
      <svg className="h-4 w-4 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
        <circle cx="12" cy="12" r="10" strokeWidth={2} />
        <path strokeLinecap="round" d="M12 16v-4M12 8h.01" />
      </svg>
    ),
  },
  warning: {
    bg: "bg-amber-50 dark:bg-amber-950/80 border-amber-200 dark:border-amber-800",
    text: "text-amber-800 dark:text-amber-200",
    icon: (
      <svg className="h-4 w-4 text-amber-500 dark:text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
        <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
      </svg>
    ),
  },
} as const;

export function SuccessToast({ show, message, onDone, variant = "success" }: SuccessToastProps) {
  const style = VARIANT_STYLES[variant];

  useEffect(() => {
    if (!show) return;
    const timer = setTimeout(() => {
      onDone?.();
    }, 2500);
    return () => clearTimeout(timer);
  }, [show, onDone]);

  return (
    <AnimatePresence>
      {show && (
        <motion.div
          initial={{ y: -40, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          exit={{ y: -40, opacity: 0 }}
          transition={{ type: "spring", stiffness: 400, damping: 30 }}
          className="fixed top-4 left-1/2 z-[9999] -translate-x-1/2"
        >
          <div
            className={`flex items-center gap-2 rounded-full border px-4 py-2 shadow-lg backdrop-blur-sm ${style.bg}`}
          >
            {style.icon}
            <span className={`text-sm font-medium ${style.text}`}>{message}</span>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}
