"use client";

import { useState, useRef, useEffect, useMemo } from 'react';
import { PhotoPreviewSection } from '../PhotoPreview';
import type { PhotoItem, PhotoType } from '../PhotoPreview/types';
import {
    PlusOutlined,
    UserOutlined,
    CameraOutlined,
    BulbOutlined,
    ArrowRightOutlined,
    SettingOutlined,
} from '@ant-design/icons';
import { Dropdown, Popover } from 'antd';
import { ConfigPanel } from './ConfigPanel';
import { MobileConfigModal } from './MobileConfigModal';
import { AddItemModal } from './AddItemModal';
import { defaultConfig } from './config-options';
import type { ConfigOptions } from './config-options';
import { Eye, Check, ArrowRight, X } from 'lucide-react';
import TemplatePreviewModal from '@/components/common/TemplatePreviewModal';
import { PcTemplateModal } from "@/components/ChatInputBox/PcTemplateModal"
import { useDeviceType } from '@/hooks/useDeviceType';
import { MovieProjectService, MovieProjectMode } from '@/app/service/Interaction/MovieProjectService';
import type { CreateMovieProjectV4Request } from '@/api/DTO/movie_start_dto';
import { getCurrentUser } from '@/lib/auth';
import { useRouter } from 'next/navigation';
import { useTemplateStoryServiceHook } from '@/app/service/Interaction/templateStoryService';
import { StoryTemplateEntity } from '@/app/service/domain/Entities';
import { useUploadFile } from '@/app/service/domain/service';

export default function VideoCreationForm() {
    const [photos, setPhotos] = useState<PhotoItem[]>([]);
    const [inputText, setInputText] = useState('');
    const [configOptions, setConfigOptions] = useState<ConfigOptions>(defaultConfig);
    const [configModalVisible, setConfigModalVisible] = useState(false);
    const [addItemModalVisible, setAddItemModalVisible] = useState(false);
    const [currentItemType, setCurrentItemType] = useState<PhotoType | null>(null);
    const [editingIndex, setEditingIndex] = useState<number | null>(null);
    const [replacingIndex, setReplacingIndex] = useState<number | null>(null);
    const [isCreating, setIsCreating] = useState(false);
    // Template modal states (align with FamousTemplate usage)
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [initialTemplateId, setInitialTemplateId] = useState<string | undefined>(undefined);
    const [isTemplateCreating, setIsTemplateCreating] = useState(false);
    const [isRoleGenerating, setIsRoleGenerating] = useState<{ [key: string]: boolean }>({});
    const [isItemGenerating, setIsItemGenerating] = useState<{ [key: string]: boolean }>({});
    const [currentTemplate, setCurrentTemplate] = useState<StoryTemplateEntity | null>(null);
    const [inputPlaceholder, setInputPlaceholder] = useState<string>('');
    const [templateTitle, setTemplateTitle] = useState<string>('');
    const [isMentionOpen, setIsMentionOpen] = useState(false);


    const { isMobile, isDesktop } = useDeviceType();
    const router = useRouter();

    /** Template list for mention popover */
    const { templateStoryList, getTemplateStoryList } = useTemplateStoryServiceHook();
    const isTemplateSelected = useMemo(() => {
        return templateStoryList.find(i => i.pcode === configOptions.pcode);
    }, [configOptions.pcode, templateStoryList]);
    useEffect(() => {
        void getTemplateStoryList();
    }, [getTemplateStoryList]);

    /** Clear inputText when currentTemplate changes */
    useEffect(() => {
        if (currentTemplate) {
            setInputText('');
        }
    }, [currentTemplate]);

    /** Determine if input textarea should be shown based on selected template's freeInput */
    const shouldShowInput = useMemo(() => {
        if (!isTemplateSelected) {
            return true;
        }
        return isTemplateSelected.freeInput && isTemplateSelected.freeInput.length > 0;
    }, [isTemplateSelected]);

    const characterInputRef = useRef<HTMLInputElement>(null);
    const sceneInputRef = useRef<HTMLInputElement>(null);
    const propInputRef = useRef<HTMLInputElement>(null);
    const { uploadFile } = useUploadFile();

    /** Clear current template related states */
    const clearTemplateSelection = () => {
        handleConfigChange('pcode', '');
        setInputPlaceholder('');
        setTemplateTitle('');
        setPhotos([]);
    };

    /** Apply selected template to current form state */
    const applyTemplateSelection = (template: StoryTemplateEntity) => {
        const characterPhotos = (template.storyRole || []).map((role, index) => ({
            url: role.photo_url,
            type: 'character' as const,
            id: `character-${Date.now()}-${index}`,
            name: role.role_name,
            description: role.role_description,
        })).filter(p => p.url);

        setPhotos(prev => [...prev, ...characterPhotos]);
        setInputPlaceholder(template.generateText || template.name);
        setTemplateTitle(template.name);
        handleConfigChange('pcode', template.pcode || '');
    };

    /** Handle file upload */
    const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>, type: PhotoType) => {
        const files = event.target.files;
        if (!files || files.length === 0) return;

        // Check if we're replacing an existing photo
        if (replacingIndex !== null) {
            const file = files[0];
            void (async () => {
                try {
                    const uploadedUrl = await uploadFile(file);
                    setPhotos(prevPhotos => {
                        const updatedPhotos = [...prevPhotos];
                        updatedPhotos[replacingIndex] = {
                            ...updatedPhotos[replacingIndex],
                            url: uploadedUrl,
                        };
                        return updatedPhotos;
                    });
                } finally {
                    setReplacingIndex(null);
                }
            })();
        } else {
            // Add new photos
            void (async () => {
                const fileArray = Array.from(files);
                const uploadedUrls = await Promise.all(fileArray.map((file) => uploadFile(file)));
                const newPhotos: PhotoItem[] = uploadedUrls.map((url, index) => ({
                    url,
                    type,
                    id: `${type}-${Date.now()}-${index}`,
                }));
                setPhotos(prevPhotos => [...prevPhotos, ...newPhotos]);
            })();
        }
        
        event.target.value = '';
    };

    /** Handle configuration change */
    const handleConfigChange = <K extends keyof ConfigOptions>(
        key: K,
        value: ConfigOptions[K],
        exclude?: boolean
    ) => {
        if (exclude && key === 'pcode') {
            clearTemplateSelection();
        }
        if (key === 'videoDuration') {
            if (value === '8s') {
                setConfigOptions(prev => ({ ...prev, expansion_mode: false }));
            } else {
                setConfigOptions(prev => ({ ...prev, expansion_mode: true }));
            }
        }
        setConfigOptions(prev => ({ ...prev, [key]: value }));
    };

    /** Handle editing a photo */
    const handleEditPhoto = (index: number) => {
        const photo = photos[index];
        setCurrentItemType(photo.type);
        setEditingIndex(index);
        setAddItemModalVisible(true);
    };

    /** Handle replacing a photo */
    const handleReplacePhoto = (index: number) => {
        const photo = photos[index];
        setReplacingIndex(index);
        
        // Trigger the appropriate file input based on photo type
        switch (photo.type) {
            case 'character':
                characterInputRef.current?.click();
                break;
            case 'scene':
                sceneInputRef.current?.click();
                break;
            case 'prop':
                propInputRef.current?.click();
                break;
        }
    };

    /** Handle adding photos by type */
    const handleAddPhotoByType = (type: PhotoType) => {
        // Reset replacing index to ensure we're adding, not replacing
        setReplacingIndex(null);
        
        // Trigger the appropriate file input
        switch (type) {
            case 'character':
                characterInputRef.current?.click();
                break;
            case 'scene':
                sceneInputRef.current?.click();
                break;
            case 'prop':
                propInputRef.current?.click();
                break;
        }
    };

    /** Handle item submission from modal */
    const handleItemSubmit = (data: { name: string; description: string; file: File; index?: number }) => {
        if (!currentItemType) return;

        // Check if we're editing or adding
        if (typeof data.index === 'number' && editingIndex !== null) {
            // Edit mode - update existing photo
            void (async () => {
                let uploadedUrl: string | undefined;
                if (data.file.size > 0) {
                    uploadedUrl = await uploadFile(data.file);
                }
                setPhotos(prevPhotos => {
                    const updatedPhotos = [...prevPhotos];
                    const existingPhoto = updatedPhotos[editingIndex];
                    updatedPhotos[editingIndex] = {
                        ...existingPhoto,
                        ...(uploadedUrl ? { url: uploadedUrl } : {}),
                        ...(data.name && { name: data.name }),
                        ...(data.description && { description: data.description }),
                    };
                    return updatedPhotos;
                });
            })();
        } else {
            // Add mode - create new photo
            void (async () => {
                const uploadedUrl = await uploadFile(data.file);
                const newPhoto: PhotoItem = {
                    url: uploadedUrl,
                    type: currentItemType,
                    id: `${currentItemType}-${Date.now()}`,
                    ...(data.name && { name: data.name }),
                    ...(data.description && { description: data.description }),
                };
                setPhotos(prevPhotos => [...prevPhotos, newPhoto]);
            })();
        }
    };

    /** Handle video creation */
    const handleCreate = async () => {
        if (isCreating) return;

        if (shouldShowInput && !inputText.trim()) {
            window.msg?.warning('Please enter your story description');
            return;
        }

        try {
            setIsCreating(true);

            const user = getCurrentUser();
            if (!user?.id) {
                window.msg?.error('Please login first');
                return;
            }

            /** Separate photos by type */
            const characterPhotos = photos.filter(p => p.type === 'character');
            const scenePhotos = photos.filter(p => p.type === 'scene');
            const propPhotos = photos.filter(p => p.type === 'prop');

            /** Build request parameters */
            const requestParams: CreateMovieProjectV4Request = {
                script: inputText,
                mode: configOptions.mode,
                resolution: '720p',
                language: configOptions.language,
                aspect_ratio: configOptions.aspect_ratio,
                expansion_mode: configOptions.expansion_mode,
                video_duration: configOptions.videoDuration,
                use_img2video: photos.length > 0,
                pcode: configOptions.pcode === 'portrait' ? '' : configOptions.pcode,
            };

            /** Add character briefs if exists */
            if (characterPhotos.length > 0) {
                requestParams.character_briefs = characterPhotos.map(photo => ({
                    character_name: photo.name || 'Character',
                    character_description: photo.description || '',
                    image_url: photo.url,
                }));
            }

            /** Add scene briefs if exists */
            if (scenePhotos.length > 0) {
                requestParams.scene_briefs = scenePhotos.map(photo => ({
                    scene_name: photo.name || 'Scene',
                    scene_description: photo.description || '',
                    image_url: photo.url,
                    scene_type: 'custom',
                }));
            }

            /** Add prop briefs if exists */
            if (propPhotos.length > 0) {
                requestParams.prop_briefs = propPhotos.map(photo => ({
                    prop_name: photo.name || 'Prop',
                    prop_description: photo.description || '',
                    image_url: photo.url,
                    prop_type: 'custom',
                }));
            }

            console.log('Creating video with params:', requestParams);

            /** Call MovieProjectService V4 API */
            const result = await MovieProjectService.createProject<CreateMovieProjectV4Request>(
                MovieProjectMode.V4,
                requestParams
            );

            console.log('Video creation successful, project_id:', result.project_id);
            window.msg?.success(`Video created successfully! Project ID: ${result.project_id}`);
            router.push(`/movies/work-flow?episodeId=${result.project_id}`);

            /** TODO: Navigate to project detail page or next step */
            // window.location.href = `/movies/${result.project_id}`;
        } catch (error) {
            console.error('Failed to create video:', error);
            if (error instanceof Error && error.message !== '操作已取消') {
                window.msg?.error(error.message || 'Failed to create video');
            }
        } finally {
            setIsCreating(false);
        }
    };

    return (
        <div data-alt="video-creation-form" className="w-full h-full flex flex-col">
            {/* Main Content Area with Border */}
            <div
                data-alt="content-container"
                className="flex-1 border border-white/10 rounded-3xl bg-gradient-to-br from-[#1a1a1a]/50 to-[#0a0a0a]/50 backdrop-blur-sm overflow-hidden flex flex-col"
            >
                {templateTitle && (
                    <div data-alt="template-title" className="px-4 pt-2 flex items-center">
                        <div data-alt="template-title-text" className="text-white text-xs font-bold truncate">
                            {templateTitle}
                        </div>
                        <button
                            data-alt="clear-template"
                            className="ml-2 p-1 rounded hover:bg-white/10 text-gray-400 hover:text-white"
                            onClick={() => {
                                clearTemplateSelection();
                            }}
                        >
                            <X className="w-3 h-3" />
                        </button>
                    </div>
                )}
                {/* Photo Preview Section - Top */}
                {photos.length > 0 && (
                    <div data-alt="photo-preview-wrapper" className="pt-2 pl-4 pb-0">
                        <PhotoPreviewSection
                            photos={photos}
                            onEdit={handleEditPhoto}
                            onReplace={handleReplacePhoto}
                        />
                    </div>
                )}

                {/* Text Input Area - Middle */}
                {shouldShowInput && (
                    <div data-alt="text-input-wrapper" className="flex-1 px-4 py-4">
                        <textarea
                            data-alt="main-text-input"
                            className="w-full h-full bg-transparent text-gray-300 text-base placeholder-gray-500 resize-none outline-none border-none"
                            placeholder={inputPlaceholder || "Share a topic, idea, or instructions with Video Agent to produce a full avatar video"}
                            value={inputText}
                            onChange={(e) => setInputText(e.target.value)}
                        />
                    </div>
                )}

                {/* Control Panel - Bottom */}
                <div data-alt="control-panel" className="px-4 py-4 flex items-center justify-between gap-2">
                    {/* Left Side - Upload and Options */}
                    <div data-alt="left-controls" className="flex items-center gap-2">
                        {/* Upload Button with Dropdown */}
                        {/* <Dropdown
                            menu={{
                                items: [
                                    {
                                        key: 'character',
                                        icon: <UserOutlined className="text-cyan-400" />,
                                        label: <span className="text-gray-300">Character</span>,
                                        onClick: () => handleAddPhotoByType('character'),
                                    },
                                    {
                                        key: 'scene',
                                        icon: <CameraOutlined className="text-cyan-400" />,
                                        label: <span className="text-gray-300">Scene</span>,
                                        onClick: () => handleAddPhotoByType('scene'),
                                    },
                                    {
                                        key: 'prop',
                                        icon: <BulbOutlined className="text-cyan-400" />,
                                        label: <span className="text-gray-300">Prop</span>,
                                        onClick: () => handleAddPhotoByType('prop'),
                                    },
                                ],
                                className: 'bg-[#1a1a1a] border border-white/10'
                            }}
                            trigger={['click']}
                        >
                            <button
                                data-alt="upload-button"
                                className="w-8 h-8 rounded-full border border-white/20 bg-transparent hover:bg-white/5 hover:border-cyan-400/60 transition-all duration-200 flex items-center justify-center text-gray-300 hover:text-cyan-400"
                            >
                                <PlusOutlined className="text-base font-bold" />
                            </button>
                        </Dropdown> */}

                        {/* Hidden file inputs */}
                        <input
                            ref={characterInputRef}
                            type="file"
                            accept="image/*"
                            multiple
                            className="hidden"
                            onChange={(e) => handleFileUpload(e, 'character')}
                        />
                        <input
                            ref={sceneInputRef}
                            type="file"
                            accept="image/*"
                            multiple
                            className="hidden"
                            onChange={(e) => handleFileUpload(e, 'scene')}
                        />
                        <input
                            ref={propInputRef}
                            type="file"
                            accept="image/*"
                            multiple
                            className="hidden"
                            onChange={(e) => handleFileUpload(e, 'prop')}
                        />

                        {/* Mention Button with Popover (template list) */}
                        <Popover
                            placement="topLeft"
                            trigger={["click"]}
                            arrow={false}
                            open={isMentionOpen}
                            onOpenChange={(open) => setIsMentionOpen(open)}
                            content={
                                <div
                                    data-alt="mention-popover-content"
                                    className="w-64 max-h-64 overflow-y-auto"
                                >
                                    {templateStoryList && templateStoryList.length > 0 ? (
                                        <div className="grid grid-cols-1">
                                            {templateStoryList.map((tpl) => {
                                                const tplKey = (tpl as any).id || (tpl as any).template_id;
                                                return (
                                                    <div
                                                        key={tplKey}
                                                        data-alt={`mention-template-item-${tplKey}`}
                                                        className="group relative px-3 py-2 rounded-lg text-gray-200 hover:bg-white/10 transition-colors text-sm"
                                                    >
                                                        <div className={`flex items-center gap-3 cursor-pointer ${tpl.pcode === configOptions.pcode ? 'text-custom-blue' : ''}`}
                                                            onClick={() => {
                                                                setIsMentionOpen(false);
                                                                const url = (tpl as any).show_url as string | undefined;
                                                                if (url) {
                                                                    setCurrentTemplate(tpl as StoryTemplateEntity);
                                                                } else {
                                                                    setInitialTemplateId(tplKey);
                                                                    setIsModalOpen(true);
                                                                }
                                                            }}
                                                        >
                                                            <span className="truncate">{tpl.name}</span>
                                                            {/* Floating actions on hover, right-aligned and overlaying the name */}
                                                            <div className="absolute px-2 right-2 top-1/2 -translate-y-1/2 flex items-center gap-1 opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto transition-opacity z-10">
                                                                <button
                                                                    data-alt={`mention-template-use-${tplKey}`}
                                                                    className="px-0 py-1 text-xs rounded-full hover:text-custom-blue/80"
                                                                    onClick={(e) => {
                                                                        e.stopPropagation();
                                                                        setIsMentionOpen(false);
                                                                        clearTemplateSelection();
                                                                        const selected = tpl as StoryTemplateEntity;
                                                                        applyTemplateSelection(selected);
                                                                    }}
                                                                >
                                                                    <ArrowRight className="w-3.5 h-3.5" />
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                );
                                            })}
                                        </div>
                                    ) : (
                                        <div data-alt="mention-no-templates" className="text-gray-400 text-sm">No Avaliable Templates</div>
                                    )}
                                </div>
                            }
                        >
                            <button
                                data-alt="mention-button"
                                className={`w-8 h-8 rounded-full border border-white/20 bg-transparent hover:bg-white/5 hover:border-cyan-400/60 transition-all duration-200 flex items-center justify-center text-gray-300 hover:text-cyan-400 ${isTemplateSelected ? 'text-yellow-500' : ''}`}
                            >
                                <span className="text-base font-bold">@</span>
                            </button>
                        </Popover>

                        {/* Configuration - Desktop: Full Panel, Mobile: Setting Icon */}
                        {isDesktop ? (
                            <ConfigPanel
                                configOptions={configOptions}
                                onConfigChange={handleConfigChange}
                                isMobile={isMobile}
                                isDesktop={isDesktop}
                            />
                        ) : (
                            <button
                                data-alt="settings-button"
                                className="w-8 h-8 rounded-full border border-white/20 bg-transparent hover:bg-white/5 hover:border-cyan-400/60 transition-all duration-200 flex items-center justify-center text-gray-300 hover:text-cyan-400"
                                onClick={() => setConfigModalVisible(true)}
                            >
                                <SettingOutlined className="text-base" />
                            </button>
                        )}
                    </div>

                    {/* Right Side - Create Button */}
                    <button
                        data-alt="create-button"
                        className="w-8 h-8 rounded-full bg-black hover:bg-gray-900 border border-white/20 hover:border-cyan-400/60 transition-all duration-200 flex items-center justify-center text-white shadow-lg hover:shadow-cyan-400/20 disabled:opacity-50 disabled:cursor-not-allowed"
                        onClick={handleCreate}
                        disabled={isCreating}
                    >
                        {isCreating ? (
                            <span className="animate-spin inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full" />
                        ) : (
                            <ArrowRightOutlined className="text-base font-bold" />
                        )}
                    </button>
                </div>
            </div>

            {/* Mobile Configuration Modal */}
            <MobileConfigModal
                visible={configModalVisible}
                onClose={() => setConfigModalVisible(false)}
                configOptions={configOptions}
                onConfigChange={handleConfigChange}
            />

            {/* Add Item Modal */}
            <AddItemModal
                visible={addItemModalVisible}
                onClose={() => {
                    setAddItemModalVisible(false);
                    setCurrentItemType(null);
                    setEditingIndex(null);
                }}
                itemType={currentItemType}
                onSubmit={handleItemSubmit}
                editData={
                    editingIndex !== null && photos[editingIndex]
                        ? {
                            index: editingIndex,
                            name: photos[editingIndex].name,
                            description: photos[editingIndex].description,
                            imageUrl: photos[editingIndex].url,
                        }
                        : undefined
                }
            />
            <PcTemplateModal
                isTemplateCreating={isTemplateCreating}
                setIsTemplateCreating={setIsTemplateCreating}
                isRoleGenerating={isRoleGenerating}
                setIsRoleGenerating={setIsRoleGenerating}
                isItemGenerating={isItemGenerating}
                setIsItemGenerating={setIsItemGenerating}
                isOpen={isModalOpen}
                onClose={() => setIsModalOpen(false)}
                initialTemplateId={initialTemplateId}
                configOptions={{ mode: "auto", resolution: "720p", language: "english", videoDuration: "auto" }}
            />
            <TemplatePreviewModal
                open={!!currentTemplate && !!currentTemplate.show_url}
                videoUrl={currentTemplate?.show_url || ''}
                onClose={() => setCurrentTemplate(null)}
                title={currentTemplate?.name || ''}
                description={currentTemplate?.generateText || currentTemplate?.name}
                onPrimaryAction={() => {
                    if (!currentTemplate) return;
                    clearTemplateSelection();
                    applyTemplateSelection(currentTemplate);
                    setCurrentTemplate(null)
                }}
                primaryLabel="Try it Free"
            />
        </div>
    );
}