"use client"
import React, { useRef, useEffect } from "react";
import "./style/work-flow.css";
import { Skeleton } from "@/components/ui/skeleton";
import { AISuggestionBar } from "@/components/ai-suggestion-bar";
import { EditModal } from "@/components/ui/edit-modal";
import { ErrorBoundary } from "@/components/ui/error-boundary";
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";

export default function WorkFlow() {
  const containerRef = useRef<HTMLDivElement>(null);
  const [isEditModalOpen, setIsEditModalOpen] = React.useState(false);
  const [activeEditTab, setActiveEditTab] = React.useState('1');

  // 使用自定义 hooks 管理状态
  const {
    taskObject,
    taskSketch,
    taskVideos,
    sketchCount,
    isLoading,
    currentStep,
    currentSketchIndex,
    isGeneratingSketch,
    isGeneratingVideo,
    currentLoadingText,
    totalSketchCount,
    roles,
    music,
    final,
    setCurrentSketchIndex,
  } = useWorkflowData();

  const {
    isPlaying,
    isVideoPlaying,
    showControls,
    setShowControls,
    setIsPlaying,
    togglePlay,
    toggleVideoPlay,
    playTimerRef,
  } = usePlaybackControls(taskSketch, taskVideos, currentStep);

  // 跟踪是否已经自动开始播放过，避免重复触发
  const hasAutoStartedRef = useRef(false);

  // 调试：监控关键状态变化
  useEffect(() => {
    console.log('工作流状态:', {
      currentStep,
      isGeneratingSketch,
      isGeneratingVideo,
      isPlaying,
      taskSketchLength: taskSketch.length,
      sketchCount,
      totalSketchCount
    });
  }, [isGeneratingSketch, taskSketch.length, sketchCount, totalSketchCount, currentStep, isPlaying]);

  // 专门监控isPlaying状态变化
  useEffect(() => {
    console.log('播放状态变化:', isPlaying ? '开始播放' : '停止播放');
  }, [isPlaying]);

  // 检查分镜数据
  useEffect(() => {
    if (taskSketch.length > 0) {
      console.log('分镜数据:', `${taskSketch.length}个分镜，当前索引:${currentSketchIndex}`);
    }
  }, [taskSketch.length, currentSketchIndex]);

  // 第一个分镜视频生成完成时停止循环播放并切换到第一个
  useEffect(() => {
    if (taskVideos.length === 1 && isPlaying) {
      console.log('第一个分镜视频生成完成，停止循环播放并切换到第一个分镜');
      setIsPlaying(false); // 停止循环播放
      setCurrentSketchIndex(0); // 切换到第一个分镜
    }
  }, [taskVideos.length, isPlaying, setIsPlaying, setCurrentSketchIndex]);

  // 分镜草图生成完毕后自动开始播放
  useEffect(() => {
    if (
      !isGeneratingSketch && // 分镜草图生成完毕
      taskSketch.length > 0 && // 有分镜草图数据
      sketchCount === totalSketchCount && // 确保所有分镜草图都生成完毕
      (currentStep === '1' || currentStep === '2') && // 允许在步骤1或步骤2初期触发
      !hasAutoStartedRef.current && // 还没有自动开始过播放
      !isPlaying // 当前没有播放
    ) {
      console.log('所有分镜草图生成完毕，自动开始播放');
      // 添加小延迟确保状态完全更新
      setTimeout(() => {
        hasAutoStartedRef.current = true;
        setIsPlaying(true); // 自动开始播放
      }, 500);
    }
    
    // 当切换到步骤3及以后时重置标记
    if (Number(currentStep) >= 3) {
      hasAutoStartedRef.current = false;
    }
  }, [isGeneratingSketch, taskSketch.length, sketchCount, totalSketchCount, currentStep, isPlaying, setIsPlaying]);

  // 处理自动播放的分镜切换逻辑
  useEffect(() => {
    if (isPlaying && taskSketch.length > 0) {
      console.log('开始自动切换分镜，总数:', taskSketch.length);
      const interval = setInterval(() => {
        setCurrentSketchIndex((prev: number) => {
          const nextIndex = (prev + 1) % taskSketch.length;
          return nextIndex;
        });
      }, 1000);
      
      return () => {
        clearInterval(interval);
      };
    }
  }, [isPlaying, taskSketch.length, setCurrentSketchIndex]);

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

  const handleEditModalOpen = (tab: string) => {
    setActiveEditTab(tab);
    setIsEditModalOpen(true);
  };

  const handleSuggestionClick = (suggestion: string) => {
    console.log('Selected suggestion:', suggestion);
  };

  const handleSubmit = (text: string) => {
    console.log('Submitted text:', text);
  };

  return (
    <ErrorBoundary>
      <div className="w-full h-full overflow-hidden">
        <div className="flex h-full flex-col p-6 justify-center items-center pt-0">
          <div className="container-H2sRZG">
            <div className="splashContainer-otuV_A">
              <div className="content-vPGYx8">
                <div className="info-UUGkPJ">
                  <ErrorBoundary>
                    <TaskInfo
                      isLoading={isLoading}
                      taskObject={taskObject}
                      currentLoadingText={currentLoadingText}
                    />
                  </ErrorBoundary>
                </div>
              </div>
              <div className="media-Ocdu1O">
                <div 
                  className="videoContainer-qteKNi" 
                  style={currentStep !== '6' ? { flex: 3 } : {}} 
                  ref={containerRef}
                >
                  {isLoading ? (
                    <Skeleton className="w-full aspect-video rounded-lg" />
                  ) : (
                    <div className="heroVideo-FIzuK1" style={{ aspectRatio: "16 / 9" }}>
                      <ErrorBoundary>
                        <MediaViewer
                          currentStep={currentStep}
                          currentSketchIndex={currentSketchIndex}
                          taskSketch={taskSketch}
                          taskVideos={taskVideos}
                          isVideoPlaying={isVideoPlaying}
                          isPlaying={isPlaying}
                          showControls={showControls}
                          isGeneratingSketch={isGeneratingSketch}
                          isGeneratingVideo={isGeneratingVideo}
                          onControlsChange={setShowControls}
                          onEditModalOpen={handleEditModalOpen}
                          onToggleVideoPlay={toggleVideoPlay}
                          onTogglePlay={togglePlay}
                          final={final}
                        />
                      </ErrorBoundary>
                    </div>
                  )}
                </div>
                <div className="imageGrid-ymZV9z hide-scrollbar">
                  <ErrorBoundary>
                    <ThumbnailGrid
                      isLoading={isLoading}
                      currentStep={currentStep}
                      currentSketchIndex={currentSketchIndex}
                      taskSketch={taskSketch}
                      taskVideos={taskVideos}
                      isGeneratingSketch={isGeneratingSketch}
                      isGeneratingVideo={isGeneratingVideo}
                      sketchCount={sketchCount}
                      totalSketchCount={totalSketchCount}
                      onSketchSelect={setCurrentSketchIndex}
                    />
                  </ErrorBoundary>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* AI 建议栏 */}
        <ErrorBoundary>
          <AISuggestionBar
            suggestions={mockSuggestions}
            onSuggestionClick={handleSuggestionClick}
            onSubmit={handleSubmit}
            placeholder="Please input your ideas, or click the predefined tags to receive AI advice..."
          />
        </ErrorBoundary>

        <ErrorBoundary>
          <EditModal
            isOpen={isEditModalOpen}
            activeEditTab={activeEditTab}
            onClose={() => setIsEditModalOpen(false)}
            taskStatus={taskObject?.taskStatus || '1'}
            taskSketch={taskSketch}
            sketchVideo={taskVideos}
            currentSketchIndex={currentSketchIndex}
            onSketchSelect={setCurrentSketchIndex}
            roles={roles}
            music={music}
          />
        </ErrorBoundary>
      </div>
    </ErrorBoundary>
  )
}