'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, X } 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';
import error_image from '@/public/assets/error.webp';
import { createRoot, Root } from 'react-dom/client';

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;
    /** 视频比例 */
    aspectRatio?: string;
}

interface DownloadOptionsModalProps {
    onDownloadCurrent: () => void;
    onDownloadAll: () => void;
    onClose: () => void;
    currentVideoIndex: number;
    totalVideos: number;
    /** 当前视频是否生成失败 */
    isCurrentVideoFailed: boolean;
    /** 是否为最终视频阶段 */
    isFinalStage?: boolean;
}

function DownloadOptionsModal(props: DownloadOptionsModalProps) {
    const { onDownloadCurrent, onDownloadAll, onClose, currentVideoIndex, totalVideos, isCurrentVideoFailed, isFinalStage = false } = props;
    const containerRef = useRef<HTMLDivElement | null>(null);

    useEffect(() => {
        const originalOverflow = document.body.style.overflow;
        document.body.style.overflow = 'hidden';
        return () => {
            document.body.style.overflow = originalOverflow;
        };
    }, []);

    return (
        <div
            ref={containerRef}
            data-alt="download-options-overlay"
            className="fixed inset-0 z-[1000] flex items-center justify-center bg-black/60"
        >
            <div
                data-alt="download-options-modal"
                className="relative w-11/12 max-w-sm rounded-2xl bg-white/5 border border-white/10 backdrop-blur-xl shadow-2xl p-6 text-white"
                role="dialog"
                aria-modal="true"
                aria-labelledby="download-options-title"
                onClick={(e) => e.stopPropagation()}
            >
                <button
                    data-alt="close-button"
                    className="absolute top-4 right-4 w-6 h-6 rounded-full bg-white/10 hover:bg-white/20 border border-white/10 flex items-center justify-center text-white transition-all active:scale-95"
                    onClick={onClose}
                    aria-label="Close"
                >
                    <X size={14} />
                </button>
                <div data-alt="modal-header" className="flex flex-col items-center text-center gap-2">
                    <div data-alt="modal-icon" className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-lg text-purple-400">
                        <Download />
                    </div>
                    <h3 id="download-options-title" data-alt="modal-title" className="text-base font-semibold">
                        Download Options
                    </h3>
                </div>

                <div data-alt="modal-body" className="mt-4">
                    <p data-alt="modal-description" className="text-sm text-white/80 text-center">
                        Choose your download preference
                    </p>

                    {!isCurrentVideoFailed && (
                        <div data-alt="stats-info" className="mt-3 rounded-lg bg-white/5 border border-white/10 p-3 text-center">
                            <div className="text-xs text-white/60">Current video</div>
                            <div className="text-sm font-medium">{currentVideoIndex + 1} / {totalVideos}</div>
                        </div>
                    )}
                </div>

                <div data-alt="modal-actions" className="mt-6 space-y-3">
                    {!isCurrentVideoFailed && (
                        <button
                            data-alt="download-current-button"
                            className="w-full px-4 py-2.5 rounded-lg bg-gradient-to-br from-purple-600/80 to-purple-700/80 hover:from-purple-500/80 hover:to-purple-600/80 text-white font-medium transition-all flex items-center justify-center gap-2"
                            onClick={() => {
                                onDownloadCurrent();
                                onClose();
                            }}
                        >
                            <Download size={16} />
                            {isFinalStage ? 'Download Final Video' : 'Download Current Video'}
                        </button>
                    )}
                    <button
                        data-alt="download-all-button"
                        className="w-full px-4 py-2.5 rounded-lg bg-gradient-to-br from-purple-500/60 to-purple-600/60 hover:from-purple-500/80 hover:to-purple-600/80 text-white font-medium transition-all flex items-center justify-center gap-2 border border-purple-400/30"
                        onClick={() => {
                            onDownloadAll();
                            onClose();
                        }}
                    >
                        <ArrowDownWideNarrow size={16} />
                        Download All Videos ({totalVideos})
                    </button>
                </div>
            </div>
        </div>
    );
}

/**
 * Opens a download options modal with glass morphism style.
 * @param {DownloadOptionsModalProps} options - download options and callbacks.
 */
function showDownloadOptionsModal(options: Omit<DownloadOptionsModalProps, 'onClose'>): void {
    if (typeof window === 'undefined' || typeof document === 'undefined') {
        return;
    }

    const mount = document.createElement('div');
    mount.setAttribute('data-alt', 'download-options-modal-root');
    document.body.appendChild(mount);

    let root: Root | null = null;
    try {
        root = createRoot(mount);
    } catch {
        if (mount.parentNode) {
            mount.parentNode.removeChild(mount);
        }
        return;
    }

    const close = () => {
        try {
            root?.unmount();
        } finally {
            if (mount.parentNode) {
                mount.parentNode.removeChild(mount);
            }
        }
    };

    root.render(
        <DownloadOptionsModal {...options} onClose={close} />
    );
}

/**
 * 面向 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,
    aspectRatio
}: 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 [isEdgeBrowser, setIsEdgeBrowser] = useState<boolean>(false);

    /** 解析形如 "16:9" 的比例字符串 */
    const parseAspect = (input?: string): { w: number; h: number } => {
        const parts = (typeof input === 'string' ? input.split(':') : []);
        const w = Number(parts[0]);
        const h = Number(parts[1]);
        return {
            w: Number.isFinite(w) && w > 0 ? w : 16,
            h: Number.isFinite(h) && h > 0 ? h : 9
        };
    };

    /** 检测是否为 Edge 浏览器（客户端挂载后执行） */
    useEffect(() => {
        const isEdge = navigator.userAgent.indexOf('Edg') !== -1;
        setIsEdgeBrowser(isEdge);
    }, []);

    /** 根据浏览器类型获取最大高度值 */
    const maxHeight = useMemo(() => {
        return isEdgeBrowser ? 'calc(100vh - 10.5rem)' : 'calc(100vh - 15rem)';
    }, [isEdgeBrowser]);

    /** 视频轮播容器高度：按 aspectRatio 计算（基于视口宽度） */
    const videoWrapperHeight = useMemo(() => {
        const { w, h } = parseAspect(aspectRatio);
        return `min(calc(100vw * ${h} / ${w}), ${maxHeight})`;
    }, [aspectRatio, maxHeight]);

    /** 图片轮播容器高度：默认 16:9 */
    const imageWrapperHeight = useMemo(() => {
        const { w, h } = parseAspect(aspectRatio);
        return `min(calc(100vw * ${h} / ${w}), ${maxHeight})`;
    }, [aspectRatio, maxHeight]);

    // 计算当前阶段类型
    const stage = (selectedView === 'final' && taskObject.final?.url)
        ? 'final_video'
        : (!['init', '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 imageItems = 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 => ({
                url: item?.url as string | undefined,
                status: item?.status as number | undefined,
            }));
        }
        return [] as Array<{ url?: string; status?: number }>;
    }, [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: videoWrapperHeight,
        }}>
            <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 cursor-pointer"
                                        src={url}
                                        preload="metadata"
                                        playsInline
                                        loop
                                        poster={getFirstFrame(url)}
                                        crossOrigin="anonymous"
                                        onClick={(e) => {
                                            e.stopPropagation();
                                            if (activeIndex === idx) togglePlay();
                                        }}
                                        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: videoWrapperHeight,
                                }}>
                                    {status === 0 && (
                                        <span className="text-blue-500 text-base">Generating...</span>
                                    )}
                                    {status === 2 && (
                                      <div className="flex flex-col items-center justify-center gap-1">
                                        <img src={error_image.src} alt="error" className="w-12 h-12" />
                                        <span className="text-[#fa485f] 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: imageWrapperHeight,
        }}>
            <Carousel
                ref={carouselRef}
                key={`h5-carousel-image-${stage}-${imageItems.length}`}
                arrows
                dots={false}
                infinite={false}
                afterChange={handleAfterChange}
                className="absolute inset-0"
                slidesToShow={1}
                adaptiveHeight
            >
                {imageItems.map((item, idx) => {
                    const status = item?.status;
                    const url = item?.url;
                    const showImage = status === 1 && typeof url === 'string' && url.length > 0;
                    return (
                        <div key={`h5-image-${idx}`} data-alt="image-slide" className="relative w-full h-full flex justify-center">
                            {showImage ? (
                                <img src={url} alt="scene" className="w-full h-full object-contain" />
                            ) : (
                                <div className="w-full aspect-auto min-h-[200px] flex items-center justify-center bg-black/10 relative" data-alt="image-status" style={{
                                    height: imageWrapperHeight,
                                }}>
                                    {status === 0 && (
                                        <span className="text-blue-500 text-base">Generating...</span>
                                    )}
                                    {status === 2 && (
                                        <div className="flex flex-col items-center justify-center gap-1">
                                            <img src={error_image.src} alt="error" className="w-12 h-12" />
                                            <span className="text-[#fa485f] text-base">Generate failed</span>
                                        </div>
                                    )}
                                </div>
                            )}
                        </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 overflow-auto"
            style={{
                height: 'calc(100vh - 10rem)'
            }}>
                {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-[5rem] 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={`relative`} 
        style={{
            width: 'calc(100vw - 2rem)'
        }}>
            {stage === 'final_video' && videoUrls.length > 0 && renderVideoSlides()}
            {stage === 'video' && videoUrls.length > 0 && renderVideoSlides()}
            {(stage === 'scene' || stage === 'character') && imageItems.length > 0 && renderImageSlides()}
            {/* 全局固定操作区 */}
            {(stage === 'video' || stage === 'final_video') && (
              <div data-alt="global-video-actions" className="absolute top-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-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={Download}
                      size="sm"
                      aria-label="download"
                      onClick={() => {
                        const current = (taskObject.videos?.data ?? [])[activeIndex] as any;
                        const status = current?.video_status;
                        const hasUrl = current && Array.isArray(current.urls) && current.urls.length > 0;
                        const hasFinalVideo = taskObject.final?.url;
                        const baseVideoCount = (taskObject.videos?.data ?? []).length;
                        const totalVideos = hasFinalVideo ? baseVideoCount + 1 : baseVideoCount;
                        const isCurrentVideoFailed = status === 2;

                        showDownloadOptionsModal({
                          currentVideoIndex: hasFinalVideo ? activeIndex + 1 : activeIndex,
                          totalVideos,
                          isCurrentVideoFailed,
                          onDownloadCurrent: async () => {
                            if (hasUrl) {
                              await downloadVideo(current.urls[0]);
                            }
                          },
                          onDownloadAll: async () => {
                            const all = (taskObject.videos?.data ?? []).flatMap((v: any) => v?.urls ?? []);
                            if (hasFinalVideo) {
                              all.push(taskObject.final.url);
                            }
                            await downloadAllVideos(all);
                          },
                        });
                      }}
                    />
                    {(() => {
                      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-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={Download}
                    size="sm"
                    aria-label="download"
                    onClick={() => {
                      const totalVideos = (taskObject.videos?.data ?? []).length + 1;
                      const finalUrl = videoUrls[0];

                      showDownloadOptionsModal({
                        currentVideoIndex: 0,
                        totalVideos,
                        isCurrentVideoFailed: false,
                        isFinalStage: true,
                        onDownloadCurrent: async () => {
                          if (finalUrl) {
                            await downloadVideo(finalUrl);
                          }
                        },
                        onDownloadAll: async () => {
                          const all = (taskObject.videos?.data ?? []).flatMap((v: any) => v?.urls ?? []);
                          if (finalUrl) {
                            all.push(finalUrl);
                          }
                          await downloadAllVideos(all);
                        },
                      });
                    }}
                  />
                )}
              </div>
            )}
            <style jsx global>{`
              [data-alt='carousel-wrapper'] .slick-slide { display: flex !important;justify-content: center; }
              .slick-slider { height: 100% !important; }
              .ant-carousel { height: 100% !important; }
              .slick-list { width: 100%;height: 100% !important;max-height: 100%; }
              .slick-track { display: flex !important; align-items: center;height: 100% !important; }
              [data-alt='carousel-wrapper'] .slick-arrow { z-index: 70 !important; }
              [data-alt='carousel-wrapper'] .slick-prev { left: 8px; }
              [data-alt='carousel-wrapper'] .slick-next { right: 8px; }
            `}</style>
        </div>
    );
}

export default H5MediaViewer;