'use client';

import React, { useEffect, useMemo, useRef, useState } from 'react';
import { Carousel } from 'antd';
import type { CarouselRef } from 'antd/es/carousel';
import { Play, Pause, FeatherIcon, MessageCircleMore, Download, ArrowDownWideNarrow, RotateCcw, Navigation } from 'lucide-react';
import { TaskObject } from '@/api/DTO/movieEdit';
import { ScriptRenderer } from '@/components/script-renderer/ScriptRenderer';
import ScriptLoading from './script-loading';
import { GlassIconButton } from '@/components/ui/glass-icon-button';
import { downloadVideo, downloadAllVideos, getFirstFrame } from '@/utils/tools';
import { Drawer } from 'antd';

interface H5MediaViewerProps {
    /** 任务对象，包含各阶段数据 */
    taskObject: TaskObject;
    /** 剧本数据（仅剧本阶段使用） */
    scriptData: any;
    /** 当前索引（视频/分镜阶段用于定位） */
    currentSketchIndex: number;
    /** 选中视图：final 或 video，用于覆盖阶段渲染 */
    selectedView?: 'final' | 'video' | null;
    /** 渲染模式（仅剧本阶段透传） */
    mode: string;
    /** 以下为剧本阶段透传必需项（与桌面版保持一致） */
    setIsPauseWorkFlow: (isPause: boolean) => void;
    setAnyAttribute: any;
    isPauseWorkFlow: boolean;
    applyScript: any;
    /** Carousel 切换时回传新的索引 */
    setCurrentSketchIndex: (index: number) => void;
    /** 打开智能对话 */
    onOpenChat?: () => void;
    /** 设置聊天预览视频 */
    setVideoPreview?: (url: string, id: string) => void;
    /** 显示跳转至剪辑平台按钮 */
    showGotoCutButton?: boolean;
    /** 跳转至剪辑平台 */
    onGotoCut?: () => void;
    /** 智能对话是否打开（H5可忽略布局调整，仅占位） */
    isSmartChatBoxOpen?: boolean;
    /** 失败重试生成视频 */
    onRetryVideo?: (video_id: string) => void;
    /** 切换选择视图（final 或 video） */
    onSelectView?: (view: 'final' | 'video') => void;
    /** 启用视频编辑功能 */
    enableVideoEdit?: boolean;
    /** 视频编辑描述提交回调 */
    onVideoEditDescriptionSubmit?: (editPoint: any, description: string) => void;
    /** 项目ID */
    projectId?: string;
}

/**
 * 面向 H5 的媒体预览组件。
 * - 除剧本阶段外，统一使用 antd Carousel 展示 图片/视频。
 * - 视频仅保留中间的大号播放/暂停按钮。
 */
export function H5MediaViewer({
    taskObject,
    scriptData,
    currentSketchIndex,
    selectedView,
    mode,
    setIsPauseWorkFlow,
    setAnyAttribute,
    isPauseWorkFlow,
    applyScript,
    setCurrentSketchIndex,
    onOpenChat,
    setVideoPreview,
    showGotoCutButton,
    onGotoCut,
    isSmartChatBoxOpen,
    onRetryVideo,
    onSelectView,
    enableVideoEdit,
    onVideoEditDescriptionSubmit,
    projectId
}: H5MediaViewerProps) {
    const carouselRef = useRef<CarouselRef>(null);
    const videoRefs = useRef<Array<HTMLVideoElement | null>>([]);
    const rootRef = useRef<HTMLDivElement | null>(null);
    const [activeIndex, setActiveIndex] = useState<number>(0);
    const [isPlaying, setIsPlaying] = useState<boolean>(false);
    const [isCatalogOpen, setIsCatalogOpen] = useState<boolean>(false);

    // 计算当前阶段类型
    const stage = (selectedView === 'final' && taskObject.final?.url)
        ? 'final_video'
        : (!['script', 'character', 'scene'].includes(taskObject.currentStage) ? 'video' : taskObject.currentStage);

    // 生成各阶段对应的 slides 数据
    const videoUrls = useMemo(() => {
        if (stage === 'final_video') {
            return taskObject.final?.url ? [taskObject.final.url] : [];
        }
        if (stage === 'video') {
            // 注意：不再过滤，保持与原始数组长度一致，避免索引错位
            const list = (taskObject.videos?.data ?? []) as Array<any>;
            return list.map(v => (Array.isArray(v?.urls) && v.urls.length > 0 ? v.urls[0] : '')) as string[];
        }
        return [];
    }, [stage, taskObject.final?.url, taskObject.videos?.data]);

    const imageUrls = useMemo(() => {
        if (stage === 'scene' || stage === 'character') {
            const roles = (taskObject.roles?.data ?? []) as Array<any>;
            const scenes = (taskObject.scenes?.data ?? []) as Array<any>;
            console.log('h5-media-viewer:stage', stage);
            console.log('h5-media-viewer:roles', roles);
            console.log('h5-media-viewer:scenes', scenes);
            return [...roles, ...scenes].map(item => item?.url).filter(Boolean) as string[];
        }
        return [];
    }, [stage, taskObject.roles?.data, taskObject.scenes?.data]);

    // 占位，避免未使用警告
    useEffect(() => {
        void isSmartChatBoxOpen;
    }, [isSmartChatBoxOpen]);

    // 同步外部索引到 Carousel
    useEffect(() => {
        if (stage === 'video' || stage === 'scene' || stage === 'character') {
            const target = Math.max(0, currentSketchIndex);
            carouselRef.current?.goTo(target, false);
            setActiveIndex(target);
            setIsPlaying(false);
            // 切换时暂停全部视频
            videoRefs.current.forEach(v => v?.pause());
        }
    }, [currentSketchIndex, stage]);

    // 阶段变更时重置状态
    useEffect(() => {
        setActiveIndex(0);
        setIsPlaying(false);
        videoRefs.current.forEach(v => v?.pause());
    }, [stage]);

    const handleAfterChange = (index: number) => {
        setActiveIndex(index);
        setIsPlaying(false);
        videoRefs.current.forEach(v => v?.pause());
        // 同步到父级索引
        if (stage === 'video' || stage === 'scene' || stage === 'character') {
            setCurrentSketchIndex(index);
        }
    };

    const togglePlay = () => {
        if (stage !== 'final_video' && stage !== 'video') return;
        const currentVideo = videoRefs.current[activeIndex] ?? null;
        if (!currentVideo) return;
        if (currentVideo.paused) {
            currentVideo.play().then(() => setIsPlaying(true)).catch(() => setIsPlaying(false));
        } else {
            currentVideo.pause();
            setIsPlaying(false);
        }
    };

    // 渲染视频 slide
    const renderVideoSlides = () => (
        <div data-alt="carousel-wrapper" className="relative w-full aspect-auto min-h-[200px] overflow-hidden rounded-lg" style={{
            height: 'calc(100vh - 20rem)',
        }}>
            <Carousel
                ref={carouselRef}
                key={`h5-carousel-video-${stage}-${videoUrls.length}`}
                arrows
                dots={false}
                infinite={false}
                afterChange={handleAfterChange}
                className="absolute inset-0"
                slidesToShow={1}
                adaptiveHeight
            >
                {videoUrls.map((url, idx) => {
                    const hasUrl = typeof url === 'string' && url.length > 0;
                    const raw = (taskObject.videos?.data ?? [])[idx] as any;
                    const status = raw?.video_status;
                    const videoId = raw?.video_id as string | undefined;
                    return (
                        <div key={`h5-video-${idx}`} data-alt="video-slide" className="relative w-full h-full flex justify-center">
                            {hasUrl ? (
                                <>
                                    <video
                                        ref={(el) => (videoRefs.current[idx] = el)}
                                        className="w-full h-full object-contain [transform:translateZ(0)] [backface-visibility:hidden] [will-change:transform] bg-black"
                                        style={{
                                            maxHeight: 'calc(100vh - 20rem)',
                                        }}
                                        src={url}
                                        preload="metadata"
                                        playsInline
                                        controls={isPlaying && activeIndex === idx}
                                        loop
                                        poster={getFirstFrame(url)}
                                        crossOrigin="anonymous"
                                        onLoadedMetadata={() => {}}
                                        onPlay={() => {
                                            if (activeIndex === idx) setIsPlaying(true);
                                        }}
                                        onPause={() => {
                                            if (activeIndex === idx) setIsPlaying(false);
                                        }}
                                        onCanPlay={() => {}}
                                        onError={() => {}}
                                    />
                                    {/* 顶部功能按钮改为全局固定渲染，移出 slide */}
                                    {activeIndex === idx && !isPlaying && (
                                        <button
                                            type="button"
                                            onClick={togglePlay}
                                            data-alt="play-toggle"
                                            className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-16 h-16 rounded-full bg-black/60 text-white flex items-center justify-center active:scale-95"
                                            aria-label={'Play'}
                                        >
                                            <Play className="w-8 h-8" />
                                        </button>
                                    )}
                                </>
                            ) : (
                                <div className="w-full aspect-auto min-h-[200px] flex items-center justify-center bg-black/10 relative" data-alt="video-status" style={{
                                    height: 'calc(100vh - 20rem)',
                                }}>
                                    {status === 0 && (
                                        <span className="text-blue-500 text-base">Generating...</span>
                                    )}
                                    {status === 2 && (
                                      <div className="flex flex-col items-center justify-center gap-3">
                                        <div className="text-4xl">⚠️</div>
                                        <span className="text-red-500 text-base">Generate failed</span>
                                      </div>
                                    )}
                                    {status !== 0 && status !== 2 && (
                                        <span className="text-white/70 text-base">Pending</span>
                                    )}
                                </div>
                            )}
                        </div>
                    );
                })}
            </Carousel>
        </div>
    );

    // 渲染图片 slide
    const renderImageSlides = () => (
        <div data-alt="carousel-wrapper" className="relative w-full aspect-auto min-h-[200px] overflow-hidden rounded-lg" style={{
            height: 'calc(100vh - 20rem)',
        }}>
            <Carousel
                ref={carouselRef}
                key={`h5-carousel-image-${stage}-${imageUrls.length}`}
                arrows
                dots={false}
                infinite={false}
                afterChange={handleAfterChange}
                className="absolute inset-0"
                slidesToShow={1}
                adaptiveHeight
            >
                {imageUrls.map((url, idx) => (
                    <div key={`h5-image-${idx}`} data-alt="image-slide" className="relative w-full h-full flex justify-center">
                        <img src={url} alt="scene" className="w-full h-full object-contain" style={{
                            maxHeight: 'calc(100vh - 20rem)',
                        }} />
                    </div>
                ))}
            </Carousel>
        </div>
    );

    // 剧本阶段：不使用 Carousel，沿用 ScriptRenderer
    if (stage === 'script') {
        const navItems = Array.isArray(scriptData) ? (scriptData as Array<any>).map(v => ({ id: v?.id, title: v?.title })) : [];
        const scrollToSection = (id?: string) => {
            if (!id) return;
            const el = document.getElementById(`section-${id}`);
            if (el) {
                el.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
        };
        return (
            <div data-alt="script-content" className="w-full h-full">
                {scriptData ? (
                    <>
                        <ScriptRenderer
                            data={scriptData}
                            setIsPauseWorkFlow={setIsPauseWorkFlow}
                            setAnyAttribute={setAnyAttribute}
                            isPauseWorkFlow={isPauseWorkFlow}
                            applyScript={applyScript}
                            mode={mode}
                            from="h5"
                        />
                        <button
                            type="button"
                            data-alt="open-catalog-button"
                            className="fixed bottom-[6rem] right-4 z-[60] w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 text-white shadow-lg flex items-center justify-center active:scale-95"
                            aria-label="open-catalog"
                            onClick={() => setIsCatalogOpen(true)}
                        >
                            <Navigation className="w-6 h-6" />
                        </button>

                        <Drawer
                            open={isCatalogOpen}
                            onClose={() => setIsCatalogOpen(false)}
                            placement="right"
                            width={'auto'}
                            mask
                            maskClosable={true}
                            maskStyle={{ backgroundColor: 'rgba(0,0,0,0)' }}
                            className="[&_.ant-drawer-content-wrapper]:w-auto [&_.ant-drawer-content-wrapper]:max-w-[80vw] backdrop-blur-lg bg-black/30 border border-white/20 shadow-xl"
                            rootClassName="outline-none"
                            data-alt="catalog-drawer"
                            closable={false}
                            style={{
                            backgroundColor: 'transparent',
                            borderBottomLeftRadius: 10,
                            borderTopLeftRadius: 10,
                            overflow: 'hidden',
                            }}
                            styles={{
                            body: {
                                backgroundColor: 'transparent',
                                padding: 0,
                            },
                            }}
                        >
                            <div className="mt-1" data-alt="catalog-list">
                                <div className="px-3 py-2 text-blue-500 text-xl font-bold">navigation</div>
                                {navItems.map(item => (
                                    <div
                                        key={item.id}
                                        role="button"
                                        tabIndex={0}
                                        onClick={() => {
                                            scrollToSection(item.id);
                                            setIsCatalogOpen(false);
                                        }}
                                        onKeyDown={(e) => {
                                            if (e.key === 'Enter') {
                                                scrollToSection(item.id);
                                                setIsCatalogOpen(false);
                                            }
                                        }}
                                        className="px-3 py-2 text-white/90 text-sm cursor-pointer transition-colors"
                                        data-alt="catalog-item"
                                    >
                                        {item.title}
                                    </div>
                                ))}
                            </div>
                        </Drawer>
                    </>
                    
                ) : (
                    <ScriptLoading isCompleted={!!scriptData} />
                )}

                
            </div>
        );
    }

    // 其他阶段：使用 Carousel
    return (
        <div ref={rootRef} data-alt="h5-media-viewer" className={`w-[100vw] relative ${stage === 'final_video' ? '' : 'px-4'}`}>
            {stage === 'final_video' && videoUrls.length > 0 && renderVideoSlides()}
            {stage === 'video' && videoUrls.length > 0 && renderVideoSlides()}
            {(stage === 'scene' || stage === 'character') && imageUrls.length > 0 && renderImageSlides()}
            {/* 全局固定操作区（右下角）视频暂停时展示 */}
            {(stage === 'video' || stage === 'final_video') && !isPlaying && (
              <div data-alt="global-video-actions" className="absolute bottom-0 right-4 z-[60] flex flex-col items-center gap-2">
                {stage === 'video' && (
                  <>
                    <GlassIconButton
                      data-alt="edit-with-chat-button"
                      className="w-8 h-8 bg-custom-purple backdrop-blur-xl rounded-full flex items-center justify-center transition-all"
                      icon={FeatherIcon}
                      size="sm"
                      aria-label="edit-with-chat"
                      onClick={() => {
                        const current = (taskObject.videos?.data ?? [])[activeIndex] as any;
                        if (current && Array.isArray(current.urls) && current.urls.length > 0 && setVideoPreview) {
                          setVideoPreview(current.urls[0], current.video_id);
                          onOpenChat && onOpenChat();
                        }
                      }}
                    />
                    <GlassIconButton
                      data-alt="download-all-button"
                      className="w-8 h-8 bg-gradient-to-br from-purple-500/80 to-purple-600/80 backdrop-blur-xl rounded-full flex items-center justify-center hover:from-purple-400/80 hover:to-purple-500/80 transition-all"
                      icon={ArrowDownWideNarrow}
                      size="sm"
                      aria-label="download-all"
                      onClick={async () => {
                        const all = (taskObject.videos?.data ?? []).flatMap((v: any) => v?.urls ?? []);
                        await downloadAllVideos(all);
                      }}
                    />
                    {(() => {
                      const status = (taskObject.videos?.data ?? [])[activeIndex]?.video_status;
                      return status === 1 ? (
                        <GlassIconButton
                            data-alt="download-current-button"
                            className="w-8 h-8 bg-gradient-to-br from-purple-600/80 to-purple-700/80 backdrop-blur-xl rounded-full flex items-center justify-center transition-all"
                            icon={Download}
                            size="sm"
                            aria-label="download-current"
                            onClick={async () => {
                                const current = (taskObject.videos?.data ?? [])[activeIndex] as any;
                                const hasUrl = current && Array.isArray(current.urls) && current.urls.length > 0;
                                if (hasUrl) {
                                await downloadVideo(current.urls[0]);
                                }
                            }}
                        />
                      ) : null;
                    })()}
                    {(() => {
                      const status = (taskObject.videos?.data ?? [])[activeIndex]?.video_status;
                      return status === 2 ? (
                        <GlassIconButton
                          data-alt="retry-button"
                          className="w-8 h-8 bg-gradient-to-br from-purple-500/80 to-purple-600/80 backdrop-blur-xl border border-purple-400/30 rounded-full flex items-center justify-center hover:from-purple-400/80 hover:to-purple-500/80 transition-all"
                          icon={RotateCcw}
                          size="sm"
                          aria-label="retry"
                          onClick={() => {
                            const vid = (taskObject.videos?.data ?? [])[activeIndex]?.video_id;
                            if (vid && onRetryVideo) onRetryVideo(vid);
                          }}
                        />
                      ) : null;
                    })()}
                  </>
                )}
                {stage === 'final_video' && (
                  <>
                    <GlassIconButton
                      data-alt="download-all-button"
                      className="w-8 h-8 bg-gradient-to-br from-purple-500/80 to-purple-600/80 backdrop-blur-xl border border-purple-400/30 rounded-full flex items-center justify-center hover:from-purple-400/80 hover:to-purple-500/80 transition-all"
                      icon={ArrowDownWideNarrow}
                      size="sm"
                      aria-label="download-all"
                      onClick={async () => {
                        const all = (taskObject.videos?.data ?? []).flatMap((v: any) => v?.urls ?? []);
                        await downloadAllVideos(all);
                      }}
                    />
                    <GlassIconButton
                      data-alt="download-final-button"
                      className="w-8 h-8 bg-gradient-to-br from-amber-500/80 to-yellow-600/80 backdrop-blur-xl border border-amber-400/30 rounded-full flex items-center justify-center hover:from-amber-400/80 hover:to-yellow-500/80 transition-all"
                      icon={Download}
                      size="sm"
                      aria-label="download-final"
                      onClick={async () => {
                        const url = videoUrls[0];
                        if (url) await downloadVideo(url);
                      }}
                    />
                  </>
                )}
              </div>
            )}
            <style jsx global>{`
              [data-alt='carousel-wrapper'] .slick-slide { display: flex !important;justify-content: center; }
              .slick-slider { height: 100% !important;display: flex !important; }
              .ant-carousel { height: 100% !important; }
              .slick-list { width: 100%;height: 100% !important;max-height: calc(100vh - 20rem); }
              .slick-track { display: flex !important; align-items: center;height: 100% !important; }
            `}</style>
        </div>
    );
}

export default H5MediaViewer;