video-flow-b/components/pages/work-flow.tsx

"use client"
import React, { useRef, useEffect, useCallback } from "react";
import "./style/work-flow.css";
import { Skeleton } from "@/components/ui/skeleton";
import { EditModal } from "@/components/ui/edit-modal";
import { TaskInfo } from "./work-flow/task-info";
import { MediaViewer } from "./work-flow/media-viewer";
import { ThumbnailGrid } from "./work-flow/thumbnail-grid";
import { useWorkflowData } from "./work-flow/use-workflow-data";
import { usePlaybackControls } from "./work-flow/use-playback-controls";
import { AlertCircle, RefreshCw, Pause, Play, ChevronLast, ChevronsLeft, Bot, BriefcaseBusiness, Scissors } from "lucide-react";
import { motion } from "framer-motion";
import { GlassIconButton } from '@/components/ui/glass-icon-button';
import { SaveEditUseCase } from "@/app/service/usecase/SaveEditUseCase";
import { useSearchParams } from "next/navigation";
import SmartChatBox from "@/components/SmartChatBox/SmartChatBox";
import { Drawer, Tooltip } from 'antd';

const WorkFlow = React.memo(function WorkFlow() {
  useEffect(() => {
    console.log("init-WorkFlow");
    return () => console.log("unmount-WorkFlow");
  }, []);
  const containerRef = useRef<HTMLDivElement>(null);
  const [isEditModalOpen, setIsEditModalOpen] = React.useState(false);
  const [activeEditTab, setActiveEditTab] = React.useState('1');
  const [isSmartChatBoxOpen, setIsSmartChatBoxOpen] = React.useState(true);
  const [previewVideoUrl, setPreviewVideoUrl] = React.useState<string | null>(null);
  const [previewVideoId, setPreviewVideoId] = React.useState<string | null>(null);
  const [isFocusChatInput, setIsFocusChatInput] = React.useState(false);
  const [isHovered, setIsHovered] = React.useState(false);

  const searchParams = useSearchParams();
  const episodeId = searchParams.get('episodeId') || '';

  const userId = JSON.parse(localStorage.getItem("currentUser") || '{}').id || NaN;

  SaveEditUseCase.setProjectId(episodeId);
  // 使用自定义 hooks 管理状态
  const {
    taskObject,
    scriptData,
    isLoading,
    currentSketchIndex,
    currentLoadingText,
    dataLoadError,
    setCurrentSketchIndex,
    retryLoadData,
    isPauseWorkFlow,
    mode,
    setIsPauseWorkFlow,
    setAnyAttribute,
    applyScript,
    fallbackToStep,
    originalText,
    showGotoCutButton,
    generateEditPlan,
    handleRetryVideo
  } = useWorkflowData();

  const {
    isVideoPlaying,
    toggleVideoPlay,
  } = usePlaybackControls(taskObject.videos.data, taskObject.currentStage);

  useEffect(() => {
    console.log('changedIndex_work-flow', currentSketchIndex, taskObject);
  }, [currentSketchIndex]);

  // 模拟 AI 建议 英文
  const mockSuggestions = [
    "Refine scene transitions",
    "Adjust scene composition",
    "Improve character action design",
    "Add environmental atmosphere",
    "Adjust lens language"
  ];

  const handleEditModalOpen = useCallback((tab: string) => {
    setActiveEditTab(tab);
    setIsEditModalOpen(true);
  }, []);

  return (
    <div className="w-full overflow-hidden h-full px-[1rem] pb-[1rem]">
      <div className="w-full h-full">
        <div className="splashContainer-otuV_A">
          <div className="content-vPGYx8">
            <div className="info-UUGkPJ">
              <TaskInfo
                taskObject={taskObject}
                currentLoadingText={currentLoadingText}
                roles={taskObject.roles.data}
                isPauseWorkFlow={isPauseWorkFlow}
                showGotoCutButton={showGotoCutButton}
                onGotoCut={generateEditPlan}
                setIsPauseWorkFlow={setIsPauseWorkFlow}
              />
            </div>
          </div>
          <div className="media-Ocdu1O rounded-lg">
            <div
              className="videoContainer-qteKNi"
              ref={containerRef}
            >
              {isLoading ? (
                <Skeleton className="w-full aspect-video rounded-lg" />
              ) : (
                <div className={`relative heroVideo-FIzuK1 ${['final_video', 'script'].includes(taskObject.currentStage) ? 'h-[calc(100vh-6rem)] w-[calc((100vh-6rem)/9*16)]' : 'h-[calc(100vh-6rem-200px)] w-[calc((100vh-6rem-200px)/9*16)]'}`} style={{ aspectRatio: "16 / 9" }} key={taskObject.currentStage+'_'+currentSketchIndex}>
                  <MediaViewer
                    taskObject={taskObject}
                    scriptData={scriptData}
                    currentSketchIndex={currentSketchIndex}
                    isVideoPlaying={isVideoPlaying}
                    onEditModalOpen={handleEditModalOpen}
                    onToggleVideoPlay={toggleVideoPlay}
                    setIsPauseWorkFlow={setIsPauseWorkFlow}
                    setAnyAttribute={setAnyAttribute}
                    isPauseWorkFlow={isPauseWorkFlow}
                    applyScript={applyScript}
                    mode={mode}
                    onOpenChat={() => setIsSmartChatBoxOpen(true)}
                    setVideoPreview={(url, id) => {
                      setPreviewVideoUrl(url);
                      setPreviewVideoId(id);
                    }}
                    showGotoCutButton={showGotoCutButton}
                    onGotoCut={generateEditPlan}
                    isSmartChatBoxOpen={isSmartChatBoxOpen}
                    onRetryVideo={(video_id) => handleRetryVideo(video_id)}
                  />
                </div>
              )}
            </div>
            {taskObject.currentStage !== 'final_video' && taskObject.currentStage !== 'script' && (
              <div className="h-[123px] w-[calc((100vh-6rem-200px)/9*16)]">
                <ThumbnailGrid
                  isDisabledFocus={isEditModalOpen || isPauseWorkFlow || isFocusChatInput}
                  taskObject={taskObject}
                  currentSketchIndex={currentSketchIndex}
                  onSketchSelect={setCurrentSketchIndex}
                  onRetryVideo={handleRetryVideo}
                />
              </div>
            )}
            
          </div>
        </div>
      </div>

      {/* 智能对话按钮 */}
      <div 
        className="fixed right-[1rem] bottom-[10rem] z-[49]"
      >
        <Tooltip title="Open chat" placement="left">
          <GlassIconButton
            icon={Bot}
            size='md'
            onClick={() => setIsSmartChatBoxOpen(true)}
            className="backdrop-blur-lg"
          />
        </Tooltip>
      </div>

      {/* 智能对话弹窗 */}
      <Drawer
        width="25%"
        placement="right"
        closable={false}
        maskClosable={false}
        open={isSmartChatBoxOpen}
        getContainer={false}
        autoFocus={false}
        mask={false}
        zIndex={49}
        rootClassName="outline-none"
        className="backdrop-blur-lg bg-black/30 border border-white/20 shadow-xl"
        style={{
          backgroundColor: 'transparent',
          borderBottomLeftRadius: 10,
          borderTopLeftRadius: 10,
          overflow: 'hidden',
        }}
        styles={{
          body: {
            backgroundColor: 'transparent',
            padding: 0,
          },
        }}
        onClose={() => setIsSmartChatBoxOpen(false)}
      >
        <SmartChatBox
          isSmartChatBoxOpen={isSmartChatBoxOpen}
          setIsSmartChatBoxOpen={setIsSmartChatBoxOpen}
          projectId={episodeId}
          userId={userId}
          previewVideoUrl={previewVideoUrl}
          previewVideoId={previewVideoId}
          setIsFocusChatInput={setIsFocusChatInput}
          onClearPreview={() => {
            setPreviewVideoUrl(null);
            setPreviewVideoId(null);
          }}
        />
      </Drawer>

      <EditModal
        isOpen={isEditModalOpen}
        activeEditTab={activeEditTab}
        onClose={() => {
          SaveEditUseCase.clearData();
          setIsEditModalOpen(false)
        }}
        taskObject={taskObject}
        currentSketchIndex={currentSketchIndex}
        roles={taskObject.roles.data}
        setIsPauseWorkFlow={setIsPauseWorkFlow}
        isPauseWorkFlow={isPauseWorkFlow}
        fallbackToStep={fallbackToStep}
        originalText={originalText}
      />
    </div>
  )
});

export default WorkFlow;