import { createPortal } from 'react-dom';
import { motion, AnimatePresence } from 'framer-motion';
import { CheckCircle, XCircle, AlertTriangle, Info, X } from 'lucide-react';
import { cn } from '@utils/cn';
import { useNotificationStore, type NotificationType } from '@stores/useNotificationStore';

const iconMap: Record<NotificationType, typeof CheckCircle> = {
  success: CheckCircle,
  error: XCircle,
  warning: AlertTriangle,
  info: Info,
};

const colorMap: Record<NotificationType, string> = {
  success: 'bg-success-50 border-success-200 text-success-800',
  error: 'bg-danger-50 border-danger-200 text-danger-800',
  warning: 'bg-warning-50 border-warning-200 text-warning-800',
  info: 'bg-blue-50 border-blue-200 text-blue-800',
};

const iconColorMap: Record<NotificationType, string> = {
  success: 'text-success-500',
  error: 'text-danger-500',
  warning: 'text-warning-500',
  info: 'text-blue-500',
};

export function ToastContainer() {
  const { notifications, removeNotification } = useNotificationStore();

  const content = (
    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2">
      <AnimatePresence mode="popLayout">
        {notifications.map((notification) => {
          const Icon = iconMap[notification.type];

          return (
            <motion.div
              key={notification.id}
              layout
              initial={{ opacity: 0, y: 20, scale: 0.95 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, x: 100, scale: 0.95 }}
              transition={{ duration: 0.2 }}
              className={cn(
                'flex w-80 items-start gap-3 rounded-lg border p-4 shadow-lg',
                colorMap[notification.type]
              )}
            >
              <Icon className={cn('h-5 w-5 flex-shrink-0', iconColorMap[notification.type])} />
              <div className="flex-1 min-w-0">
                <p className="text-sm font-medium">{notification.title}</p>
                {notification.message && (
                  <p className="mt-1 text-sm opacity-80">{notification.message}</p>
                )}
              </div>
              {notification.dismissible && (
                <button
                  type="button"
                  onClick={() => removeNotification(notification.id)}
                  className="flex-shrink-0 rounded p-1 opacity-60 hover:opacity-100 transition-opacity"
                >
                  <X className="h-4 w-4" />
                </button>
              )}
            </motion.div>
          );
        })}
      </AnimatePresence>
    </div>
  );

  return createPortal(content, document.body);
}

// Hook for easier usage
export function useToast() {
  const { success, error, warning, info, addNotification } = useNotificationStore();

  // Legacy showToast for compatibility
  const showToast = ({ type, title, message }: { type: NotificationType; title: string; message?: string }) => {
    switch (type) {
      case 'success':
        success(title, message);
        break;
      case 'error':
        error(title, message);
        break;
      case 'warning':
        warning(title, message);
        break;
      case 'info':
        info(title, message);
        break;
    }
  };

  return {
    success,
    error,
    warning,
    info,
    toast: addNotification,
    showToast,
  };
}
