import React, { useState, useCallback, useEffect, SetStateAction } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { FileText } from 'lucide-react';
import { ScriptRenderer } from '@/components/script-renderer/ScriptRenderer';


interface ScriptTabContentProps {
  scriptData: any[] | null;
  setIsPauseWorkFlow: (isPauseWorkFlow: boolean) => void;
  setAnyAttribute: (type: string, value: SetStateAction<string>, tags?: string[]) => void;
  isPauseWorkFlow: boolean;
}

export function ScriptTabContent({
  scriptData = [],
  setIsPauseWorkFlow,
  setAnyAttribute,
  isPauseWorkFlow
}: ScriptTabContentProps) {

  // 如果没有数据，显示空状态
  if (!scriptData || scriptData.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center min-h-[400px] text-white/50">
        <FileText className="w-16 h-16 mb-4" />
        <p>No script data</p>
      </div>
    );
  }
  return (
    <div className="flex flex-col h-full">
      <motion.div
        className="relative w-full h-[90vh] backdrop-blur-xl rounded-2xl shadow-2xl overflow-hidden flex flex-col"
        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"
          }
        }}
      >
        <ScriptRenderer data={scriptData} setIsPauseWorkFlow={setIsPauseWorkFlow} setAnyAttribute={setAnyAttribute} isPauseWorkFlow={isPauseWorkFlow} />
      </motion.div>
    </div>
  );
};