import React, { useEffect, useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { X } from 'lucide-react';
import { Button } from './Button';

export interface FloatingCTAProps {
  /** Text to display in the CTA button */
  text: string;
  /** Click handler for the CTA button */
  onClick: () => void;
  /** Icon to display (optional) */
  icon?: React.ReactNode;
  /** Position of the floating CTA */
  position?: 'bottom-right' | 'bottom-left' | 'bottom-center';
  /** Minimum scroll position (in pixels) to show the CTA */
  showAfterScroll?: number;
  /** Allow user to dismiss the CTA */
  dismissible?: boolean;
  /** Additional CSS classes */
  className?: string;
}

/**
 * FloatingCTA - Persistent call-to-action button that appears on scroll
 *
 * Features:
 * - Appears after scrolling past a threshold
 * - Smooth slide-in/slide-out animation
 * - Dismissible with close button
 * - Configurable position
 * - Mobile-responsive
 *
 * @example
 * <FloatingCTA
 *   text="Solicitar Demo"
 *   onClick={() => navigate('/demo')}
 *   position="bottom-right"
 *   showAfterScroll={500}
 *   dismissible
 * />
 */
export const FloatingCTA: React.FC<FloatingCTAProps> = ({
  text,
  onClick,
  icon,
  position = 'bottom-right',
  showAfterScroll = 400,
  dismissible = true,
  className = '',
}) => {
  const [isVisible, setIsVisible] = useState(false);
  const [isDismissed, setIsDismissed] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      const scrollPosition = window.scrollY;
      setIsVisible(scrollPosition > showAfterScroll && !isDismissed);
    };

    window.addEventListener('scroll', handleScroll);
    handleScroll(); // Check initial position

    return () => window.removeEventListener('scroll', handleScroll);
  }, [showAfterScroll, isDismissed]);

  const handleDismiss = (e: React.MouseEvent) => {
    e.stopPropagation();
    setIsDismissed(true);
  };

  const positionClasses = {
    'bottom-right': 'bottom-6 right-6',
    'bottom-left': 'bottom-6 left-6',
    'bottom-center': 'bottom-6 left-1/2 -translate-x-1/2',
  };

  const slideVariants = {
    'bottom-right': {
      hidden: { x: 100, opacity: 0 },
      visible: { x: 0, opacity: 1 },
      exit: { x: 100, opacity: 0 },
    },
    'bottom-left': {
      hidden: { x: -100, opacity: 0 },
      visible: { x: 0, opacity: 1 },
      exit: { x: -100, opacity: 0 },
    },
    'bottom-center': {
      hidden: { y: 100, opacity: 0 },
      visible: { y: 0, opacity: 1 },
      exit: { y: 100, opacity: 0 },
    },
  };

  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          className={`fixed ${positionClasses[position]} z-40 ${className}`}
          initial="hidden"
          animate="visible"
          exit="exit"
          variants={slideVariants[position]}
          transition={{ type: 'spring', stiffness: 100, damping: 20 }}
        >
          <div className="relative">
            <Button
              onClick={onClick}
              size="lg"
              className="shadow-2xl hover:shadow-3xl transition-shadow duration-300 bg-gradient-to-r from-[var(--color-primary)] to-orange-600 hover:from-[var(--color-primary-dark)] hover:to-orange-700 text-white font-bold"
            >
              {icon && <span className="mr-2">{icon}</span>}
              {text}
            </Button>

            {dismissible && (
              <button
                onClick={handleDismiss}
                className="absolute -top-2 -right-2 w-6 h-6 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded-full flex items-center justify-center hover:bg-gray-700 dark:hover:bg-gray-300 transition-colors"
                aria-label="Cerrar"
              >
                <X className="w-4 h-4" />
              </button>
            )}
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
};

export default FloatingCTA;
