import React from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { Wand2, Copy, Trash2, Lock, Unlock, AlignCenter, AlignVerticalSpaceAround } from 'lucide-react';
import { TimelineElement } from '../../types';

import { removeImageBackground } from '../../utils/backgroundRemoval';

interface FloatingContextToolbarProps {
  element: TimelineElement | null;
  onDuplicate: (id: string) => void;
  onDelete: (id: string) => void;
  onLock: (id: string) => void;
  setTimelineElements: React.Dispatch<React.SetStateAction<TimelineElement[]>>;
}

export const FloatingContextToolbar: React.FC<FloatingContextToolbarProps> = ({
  element,
  onDuplicate,
  onDelete,
  onLock,
  setTimelineElements,
}) => {
  const [isRemovingBg, setIsRemovingBg] = React.useState(false);

  if (!element) return null;

  const handleRemoveBg = async () => {
    if (!element || element.type !== 'image') return;
    setIsRemovingBg(true);
    try {
      const newUrl = await removeImageBackground(element.content);
      setTimelineElements(prev => prev.map(el => 
        el.id === element.id ? { ...el, content: newUrl } : el
      ));
    } catch (error) {
      alert('Error al extraer el sujeto. Inténtalo de nuevo.');
    } finally {
      setIsRemovingBg(false);
    }
  };

  return (
    <AnimatePresence>
      <motion.div
        initial={{ opacity: 0, y: 10, scale: 0.95 }}
        animate={{ opacity: 1, y: 0, scale: 1 }}
        exit={{ opacity: 0, y: 10, scale: 0.95 }}
        className="absolute bottom-4 left-1/2 -translate-x-1/2 z-50 flex items-center gap-1 p-1 bg-brand-blue/80 backdrop-blur-xl border border-brand-teal/20 rounded-xl shadow-2xl"
      >
        {element.type === 'image' && (
          <button
            onClick={handleRemoveBg}
            disabled={isRemovingBg}
            title="Extracción IA (Smart Mask)"
            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
              isRemovingBg
                ? 'text-neutral-400 bg-neutral-800 cursor-wait'
                : 'text-white bg-brand-teal hover:bg-brand-teal/80 shadow-lg shadow-brand-teal/20'
            }`}
          >
            <Wand2 className={`w-3.5 h-3.5 ${isRemovingBg ? 'animate-pulse' : ''}`} />
            {isRemovingBg ? 'Extrayendo...' : 'Extracción IA'}
          </button>
        )}

        <div className="w-px h-4 bg-brand-gray/20 mx-1" />

        <button
          onClick={() => onDuplicate(element.id)}
          title="Duplicar elemento"
          className="p-1.5 text-brand-gray hover:text-white hover:bg-white/10 rounded-lg transition-colors"
        >
          <Copy className="w-4 h-4" />
        </button>

        <button
          onClick={() => onLock(element.id)}
          title={element.isLocked ? "Desbloquear" : "Bloquear"}
          className="p-1.5 text-brand-gray hover:text-white hover:bg-white/10 rounded-lg transition-colors"
        >
          {element.isLocked ? <Lock className="w-4 h-4 text-brand-orange" /> : <Unlock className="w-4 h-4" />}
        </button>

        <button
          onClick={() => onDelete(element.id)}
          title="Eliminar elemento"
          className="p-1.5 text-brand-gray hover:text-red-400 hover:bg-red-400/10 rounded-lg transition-colors"
        >
          <Trash2 className="w-4 h-4" />
        </button>
      </motion.div>
    </AnimatePresence>
  );
};
