import React, { useState, useCallback, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { X, Check, ChevronDown } from 'lucide-react';
import * as Popover from '@radix-ui/react-popover';
import { mockSceneOptions, mockCharacterOptions } from '@/app/model/enums';
import { Button } from './button';
import { Input } from './input';
import { useScriptService } from '@/app/service/Interaction/ScriptService';

const ScriptTabContent: React.FC = () => {
  // 获取当前项目ID（这里需要根据实际项目路由或上下文获取）
  const projectId = 'current-project-id'; // TODO: 从路由或上下文获取实际项目ID

  const {
    scriptSlices,
    userPrompt,
    loading,
    error,
    updateUserPrompt,
    fetchScriptData,
    setFocusedSlice,
    updateScriptSliceText,
    resetScript,
    applyScript,
    fetchProjectScript
  } = useScriptService();

  // 组件挂载时获取项目剧本数据
  useEffect(() => {
    const initializeScript = async () => {
      try {
        await fetchProjectScript(projectId);
      } catch (error) {
        console.error('初始化剧本数据失败:', error);
      }
    };

    initializeScript();
  }, [projectId, fetchProjectScript]);

  // 处理AI生成按钮点击
  const handleAiGenerate = useCallback(async () => {
    if (!userPrompt.trim()) return;

    try {
      await fetchScriptData(userPrompt);
    } catch (error) {
      console.error('生成剧本失败:', error);
    }
  }, [userPrompt, fetchScriptData]);

  // 处理重置按钮点击
  const handleReset = useCallback(() => {
    resetScript();
  }, [resetScript]);

  // 处理确认按钮点击
  const handleConfirm = useCallback(async () => {
    try {
      await applyScript();
    } catch (error) {
      console.error('应用剧本失败:', error);
    }
  }, [applyScript]);

  // 处理提示词输入变化
  const handlePromptChange = useCallback((value: string) => {
    updateUserPrompt(value);
  }, [updateUserPrompt]);

  // 处理剧本片段文本变化
  const handleScriptSliceChange = useCallback((sliceId: string, text: string) => {
    setFocusedSlice(sliceId);
    updateScriptSliceText(text);
  }, [setFocusedSlice, updateScriptSliceText]);

  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"
                }
              }}
            >

            </motion.div>
    </div>
  );
};

export default ScriptTabContent;