"use client";

import { useState, useEffect, useRef, useCallback } from 'react';
import { ArrowLeft, ListOrdered, Play, Loader2, Pause, MoreHorizontal, Edit2, Check, X, RefreshCw, Calendar, Clock, Eye, Heart, Share2, Video } from 'lucide-react';
import { useRouter, useSearchParams } from 'next/navigation';
import './style/create-to-video2.css';

import { getScriptEpisodeListNew } from "@/api/script_episode";
import { EmptyStateAnimation } from '@/components/common/EmptyStateAnimation2';
import { ChatInputBox } from '@/components/ChatInputBox/ChatInputBox';
import cover_image1 from '@/public/assets/cover_image1.jpg';
import { motion } from 'framer-motion';


// ideaText已迁移到ChatInputBox组件中

export default function CreateToVideo2() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const projectId = searchParams.get('projectId') ? parseInt(searchParams.get('projectId')!) : 0;
  const [isClient, setIsClient] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);
  const [runTour, setRunTour] = useState(true);
  const [episodeId, setEpisodeId] = useState<number>(0);
  const [generatedVideoList, setGeneratedVideoList] = useState<any[]>([]);
  const [projectName, setProjectName] = useState('默认名称');
  const [episodeList, setEpisodeList] = useState<any[]>([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPage, setTotalPage] = useState(1);
  const [limit, setLimit] = useState(12);
  const [isLoading, setIsLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const [isLoadingMore, setIsLoadingMore] = useState(false);
  const scrollContainerRef = useRef<HTMLDivElement>(null);
  const [userId, setUserId] = useState<number>(0);

  // 在客户端挂载后读取localStorage
  useEffect(() => {
    if (typeof window !== 'undefined') {
      const currentUser = JSON.parse(localStorage.getItem('currentUser') || '{}');
      console.log('currentUser', currentUser);
      setUserId(currentUser.id);
      const savedProjectName = localStorage.getItem('projectName');
      if (savedProjectName) {
        setProjectName(savedProjectName);
      }
      getEpisodeList(currentUser.id);
    }
  }, []);

  // 获取剧集列表
  const getEpisodeList = async (userId: number) => {
    if (isLoading || isLoadingMore) return;
    console.log('getEpisodeList', userId);

    setIsLoading(true);

    try {
      const params = {
        user_id: String(userId),
      };

      const episodeListResponse = await getScriptEpisodeListNew(params);
      console.log('episodeListResponse', episodeListResponse);

      if (episodeListResponse.code === 0) {
        setEpisodeList(episodeListResponse.data.movie_projects);
        // 每一项 有
        // final_video_url: "", // 生成的视频地址
        // last_message: "",
        // name: "After the Flood", // 剧集名称
        // project_id: "9c34fcc4-c8d8-44fc-879e-9bd56f608c76", // 剧集ID
        // status: "INIT", // 剧集状态 INIT 初始化
        // step: "INIT" // 剧集步骤 INIT 初始化
      }

    } catch (error) {
      console.error('Failed to fetch episode list:', error);
    } finally {
      setIsLoading(false);
      setIsLoadingMore(false);
    }
  };

  // 视频上传和创建功能已迁移到ChatInputBox组件中

  // 所有视频工具相关的函数和配置已迁移到ChatInputBox组件中

  // 检查是否需要显示引导
  useEffect(() => {
    if (typeof window !== 'undefined') {
      const hasCompletedTour = localStorage.getItem('hasCompletedTour');
      if (hasCompletedTour) {
        setRunTour(false);
      }
    }
  }, []);

  useEffect(() => {
    setIsClient(true);
  }, []);

  const StatusBadge = (status: string) => {
    return (
      <motion.div
        initial={{ opacity: 0, y: -10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4 }}
        className="flex items-center"
      >
        {/* 进行中 脉冲小圆点 */}
        {status === 'pending' && (
          <>
            <motion.span
              className="w-2 h-2 rounded-full bg-yellow-400 shadow-[0_0_8px_rgba(255,220,100,0.9)]"
              animate={{ scale: [1, 1.4, 1] }}
              transition={{ repeat: Infinity, duration: 1.5 }}
            />
            {/* 状态文字 */}
            <span className="text-xs tracking-widest text-yellow-300 font-medium drop-shadow-[0_0_6px_rgba(255,220,100,0.6)]"></span>
          </>
        )}
        {/* 失败 */}
        {status === 'failed' && (
          <>
            <motion.span
              className="w-2 h-2 rounded-full bg-red-500 shadow-[0_0_8px_rgba(255,0,80,0.9)]"
            />
            <span className="text-xs tracking-widest text-red-400 font-medium drop-shadow-[0_0_6px_rgba(255,0,80,0.6)]">
              FAILED
            </span>
          </>
        )}
      </motion.div>
    )
  }

  // 创建一个视频引用Map
  const videoRefs = useRef<Map<string, HTMLVideoElement>>(new Map());

  const handleMouseEnter = (projectId: string) => {
    const videoElement = videoRefs.current.get(projectId);
    if (videoElement) {
      videoElement.play().catch(() => {
        console.log('Video autoplay prevented');
      });
    }
  };

  const handleMouseLeave = (projectId: string) => {
    const videoElement = videoRefs.current.get(projectId);
    if (videoElement) {
      videoElement.pause();
      videoElement.currentTime = 0;
    }
  };

  const setVideoRef = (projectId: string, element: HTMLVideoElement | null) => {
    if (element) {
      videoRefs.current.set(projectId, element);
    } else {
      videoRefs.current.delete(projectId);
    }
  };

  const renderProjectCard = (project: any) => {

    return (
      <div
        key={project.project_id}
        className="group flex flex-col bg-black/20 rounded-lg overflow-hidden cursor-pointer"
        onClick={() => router.push(`/create/work-flow?episodeId=${project.project_id}`)}
        onMouseEnter={() => handleMouseEnter(project.project_id)}
        onMouseLeave={() => handleMouseLeave(project.project_id)}
        data-alt="project-card"
      >
        {/* 视频/图片区域 */}
        <div className="relative aspect-video">
          {project.final_video_url ? (
            <video
              ref={(el) => setVideoRef(project.project_id, el)}
              src={project.final_video_url}
              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
              muted
              loop
              playsInline
              preload="none"
              poster={`${project.final_video_url}?vframe/jpg/offset/1`}
            />
          ) : (
            <div 
              className="w-full h-full bg-cover bg-center group-hover:scale-105 transition-transform duration-500"
              style={{
                backgroundImage: `url(${cover_image1.src})`,
              }} 
            />
          )}

          {/* 状态标签 - 左上角 */}
          <div className="absolute top-3 left-3">
            {StatusBadge(project.status === 'COMPLETED' ? 'completed' : project.status === 'FAILED' ? 'failed' : 'pending')}
          </div>
        </div>

        {/* 底部信息 */}
        <div className="p-4">
          <div className="flex items-center justify-between">
            <h2 className="text-sm font-medium text-white line-clamp-1">
              {/* {project.name || "Unnamed"} */}
            </h2>
          </div>
        </div>
      </div>
    );
  };

  return (
    <div className="flex flex-col w-full h-full relative px-2">
      <div
        ref={scrollContainerRef}
        className="h-full overflow-y-auto overflow-x-hidden custom-scrollbar"
        style={{
          scrollbarWidth: 'thin',
          scrollbarColor: 'rgba(255,255,255,0.1) transparent'
        }}
      >
        {episodeList.length > 0 && (
          /* 优化的剧集网格 */
          <div className="pb-8">
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
              {episodeList.map(renderProjectCard)}
            </div>

            {/* 加载更多指示器 */}
            {isLoadingMore && (
              <div className="flex justify-center py-12">
                <div className="flex items-center gap-3 px-6 py-3 bg-black/30 backdrop-blur-xl border border-white/10 rounded-full">
                  <Loader2 className="w-5 h-5 animate-spin text-purple-400" />
                  <span className="text-white/90 font-medium">Loading more projects...</span>
                </div>
              </div>
            )}

            {/* 到底提示 */}
            {!hasMore && episodeList.length > 0 && (
              <div className="flex justify-center py-12">
                <div className="text-center">
                  <div className="w-12 h-12 bg-black/30 backdrop-blur-xl border border-white/10 rounded-full flex items-center justify-center mx-auto mb-3">
                    <Check className="w-6 h-6 text-purple-400" />
                  </div>
                  <p className="text-white/70 text-sm">All projects loaded</p>
                </div>
              </div>
            )}
          </div>
        )}
      </div>

      {/* 视频工具组件 - 使用独立组件 */}
      {!isLoading && 
        <ChatInputBox noData={episodeList.length === 0} />
      }
    </div>
  );
}