import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import { motion, AnimatePresence } from 'motion/react';
import { X } from 'lucide-react';

export interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  title?: string;
  children: React.ReactNode;
  footer?: React.ReactNode;
  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
}

export function Modal({ isOpen, onClose, title, children, footer, size = 'md' }: ModalProps) {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
    if (isOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    return () => {
      document.body.style.overflow = '';
    };
  }, [isOpen]);

  if (!mounted) return null;

  const sizeClasses = {
    sm: 'max-w-md',
    md: 'max-w-xl',
    lg: 'max-w-3xl',
    xl: 'max-w-5xl',
    full: 'max-w-[95vw] h-[95vh]',
  };

  const modalContent = (
    <AnimatePresence>
      {isOpen && (
        <div style={{ zIndex: 99999 }} className="fixed inset-0 z-modal flex items-center justify-center p-4 sm:p-6">
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.2 }}
            className="absolute inset-0 bg-background/80 backdrop-blur-sm"
            onClick={onClose}
          />
          
          <motion.div
            initial={{ opacity: 0, scale: 0.95, y: 20 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.95, y: 20 }}
            transition={{ type: "spring", stiffness: 300, damping: 30 }}
            className={`
              relative w-full ${sizeClasses[size]} flex flex-col
              bg-surface/90 backdrop-blur-2xl border border-border/50 rounded-2xl shadow-2xl
              overflow-hidden
            `}
            style={{ maxHeight: size === 'full' ? '100%' : 'calc(100vh - 4rem)' }}
          >
            {title && (
              <div className="flex items-center justify-between p-6 border-b border-border/50 shrink-0">
                <h2 className="text-xl font-bold text-text">{title}</h2>
                <button
                  onClick={onClose}
                  className="p-2 rounded-full hover:bg-background/50 text-text-muted hover:text-text transition-colors"
                >
                  <X className="w-5 h-5" />
                </button>
              </div>
            )}
            
            <div className="p-6 overflow-y-auto custom-scrollbar flex-1">
              {children}
            </div>

            {footer && (
              <div className="p-6 border-t border-border/50 bg-background/30 shrink-0">
                {footer}
              </div>
            )}
          </motion.div>
        </div>
      )}
    </AnimatePresence>
  );

  const rootElement = document.getElementById('shell-modal-root') || document.body;
  return ReactDOM.createPortal(modalContent, rootElement);
}