"use client";

import { useState, useEffect, useRef } from "react";
import {
  ChevronDown,
  ChevronUp,
  Video,
  Loader2,
  Lightbulb,
  Package,
  Crown,
  Clapperboard,
  Globe,
  Clock,
  Trash2,
  LayoutTemplate,
  ImagePlay,
  Sparkles,
  Settings,
  MoreHorizontal,
} from "lucide-react";
import {
  Dropdown,
  Modal,
  Tooltip,
  Upload,
  Popconfirm,
  Image,
  Popover,
} from "antd";
import { UploadOutlined } from "@ant-design/icons";
import { StoryTemplateEntity } from "@/app/service/domain/Entities";
import { useImageStoryServiceHook } from "@/app/service/Interaction/ImageStoryService";
import TemplateCard from "./templateCard";
import { AudioRecorder } from "./AudioRecorder";
import { useTemplateStoryServiceHook } from "@/app/service/Interaction/templateStoryService";
import { useRouter } from "next/navigation";
import { createMovieProjectV1 } from "@/api/video_flow";
import {
  MovieProjectService,
  MovieProjectMode,
} from "@/app/service/Interaction/MovieProjectService";
import { useLoadScriptText, useUploadFile } from "@/app/service/domain/service";
import { ActionButton } from "../common/ActionButton";
import { HighlightEditor } from "../common/HighlightEditor";
import GlobalLoad from "../common/GlobalLoad";
import { useDeviceType } from '@/hooks/useDeviceType';
import { PcTemplateModal } from "./PcTemplateModal";
import { H5TemplateDrawer } from "./H5TemplateDrawer";
import { PcPhotoStoryModal } from "./PcPhotoStoryModal";
import { H5PhotoStoryDrawer } from "./H5PhotoStoryDrawer";

const LauguageOptions =  [
  { value: "english", label: "English", isVip: false, code:'en' },
  { value: "chinese", label: "Chinese", isVip: false, code:'zh' },
  { value: "japanese", label: "Japanese", isVip: false, code:'ja' },
  { value: "spanish", label: "Spanish", isVip: false, code:'es' },
  { value: "portuguese", label: "Portuguese", isVip: false, code:'pt' },
  { value: "hindi", label: "Hindi", isVip: false, code:'hi' },
  { value: "korean", label: "Korean", isVip: false, code:'ko' },
  { value: "arabic", label: "Arabic", isVip: false, code:'ar' },
  { value: "russian", label: "Russian", isVip: false, code:'ru' },
]

/**模板故事模式弹窗组件 */
/**
 * 防抖函数
 * @param {Function} func - 需要防抖的函数
 * @param {number} wait - 等待时间(ms)
 * @returns {Function} - 防抖后的函数
 */
const debounce = (func: Function, wait: number) => {
  let timeout: NodeJS.Timeout;
  return function executedFunction(...args: any[]) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
};

/**
 * 视频工具面板组件
 * 提供脚本输入和视频克隆两种模式，支持展开/收起功能
 */
export function ChatInputBox({ noData }: { noData: boolean }) {
  const { isMobile, isDesktop } = useDeviceType();
  // 控制面板展开/收起状态
  const [isExpanded, setIsExpanded] = useState(false);

  // 模板故事弹窗状态
  const [isTemplateModalOpen, setIsTemplateModalOpen] = useState(false);

  // 图片故事弹窗状态
  const [isPhotoStoryModalOpen, setIsPhotoStoryModalOpen] = useState(false);

  // 共享状态 - 需要在不同渲染函数间共享
  const [script, setScript] = useState(""); // 用户输入的脚本内容
  const router = useRouter();

  const [loadingIdea, setLoadingIdea] = useState(false); // 获取创意建议时的加载状态
  // 各种操作的加载状态
  const [isCreating, setIsCreating] = useState(false); // 主视频创建按钮的加载状态
  const [isTemplateCreating, setIsTemplateCreating] = useState(false); // 模板故事创建按钮的加载状态
  const [isPhotoCreating, setIsPhotoCreating] = useState(false); // 图片故事创建按钮的加载状态
  const [isRoleGenerating, setIsRoleGenerating] = useState<{[key: string]: boolean}>({}); // 角色AI生成按钮的加载状态
  const [isItemGenerating, setIsItemGenerating] = useState<{[key: string]: boolean}>({}); // 道具AI生成按钮的加载状态

  // 配置选项状态 - 整合所有配置项到一个对象
  const [configOptions, setConfigOptions] = useState<{
    mode: "auto" | "manual";
    resolution: "720p" | "1080p" | "4k";
    language: string;
    videoDuration: string;
  }>({
    mode: "auto",
    resolution: "720p",
    language: "english",
    videoDuration: "1min",
  });

  // 从 localStorage 初始化配置
  useEffect(() => {
    const savedConfig = localStorage.getItem('videoFlowConfig');
    if (savedConfig) {
      try {
        const parsed = JSON.parse(savedConfig);
        setConfigOptions({
          mode: parsed.mode || "auto",
          resolution: parsed.resolution || "720p",
          language: parsed.language || "english",
          videoDuration: parsed.videoDuration || "1min",
        });
      } catch (error) {
        console.warn('解析保存的配置失败，使用默认配置:', error);
      }
    }
  }, []);

  const onConfigChange = (key: string, value: string) => {
    setConfigOptions((prev) => ({
      ...prev,
      [key]: value,
    }));
  };

  const handleCreateVideo = async () => {
    if (isCreating) return; // 如果正在创建中，直接返回
    
    if (!script) {
      console.warn("请输入剧本内容");
      return;
    }

    setIsCreating(true); // 设置创建状态为 true，按钮会显示 loading 状态

    try {
      const User = JSON.parse(localStorage.getItem("currentUser") || "{}");
      
      if (!User.id) {
        console.error("用户未登录");
        return;
      }

      // 创建剧集数据
      let episodeData: any = {
        user_id: String(User.id),
        script: script,
        mode: configOptions.mode,
        resolution: configOptions.resolution,
        language: configOptions.language,
        video_duration: configOptions.videoDuration,
      };

      // 调用创建剧集API
      const result = await MovieProjectService.createProject(
        MovieProjectMode.NORMAL,
        episodeData
      );
      
      const episodeId = result.project_id;
      router.push(`/movies/work-flow?episodeId=${episodeId}`);
      
    } catch (error) {
      console.error("创建剧集失败:", error);
    } finally {
      setIsCreating(false); // 无论成功还是失败，都重置创建状态
    }
  };

  return (
    <div
      className="video-tool-component relative max-w-[1080px] w-full left-[50%] translate-x-[-50%]"
      style={
        noData
          ? {
              top: "50%",
            }
          : {}
      }
    >
      {/* 视频故事板工具面板 - 毛玻璃效果背景 */}
      <div className="video-storyboard-tools rounded-[20px] bg-white/[0.08] backdrop-blur-[20px] border border-white/[0.12] shadow-[0_8px_32px_rgba(0,0,0,0.3)]">
        {/* 展开/收起控制区域 */}
        {!noData && (
          <>
            {isExpanded ? (
              // 展开状态：显示收起按钮和提示
              <div
                className="absolute top-0 bottom-0 left-0 right-0 z-[1] flex flex-col items-center justify-center rounded-[20px] bg-[#191B1E] bg-opacity-[0.3] backdrop-blur-[1.5px] cursor-pointer"
                onClick={() => setIsExpanded(false)}
              >
                <ChevronUp className="w-4 h-4 text-white/80" />
                <span className="text-sm text-white/80">
                  Click to act
                </span>
              </div>
            ) : (
              // 收起状态：显示展开按钮
              <div
                className="absolute top-[-8px] left-[50%] z-[2] flex items-center justify-center w-[46px] h-4 rounded-[15px] bg-[#fff3] translate-x-[-50%] cursor-pointer hover:bg-[#ffffff1a]"
                onClick={() => setIsExpanded(true)}
              >
                <ChevronDown className="w-4 h-4" />
              </div>
            )}
          </>
        )}

        {/* 主要内容区域 - 简化层级，垂直居中 */}
        <div
          data-alt="+          ---------"
          className={`flex items-center justify-center p-1 transition-all duration-300 relative ${
            isExpanded ? "h-[2rem]" : "h-auto"
          }`}
        >

          {/* 输入框和Action按钮 - 只在展开状态显示 */}
          {!isExpanded && (
            <div className="flex flex-col gap-3 w-full">
              {/* 第一行：输入框 */}
              <div className="video-prompt-editor relative flex flex-col gap-3 flex-1 pr-10">
                {/* 文本输入框 - 改为textarea */}
                <textarea
                  value={script}
                  onChange={(e) => setScript(e.target.value)}
                  placeholder="Describe the story you want to make..."
                  className="w-full pl-[10px] pr-[10px] py-[14px] rounded-[10px] leading-[20px] text-sm border-none bg-transparent text-white placeholder:text-white/[0.40] focus:outline-none resize-none min-h-[48px] max-h-[120px] overflow-y-auto"
                  style={
                    noData
                      ? {
                          minHeight: "128px",
                        }
                      : {}
                  }
                  rows={1}
                  onInput={(e) => {
                    const target = e.target as HTMLTextAreaElement;
                    target.style.height = "auto";
                    target.style.height =
                      Math.min(target.scrollHeight, 120) + "px";
                  }}
                />
              </div>

              {/* 第二行：功能按钮和Action按钮 - 同一行 */}
              <div className="flex items-center justify-between">
                {/* 左侧功能按钮区域 */}
                <div className="flex items-center gap-2">
                  {/* 获取创意按钮
                  <Tooltip
                    title="Get creative ideas for your story"
                    placement="top"
                  >
                    <button
                      data-alt="get-idea-button"
                      className="flex items-center gap-1.5 px-3 py-2 text-white/[0.70] hover:text-white transition-colors"
                      onClick={() => handleGetIdea()}
                    >
                      {loadingIdea ? (
                        <Loader2 className="w-4 h-4 animate-spin" />
                      ) : (
                        <Lightbulb className="w-4 h-4" />
                      )}
                    </button>
                  </Tooltip> */}

                  {/* 分隔线 */}
                  {/* <div className="w-px h-4 bg-white/[0.20]"></div> */}

                  {/* 模板故事按钮 */}
                  <Tooltip title="Choose from movie templates" placement="top" trigger={isDesktop ? "hover" : "contextMenu"}>
                    <button
                      data-alt="template-story-button"
                      className="flex items-center gap-1.5 px-2 py-2 text-white/[0.70] hover:text-white transition-colors"
                      onClick={() => setIsTemplateModalOpen(true)}
                    >
                      <LayoutTemplate className="w-4 h-4" />
                    </button>
                  </Tooltip>

                  {/* 分隔线 */}
                  <div className="w-px h-4 bg-white/[0.20]"></div>

                  {/* 图片故事按钮 */}
                  <Tooltip title="Create movie from image" placement="top" trigger={isDesktop ? "hover" : "contextMenu"}>
                    <button
                      data-alt="photo-story-button"
                      className="flex items-center gap-1.5 px-2 py-2 text-white/[0.70] hover:text-white transition-colors"
                      onClick={() => setIsPhotoStoryModalOpen(true)}
                    >
                      <ImagePlay className="w-4 h-4" />
                    </button>
                  </Tooltip>

                  {isDesktop ? (
                  <PcPhotoStoryModal
                    isOpen={isPhotoStoryModalOpen}
                    onClose={() => setIsPhotoStoryModalOpen(false)}
                    configOptions={configOptions}
                    isCreating={isCreating}
                    setIsCreating={setIsCreating}
                    isPhotoCreating={isPhotoCreating}
                    setIsPhotoCreating={setIsPhotoCreating}
                    />
                  ) : (
                    <H5PhotoStoryDrawer
                      isMobile={isMobile}
                      isOpen={isPhotoStoryModalOpen}
                      onClose={() => setIsPhotoStoryModalOpen(false)}
                      configOptions={configOptions}
                      isCreating={isCreating}
                      setIsCreating={setIsCreating}
                      isPhotoCreating={isPhotoCreating}
                      setIsPhotoCreating={setIsPhotoCreating}
                    />
                  )}

                  {/* 分隔线 */}
                  <div className="w-px h-4 bg-white/[0.20]"></div>

                  {/* 语言配置 */}
                  <Dropdown
                    menu={{
                      items: LauguageOptions.map((option) => ({
                        key: option.value,
                        label: (
                          <div className="flex items-center justify-between px-2 py-2">
                            <span className="text-sm text-white">{option.label}</span>
                            {option.isVip && (
                              <Crown className="w-4 h-4 text-yellow-500" />
                            )}
                          </div>
                        ),
                      })),
                      onClick: ({ key }) => onConfigChange('language', key),
                    }}
                    trigger={["click"]}
                    placement="topRight"
                  >
                    <button
                      data-alt={`config-language`}
                      className={`flex items-center gap-2  text-white/80 transition-all duration-200 px-2 py-2`}
                    >
                      <Globe className={"w-4 h-4"} />
                      {LauguageOptions.find((option) => option.value === configOptions.language)?.isVip && (
                        <Crown className={`w-2 h-2  text-yellow-500`} />
                      )}
                    </button>
                  </Dropdown>
                </div>

                {/* 右侧Action按钮 */}
                <ActionButton
                  isCreating={isCreating}
                  handleCreateVideo={handleCreateVideo}
                  icon={<Clapperboard className={`${isMobile ? "w-4 h-4" : "w-5 h-5"}`} />}
                  className="mr-1 mb-1"
                  width={isMobile ? "w-10" : "w-12"}
                  height={isMobile ? "h-10" : "h-12"}
                />
              </div>
            </div>
          )}
        </div>
      </div>

      {/* 模板故事弹窗 */}
      {isDesktop ? (
        <PcTemplateModal
          configOptions={configOptions}
          isOpen={isTemplateModalOpen}
          onClose={() => setIsTemplateModalOpen(false)}
          isTemplateCreating={isTemplateCreating}
          setIsTemplateCreating={setIsTemplateCreating}
          isRoleGenerating={isRoleGenerating}
          setIsRoleGenerating={setIsRoleGenerating}
          isItemGenerating={isItemGenerating}
          setIsItemGenerating={setIsItemGenerating}
        />
        ) : (
        <H5TemplateDrawer
          isMobile={isMobile}
          configOptions={configOptions}
          isOpen={isTemplateModalOpen}
          onClose={() => setIsTemplateModalOpen(false)}
          isTemplateCreating={isTemplateCreating}
          setIsTemplateCreating={setIsTemplateCreating}
          isRoleGenerating={isRoleGenerating}
          setIsRoleGenerating={setIsRoleGenerating}
          isItemGenerating={isItemGenerating}
          setIsItemGenerating={setIsItemGenerating}
        />
      )}
    </div>
  );
}

