import React from 'react';
import { CheckCircle2, XCircle, AlertTriangle, Info, X } from 'lucide-react';
import { Toast, useToast } from './ToastProvider';

const ToastItem: React.FC<{ toast: Toast }> = ({ toast }) => {
  const { removeToast } = useToast();

  const getToastStyles = (type: Toast['type']) => {
    const baseStyles = "flex items-start p-4 mb-3 rounded-lg shadow-kaspersky border-2 transition-all duration-300 ease-in-out transform hover:scale-[1.02] animate-fadeIn";
    
    switch (type) {
      case 'success':
        return `${baseStyles} bg-kaspersky-success bg-opacity-10 border-kaspersky-success text-kaspersky-success`;
      case 'error':
        return `${baseStyles} bg-kaspersky-danger bg-opacity-10 border-kaspersky-danger text-kaspersky-danger`;
      case 'warning':
        return `${baseStyles} bg-kaspersky-warning bg-opacity-10 border-kaspersky-warning text-kaspersky-warning`;
      case 'info':
        return `${baseStyles} bg-kaspersky-primary bg-opacity-10 border-kaspersky-primary text-kaspersky-primary`;
      default:
        return `${baseStyles} bg-kaspersky-bg-card border-kaspersky-border text-kaspersky-text`;
    }
  };

  const getIcon = (type: Toast['type']) => {
    const iconClasses = "w-5 h-5 mr-3 mt-0.5 flex-shrink-0";
    
    switch (type) {
      case 'success':
        return <CheckCircle2 className={`${iconClasses} text-kaspersky-success`} />;
      case 'error':
        return <XCircle className={`${iconClasses} text-kaspersky-danger`} />;
      case 'warning':
        return <AlertTriangle className={`${iconClasses} text-kaspersky-warning`} />;
      case 'info':
        return <Info className={`${iconClasses} text-kaspersky-primary`} />;
      default:
        return null;
    }
  };

  const handleClose = () => {
    removeToast(toast.id);
  };

  return (
    <div className={getToastStyles(toast.type)}>
      {getIcon(toast.type)}
      
      <div className="flex-1 min-w-0">
        <h4 className="font-semibold text-sm text-kaspersky-text-dark">{toast.title}</h4>
        {toast.message && (
          <p className="mt-1 text-sm text-kaspersky-text opacity-90">{toast.message}</p>
        )}
        
        {toast.action && (
          <button
            onClick={toast.action.onClick}
            className="mt-2 text-sm font-semibold underline hover:no-underline transition-all hover:opacity-80"
          >
            {toast.action.label}
          </button>
        )}
      </div>

      <button
        onClick={handleClose}
        className="ml-3 flex-shrink-0 p-1 rounded-lg hover:bg-black hover:bg-opacity-10 transition-all duration-200"
        aria-label="Close notification"
      >
        <X size={16} />
      </button>
    </div>
  );
};

export const ToastContainer: React.FC = () => {
  const { toasts } = useToast();

  if (toasts.length === 0) {
    return null;
  }

  return (
    <div className="fixed top-4 right-4 z-50 max-w-sm w-full space-y-2">
      {toasts.map((toast) => (
        <ToastItem key={toast.id} toast={toast} />
      ))}
    </div>
  );
}; 