'use client';

import { motion, AnimatePresence } from 'framer-motion';
import { X } from 'lucide-react';
import WorkOffice from '@/components/workflow/work-office/work-office';

interface ScriptModalProps {
  isOpen: boolean;
  onClose: () => void;
}

export function ScriptModal({ isOpen, onClose }: ScriptModalProps) {
  return (
    <AnimatePresence mode="wait">
      {isOpen && (
        <>
          {/* 背景遮罩 */}
          <motion.div
            className="fixed inset-0 bg-black/20 backdrop-blur-sm z-50"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.15 }}
            onClick={onClose}
          />
          
          {/* 弹窗内容 */}
          <motion.div
            className="fixed inset-0 z-50 flex items-center justify-center"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.15 }}
          >
            <motion.div
              className="relative w-11/12 h-[90vh] bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl rounded-2xl shadow-2xl overflow-hidden"
              initial={{ scale: 0.95, y: 10, opacity: 0 }}
              animate={{ 
                scale: 1, 
                y: 0, 
                opacity: 1,
                transition: {
                  type: "spring",
                  duration: 0.3,
                  bounce: 0.15,
                  stiffness: 300,
                  damping: 25
                }
              }}
              exit={{ 
                scale: 0.95, 
                y: 10, 
                opacity: 0,
                transition: {
                  type: "tween",
                  duration: 0.1,
                  ease: "easeOut"
                }
              }}
            >
              {/* 关闭按钮 */}
              <motion.button
                className="absolute z-50 top-4 right-4 p-2 rounded-full bg-gray-100/80 dark:bg-gray-800/80 hover:bg-gray-200/80 dark:hover:bg-gray-700/80 transition-colors"
                onClick={onClose}
                whileHover={{ rotate: 90 }}
                whileTap={{ scale: 0.9 }}
                transition={{ duration: 0.1 }}
              >
                <X className="w-5 h-5 text-gray-600 dark:text-gray-300" />
              </motion.button>

              {/* 内容区域 */}
              <motion.div 
                className="h-full overflow-auto p-6 relative"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 0.1, duration: 0.2 }}
              >
                <WorkOffice />
              </motion.div>
            </motion.div>
          </motion.div>
        </>
      )}
    </AnimatePresence>
  );
}