import React, { useEffect, useState } from 'react';
import { Undo2, X, AlertCircle } from 'lucide-react';
import { cn } from '../lib/utils';
import { ExcelRow } from '../types';

interface UndoToastProps {
  undoState: { data: ExcelRow[], message: string } | null;
  onUndo: () => void;
  onClose: () => void;
}

export function UndoToast({ undoState, onUndo, onClose }: UndoToastProps) {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    if (undoState) {
      setIsVisible(true);
      const timer = setTimeout(() => {
        setIsVisible(false);
        setTimeout(onClose, 300); // Wait for transition
      }, 8000);
      return () => clearTimeout(timer);
    } else {
      setIsVisible(false);
    }
  }, [undoState, onClose]);

  if (!undoState && !isVisible) return null;

  return (
    <div className={cn(
      "fixed bottom-8 left-1/2 -translate-x-1/2 z-[100] transition-all duration-300 transform",
      isVisible ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0 pointer-events-none"
    )}>
      <div className="bg-slate-900 border border-slate-700 rounded-lg shadow-2xl p-1 pr-2 flex items-center gap-4 min-w-[320px]">
        <div className="bg-blue-600/10 p-3 rounded-l-md border-r border-slate-700/50">
          <AlertCircle className="w-5 h-5 text-blue-500" />
        </div>
        
        <div className="flex-1 py-2">
          <div className="text-xs text-slate-500 uppercase font-bold tracking-widest">Action Completed</div>
          <div className="text-sm text-white font-medium">{undoState?.message}</div>
        </div>

        <div className="flex items-center gap-1 pr-2">
          <button
            onClick={() => {
              onUndo();
              setIsVisible(false);
            }}
            className="flex items-center gap-2 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs font-bold rounded transition-colors"
          >
            <Undo2 className="w-3.5 h-3.5" />
            UNDO
          </button>
          
          <button
            onClick={() => setIsVisible(false)}
            className="p-1.5 text-slate-500 hover:text-white rounded transition-colors"
          >
            <X className="w-4 h-4" />
          </button>
        </div>
      </div>
    </div>
  );
}