import React, { useState, useRef, useEffect, useCallback } from 'react';
import { useLocation } from 'react-router-dom';

// AI 创作对话框样式优化版 v12：白色极简高级风格，选项按钮、标题、头像与关键字统一使用 #8b5cf6。

import {
  Layout,
  Button,
  Input,
  Select,
  message,
  Space,
  Typography,
  Tooltip,
  Popconfirm,
  Modal,
  App,
} from 'antd';

import bg1 from '../assets/bg1.png';
import bg2 from '../assets/bg2.png';
import bg3 from '../assets/bg3.png';
import text from '../assets/testb.png';

import UploadSelector from '../components/UploadSelector';
import GenerationTaskResourceGrid from '../components/generation/GenerationTaskResourceGrid';



import {
  getParameters, createGenerationTask, getgen_list, getEngine, uploadImage,uploadAudio,
  uploadVideo, getCreditRatios, deleteHistory, calculateCredits
} from '../api';

import { useAppStore } from '../store/useAppStore';
import { PrivatePortraitAssetPicker } from '../components/privatePortrait';
import type { PrivatePortraitLibraryType, PrivatePortraitSelectableAsset, UploadResourceHistoryItem } from '../types';

import {
  PlusOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  SendOutlined,
  DeleteOutlined,
  CloseOutlined,
  RobotOutlined,
  LoadingOutlined,
  PictureOutlined,
  VideoCameraOutlined,
  CaretDownOutlined,
  SwapOutlined,
  WarningOutlined,
  SettingOutlined,
  LayoutOutlined,
  ArrowUpOutlined,
  DownloadOutlined,
  ReloadOutlined,
  AudioOutlined,
  PauseOutlined,

} from '@ant-design/icons';
import { div } from 'three/tsl';

const { Header, Sider, Content } = Layout;
// 解构Input组件
const { TextArea } = Input;
// 解构Select组件
const { Option } = Select;
// 解构Typography组件
const { Text } = Typography;

const GENERATION_RESOURCE_BASE = (import.meta.env.VITE_API_BASE || 'http://localhost:8000')
  .replace(/\/api\/?$/i, '')
  .replace(/\/$/, '');
const resolveGenerationResourceUrl = (url?: string | null): string => {
  if (!url) return '';
  const value = String(url).trim();
  if (!value) return '';
  if (/^(https?:)?\/\//i.test(value) || /^(blob|data):/i.test(value)) return value;
  return `${GENERATION_RESOURCE_BASE}${value.startsWith('/') ? value : `/${value}`}`;
};


interface MediaReference {
  name: string;
  type: 'image' | 'video' | 'audio';
  url: string;
  duration?: number;
  role?: string;
  label?: string;
  source?: string;
  private_asset_id?: string;
  remote_asset_id?: string;
  upload_resource_id?: string;
  fileSizeBytes?: number;
}


interface Message {
  id: string;
  original_prompt: string;
  gen_type: string;
  idempotency_key: string;
  media_references?: MediaReference[];
  image_size?: string;
  image_proportion?: string;
  image_px?: string;
  duration?: number;
  ratio?: string;
  resolution?: string;
  timestamp?: string;
  engine_id: string;
  generation_count: number;
}


interface Conversation {
  id: string;
  title: string;
  lastMessage: string;
  timestamp: string;
  messages: any;
}


const mockUpload = (file: File): Promise<{ url: string }> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      // 使用URL.createObjectURL创建本地文件预览URL
      const url = URL.createObjectURL(file);
      resolve({ url });
    }, 500);
  });
};




const AIChatPage: React.FC = () => {
  // ==================== 状态定义 ====================
  const { message: antdMessage } = App.useApp();
  const location = useLocation();

  const [collapsed, setCollapsed] = useState<boolean>(false);

  const [currentConversationId, setCurrentConversationId] = useState<string | null>('1');

  const [conversations, setConversations] = useState<Conversation[]>([
  ]);

  // 从 store 读取生成配置状态（包括输入框内容）
  const {
    mediaType,
    countType,
    generationCount,
    selectedRatio,
    selectedResolution,
    width,
    height,
    videoDuration,
    videoAspectRatio,
    videoResolution,
    engineOptions,
    enginesele,
    inputValue,
    setMediaType,
    setCountType,
    setGenerationCount,
    setSelectedRatio,
    setSelectedResolution,
    setWidth,
    setHeight,
    setVideoDuration,
    setVideoAspectRatio,
    setVideoResolution,
    setEngineOptions,
    setEnginesele,
    setInputValue,
    currentMedia,
    setCurrentMedia,
  } = useAppStore();

  // 获取当前选中引擎的媒体上传限制
  const enginesData = Array.isArray(enginesele) ? {} : enginesele;
  const currentEngineList = mediaType === 'image' ? enginesData.image : enginesData.video;
  const currentEngine = currentEngineList?.find((e: any) => e.id === countType);
  const maxImageCount = currentEngine?.maxImageCount ?? 4;
  const maxVideoCount = currentEngine?.maxVideoCount ?? 1;
  const multiGenerationEnabled = Boolean(currentEngine?.multiGenerationEnabled);
  const configuredMaxGenerationCount = multiGenerationEnabled
    ? Math.max(1, Math.min(5, Number(currentEngine?.maxGenerationCount || 1)))
    : 1;
  const referenceImageCount = mediaType === 'image'
    ? currentMedia.filter((item) => item.type === 'image').length
    : 0;
  const imageProviderRemainingCount = mediaType === 'image'
    ? Math.max(1, Number(currentEngine?.multiImageMaxImages || 15) - referenceImageCount)
    : 5;
  const effectiveMaxGenerationCount = Math.max(
    1,
    Math.min(
      5,
      configuredMaxGenerationCount,
      mediaType === 'image' ? imageProviderRemainingCount : 5,
    ),
  );

  const [uploading, setUploading] = useState<boolean>(false);

  const [loading, setLoading] = useState<boolean>(false);

  const [enginesLoaded, setEnginesLoaded] = useState(false);

  const [referenceMode, setReferenceMode] = useState<'universal' | 'first_last_frame'>('universal');
  const [firstFrame, setFirstFrame] = useState<MediaReference | null>(null);
  const [lastFrame, setLastFrame] = useState<MediaReference | null>(null);
  const [uploadTarget, setUploadTarget] = useState<'first' | 'last' | null>(null);
  const [referenceModeDropdownVisible, setReferenceModeDropdownVisible] = useState(false);
  const [privateAssetPickerOpen, setPrivateAssetPickerOpen] = useState(false);
  const [privateAssetPickerLibraryType, setPrivateAssetPickerLibraryType] = useState<PrivatePortraitLibraryType>('real_person');
  const [mediaStackHovered, setMediaStackHovered] = useState(false);
  const mediaStackCloseTimerRef = useRef<number | null>(null);
  const openMediaStackTray = useCallback(() => {
    if (mediaStackCloseTimerRef.current) {
      window.clearTimeout(mediaStackCloseTimerRef.current);
      mediaStackCloseTimerRef.current = null;
    }
    setMediaStackHovered(true);
  }, []);
  const closeMediaStackTray = useCallback(() => {
    if (mediaStackCloseTimerRef.current) {
      window.clearTimeout(mediaStackCloseTimerRef.current);
    }
    mediaStackCloseTimerRef.current = window.setTimeout(() => {
      setMediaStackHovered(false);
      mediaStackCloseTimerRef.current = null;
    }, 260);
  }, []);

  // @ 提及相关状态
  const [mentionVisible, setMentionVisible] = useState(false);
  const mentionInputRef = useRef<any>(null);
  const isReEditingRef = useRef(false);
  const [mentionPosition, setMentionPosition] = useState({ top: 0, left: 0 });

  // 数字转中文数字（一、二、三、四）
  const numberToChinese = (num: number): string => {
    const map = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
    if (num <= 10) return map[num];
    if (num < 20) return '十' + map[num % 10];
    if (num < 100) {
      const tens = Math.floor(num / 10);
      const ones = num % 10;
      return map[tens] + '十' + (ones ? map[ones] : '');
    }
    return String(num);
  };

  // 根据媒体列表生成标签（图片一、图片二、视频一、视频二...）
  const generateMediaLabels = (media: { type: 'image' | 'video' | 'audio' }[]) => {
    let imgCount = 0;
    let vidCount = 0;
    let audCount = 0;
    return media.map((m) => {
      if (m.type === 'image') {
        imgCount++;
        return `图片${imgCount}`;
      } else if (m.type === 'video') {
        vidCount++;
        return `视频${vidCount}`;
      } else {
        audCount++;
        return `音频${audCount}`;
      }
    });
  };

  const [previewVisible, setPreviewVisible] = useState<boolean>(false);
  const [previewUrl, setPreviewUrl] = useState<string>('');
  const [previewType, setPreviewType] = useState<'image' | 'video'>('image');
  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    if (previewVisible && previewType === 'video') {
      const playVideo = () => {
        if (videoRef.current) {
          videoRef.current.play().catch(() => {});
        }
      };
      
      if (videoRef.current) {
        if (videoRef.current.readyState >= 2) {
          playVideo();
        } else {
          videoRef.current.addEventListener('loadedmetadata', playVideo);
        }
      }
      
      const timer = setTimeout(playVideo, 300);
      
      return () => {
        clearTimeout(timer);
        if (videoRef.current) {
          videoRef.current.removeEventListener('loadedmetadata', playVideo);
          videoRef.current.pause();
        }
      };
    } else {
      if (videoRef.current) {
        videoRef.current.pause();
      }
    }
  }, [previewVisible, previewType]);

  // 提示词展开状态
  const [expandedPrompts, setExpandedPrompts] = useState<Set<string>>(new Set());

  // 从URL中提取exp时间戳（支持相对路径和完整URL）
  const extractExpTimestamp = (url: string): number | null => {
    if (!url) return null;

    try {
      // 尝试作为完整URL解析
      const urlObj = new URL(url);
      const expStr = urlObj.searchParams.get('exp');
      if (expStr) {
        return parseInt(expStr, 10);
      }
      return null;
    } catch {
      // 如果完整URL解析失败，尝试解析相对路径中的查询参数
      try {
        // 查找 ? 后面的部分
        const queryStart = url.indexOf('?');
        if (queryStart !== -1) {
          const queryString = url.substring(queryStart + 1);
          const params = new URLSearchParams(queryString);
          const expStr = params.get('exp');
          if (expStr) {
            return parseInt(expStr, 10);
          }
        }
        return null;
      } catch {
        return null;
      }
    }
  };

  // 检查媒体是否过期
  const isMediaExpired = (url: string): boolean => {
    const expTimestamp = extractExpTimestamp(url);
    if (!expTimestamp) {
      return false; // 没有exp参数，视为不过期
    }
    const currentTimestamp = Math.floor(Date.now() / 1000);
    return currentTimestamp > expTimestamp;
  };

  // 附件预览弹窗状态（独立弹窗）
  const [attachmentPreviewVisible, setAttachmentPreviewVisible] = useState<boolean>(false);
  const [attachmentPreviewUrl, setAttachmentPreviewUrl] = useState<string>('');
  const [attachmentPreviewType, setAttachmentPreviewType] = useState<'image' | 'video' | 'audio'>('image');
  const [attachmentPreviewName, setAttachmentPreviewName] = useState<string>('');
  const attachmentPreviewVideoRef = useRef<HTMLVideoElement>(null);

  // 弹窗打开时自动播放视频，关闭时停止
  useEffect(() => {
    if (attachmentPreviewVisible && attachmentPreviewType === 'video' && attachmentPreviewVideoRef.current) {
      const v = attachmentPreviewVideoRef.current;
      v.currentTime = 0;
      v.muted = false;
      const playPromise = v.play();
      if (playPromise && typeof playPromise.catch === 'function') {
        playPromise.catch(() => {
          // 自动播放被阻止时静音重试
          v.muted = true;
          v.play().catch(() => {});
        });
      }
    } else if (!attachmentPreviewVisible && attachmentPreviewVideoRef.current) {
      const v = attachmentPreviewVideoRef.current;
      v.pause();
      v.muted = true;
      v.currentTime = 0;
    }
  }, [attachmentPreviewVisible, attachmentPreviewType, attachmentPreviewUrl]);
  const [playingAudioUrl, setPlayingAudioUrl] = useState<string | null>(null);
  const [audioProgress, setAudioProgress] = useState(0);

  // 附件详情悬浮窗状态
  const [attachmentPopupVisible, setAttachmentPopupVisible] = useState<boolean>(false);
  const [attachmentPopupMessageId, setAttachmentPopupMessageId] = useState<string | null>(null);
  const [attachmentPopupPosition, setAttachmentPopupPosition] = useState({ x: 0, y: 0 });

  const [showImageSettingsModal, setShowImageSettingsModal] = useState(false);
  const [showVideoSettingsModal, setShowVideoSettingsModal] = useState(false);
  const [ratioOptions, setRatioOptions] = useState([]);
  const [resolutionOptions, setResolutionOptions] = useState([]);
  const [currentEngineSupportedSizes, setCurrentEngineSupportedSizes] = useState<Record<string, Record<string, string>>>({});

  const [showEngineModal, setShowEngineModal] = useState(false);
  const [showMediaTypeModal, setShowMediaTypeModal] = useState(false);

  const [creditRatios, setCreditRatios] = useState<any[]>([]);
  const [cimage, setCimage] = useState<any[]>([]);
  const [creditCalculationData, setCreditCalculationData] = useState<any[]>([]);

  // 获取预估积分 - 根据引擎ID、类型和分辨率计算
  const getEstimatedCredits = (): number => {
    // 根据当前选择的引擎ID、类型和分辨率查找对应的积分配置
    let config: any = {};
    config = creditCalculationData.find((item: any) =>
      item.modelConfigId === countType &&
      item.genType === mediaType &&
      item.resolution === (mediaType === 'video' ? videoResolution : selectedResolution)
    );

    if (!config) {
      if (mediaType === 'video') {
        // 如果没有找到对应的配置，则使用默认配置
        config = {
          perSecondCredits: 2,
          baseCredits: 60,
          ratio: 1.3,
          inputVideoRatio: 1.3,
          inputVideoBaseCredits: 0,
          inputVideoPerSecondCredits: 15,
          inputImageRatio: 1,
          inputImageBaseCredits: 0,
          inputImagePerImageCredits: 0.0,
        };
        if (videoResolution === '1080p') {
          config.ratio = 1.3;
        } else if (videoResolution === '720p') {
          config.ratio = 1.3;
        } else if (videoResolution === '480p') {
          config.ratio = 1.3;
        }
      }
      else {
        // 如果没有找到对应的配置，则使用默认配置
        config = {
          perSecondCredits: 0.1,
          baseCredits: 2,
          ratio: 3,
          inputImageRatio: 1,
          inputImageBaseCredits: 0,
          inputImagePerImageCredits: 0.0,
        };
        if (selectedResolution === '2K') {
          config.ratio = 3;
        } else if (selectedResolution === '4K') {
          config.ratio = 3;
        } else if (selectedResolution === '1K') {
          config.ratio = 3;
        }
      }
    }

    // 根据配置计算积分（保留两位小数，不做取整）
    if (mediaType === 'video') {
      // 视频：(秒数 × perSecondCredits + baseCredits) × ratio
      let total = (videoDuration * config.perSecondCredits + config.baseCredits) * config.ratio;
      // 传入视频积分
      const inputVideoDuration = currentMedia
        .filter((m) => m.type === 'video')
        .reduce((sum, m) => sum + (m.duration || 0), 0);
      if (inputVideoDuration > 0) {
        const inputVideoCost = ((config.inputVideoBaseCredits || 0) + (config.inputVideoPerSecondCredits || 0) * inputVideoDuration) * (config.inputVideoRatio || 1);
        total += inputVideoCost;
      }
      // 传入图片积分
      const inputImageCount = currentMedia
        .filter((m) => m.type === 'image')
        .length;
      if (inputImageCount > 0) {
        const inputImageCost = ((config.inputImageBaseCredits || 0) + (config.inputImagePerImageCredits || 0) * inputImageCount) * (config.inputImageRatio || 1);
        total += inputImageCost;
      }
      return Number((total * generationCount).toFixed(2));
    } else {
      // 图片：baseCredits × ratio
      let total = config.baseCredits * config.ratio;
      // 传入图片积分
      const inputImageCount = currentMedia
        .filter((m) => m.type === 'image')
        .length;
      if (inputImageCount > 0) {
        const inputImageCost = ((config.inputImageBaseCredits || 0) + (config.inputImagePerImageCredits || 0) * inputImageCount) * (config.inputImageRatio || 1);
        total += inputImageCost;
      }
      return Number((total * generationCount).toFixed(2));
    }
  };

  const messagesEndRef = useRef<HTMLDivElement>(null);
  const scrollContainerRef = useRef<HTMLDivElement>(null);
  const pollingRef = useRef<number | null>(null);
  const isFirstLoadRef = useRef<boolean>(true);
  const isInitialLoadDone = useRef(false);
  const lastAutoScrollTime = useRef(0);

  const currentConversation = conversations.find((c) => c.id === currentConversationId);


  const [gen_list, setGen_list] = useState<any>([]);

  const [Pagebreak, setPagebreak] = useState<any>({
    page: 1,
    pageSize: 20,
  });
  const [Totalnumber, setTotalnumber] = useState<any>(0);
  const [isLoadingMore, setIsLoadingMore] = useState(false);
  // ==================== 副作用 ====================

  useEffect(() => {
    const state = location.state as any;
    
    if (state) {
      if (state.generationPrompt) {
        setInputValue(state.generationPrompt);
      }
      if (state.mediaReferences && Array.isArray(state.mediaReferences) && state.mediaReferences.length > 0) {
        const mediaItems: MediaReference[] = state.mediaReferences.map((ref: any) => {
          const url = ref.url || ref.resourceUrl || ref.previewUrl || '';
          const fullUrl = url.startsWith('http') ? url : `${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${url}`;
          return {
            ...ref,
            name: ref.name || `参考${ref.type}`,
            type: ref.type === 'video' ? 'video' : ref.type === 'audio' ? 'audio' : 'image',
            url: fullUrl,
            duration: ref.duration || 0,
            label: ref.label || '',
          };
        });
        setCurrentMedia(mediaItems);
      }
      if (state.aspectRatio) {
        setVideoAspectRatio(state.aspectRatio);
      }
      window.history.replaceState({}, '', window.location.pathname);
    }
  }, [location.state]);

  // 滚动到底部的辅助函数
  useEffect(() => {
    return () => {
      if (mediaStackCloseTimerRef.current) {
        window.clearTimeout(mediaStackCloseTimerRef.current);
      }
    };
  }, []);

  const scrollToBottom = useCallback((behavior: ScrollBehavior = 'instant') => {
    const scrollContainer = scrollContainerRef.current;
    if (!scrollContainer) return;

    lastAutoScrollTime.current = Date.now();

    const doScroll = () => {
      scrollContainer.scrollTo({ top: scrollContainer.scrollHeight, behavior });
    };

    requestAnimationFrame(doScroll);
  }, []);

  // 初次打开或页面刷新时自动滚动到底部（只在初始加载时执行一次）
  useEffect(() => {
    if (gen_list.length > 0 && !isInitialLoadDone.current) {
      const timer = setTimeout(() => {
        scrollToBottom('smooth');
        isInitialLoadDone.current = true;
      }, 300);
      return () => clearTimeout(timer);
    }
  }, [gen_list.length, scrollToBottom]);

  useEffect(() => {
    if (isReEditingRef.current) {
      isReEditingRef.current = false;
      return;
    }
    if (!enginesLoaded) return;
    const enginesData = Array.isArray(enginesele) ? {} : enginesele;
    const newOptions = mediaType === 'image' ? enginesData.image : enginesData.video;
    if (newOptions && newOptions.length > 0) {
      const isValidOption = newOptions.some((item: any) => item.id === countType);
      if (!isValidOption) {
        setCountType(newOptions[0].id);
      }
    }
  }, [mediaType, enginesele, enginesLoaded]);

  // 切换媒体类型或引擎时，默认回到最安全的单份生成。
  useEffect(() => {
    if (!enginesLoaded) return;
    setGenerationCount(1);
  }, [mediaType, countType, enginesLoaded, setGenerationCount]);

  // 图片参考图数量变化后动态收敛本次可选数量；后端仍会再次校验。
  useEffect(() => {
    if (generationCount > effectiveMaxGenerationCount) {
      setGenerationCount(effectiveMaxGenerationCount);
      if (mediaType === 'image') {
        antdMessage.info(`受当前引擎或参考图数量限制，本次最多生成 ${effectiveMaxGenerationCount} 份`);
      }
    }
  }, [generationCount, effectiveMaxGenerationCount, mediaType, setGenerationCount, antdMessage]);

  // 点击外部关闭弹窗
  useEffect(() => {
    const handleClickOutside = (e: MouseEvent) => {
      const target = e.target as HTMLElement;
      // 关闭媒体类型选择弹窗
      if (showMediaTypeModal && !target.closest('.image-settings-popover') && !target.closest('.image-settings-trigger')) {
        setShowMediaTypeModal(false);
      }
      // 关闭引擎选择弹窗
      if (showEngineModal && !target.closest('.image-settings-popover') && !target.closest('.image-settings-trigger')) {
        setShowEngineModal(false);
      }
      // 关闭图片设置弹窗
      if (showImageSettingsModal && !target.closest('.image-settings-popover') && !target.closest('.image-settings-trigger')) {
        setShowImageSettingsModal(false);
      }
      // 关闭视频设置弹窗
      if (showVideoSettingsModal && !target.closest('.image-settings-popover') && !target.closest('.image-settings-trigger')) {
        setShowVideoSettingsModal(false);
      }
      // 关闭参考模式选择弹窗
      if (referenceModeDropdownVisible && !target.closest('.image-settings-popover') && !target.closest('.image-settings-trigger')) {
        setReferenceModeDropdownVisible(false);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [showMediaTypeModal, showEngineModal, showImageSettingsModal, showVideoSettingsModal, referenceModeDropdownVisible]);

  useEffect(() => {
    if (isReEditingRef.current) {
      isReEditingRef.current = false;
      return;
    }
    if (mediaType !== 'video') return;
    const engine = enginesData.video?.find((e: any) => e.id === countType);
    if (!engine) return;

    const supportsFLF = engine.supportsFirstLastFrame ?? false;
    const supportsUR = engine.supportsUniversalReference ?? true;

    setReferenceMode((prevMode) => {
      if (supportsUR) return 'universal';
      if (prevMode === 'universal' && !supportsUR) {
        if (supportsFLF) return 'first_last_frame';
      }
      return prevMode;
    });
  }, [countType, mediaType, enginesele]);

  // 初始化获取参数 - 只在组件挂载时执行一次
  useEffect(() => {
    getEngine()
      .then((data: any) => {
        // console.log('引擎', data);

        setEnginesele(data.engine);
        setEnginesLoaded(true);

        // 如果是视频模式，初始化视频参数选项
        if (data.engine.video && data.engine.video.length > 0) {
          const defaultEngine = data.engine.video[0];

          // 查找用户之前选择的引擎（如果存在）
          const savedEngine = data.engine.video.find((e: any) => e.id === countType);
          const targetEngine = savedEngine || defaultEngine;

          // 更新引擎选项为当前引擎支持的参数
          setEngineOptions({
            ratios: targetEngine.supportedRatios || ['16:9', '4:3', '1:1', '3:4', '9:16', '21:9'],
            resolutions: targetEngine.supportedResolutions || ['480p', '720p', '1080p'],
            durations: targetEngine.supportedDurations || [5, 8, 10, 12, 15],
          });

          // 确保视频参数在引擎支持的范围内
          if (!targetEngine.supportedRatios?.includes(videoAspectRatio)) {
            setVideoAspectRatio(targetEngine.supportedRatios?.[0] || '16:9');
          }
          if (!targetEngine.supportedResolutions?.includes(videoResolution)) {
            setVideoResolution(targetEngine.supportedResolutions?.[0] || '720p');
          }
          if (!targetEngine.supportedDurations?.includes(videoDuration)) {
            setVideoDuration(targetEngine.supportedDurations?.[0] || 5);
          }

          // 如果之前没有选择过引擎（还是默认值），才设置默认引擎
          if (countType === '请选择') {
            setCountType(targetEngine.id);
          }
        }

        if (data.engine.image && data.engine.image.length > 0) {
          const savedImageEngine = data.engine.image.find((e: any) => e.id === countType);
          const targetImageEngine = savedImageEngine || data.engine.image[0];

          const supportedSizes = targetImageEngine.supportedSizes || {};
          const resolutionLevels = Object.keys(supportedSizes).sort((a, b) => {
            const levelOrder = { '1K': 0, '2K': 1, '4K': 2 };
            return (levelOrder[a] || 0) - (levelOrder[b] || 0);
          });

          const primaryResolution = resolutionLevels[0] || '2K';
          const supportedResolutions = Object.keys(supportedSizes[primaryResolution] || {});

          const newRatioOptions = supportedResolutions.map((res: any) => ({
            value: res,
            label: res,
          }));
          setRatioOptions(newRatioOptions);
          setCurrentEngineSupportedSizes(supportedSizes);
          setResolutionOptions(resolutionLevels.map((level) => {
            const match = level.match(/(\d+)K/);
            const num = match ? parseInt(match[1]) : 1;
            const labels: Record<number, string> = { 1: '标清', 2: '高清', 4: '超清' };
            return {
              value: level,
              label: `${labels[num] || '高清'} ${level}`,
            };
          }));

          if (supportedSizes[primaryResolution] && supportedSizes[primaryResolution][supportedResolutions[0]]) {
            const defaultSize = supportedSizes[primaryResolution][supportedResolutions[0]];
            const [w, h] = defaultSize.split(/[×x]/);
            setWidth(Number(w));
            setHeight(Number(h));
            setSelectedRatio(supportedResolutions[0]);
            setSelectedResolution(primaryResolution);
          }

          if (countType === '请选择') {
            setCountType(targetImageEngine.id);
          }
        }
      })
      .catch(() => {
      });
    calculateCredits().then((data: any) => {
      // console.log('积分计算', data);
      // 保存积分计算数据
      setCreditCalculationData(data);
    })
    getgen_list(Pagebreak).then((data: any) => {
      // API 按创建时间倒序返回；对话区按时间正序展示，最新消息保持在底部。
      const mess_list = data.items
      const total = data.total
      setGen_list(mess_list)
      setTotalnumber(total)
    })
    // getParameters()
    //   .then((data) => {
    //     let supportedSizes = (data as any).items?.[0]?.supportedSizes || {};
    //     let supportedResolutions = [];
    //     let twokwidth = [];
    //     let fourkwidth = [];

    //     for (let key in supportedSizes["2K"]) {
    //       supportedResolutions.push(key);
    //       twokwidth.push(supportedSizes["2K"][key]);
    //     }

    //     const newRatioOptions = supportedResolutions.map((res: any, index: number) => ({
    //       value: res,
    //       label: String(index),
    //     }));
    //     setRatioOptions(newRatioOptions);

    //     for (let key in supportedSizes["4K"]) {
    //       fourkwidth.push(supportedSizes["4K"][key]);
    //     }

    //     const newWidthandHeight = [twokwidth, fourkwidth];
    //     setWidthandHeight(newWidthandHeight);
    //     setResolutionOptions([
    //       { value: '2K', label: '高清 2K' },
    //       { value: '4K', label: '超清 4K' },
    //     ]);
    //   })
    //   .catch(() => { });
  }, []);


  // 轮询逻辑 - 当有任务在生成时，每5秒查询一次状态
  useEffect(() => {
    // 先清理之前的定时器
    if (pollingRef.current) {
      clearInterval(pollingRef.current);
      pollingRef.current = null;
    }

    // 判断是否有正在生成的任务
    const hasGeneratingTask = gen_list.some((item: any) => item.status === 'generating');

    if (!hasGeneratingTask) return;

    // 设置5秒轮询
    pollingRef.current = window.setInterval(() => {
      getgen_list(Pagebreak).then((data: any) => {
        // 只更新正在生成的任务，不影响其他已加载的数据
        setGen_list((prevList: any[]) => {
          return prevList.map((prevItem: any) => {
            // 只更新正在生成的任务
            if (prevItem.status === 'generating') {
              const newItem = data.items.find((item: any) => item.id === prevItem.id);
              // 如果找到了对应的新数据，使用新数据；否则保持旧数据
              return newItem || prevItem;
            }
            // 非生成中的任务保持不变
            return prevItem;
          });
        });
        setTotalnumber(data.total);
      }).catch((error) => {
      });
    }, 10000);

    // 清理定时器
    return () => {
      if (pollingRef.current) {
        clearInterval(pollingRef.current);
        pollingRef.current = null;
      }
    };
  }, [gen_list, Pagebreak]);

  // 点击空白处关闭图片设置浮层
  useEffect(() => {
    if (!showImageSettingsModal) return;
    const handleClickOutside = (e: MouseEvent) => {
      const target = e.target as HTMLElement;
      if (
        !target.closest(".image-settings-popover") &&
        !target.closest(".image-settings-trigger")
      ) {
        setShowImageSettingsModal(false);
      }
    };
    document.addEventListener("click", handleClickOutside);
    return () => document.removeEventListener("click", handleClickOutside);
  }, [showImageSettingsModal]);

  useEffect(() => {
    if (!showVideoSettingsModal) return;
    const handleClickOutside = (e: MouseEvent) => {
      const target = e.target as HTMLElement;
      if (
        !target.closest(".image-settings-popover") &&
        !target.closest(".image-settings-trigger")
      ) {
        setShowVideoSettingsModal(false);
      }
    };
    document.addEventListener("click", handleClickOutside);
    return () => document.removeEventListener("click", handleClickOutside);
  }, [showVideoSettingsModal]);

  // 根据比例和分辨率计算尺寸
  const calculateSizeFromRatione = (ratio: string) => {
    const resolutionLevels = Object.keys(currentEngineSupportedSizes).sort((a, b) => {
      const levelOrder: Record<string, number> = { '1K': 0, '2K': 1, '4K': 2 };
      return (levelOrder[a] || 0) - (levelOrder[b] || 0);
    });

    const targetResolution = currentEngineSupportedSizes[selectedResolution] && currentEngineSupportedSizes[selectedResolution][ratio]
      ? selectedResolution
      : resolutionLevels.find(level => currentEngineSupportedSizes[level] && currentEngineSupportedSizes[level][ratio]) || resolutionLevels[0];

    if (targetResolution && currentEngineSupportedSizes[targetResolution] && currentEngineSupportedSizes[targetResolution][ratio]) {
      const size = currentEngineSupportedSizes[targetResolution][ratio];
      const [w, h] = size.split(/[×x]/);
      setWidth(Number(w));
      setHeight(Number(h));
      setSelectedRatio(ratio);
      setSelectedResolution(targetResolution);
    }
  };

  const calculateSizeFromRatiotwo = (resolution: string) => {
    if (!currentEngineSupportedSizes[resolution]) {
      const resolutionLevels = Object.keys(currentEngineSupportedSizes).sort((a, b) => {
        const levelOrder: Record<string, number> = { '1K': 0, '2K': 1, '4K': 2 };
        return (levelOrder[a] || 0) - (levelOrder[b] || 0);
      });
      resolution = resolutionLevels[0] || resolution;
    }

    const supportedRatios = currentEngineSupportedSizes[resolution] ? Object.keys(currentEngineSupportedSizes[resolution]) : [];
    
    const newRatioOptions = supportedRatios.map((res: any) => ({
      value: res,
      label: res,
    }));
    setRatioOptions(newRatioOptions);

    const targetRatio = supportedRatios.includes(selectedRatio)
      ? selectedRatio
      : supportedRatios[0] || '';

    if (targetRatio && currentEngineSupportedSizes[resolution] && currentEngineSupportedSizes[resolution][targetRatio]) {
      const size = currentEngineSupportedSizes[resolution][targetRatio];
      const [w, h] = size.split(/[×x]/);
      setWidth(Number(w));
      setHeight(Number(h));
      setSelectedRatio(targetRatio);
      setSelectedResolution(resolution);
    }
  };

  // 交换宽高
  const handleSwap = () => {
    setWidth(height);
    setHeight(width);
  };

  const currentVideoEngine = enginesele?.video?.find((e: any) => e.id === countType);
  const supportsFirstLastFrame = currentVideoEngine?.supportsFirstLastFrame ?? false;
  const supportsUniversalReference = currentVideoEngine?.supportsUniversalReference ?? true;

  const handleReferenceModeChange = (mode: 'universal' | 'first_last_frame') => {
    if (mode === 'first_last_frame' && !supportsFirstLastFrame) return;
    if (mode === 'universal' && !supportsUniversalReference) return;
    setReferenceMode(mode);
    setReferenceModeDropdownVisible(false);
    setCurrentMedia([]);
    setInputValue('');
  };

  const handleSwapFrames = () => {
    const temp = firstFrame;
    setFirstFrame(lastFrame);
    setLastFrame(temp);
  };

  const handleRemoveFirstFrame = () => {
    setFirstFrame(null);
    setLastFrame(null);
  };

  const handleRemoveLastFrame = () => {
    setLastFrame(null);
  };

  // ==================== 事处理函数 ====================

  const handleNewChat = () => {
    // 生成唯一ID（使用时间戳）
    const newId = Date.now().toString();
    const newConversation: Conversation = {
      id: newId,
      title: '新对话',
      lastMessage: '',
      timestamp: new Date().toLocaleString('zh-CN'),
      messages: [],
    };

    // 将新对话插入到列表顶部
    setConversations((prev) => [newConversation, ...prev]);
    // 切换到新对话
    setCurrentConversationId(newId);
    // 清空输入框和已上传媒体
    setInputValue('');
    setCurrentMedia([]);
    setFirstFrame(null);
    setLastFrame(null);
    // 显示提示消息
    antdMessage.info('已开启新对话');

  };


  const handleDeleteChat = (conversationId: string) => {
    // 过滤掉要删除的对话
    setConversations((prev) => prev.filter((c) => c.id !== conversationId));
    // 如果删除的是当前选中的对话，切换到其他对话
    if (currentConversationId === conversationId) {
      setCurrentConversationId(
        conversations[0]?.id === conversationId
          ? conversations[1]?.id || null
          : conversations[0]?.id || null
      );
    }
    // 显示成功提示
    antdMessage.success('对话已删除');
  };


  const handleSelectChat = (conversationId: string) => {
    setCurrentConversationId(conversationId);
    setCurrentMedia([]);
    setFirstFrame(null);
    setLastFrame(null);
  };


  const handleSend = async () => {
    const isFirstLastFrameMode = mediaType === 'video' && referenceMode === 'first_last_frame';

    if (isFirstLastFrameMode) {
      if (!inputValue.trim()) {
        antdMessage.warning('请输入内容');
        return;
      }
    } else {
      if (!inputValue.trim() && currentMedia.length === 0) {
        antdMessage.warning('请输入内容或上传图片/视频');
        return;
      }
    }

    let mediaReferences: MediaReference[] | undefined;
    if (isFirstLastFrameMode) {
      mediaReferences = [];
      if (firstFrame) {
        mediaReferences.push({ ...firstFrame, role: 'first_frame' });
      }
      if (lastFrame) {
        mediaReferences.push({ ...lastFrame, role: 'last_frame' });
      }
      if (mediaReferences.length === 0) {
        mediaReferences = undefined;
      }
    } else {
      if (currentMedia.length > 0) {
        mediaReferences = currentMedia.map((m) => {
          if (m.type === 'image') {
            const { duration, ...rest } = m;
            return rest;
          }
          return m;
        });
      } else {
        mediaReferences = undefined;
      }
    }


    // console.log(mediaReferences);

    // 创建用户消息对象
    const newMessage: Message = {
      id: '',
      gen_type: mediaType,
      original_prompt: inputValue.trim(),
      engine_id: countType,

      idempotency_key: new Date().toLocaleString('zh-CN'),
      generation_count: generationCount,
      media_references: mediaReferences,
      // 图片参数（仅图片模式时添加）
      ...(mediaType === 'image' && {
        image_size: selectedResolution,
        image_proportion: selectedRatio,
        image_px: width + "x" + height,
      }),
      // 视频参数（仅视频模式时添加）
      ...(mediaType === 'video' && {
        duration: videoDuration,
        aspect_ratio: videoAspectRatio,
        resolution: videoResolution,
      }),
    };






    // 设置加载状态
    setLoading(true);

    createGenerationTask(newMessage).then(() => {
      // 创建任务成功后，清空输入框和已上传媒体
      setInputValue('');
      setCurrentMedia([]);
      setFirstFrame(null);
      setLastFrame(null);
      setGenerationCount(1);

      // 创建任务成功后，重置页数为1，获取最新列表
      const newPagebreak = { ...Pagebreak, page: 1 };
      setPagebreak(newPagebreak);

      getgen_list(newPagebreak).then((data: any) => {
        // 将data.items的最后一个元素添加到gen_list末尾
        const newestItem = Array.isArray(data.items) && data.items.length > 0
          ? data.items[data.items.length - 1]
          : null;
        if (newestItem) {
          setGen_list((prev: any[]) => [...prev, newestItem]);
        }
        setTotalnumber(data.total);
        // 发送消息后滚动到底部
        setTimeout(() => {
          messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
        }, 100);
      }).catch((error) => {
      });
    }).catch((error: any) => {

      // 失败时不清空输入框和媒体

      // 尝试从错误对象中提取detail字段
      let errorMessage = "创建任务失败";
      if (error?.response?.data?.detail) {
        errorMessage = error.response.data.detail;
      } else if (error?.data?.detail) {
        errorMessage = error.data.detail;
      } else if (error?.detail) {
        errorMessage = error.detail;
      } else if (error?.message) {
        errorMessage = error.message;
      }

      antdMessage.error({
        content: errorMessage,
        duration: 3,
      });
    }).finally(() => {
      setLoading(false);
    });

    setTimeout(() => {
      setLoading(false);
    }, 3000);


  };

  // 加载更多
  const handleLoadMore = async () => {
    // 检查是否还有更多数据
    if (gen_list.length >= Totalnumber) {
      return;
    }

    // 保存当前滚动位置（相对于顶部的偏移）
    const scrollContainer = scrollContainerRef.current;
    if (!scrollContainer) {
      return;
    }

    const scrollTopBefore = scrollContainer.scrollTop;
    const scrollHeightBefore = scrollContainer.scrollHeight;

    setIsLoadingMore(true);

    try {
      const nextPage = Pagebreak.page + 1;
      const result = await getgen_list({
        ...Pagebreak,
        page: nextPage,
      });

      // 处理返回数据，兼容数组或对象格式
      const data = Array.isArray(result) ? { items: result, total: result.length } : result;


      // 更新总数
      if (data.total) {
        setTotalnumber(data.total);
      }

      // 更新页码
      setPagebreak((prev: any) => ({ ...prev, page: nextPage }));

      // 去重后合并数据（根据 id 去重，新数据添加到前面）
      setGen_list((prev: any[]) => {
        const existingIds = new Set(prev.map((item: any) => item.id));
        // 只添加不存在的新数据，保持新数据的原有顺序
        const newItems = (data.items || []).filter((item: any) => {
          if (!item.id) return false;
          if (existingIds.has(item.id)) return false;
          existingIds.add(item.id);
          return true;
        }).reverse();
        // 加载的是更早一页，按时间正序放到现有消息前面。
        return [...newItems, ...prev];
      });

      // 恢复滚动位置（等待DOM更新完成后执行，增加超时时间确保DOM完全更新）
      setTimeout(() => {
        const scrollHeightAfter = scrollContainer.scrollHeight;
        const addedHeight = scrollHeightAfter - scrollHeightBefore;
        // 新数据添加到前面，保持当前查看内容的位置不变
        scrollContainer.scrollTop = scrollTopBefore + addedHeight;
      }, 200);
    } catch (error) {
    } finally {
      setIsLoadingMore(false);
    }
  };

  const getVideoDuration = (file: File): Promise<number> => {
    return new Promise((resolve, reject) => {
      const video = document.createElement('video');
      video.preload = 'metadata';
      video.onloadedmetadata = () => {
        window.URL.revokeObjectURL(video.src);
        resolve(video.duration);
      };
      video.onerror = () => {
        window.URL.revokeObjectURL(video.src);
        reject(new Error('无法获取视频时长'));
      };
      video.src = URL.createObjectURL(file);
    });
  };

  const getAudioDuration = (file: File): Promise<number> => {
    return new Promise((resolve, reject) => {
      const audio = document.createElement('audio');
      audio.preload = 'metadata';
      audio.onloadedmetadata = () => {
        URL.revokeObjectURL(audio.src);
        resolve(audio.duration);
      };
      audio.onerror = () => {
        URL.revokeObjectURL(audio.src);
        reject(new Error('无法获取音频时长'));
      };
      audio.src = URL.createObjectURL(file);
    });
  };

  const handleAudioPlay = (url: string) => {
    const audioUrl = url.startsWith('http') ? url : `${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${url}`;
    if (playingAudioUrl === audioUrl) {
      const audio = document.getElementById('audio-player') as HTMLAudioElement;
      if (audio) {
        audio.pause();
      }
      setPlayingAudioUrl(null);
    } else {
      setPlayingAudioUrl(audioUrl);
    }
  };

  const getImageDimensions = (file: File): Promise<{ width: number; height: number }> => {
    return new Promise((resolve, reject) => {
      const img = new Image();
      img.onload = () => {
        window.URL.revokeObjectURL(img.src);
        resolve({ width: img.naturalWidth, height: img.naturalHeight });
      };
      img.onerror = () => {
        window.URL.revokeObjectURL(img.src);
        reject(new Error('无法读取图片尺寸'));
      };
      img.src = URL.createObjectURL(file);
    });
  };

  const getVideoDimensions = (file: File): Promise<{ width: number; height: number; duration: number }> => {
    return new Promise((resolve, reject) => {
      const video = document.createElement('video');
      video.preload = 'metadata';
      video.onloadedmetadata = () => {
        window.URL.revokeObjectURL(video.src);
        resolve({ width: video.videoWidth, height: video.videoHeight, duration: video.duration });
      };
      video.onerror = () => {
        window.URL.revokeObjectURL(video.src);
        reject(new Error('无法读取视频尺寸'));
      };
      video.src = URL.createObjectURL(file);
    });
  };

  // 图片尺寸校验：宽高比 (0.4, 2.5)，宽高长度 (300, 6000)
  const validateImageDimensions = (width: number, height: number): string | null => {
    if (width < 300 || width > 6000) return `图片宽度需在 300~6000px 之间，当前为 ${width}px`;
    if (height < 300 || height > 6000) return `图片高度需在 300~6000px 之间，当前为 ${height}px`;
    const ratio = width / height;
    if (ratio < 0.4 || ratio > 2.5) return `图片宽高比需在 0.4~2.5 之间，当前为 ${ratio.toFixed(2)}`;
    return null;
  };

  // 视频尺寸校验：宽高比 [0.4, 2.5]，宽高 [300, 6000]，总像素 [409600, 8295044]
  const validateVideoDimensions = (width: number, height: number): string | null => {
    if (width < 300 || width > 6000) return `视频宽度需在 300~6000px 之间，当前为 ${width}px`;
    if (height < 300 || height > 6000) return `视频高度需在 300~6000px 之间，当前为 ${height}px`;
    const ratio = width / height;
    if (ratio < 0.4 || ratio > 2.5) return `视频宽高比需在 0.4~2.5 之间，当前为 ${ratio.toFixed(2)}`;
    const totalPixels = width * height;
    if (totalPixels < 409600) return `视频总像素数过小（${width}×${height}=${totalPixels}），需 ≥ 640×640=409600`;
    if (totalPixels > 8295044) return `视频总像素数过大（${width}×${height}=${totalPixels}），需 ≤ 3326×2494=8295044`;
    return null;
  };

  const handleUpload = async (file: File, frameTarget?: 'first' | 'last' | File[]) => {
    const isImage = file.type.startsWith('image/');
    const isVideo = file.type.startsWith('video/');

    if (mediaType === 'video' && referenceMode === 'first_last_frame') {
      if (!isImage) {
        antdMessage.error('首尾帧模式仅支持上传图片');
        return false;
      }
      if (file.size / 1024 / 1024 > 10) {
        antdMessage.error('图片大小不能超过10MB');
        return false;
      }

      try {
        const { width, height } = await getImageDimensions(file);
        const error = validateImageDimensions(width, height);
        if (error) {
          antdMessage.error(error);
          return false;
        }
      } catch {
        antdMessage.error('无法读取图片尺寸，请检查文件是否损坏');
        return false;
      }

      const effectiveUploadTarget = frameTarget || uploadTarget;
      if (!effectiveUploadTarget) {
        antdMessage.error('请选择首帧或尾帧上传位置');
        return false;
      }

      setUploading(true);
      try {
        const res = await uploadImage(file);
        const mediaRef: MediaReference = {
          name: file.name,
          type: 'image',
          url: res.url,
          role: effectiveUploadTarget === 'first' ? 'first_frame' : 'last_frame',
        };
        if (effectiveUploadTarget === 'first') {
          setFirstFrame(mediaRef);
        } else {
          setLastFrame(mediaRef);
        }
        antdMessage.success('图片上传成功');
      } catch (error: any) {
        const errorMsg = error?.response?.data?.message || error?.response?.data?.detail || error?.message || '上传失败';
        antdMessage.error(errorMsg);
      } finally {
        setUploading(false);
        setUploadTarget(null);
      }
      return false;
    }

    const isAudio = file.type.startsWith('audio/');

    if (!isImage && !isVideo && !isAudio) {
      antdMessage.error('仅支持图片、视频或音频文件');
      return false;
    }

    if (isAudio) {
      const audioExt = file.name.split('.').pop()?.toLowerCase();
      if (!['wav', 'mp3'].includes(audioExt || '')) {
        antdMessage.error('音频仅支持wav和mp3格式');
        return false;
      }
    }

    if (mediaType === 'image' && (isVideo || isAudio)) {
      antdMessage.error('图片模式仅支持上传图片');
      return false;
    }

    if (isAudio && mediaType !== 'video') {
      antdMessage.error('仅视频模式支持上传音频');
      return false;
    }

    const maxMB = isVideo ? 100 : (isAudio ? 50 : 10);
    const fileTypeText = isVideo ? '视频' : (isAudio ? '音频' : '图片');
    if (file.size / 1024 / 1024 > maxMB) {
      antdMessage.error(`${fileTypeText}大小不能超过${maxMB}MB`);
      return false;
    }

    // 图片尺寸校验（所有图片都需要校验）
    if (isImage) {
      try {
        const { width, height } = await getImageDimensions(file);
        const error = validateImageDimensions(width, height);
        if (error) {
          antdMessage.error(error);
          return false;
        }
      } catch {
        antdMessage.error('无法读取图片尺寸，请检查文件是否损坏');
        return false;
      }
    }

    const imageCount = currentMedia.filter((m) => m.type === 'image').length;
    if (isImage && imageCount >= maxImage) {
      antdMessage.error(`该引擎最多上传${maxImage}张图片`);
      return false;
    }

    const videoCount = currentMedia.filter((m) => m.type === 'video').length;
    if (isVideo && videoCount >= maxVideo) {
      antdMessage.error(`该引擎最多上传${maxVideo}个视频`);
      return false;
    }

    const audioCount = currentMedia.filter((m) => m.type === 'audio').length;
    if (isAudio && audioCount >= maxAudio) {
      antdMessage.error(`该引擎最多上传${maxAudio}个音频`);
      return false;
    }

    let videoDuration = 0;
    let audioDuration = 0;
    if (isVideo) {
      try {
        videoDuration = await getVideoDuration(file);
        if (videoDuration < 2) {
          antdMessage.error('视频素材最短不能少于 2 秒');
          return false;
        }
        const existingVideoDuration = currentMedia
          .filter((m) => m.type === 'video')
          .reduce((sum, m) => sum + (m.duration || 0), 0);
        if (existingVideoDuration + videoDuration > 15) {
          antdMessage.error(`所有视频素材总时长不能超过 15 秒，当前 ${(existingVideoDuration + videoDuration).toFixed(1)} 秒`);
          return false;
        }
        // 视频尺寸校验
        const { width, height } = await getVideoDimensions(file);
        const error = validateVideoDimensions(width, height);
        if (error) {
          antdMessage.error(error);
          return false;
        }
      } catch {
        antdMessage.error('无法获取视频信息，请检查文件是否损坏');
        return false;
      }
    }


   

    if (isAudio) {
      try {
        audioDuration = await getAudioDuration(file);
        if (audioDuration < 2) {
          antdMessage.error('音频素材最短不能少于 2 秒');
          return false;
        }
        const existingAudioDuration = currentMedia
          .filter((m) => m.type === 'audio')
          .reduce((sum, m) => sum + (m.duration || 0), 0);
        if (existingAudioDuration + audioDuration > 15) {
          antdMessage.error(`所有音频素材总时长不能超过 15 秒，当前 ${(existingAudioDuration + audioDuration).toFixed(1)} 秒`);
          return false;
        }
      } catch {
        antdMessage.error('无法获取音频信息，请检查文件是否损坏');
        return false;
      }
    }

    setUploading(true);

    try {
      let res;
      if (isImage) {
        res = await uploadImage(file);
      } else if (isAudio) {
        res = await uploadAudio(file, audioDuration);
      } else {
        res = await uploadVideo(file, videoDuration);
      }
      const mediaType: 'image' | 'video' | 'audio' = isImage ? 'image' : (isAudio ? 'audio' : 'video');
      const newList = [...currentMedia, {
        name: file.name,
        type: mediaType,
        url: res.url,
        label: '',
        ...(isVideo && { duration: videoDuration }),
        ...(isAudio && { duration: audioDuration }),
      }];
      const labels = generateMediaLabels(newList);
      setCurrentMedia(newList.map((m, i) => ({ ...m, label: labels[i] })));
    } catch (error) {
      const errorMsg = error?.response?.data?.message || error?.response?.data?.detail || error?.message || '上传失败';
        antdMessage.error(errorMsg);
    } finally {
      setUploading(false);
    }

    return false;
  };

  const doUpload = async (file: File): Promise<false | { name: string; type: 'image' | 'video' | 'audio'; url: string; label: string; duration?: number; fileSizeBytes: number }> => {
    const isImage = file.type.startsWith('image/');
    const isVideo = file.type.startsWith('video/');
    const isAudio = file.type.startsWith('audio/');

    if (!isImage && !isVideo && !isAudio) {
      antdMessage.error('仅支持图片、视频或音频文件');
      return false;
    }

    const maxMB = isVideo ? 100 : (isAudio ? 50 : 30);
    if (file.size / 1024 / 1024 > maxMB) {
      antdMessage.error(`${isVideo ? '视频' : (isAudio ? '音频' : '图片')}大小不能超过${maxMB}MB`);
      return false;
    }

    if (isImage || isVideo) {
      const latestMedia = useAppStore.getState().currentMedia;
      const currentTotalSize = latestMedia
        .filter((m) => m.type === 'image' || m.type === 'video')
        .reduce((sum, m) => sum + (Number(m.fileSizeBytes) || 0), 0);
      const totalSizeMB = (currentTotalSize + file.size) / 1024 / 1024;
      if (totalSizeMB > 64) {
        antdMessage.error(`所有图片和视频总大小不能超过64MB，当前已${(currentTotalSize / 1024 / 1024).toFixed(1)}MB，加上此文件后${totalSizeMB.toFixed(1)}MB`);
        return false;
      }
    }

    if (isAudio) {
      const audioExt = file.name.split('.').pop()?.toLowerCase();
      if (!['wav', 'mp3'].includes(audioExt || '')) {
        antdMessage.error('音频仅支持wav和mp3格式');
        return false;
      }
    }

    // 图片尺寸校验
    if (isImage) {
      try {
        const { width, height } = await getImageDimensions(file);
        const error = validateImageDimensions(width, height);
        if (error) {
          antdMessage.error(error);
          return false;
        }
      } catch {
        antdMessage.error('无法读取图片尺寸，请检查文件是否损坏');
        return false;
      }
    }

    let videoDuration = 0;
    let audioDuration = 0;
    if (isVideo) {
      try {
        videoDuration = await getVideoDuration(file);
        if (videoDuration < 2) {
          antdMessage.error('视频素材最短不能少于 2 秒');
          return false;
        }
        const latestMedia = useAppStore.getState().currentMedia;
        const existingVideoDuration = latestMedia
          .filter((m) => m.type === 'video')
          .reduce((sum, m) => sum + (m.duration || 0), 0);
        if (existingVideoDuration + videoDuration > 15) {
          antdMessage.error(`所有视频素材总时长不能超过 15 秒，当前 ${(existingVideoDuration + videoDuration).toFixed(1)} 秒`);
          return false;
        }
      } catch {
        antdMessage.error('无法获取视频信息，请检查文件是否损坏');
        return false;
      }
    }

    if (isAudio) {
      try {
        audioDuration = await getAudioDuration(file);
        if (audioDuration < 2) {
          antdMessage.error('音频素材最短不能少于 2 秒');
          return false;
        }
        const latestMedia = useAppStore.getState().currentMedia;
        const existingAudioDuration = latestMedia
          .filter((m) => m.type === 'audio')
          .reduce((sum, m) => sum + (m.duration || 0), 0);
        if (existingAudioDuration + audioDuration > 15) {
          antdMessage.error(`所有音频素材总时长不能超过 15 秒，当前 ${(existingAudioDuration + audioDuration).toFixed(1)} 秒`);
          return false;
        }
      } catch {
        antdMessage.error('无法获取音频信息，请检查文件是否损坏');
        return false;
      }
    }

    const mediaType: 'image' | 'video' | 'audio' = isImage ? 'image' : (isAudio ? 'audio' : 'video');
    const pendingMedia: MediaReference = {
      name: file.name,
      type: mediaType,
      url: '',
      label: '',
      ...(isVideo && { duration: videoDuration }),
      ...(isAudio && { duration: audioDuration }),
    };
    const latestMedia = useAppStore.getState().currentMedia as MediaReference[];
    if (!validateMediaReferencesBeforeAdd(latestMedia, [pendingMedia])) {
      return false;
    }

    try {
      let res;
      if (isImage) {
        res = await uploadImage(file);
      } else if (isAudio) {
        res = await uploadAudio(file, audioDuration);
      } else {
        res = await uploadVideo(file, videoDuration);
      }
      return {
        name: pendingMedia.name,
        type: pendingMedia.type,
        url: res.url,
        label: pendingMedia.label || '',
        fileSizeBytes: file.size,
        ...(pendingMedia.duration !== undefined && { duration: pendingMedia.duration }),
      };
    } catch (error) {
      const errorMsg = error?.response?.data?.message || error?.response?.data?.detail || error?.message || '上传失败';
        antdMessage.error(errorMsg);
      return false;
    }
  };

  const handleBatchUpload = async (files: File[]) => {
    let successCount = 0;
    let failCount = 0;
    
    setUploading(true);
    
    for (const file of files) {
      const result = await doUpload(file);
      
      if (result) {
        const latestMedia = useAppStore.getState().currentMedia;
        const newList = [...latestMedia, result];
        const labels = generateMediaLabels(newList);
        setCurrentMedia(newList.map((m, i) => ({ ...m, label: labels[i] })));
        successCount++;
      } else {
        failCount++;
      }
    }
    
    setUploading(false);
    
    if (successCount > 0) {
      antdMessage.success(`成功上传${successCount}个文件${failCount > 0 ? `，${failCount}个文件上传失败` : ''}`);
    }
  };

  const getMediaDurationTotal = (items: MediaReference[], type: 'video' | 'audio') => {
    return items
      .filter((m) => m.type === type)
      .reduce((sum, m) => sum + (Number(m.duration) || 0), 0);
  };

  const validateMediaReferencesBeforeAdd = (baseMedia: MediaReference[], incoming: MediaReference[]) => {
    if (!incoming.length) return false;

    if (mediaType === 'image' && incoming.some((item) => item.type !== 'image')) {
      antdMessage.error('图片模式仅支持添加图片素材');
      return false;
    }

    if (incoming.some((item) => item.type === 'audio') && mediaType !== 'video') {
      antdMessage.error('仅视频模式支持添加音频素材');
      return false;
    }

    const imageCount = baseMedia.filter((m) => m.type === 'image').length;
    const videoCount = baseMedia.filter((m) => m.type === 'video').length;
    const audioCount = baseMedia.filter((m) => m.type === 'audio').length;
    const incomingImageCount = incoming.filter((m) => m.type === 'image').length;
    const incomingVideoCount = incoming.filter((m) => m.type === 'video').length;
    const incomingAudioCount = incoming.filter((m) => m.type === 'audio').length;

    if (imageCount + incomingImageCount > maxImage) {
      antdMessage.error(`该引擎最多上传${maxImage}张图片，当前还能添加 ${Math.max(0, maxImage - imageCount)} 张`);
      return false;
    }
    if (videoCount + incomingVideoCount > maxVideo) {
      antdMessage.error(`该引擎最多上传${maxVideo}个视频，当前还能添加 ${Math.max(0, maxVideo - videoCount)} 个`);
      return false;
    }
    if (audioCount + incomingAudioCount > maxAudio) {
      antdMessage.error(`该引擎最多上传${maxAudio}个音频，当前还能添加 ${Math.max(0, maxAudio - audioCount)} 个`);
      return false;
    }

    for (const item of incoming) {
      if (item.type !== 'video') continue;
      const duration = Number(item.duration);
      if (!Number.isFinite(duration) || duration <= 0) {
        antdMessage.error(`${item.name || '视频素材'}缺少视频秒数，不能用于 AI 创作`);
        return false;
      }
      if (duration < 2) {
        antdMessage.error(`${item.name || '视频素材'}最短不能少于 2 秒`);
        return false;
      }
      if (duration > 15) {
        antdMessage.error(`${item.name || '视频素材'}最长不能超过 15 秒`);
        return false;
      }
    }

    const totalVideoDuration = getMediaDurationTotal(baseMedia, 'video') + getMediaDurationTotal(incoming, 'video');
    if (totalVideoDuration > 15) {
      antdMessage.error(`所有视频素材总时长不能超过 15 秒，当前 ${totalVideoDuration.toFixed(1)} 秒`);
      return false;
    }

    const totalAudioDuration = getMediaDurationTotal(baseMedia, 'audio') + getMediaDurationTotal(incoming, 'audio');
    if (totalAudioDuration > 15) {
      antdMessage.error(`所有音频素材总时长不能超过 15 秒，当前 ${totalAudioDuration.toFixed(1)} 秒`);
      return false;
    }

    return true;
  };


  const normalizeUploadResourceHistoryItem = (item: UploadResourceHistoryItem): MediaReference | null => {
    const media = item.mediaReference;
    const refType = (media?.type || item.resourceType) as 'image' | 'video' | 'audio';
    const url = media?.url || item.resourceUrl || item.displayUrl || item.previewUrl || '';
    if (!url) {
      antdMessage.error(`${item.fileName || item.id} 缺少素材地址，不能用于 AI 创作`);
      return null;
    }
    if (refType === 'audio' && mediaType !== 'video') {
      antdMessage.error('仅视频模式支持添加音频素材');
      return null;
    }
    const duration = Number(media?.duration ?? item.durationSeconds);
    return {
      name: media?.name || item.fileName || item.id,
      type: refType,
      url,
      source: 'upload_resource',
      upload_resource_id: item.id,
      label: '',
      ...((refType === 'video' || refType === 'audio') && Number.isFinite(duration) && duration > 0 ? { duration } : {}),
    };
  };

  const handleUploadResourceHistorySelected = (items: UploadResourceHistoryItem[]) => {
    const normalized = items
      .map(normalizeUploadResourceHistoryItem)
      .filter(Boolean) as MediaReference[];
    if (!normalized.length) return;

    const latestMedia = useAppStore.getState().currentMedia as MediaReference[];
    if (!validateMediaReferencesBeforeAdd(latestMedia, normalized)) {
      return;
    }

    const newList = [...latestMedia, ...normalized];
    const labels = generateMediaLabels(newList);
    setCurrentMedia(newList.map((m, i) => ({ ...m, label: labels[i] })));
    antdMessage.success(`已添加 ${normalized.length} 个历史上传素材参考`);
  };

  const normalizePrivatePortraitAsset = (asset: PrivatePortraitSelectableAsset): MediaReference | null => {
    if (asset.assetType === 'Audio') {
      antdMessage.error('音频私域素材暂不支持用于 AI 创作');
      return null;
    }

    const refType: 'image' | 'video' = asset.assetType === 'Video' ? 'video' : 'image';
    const fallbackName = privateAssetPickerLibraryType === 'aigc_virtual' ? '虚拟素材' : '真人素材';
    const previewUrl = refType === 'video'
      ? (asset.videoCoverUrl || asset.previewUrl || asset.displayUrl || asset.providerUrl || '')
      : (asset.previewUrl || asset.displayUrl || asset.videoCoverUrl || asset.providerUrl || '');

    return {
      name: asset.name || fallbackName,
      type: refType,
      url: previewUrl,
      source: 'private_portrait_asset',
      private_asset_id: asset.id,
      label: '',
      ...(refType === 'video' && { duration: Number(asset.videoDuration) || undefined }),
    };
  };

  const openPrivatePortraitPicker = (libraryType: PrivatePortraitLibraryType) => {
    setPrivateAssetPickerLibraryType(libraryType);
    setPrivateAssetPickerOpen(true);
  };

  const handlePrivatePortraitAssetsSelected = (assets: PrivatePortraitSelectableAsset[]) => {
    const normalized = assets
      .map(normalizePrivatePortraitAsset)
      .filter(Boolean) as MediaReference[];
    const latestMedia = useAppStore.getState().currentMedia as MediaReference[];
    if (!validateMediaReferencesBeforeAdd(latestMedia, normalized)) {
      return;
    }

    const newList = [...latestMedia, ...normalized];
    const labels = generateMediaLabels(newList);
    setCurrentMedia(newList.map((m, i) => ({ ...m, label: labels[i] })));
    antdMessage.success(`已添加 ${normalized.length} 个${privateAssetPickerLibraryType === 'aigc_virtual' ? '虚拟' : '真人'}素材参考`);
  };

  const buildPreviewUrl = (url: string) => {
    if (!url) return '';
    if (url.startsWith('http://') || url.startsWith('https://') || url.startsWith('data:') || url.startsWith('blob:')) {
      return url;
    }
    const base = (import.meta.env.VITE_API_BASE || '').replace(/\/$/, '');
    return `${base}${url.startsWith('/') ? '' : '/'}${url}`;
  };


  const handleRemoveMedia = (index: number) => {
    const newList = currentMedia.filter((_, i) => i !== index);
    const labels = generateMediaLabels(newList);
    setCurrentMedia(newList.map((m, i) => ({ ...m, label: labels[i] })));
  };


  // const handleKeyPress = (e: React.KeyboardEvent) => {
  //   if (e.key === 'Enter' && !e.shiftKey) {
  //     e.preventDefault();
  //     handleSend();
  //   }
  // };

  // 检测光标前的 @ 符号
  const checkMention = (textarea: HTMLTextAreaElement, value: string) => {
    const cursorPos = textarea.selectionStart;
    const textBeforeCursor = value.slice(0, cursorPos);
    const atMatch = textBeforeCursor.match(/@([^@\s]*)$/);

    if (atMatch && currentMedia.length > 0) {
      setMentionVisible(true);
      return true;
    }
    setMentionVisible(false);
    return false;
  };

  // 输入框变化处理
  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    const value = e.target.value;
    setInputValue(value);
    const textarea = e.target;
    checkMention(textarea, value);
  };

  // 键盘事件处理（ESC 关闭提及、Tab/Enter 选择）
  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (mentionVisible) {
      if (e.key === 'Escape') {
        setMentionVisible(false);
      }
    }
  };

  // 插入 @ 提及
  const insertMention = (label: string) => {
    const textarea = mentionInputRef.current?.resizableTextArea?.textArea;
    if (!textarea) return;

    const cursorPos = textarea.selectionStart;
    const textBefore = inputValue.slice(0, cursorPos);
    const textAfter = inputValue.slice(cursorPos);

    const atIndex = textBefore.lastIndexOf('@');
    if (atIndex === -1) {
      setMentionVisible(false);
      return;
    }

    const newValue = textBefore.slice(0, atIndex) + `@${label} ` + textAfter;
    setInputValue(newValue);
    setMentionVisible(false);

    setTimeout(() => {
      const pos = atIndex + label.length + 2;
      textarea.focus();
      textarea.setSelectionRange(pos, pos);
    }, 0);
  };



  const handleClosePreview = () => {
    setPreviewVisible(false);
    setPreviewUrl('');
    if (videoRef.current) {
      videoRef.current.pause();
    }
  };

  const handleDownload = (e: any) => {
    e.preventDefault();
    e.stopPropagation();
    if (!previewUrl) return;
    let downloadUrl = previewUrl.replace('/static', '').replace(/&w=\d+/i, '').replace(/&q=\d+/i, '');
    if (!downloadUrl.includes('download=1')) {
      downloadUrl += '&download=1';
    }
    const link = document.createElement('a');
    link.href = downloadUrl;
    console.log(downloadUrl);
    
    link.download = previewType === 'image' ? 'image.png' : 'video.mp4';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  const getAttachmentMediaType = (ref: any): 'image' | 'video' | 'audio' => {
    const rawType = String(ref?.type || '').toLowerCase();
    const rawUrl = String(ref?.url || ref?.name || '').toLowerCase();
    if (rawType.includes('video') || /\.(mp4|mov|avi|webm|m4v)(\?|$)/.test(rawUrl)) return 'video';
    if (rawType.includes('audio') || /\.(mp3|wav|ogg|aac|m4a)(\?|$)/.test(rawUrl)) return 'audio';
    return 'image';
  };

  const buildAttachmentAssetUrl = (url: string): string => {
    if (!url) return '';
    if (/^https?:\/\//i.test(url)) return url;
    return `${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${url}`;
  };

  const buildAttachmentDownloadUrl = (url: string): string => {
    const assetUrl = buildAttachmentAssetUrl(url);
    if (!assetUrl) return '';
    return `${assetUrl}${assetUrl.includes('?') ? '&' : '?'}download=1`;
  };

  const openAttachmentPreview = (ref: any) => {
    if (!ref?.url) return;
    setAttachmentPreviewUrl(ref.url);
    setAttachmentPreviewType(getAttachmentMediaType(ref));
    setAttachmentPreviewName(ref.name || '附件');
    setAttachmentPreviewVisible(true);
  };

  const downloadAttachmentRef = (ref: any, e?: React.MouseEvent) => {
    e?.preventDefault();
    e?.stopPropagation();
    if (!ref?.url) return;
    const link = document.createElement('a');
    link.href = buildAttachmentDownloadUrl(ref.url);
    const refType = getAttachmentMediaType(ref);
    link.download = ref.name || (refType === 'image' ? 'image.png' : refType === 'video' ? 'video.mp4' : 'audio.mp3');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  // ==================== 渲染 ====================

  const isFirstLastFrameComposer = mediaType === 'video' && referenceMode === 'first_last_frame';
  const composerCanSend = !uploading && (isFirstLastFrameComposer
    ? Boolean(inputValue.trim() || firstFrame)
    : Boolean(inputValue.trim() || currentMedia.length > 0));
  const composerModeLabel = mediaType === 'image'
    ? '图片生成'
    : isFirstLastFrameComposer
      ? '首尾帧视频'
      : '视频生成';
  const composerPlaceholder = mediaType === 'image'
    ? '输入画面描述，或上传图片参考风格、构图、主体与光影。例：@图片1 参考色调，生成一张简洁高级的产品海报。'
    : isFirstLastFrameComposer
      ? '首帧尾帧可以不传，如需传入建议描述首帧到尾帧的主体动作、镜头运动、节奏与转场。例：从首帧自然推进到尾帧，产品居中突出，动作平滑连贯。'
      : '上传最多12个参考素材，输入文字或 @ 引用参考内容，自由组合图、文、视频。例：@图片1 模仿 @视频1 的动作。';
  const composerHelperText = mediaType === 'image'
    ? '图片参考 · 适合海报、产品图、场景图与风格图生成'
    : isFirstLastFrameComposer
      ? '首帧必传 · 尾帧可选 · 适合首尾画面连贯过渡'
      : '多素材参考 · 支持图片 / 视频 / 音频，输入 @ 可快速引用素材';

  const maxImage = maxImageCount;
  const maxVideo = maxVideoCount;
  const maxAudio = currentEngine?.maxAudioCount ?? 1;

  return (
    <Layout className="ai-create-page" style={{
      margin: '-24px -32px -32px',
      borderRadius: 22,
      height: 'calc(100vh - 34px)',
      background: '#fff',

      overflow: 'hidden',
    }}>
      {/* 隐藏的音频播放器 */}
      <audio
        id="audio-player"
        src={playingAudioUrl || null}
        autoPlay
        onEnded={() => setPlayingAudioUrl(null)}
        style={{ display: 'none' }}
      />
      {/* 左侧边栏 - 对话列表（已隐藏，保留代码） */}
      {false && (
        <Sider
          trigger={null}
          collapsible
          collapsed={collapsed}
          width={220}
          style={{
            background: 'rgba(255,255,255,0.7)',
            backdropFilter: 'blur(16px)',
            borderRight: '1px solid rgba(139, 92, 246, 0.08)',
          }}
        >
          <div style={{ padding: 12 }}>
            <Button
              type="text"
              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
              onClick={() => setCollapsed(!collapsed)}
              style={{ marginBottom: 12, width: '100%' }}
            />

            {!collapsed && (
              <Button
                block 
                type="primary"
                icon={<PlusOutlined />}
                onClick={handleNewChat}
                style={{ marginBottom: 16, borderRadius: 8 }}
              >
                新对话
              </Button>
            )}
           

            {!collapsed && conversations.length > 0 && (
              <div style={{ maxHeight: 'calc(100vh - 120px)', overflowY: 'auto' }}>
                {conversations.map((conversation) => (
                  <div
                    key={conversation.id}
                    onClick={() => handleSelectChat(conversation.id)}
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                      padding: '10px 12px',
                      marginBottom: 4,
                      borderRadius: 10,
                      cursor: 'pointer',
                      background: currentConversationId === conversation.id ? '#FAFBFC' : 'transparent',
                      border: currentConversationId === conversation.id ? '1px solid #ede9fe' : 'none',
                      transition: 'all 0.2s',
                    }}
                    onMouseEnter={(e) => {
                      e.currentTarget.style.background = currentConversationId === conversation.id ? '#FAFBFC' : '#FFFFFF';
                    }}
                    onMouseLeave={(e) => {
                      e.currentTarget.style.background = currentConversationId === conversation.id ? '#FAFBFC' : 'transparent';
                    }}
                  >
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <p style={{ margin: 0, fontSize: 13, fontWeight: 500, color: '#2f3440', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        {conversation.title}
                      </p>
                      <p style={{ margin: 2, fontSize: 11, color: '#98a2b3', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        {conversation.lastMessage || '暂无消息'}
                      </p>
                    </div>
                    <Popconfirm
                      title="确定删除此对话？"
                      onConfirm={() => handleDeleteChat(conversation.id)}
                      okText="确定"
                      cancelText="取消"
                    >
                      <Button
                        type="text"
                        icon={<DeleteOutlined />}
                        style={{ color: '#98a2b3', padding: 4 }}
                        onClick={(e) => e.stopPropagation()}
                      />
                    </Popconfirm>
                  </div>
                ))}
              </div>
            )}
          </div>
        </Sider>
      )}

      {/* 主内容区 */}
      <Layout style={{ display: 'flex', flex: 1, background: '#fff' }}>
        {/* 头部 - 显示对话标题和模型信息 */}
        <div className="animate-fadeInUp" style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          padding: '16px 24px',
          background: 'linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(139, 92, 246, 0.04) 100%)',
          backdropFilter: 'blur(22px)',
          border: '1px solid rgba(231, 234, 240, 0.82)',
          // boxShadow: '0 16px 44px rgba(31, 41, 55, 0.06)',
          position: 'relative', overflow: 'hidden', flexWrap: 'wrap', gap: 12,
        }}>
          <div style={{ width: '100%', display: 'flex', alignItems: 'center', gap: 16 }}>
            <div style={{ width: '15%', height: 1, background: 'linear-gradient(90deg, transparent, rgba(117,106,136,0.18), rgba(232,227,236,0.48), transparent)', borderRadius: 1 }} />
            <div style={{ flex: 1, minWidth: 0, textAlign: 'center' }}>
              <h2 style={{
                margin: 0,
                fontSize: 18,
                fontWeight: 700,
                color: '#8b5cf6',
                letterSpacing: 0.4,
              }}>
                AI创作
              </h2>
              <p style={{ fontSize: 13, color: '#667085', margin: '4px 0 0 0' }}>
                输入想法、剧本或上传参考，智能生成视频/图片
              </p>
            </div>
            <div style={{ width: '15%', height: 1, background: 'linear-gradient(90deg, transparent, rgba(232,227,236,0.48), rgba(117,106,136,0.18), transparent)', borderRadius: 1 }} />
          </div>
        </div>

        {/* 消息区域 */}
        <Content
          style={{
            flex: 1,
            margin: 0,
            padding: '20px 24px 22px',
            boxSizing: 'border-box',
            display: 'flex',
            flexDirection: 'column',
            overflow: 'hidden',
            minHeight: 0,

          }}
        >
          {/* 空状态 - 没有对话或当前对话没有消息时显示 */}
          {gen_list.length === 0 && (
            <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
              <div
                style={{
                  width: 80,
                  height: 80,
                  borderRadius: 50,
                  background: 'linear-gradient(135deg, #8b5cf6 0%, #ddd6fe 100%)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  marginBottom: 16,
                }}
              >
                <RobotOutlined style={{ fontSize: 40, color: '#fff' }} />
              </div>
              <h2 style={{ margin: 0, fontSize: 18, fontWeight: 500, color: '#2f3440' }}>
                你好，想创作什么？
              </h2>
              <p style={{ margin: 8, fontSize: 13, color: '#98a2b3' }}>
                输入想法、剧本或上传参考，开始你的创作之旅
              </p>
            </div>
          )}

          {/* 消息列表 - gen_list 有数据时显示 */}
          {gen_list.length > 0 && (
            <div
              ref={scrollContainerRef}
              className="ai-create-scroll"
              style={{
                flex: 1,
                overflowY: 'auto',
                paddingRight: 10,
                paddingBottom: 18,
                // background: 'linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0))',
                background: '#fff',
                // borderRadius: 22,
              }}
              onScroll={(e) => {
                const target = e.currentTarget;
                const now = Date.now();
                const isAutoScroll = now - lastAutoScrollTime.current < 500;
                if (!isAutoScroll && isInitialLoadDone.current && target.scrollTop <= 50 && !isLoadingMore && gen_list.length < Totalnumber) {
                  handleLoadMore();
                }
              }}
            >
              {/* 加载更多提示 */}
              {isLoadingMore && (
                <div style={{ padding: '8px 0', textAlign: 'center', marginBottom: 16 }}>
                  <span style={{ fontSize: 12, color: '#8b5cf6' }}>加载中...</span>
                </div>
              )}
              {/* 遍历消息列表 */}
              {(() => {
                const msgApi = antdMessage;
                return gen_list.map((msg) => (
                  <div
                    key={msg.id}
                    style={{
                      width: '100%',
                      display: 'flex',
                      justifyContent: 'flex-start',  // 所有消息左对齐
                      marginBottom: 16,
                    }}
                  >
                    <div style={{ width: '100%', display: 'flex', gap: 10 }}>
                      {/* 头像 */}
                      <div
                        style={{
                          width: 36,
                          height: 36,
                          borderRadius: 12,
                          background: 'linear-gradient(135deg, #8b5cf6 0%, #ddd6fe 100%)',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                          flexShrink: 0,
                          // boxShadow: '0 8px 18px rgba(47, 52, 64, 0.15)' ,
                        }}
                      >
                        <RobotOutlined style={{ color: '#fff', fontSize: 16 }} />
                      </div>

                      {/* 消息内容 */}
                      <div style={{ flex: 1 }}>
                        {/* 时间戳和参数信息 */}


                        {/* 消息气泡 */}
                        <div
                          style={{
                            background: 'rgba(255, 255, 255, 0.92)',
                            backdropFilter: 'blur(18px)',
                            borderRadius: '22px',
                            padding: '14px 16px',
                            width: '70%',
                            minWidth: 500,
                            boxSizing: 'border-box',
                            boxShadow: '0 18px 50px rgba(47, 52, 64, 0.075)',
                            position: 'relative',
                            border: '1px solid rgba(231, 234, 240, 0.9)',

                          }}
                        >
                          <div style={{ margin: 4, fontSize: 11, color: '#98a2b3', textAlign: 'left', display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
                            <span>{msg.createdAt?.replace('T', ' ').split('.')[0]}</span>
                            <span style={{
                              background: msg.genType === 'image' ? 'rgba(139, 92, 246, 0.10)' : 'rgba(139, 92, 246, 0.10)',
                              color: msg.genType === 'image' ? '#8b5cf6' : '#8b5cf6',
                              padding: '2px 8px',
                              borderRadius: 12,
                              fontWeight: 500,
                              fontSize: 11,
                              marginLeft: 8
                            }}>
                              {msg.genType === 'image' ? '图片生成' : '视频生成'}
                            </span>
                          </div>
                          {/* 附件详情 - 右上角 */}
                          {msg.mediaReferences && msg.mediaReferences.length > 0 && (
                            <div style={{ position: 'absolute', top: 8, right: 8, zIndex: 100 }}>
                              <span style={{ padding: '4px 12px', borderRadius: 16, color: '#8b5cf6', cursor: 'pointer', fontWeight: 500, border: '1px solid rgba(139, 92, 246, 0.2)', background: 'rgba(139, 92, 246, 0.04)' }} onClick={(e) => { e.stopPropagation(); const target = e.currentTarget as HTMLElement; const rect = target.getBoundingClientRect(); setAttachmentPopupPosition({ x: rect.left, y: rect.top - 10 }); setAttachmentPopupMessageId(msg.id); setAttachmentPopupVisible(true); }}>附件详情</span>
                            </div>
                          )}
                          {/* 操作按钮 - 右下角 */}
                          <div style={{ position: 'absolute', bottom: 8, right: 8, zIndex: 100, display: 'flex', gap: 6 }}>
                            <button
                              onClick={(e) => {
                                e.stopPropagation();
                                setInputValue(msg.originalPrompt || '');
                                let engineFound = true;
                                const engineId = msg.engineId || msg.engineSnapshot?.id || msg.engine_id;
                                if (engineId && msg.genType) {
                                  const enginesData = Array.isArray(enginesele) ? {} : enginesele;
                                  const engineList = msg.genType === 'image' ? enginesData.image : enginesData.video;
                                  const engine = engineList?.find((e: any) => e.id === engineId);
                                  if (engine) {
                                    setCountType(engine.id);
                                    if (msg.genType === 'video') {
                                      setEngineOptions({
                                        ratios: engine.supportedRatios || ['16:9', '4:3', '1:1', '3:4', '9:16', '21:9'],
                                        resolutions: engine.supportedResolutions || ['480p', '720p', '1080p'],
                                        durations: engine.supportedDurations || [5, 8, 10, 12, 15],
                                      });
                                    }
                                    if (msg.genType === 'image') {
                                      const supportedSizes = engine.supportedSizes || {};
                                      const resolutionLevels = Object.keys(supportedSizes).sort((a, b) => {
                                        const levelOrder = { '1K': 0, '2K': 1, '4K': 2 };
                                        return (levelOrder[a] || 0) - (levelOrder[b] || 0);
                                      });
                                      const primaryResolution = resolutionLevels[0] || '2K';
                                      const supportedResolutions = Object.keys(supportedSizes[primaryResolution] || {});
                                      const newRatioOptions = supportedResolutions.map((res: any) => ({
                                        value: res,
                                        label: res,
                                      }));
                                      setRatioOptions(newRatioOptions);
                                      setCurrentEngineSupportedSizes(supportedSizes);
                                      setResolutionOptions(resolutionLevels.map((level) => {
                                        const match = level.match(/(\d+)K/);
                                        const num = match ? parseInt(match[1]) : 1;
                                        const labels: Record<number, string> = { 1: '标清', 2: '高清', 4: '超清' };
                                        return {
                                          value: level,
                                          label: `${labels[num] || '高清'} ${level}`,
                                        };
                                      }));
                                      if (supportedSizes[primaryResolution] && supportedSizes[primaryResolution][supportedResolutions[0]]) {
                                        const defaultSize = supportedSizes[primaryResolution][supportedResolutions[0]];
                                        const [w, h] = defaultSize.split(/[×x]/);
                                        setWidth(Number(w));
                                        setHeight(Number(h));
                                        setSelectedRatio(supportedResolutions[0]);
                                        setSelectedResolution(primaryResolution);
                                      }
                                    }
                                  } else {
                                    msgApi.error('该引擎已删除，无法重新编辑');
                                    engineFound = false;
                                  }
                                }
                                if (!engineFound) return;
                                if (msg.genType) {
                                  isReEditingRef.current = true;
                                  setMediaType(msg.genType);
                                }
                                if (msg.mediaReferences && msg.mediaReferences.length > 0) {
                                  const hasFirstLastFrame = msg.mediaReferences.some((ref: any) => ref.role === 'first_frame' || ref.role === 'last_frame');
                                  if (hasFirstLastFrame && msg.genType === 'video') {
                                    const first = msg.mediaReferences.find((ref: any) => ref.role === 'first_frame');
                                    const last = msg.mediaReferences.find((ref: any) => ref.role === 'last_frame');
                                    setFirstFrame(first ? { ...first, label: first.label || '', duration: first.duration } : null);
                                    setLastFrame(last ? { ...last, label: last.label || '', duration: last.duration } : null);
                                    setCurrentMedia([]);
                                    setReferenceMode('first_last_frame');
                                  } else {
                                    setCurrentMedia(msg.mediaReferences.map((ref: any) => ({
                                      name: ref.name,
                                      type: ref.type,
                                      url: ref.url,
                                      label: ref.label || '',
                                      role: ref.role,
                                      duration: ref.duration,
                                    })));
                                    setFirstFrame(null);
                                    setLastFrame(null);
                                    if (msg.genType === 'video') {
                                      const videoEngine = enginesData.video?.find((e: any) => e.id === engineId);
                                      if (videoEngine) {
                                        const supportsUR = videoEngine.supportsUniversalReference ?? true;
                                        const supportsFLF = videoEngine.supportsFirstLastFrame ?? false;
                                        if (supportsUR) {
                                          setReferenceMode('universal');
                                        } else if (supportsFLF) {
                                          setReferenceMode('first_last_frame');
                                        } else {
                                          setReferenceMode('universal');
                                        }
                                      } else {
                                        setReferenceMode('universal');
                                      }
                                    } else {
                                      setReferenceMode('universal');
                                    }
                                  }
                                } else {
                                  setCurrentMedia([]);
                                  setFirstFrame(null);
                                  setLastFrame(null);
                                  if (msg.genType === 'video') {
                                    const videoEngine = enginesele?.video?.find((e: any) => e.id === engineId);
                                    if (videoEngine) {
                                      const supportsUR = videoEngine.supportsUniversalReference ?? true;
                                      const supportsFLF = videoEngine.supportsFirstLastFrame ?? false;
                                      if (supportsUR) {
                                        setReferenceMode('universal');
                                      } else if (supportsFLF) {
                                        setReferenceMode('first_last_frame');
                                      } else {
                                        setReferenceMode('universal');
                                      }
                                    }
                                  }
                                }
                                msgApi.success('已加载到编辑区');
                              }}
                              style={{
                                height: 28,
                                padding: '0 10px',
                                borderRadius: 10,
                                border: 'none',
                                background: 'rgba(139, 92, 246, 0.08)',
                                color: '#8b5cf6',
                                cursor: 'pointer',
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                transition: 'all 0.2s ease',
                                gap: 4,
                                fontSize: 12,
                              }}
                              onMouseEnter={(e) => {
                                e.currentTarget.style.background = 'rgba(139, 92, 246, 0.15)';
                              }}
                              onMouseLeave={(e) => {
                                e.currentTarget.style.background = 'rgba(139, 92, 246, 0.08)';
                              }}
                            >
                              <ReloadOutlined style={{ fontSize: 12 }} />
                              重新编辑
                            </button>
                            <Popconfirm
                              title="确定要删除吗？"
                              onConfirm={async () => {
                                try {
                                  await deleteHistory(msg.id);
                                  msgApi.success('删除成功');
                                  // 直接在本地列表中删除对应数据
                                  setGen_list(prev => prev.filter(item => item.id !== msg.id));
                                  setTotalnumber(prev => prev - 1);
                                } catch (error: any) {

                                  const errorMsg = error?.response?.data?.message || error?.message || '删除失败';
                                  msgApi.error(errorMsg);
                                }
                              }}
                              okText="确定"
                              cancelText="取消"
                            >
                              <button
                                onClick={(e) => e.stopPropagation()}
                                style={{
                                  height: 28,
                                  padding: '0 10px',
                                  borderRadius: 10,
                                  border: 'none',
                                  background: 'rgba(139, 92, 246, 0.08)',
                                  color: '#8b5cf6',
                                  cursor: 'pointer',
                                  display: 'flex',
                                  alignItems: 'center',
                                  justifyContent: 'center',
                                  transition: 'all 0.2s ease',
                                  gap: 4,
                                  fontSize: 12,
                                }}
                                onMouseEnter={(e) => {
                                  e.currentTarget.style.background = 'rgba(164, 91, 91, 0.1)';
                                  e.currentTarget.style.color = '#A45B5B';
                                }}
                                onMouseLeave={(e) => {
                                  e.currentTarget.style.background = 'rgba(139, 92, 246, 0.08)';
                                  e.currentTarget.style.color = '#8b5cf6';
                                }}
                              >
                                <DeleteOutlined style={{ fontSize: 12 }} />
                                删除
                              </button>
                            </Popconfirm>
                          </div>

                          {/* 文本内容 */}
                          {/* <div
                            style={{
                              width: '100%',
                              position: 'relative',
                              margin: '8px 0',
                              padding: '12px 16px',
                              backgroundColor: 'rgba(139, 92, 246, 0.04)',
                              borderRadius: 10,
                              border: '1px solid rgba(139, 92, 246, 0.08)',
                              fontSize: 13,
                              color: '#475467',
                              lineHeight: 1.6,
                              cursor: 'pointer',
                              transition: 'all 0.2s ease',
                              boxShadow: '0 1px 3px rgba(47, 52, 64, 0.035)',
                            }}
                            onMouseEnter={() => {
                              setExpandedPrompts(prev => {
                                const newSet = new Set(prev);
                                newSet.add(msg.id);
                                return newSet;
                              });
                            }}
                            onMouseLeave={() => {
                              setExpandedPrompts(prev => {
                                const newSet = new Set(prev);
                                newSet.delete(msg.id);
                                return newSet;
                              });
                            }}
                          >
                            默认显示：一行省略
                            <div style={{
                              width: '100%',
                              overflow: 'hidden',
                              textOverflow: 'ellipsis',
                              whiteSpace: 'nowrap',
                              display: expandedPrompts.has(msg.id) ? 'none' : 'block',
                            }}>
                              {msg.originalPrompt}
                            </div>

                            鼠标移入显示：完整内容
                            <div style={{
                              width: '100%',
                              maxHeight: 200,
                              overflowY: 'auto',
                              display: expandedPrompts.has(msg.id) ? 'block' : 'none',
                              wordBreak: 'break-word',
                            }}>
                              {msg.originalPrompt}
                            </div>
                          </div> */}

                          {/* 根据 status 显示不同内容 */}
                          {(msg.status === 'generating' || msg.status === 'failed' || msg.status === 'completed') && (
                            <div style={{
                              display: 'flex', gap: 16, marginBottom: 16, marginTop: 16, width: '100%', alignItems: 'flex-start',

                            }}>
                              <div style={{ width: '50%', overflow: 'hidden', borderRadius: 12, position: 'relative', height: 220, border: '1px solid #E7EAF0', boxShadow: '0 4px 12px rgba(139, 92, 246, 0.08)', background: 'linear-gradient(135deg, #ffffff 0%, #FAFBFC 100%)' }}>
                                <GenerationTaskResourceGrid
                                  task={msg}
                                  resolveUrl={resolveGenerationResourceUrl}
                                  onPreview={(url, type) => {
                                    setPreviewUrl(url);
                                    setPreviewType(type);
                                    setPreviewVisible(true);
                                  }}
                                />
                              </div>
                              <div style={{ width: '50%', display: 'flex', flexDirection: 'column', gap: 12 }}>
                                <div style={{ background: '#FFFFFF', borderRadius: 12, padding: 12, border: '1px solid #E7EAF0', flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                  <p style={{ width: '100%', height: 150, overflow: 'auto', padding: 0, marginTop: 0, marginBottom: 0, lineHeight: 2, color: '#475467', fontSize: 13 }}>{msg.originalPrompt}</p>
                                </div>
                                <div style={{ fontSize: 12, color: '#667085', textAlign: 'left', display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
                                  <span style={{
                                    // background: 'rgba(139, 92, 246, 0.08)',
                                    borderRadius: 16, color: '#8b5cf6', fontWeight: 500
                                  }}>{msg.engineSnapshot?.name || '未知引擎'}</span>
                                  <span style={{
                                    // background: 'rgba(139, 92, 246, 0.08)',
                                    borderRadius: 16, color: '#667085'
                                  }}>{msg.genType === 'image' ? `${msg.imageProportion || ''} · ${msg.imagePx || ''} · ${msg.imageSize || ''}` : `${msg.duration || ''}秒 · ${msg.aspectRatio || ''} · ${msg.resolution || ''}`}</span>
                                  <span style={{
                                    // background: 'rgba(164, 91, 91, 0.08)',
                                    fontSize: 14,
                                    borderRadius: 16, color: '#8b5cf6'
                                  }}>消耗积分：{msg.creditsCost}</span>

                                </div>

                              </div>
                            </div>

                          )}
                        </div>


                      </div>

                    </div>
                  </div>
                ))
              })()}


              {/* 消息列表底部标记 - 用于自动滚动 */}
              <div ref={messagesEndRef} />
            </div>
          )}

          {/* 附件详情悬浮窗 - 参考素材 hover 块风格 */}
          {attachmentPopupVisible && attachmentPopupMessageId && (() => {
            const currentAttachmentMessage = gen_list.find((msg: any) => msg.id === attachmentPopupMessageId);
            const attachmentRefs = currentAttachmentMessage?.mediaReferences || [];
            return (
              <>
                {/* 遮罩层 - 点击关闭悬浮窗 */}
                <div
                  style={{
                    position: 'fixed',
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    background: 'transparent',
                    zIndex: 9998,
                  }}
                  onClick={() => {
                    setAttachmentPopupVisible(false);
                    setAttachmentPopupMessageId(null);
                  }}
                />
                <div
                  className="ai-reference-expanded-tray ai-attachment-popover"
                  style={{
                    position: 'fixed',
                    top: `max(84px, ${attachmentPopupPosition.y - 96}px)`,
                    left: `max(24px, min(${attachmentPopupPosition.x - 250}px, calc(100vw - 456px)))`,
                    width: 424,
                    padding: '12px 12px 10px',
                    borderRadius: 18,
                    background: 'rgba(255,255,255,0.98)',
                    border: '1px solid #E7EAF0',
                    boxShadow: '0 24px 60px rgba(31, 41, 55, 0.12)',
                    backdropFilter: 'blur(18px)',
                    zIndex: 9999,
                    pointerEvents: 'auto',
                  }}
                  onClick={(e) => e.stopPropagation()}
                >
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                      <span style={{ fontSize: 13, color: '#344054', fontWeight: 800 }}>参考附件</span>
                      <span style={{ fontSize: 11, color: '#98A2B3', fontWeight: 600 }}>点击素材查看，或直接下载原文件</span>
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      {/* <span style={{ fontSize: 11, color: '#98A2B3', fontWeight: 700 }}>{attachmentRefs.length}/12</span> */}
                      <button
                        onClick={() => {
                          setAttachmentPopupVisible(false);
                          setAttachmentPopupMessageId(null);
                        }}
                        style={{
                          width: 26,
                          height: 26,
                          borderRadius: '50%',
                          border: '1px solid transparent',
                          background: '#F6F7FA',
                          cursor: 'pointer',
                          color: '#98a2b3',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                          transition: 'all 0.2s ease',
                        }}
                        onMouseEnter={(e) => {
                          e.currentTarget.style.background = '#EEF1F6';
                          e.currentTarget.style.color = '#2f3440';
                        }}
                        onMouseLeave={(e) => {
                          e.currentTarget.style.background = '#F6F7FA';
                          e.currentTarget.style.color = '#98a2b3';
                        }}
                      >
                        <CloseOutlined style={{ fontSize: 12 }} />
                      </button>
                    </div>
                  </div>

                  <div className="ai-reference-tray-scroll" style={{ display: 'flex', gap: 10, overflowX: 'auto', padding: '2px 2px 4px' }}>
                    {attachmentRefs.map((ref: any, idx: number) => {
                      const refType = getAttachmentMediaType(ref);
                      const label = ref.label || (ref.role === 'first_frame' ? '首帧' : ref.role === 'last_frame' ? '尾帧' : `${refType === 'image' ? '图片' : refType === 'video' ? '视频' : '音频'}${idx + 1}`);
                      return (
                        <div
                          key={`${ref.url || ref.name || idx}-${idx}`}
                          style={{
                            flex: '0 0 92px',
                            width: 92,
                            borderRadius: 16,
                            background: '#FFFFFF',
                            border: '1px solid #E7EAF0',
                            boxShadow: '0 8px 18px rgba(31, 41, 55, 0.06)',
                            padding: 7,
                            boxSizing: 'border-box',
                          }}
                        >
                          <div
                            onClick={(e) => {
                              if (refType === 'audio') {
                                e.stopPropagation();
                                handleAudioPlay(ref.url);
                              } else {
                                openAttachmentPreview(ref);
                                setAttachmentPopupVisible(false);
                                setAttachmentPopupMessageId(null);
                              }
                            }}
                            style={{
                              position: 'relative',
                              width: '100%',
                              height: 70,
                              borderRadius: 12,
                              overflow: 'hidden',
                              cursor: 'pointer',
                              background: '#F7F8FA',
                              border: '1px solid rgba(231, 234, 240, 0.9)',
                            }}
                          >
                            {refType === 'image' ? (
                              <img
                                src={buildAttachmentAssetUrl(ref.url)}
                                alt={ref.name || label}
                                style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                              />
                            ) : refType === 'video' ? (
                              <>
                                <video
                                  src={buildAttachmentAssetUrl(ref.url)}
                                  muted
                                  playsInline
                                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
                                />
                                <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(31, 41, 55, 0.08)' }}>
                                  <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'rgba(47, 52, 64, 0.72)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 8px 18px rgba(31, 41, 55, 0.22)' }}>
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="#fff"><path d="M8 5v14l11-7z" /></svg>
                                  </div>
                                </div>
                              </>
                            ) : (
                              <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%)' }}>
                                {playingAudioUrl === (ref.url.startsWith('http') ? ref.url : `${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${ref.url}`) ? (
                                  <PauseOutlined style={{ fontSize: 24, color: '#fff' }} />
                                ) : (
                                  <AudioOutlined style={{ fontSize: 24, color: '#fff' }} />
                                )}
                              </div>
                            )}
                            {/* <span style={{ position: 'absolute', left: 6, top: 6, padding: '2px 6px', borderRadius: 999, background: 'rgba(255,255,255,0.92)', color: '#8b5cf6', fontSize: 10, fontWeight: 800, boxShadow: '0 4px 10px rgba(31, 41, 55, 0.08)' }}>
                              {label}
                            </span> */}
                          </div>

                          <div title={ref.name || label} style={{ marginTop: 6, color: '#667085', fontSize: 10, fontWeight: 700, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center' }}>
                            {ref.name || label}
                          </div>

                          <div style={{ display: 'flex', gap: 5, marginTop: 7 }}>
                            <button
                              onClick={() => {
                                openAttachmentPreview(ref);
                                setAttachmentPopupVisible(false);
                                setAttachmentPopupMessageId(null);
                              }}
                              style={{
                                flex: 1,
                                height: 24,
                                borderRadius: 9,
                                border: '1px solid #E7EAF0',
                                background: '#F8FAFC',
                                color: '#8b5cf6',
                                fontSize: 11,
                                fontWeight: 700,
                                cursor: 'pointer',
                                transition: 'all 0.2s ease',
                              }}
                              onMouseEnter={(e) => { e.currentTarget.style.background = '#EEF1F6'; }}
                              onMouseLeave={(e) => { e.currentTarget.style.background = '#F8FAFC'; }}
                            >
                              查看
                            </button>
                            {/* <button
                              onClick={(e) => downloadAttachmentRef(ref, e)}
                              title="下载"
                              style={{
                                width: 26,
                                height: 24,
                                borderRadius: 9,
                                border: '1px solid #E7EAF0',
                                background: '#FFFFFF',
                                color: '#667085',
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                cursor: 'pointer',
                                transition: 'all 0.2s ease',
                              }}
                              onMouseEnter={(e) => { e.currentTarget.style.background = '#EEF1F6'; e.currentTarget.style.color = '#2f3440'; }}
                              onMouseLeave={(e) => { e.currentTarget.style.background = '#FFFFFF'; e.currentTarget.style.color = '#667085'; }}
                            >
                              <DownloadOutlined style={{ fontSize: 12 }} />
                            </button> */}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              </>
            );
          })()}


          {/* 输入区域 - 始终显示 */}
          <div
            style={{
              position: 'relative',
              background: '#ffffff',
              borderRadius: 24,
              padding: '18px 72px 16px 20px',
              boxShadow: '0 22px 64px rgba(31, 41, 55, 0.08), 0 1px 0 rgba(255,255,255,0.98) inset',
              transition: 'all 0.25s ease',
              border: '1px solid rgba(231, 234, 240, 0.78)',
              backdropFilter: 'blur(24px)',
            }}
          >
            {/* <div>12312</div> */}


            {/* 上方输入布局 */}
            <div style={{ display: 'flex', gap: isFirstLastFrameComposer ? 18 : 18, alignItems: 'flex-end', marginBottom: 14 }}>
              
              {/* 左侧附件区域 */}
              <div style={{ width: isFirstLastFrameComposer ? 220 : 70, minWidth: isFirstLastFrameComposer ? 220 : 70, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'flex-start', paddingTop: 2, gap: 8 }}>


                {/* 首尾帧模式 */}
                {mediaType === 'video' && referenceMode === 'first_last_frame' ? (
                  <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'stretch', gap: 12, width: '100%', height: 100 }}>
                    {/* 首帧 */}
                    <div style={{ position: 'relative', flex: 1, minWidth: 0, height: 100, borderRadius: 12, border: '1px solid #E7EAF0', background: '#ffffff', boxShadow: '0 6px 16px rgba(47, 52, 64, 0.04)', overflow: 'hidden' }}>
                      <div style={{ position: 'absolute', top: 8, left: 10, right: 10, display: 'flex', alignItems: 'center', justifyContent: 'space-between', zIndex: 2 }}>
                        <span style={{ fontSize: 11, fontWeight: 600, color: '#8b5cf6', lineHeight: 1 }}>首帧(可选)</span>
                      </div>
                      {firstFrame ? (
                        <div style={{ position: 'absolute', left: 10, right: 10, bottom: 10, height: 64 }}>
                          <img
                            src={buildPreviewUrl(firstFrame.url)}
                            alt={firstFrame.name}
                            onClick={() => {
                              setAttachmentPreviewUrl(firstFrame.url);
                              setAttachmentPreviewType('image');
                              setAttachmentPreviewName(firstFrame.name);
                              setAttachmentPreviewVisible(true);
                            }}
                            style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 8, cursor: 'pointer', border: '1px solid rgba(139, 92, 246, 0.2)', boxShadow: '0 3px 10px rgba(47, 52, 64, 0.06)' }}
                          />
                          <button
                            onClick={handleRemoveFirstFrame}
                            style={{ position: 'absolute', top: -6, right: -6, width: 18, height: 18, border: 'none', background: '#A45B5B', borderRadius: 50, cursor: 'pointer', color: '#fff', fontSize: 9, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 2px 4px rgba(164, 91, 91, 0.3)', zIndex: 10 }}
                          >
                            <DeleteOutlined style={{ fontSize: 9 }} />
                          </button>
                        </div>
                      ) : (
                        <UploadSelector
                          accept="image/*"
                          multiple={false}
                          onLocalSelect={(files) => {
                            if (files.length > 0) {
                              handleUpload(files[0], 'first');
                            }
                          }}
                          onHistorySelect={(items) => {
                            if (items.length > 0) {
                              const item = items[0];
                              const mediaRef: MediaReference = {
                                name: item.fileName || '',
                                type: 'image',
                                url: item.resourceUrl || item.previewUrl || item.displayUrl || '',
                                role: 'first_frame',
                                label: '',
                              };
                              setFirstFrame(mediaRef);
                              antdMessage.success('成功添加首帧');
                            }
                          }}
                          onPortraitSelect={(assets) => {
                            if (assets.length > 0) {
                              const asset = assets[0];
                              const previewUrl = asset.previewUrl || asset.displayUrl || asset.videoCoverUrl || asset.providerUrl || '';
                              const mediaRef: MediaReference = {
                                name: asset.name || '首帧图片',
                                type: 'image',
                                url: previewUrl,
                                role: 'first_frame',
                                label: '',
                                source: 'private_portrait_asset',
                                private_asset_id: asset.id,
                              };
                              setFirstFrame(mediaRef);
                              antdMessage.success('成功添加首帧');
                            }
                          }}
                          uploading={uploading}
                        >
                          <div
                            style={{ position: 'absolute', left: 10, right: 10, bottom: 10, height: 64, borderRadius: 8, border: '1px dashed rgba(139, 92, 246, 0.28)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', transition: 'all 0.25s ease', backgroundColor: 'rgba(139, 92, 246, 0.04)', flexDirection: 'column', gap: 4 }}
                            onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#a78bfa'; e.currentTarget.style.backgroundColor = 'rgba(139, 92, 246, 0.08)'; }}
                            onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(139, 92, 246, 0.28)'; e.currentTarget.style.backgroundColor = 'rgba(139, 92, 246, 0.04)'; }}
                          >
                            <PlusOutlined style={{ fontSize: 18, color: '#8b5cf6' }} />
                            <span style={{ fontSize: 12, color: '#8b5cf6', fontWeight: 500 }}>上传首帧</span>
                          </div>
                        </UploadSelector>
                      )}
                    </div>

                    {/* 调换按钮 */}
                    <button
                      onClick={handleSwapFrames}
                      disabled={!firstFrame || !lastFrame}
                      title="调换首尾帧"
                      style={{ width: 32, height: 32, alignSelf: 'center', borderRadius: 50, border: '1px solid rgba(231, 234, 240, 0.95)', background: firstFrame && lastFrame ? 'linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%)' : '#F3F5F8', cursor: firstFrame && lastFrame ? 'pointer' : 'not-allowed', color: firstFrame && lastFrame ? '#fff' : '#98A2B3', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: firstFrame && lastFrame ? '0 6px 14px rgba(139, 92, 246, 0.24)' : 'none', transition: 'all 0.2s ease', flexShrink: 0 }}
                      onMouseEnter={(e) => { if (firstFrame && lastFrame) e.currentTarget.style.transform = 'scale(1.06)'; }}
                      onMouseLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
                    >
                      <SwapOutlined style={{ fontSize: 14 }} />
                    </button>

                    {/* 尾帧 */}
                    <div style={{ position: 'relative', flex: 1, minWidth: 0, height: 100, borderRadius: 12, border: '1px solid #E7EAF0', background: '#ffffff', boxShadow: '0 6px 16px rgba(47, 52, 64, 0.04)', overflow: 'hidden', opacity: !firstFrame ? 0.5 : 1 }}>
                      <div style={{ position: 'absolute', top: 8, left: 10, right: 10, display: 'flex', alignItems: 'center', justifyContent: 'space-between', zIndex: 2 }}>
                        <span style={{ fontSize: 11, fontWeight: 600, color: '#8b5cf6', lineHeight: 1 }}>尾帧</span>
                      </div>
                      {lastFrame ? (
                        <div style={{ position: 'absolute', left: 10, right: 10, bottom: 10, height: 64 }}>
                          <img
                            src={buildPreviewUrl(lastFrame.url)}
                            alt={lastFrame.name}
                            onClick={() => {
                              setAttachmentPreviewUrl(lastFrame.url);
                              setAttachmentPreviewType('image');
                              setAttachmentPreviewName(lastFrame.name);
                              setAttachmentPreviewVisible(true);
                            }}
                            style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 8, cursor: 'pointer', border: '1px solid rgba(139, 92, 246, 0.2)', boxShadow: '0 3px 10px rgba(47, 52, 64, 0.06)' }}
                          />
                          <button
                            onClick={handleRemoveLastFrame}
                            style={{ position: 'absolute', top: -6, right: -6, width: 18, height: 18, border: 'none', background: '#A45B5B', borderRadius: 50, cursor: 'pointer', color: '#fff', fontSize: 9, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 2px 4px rgba(164, 91, 91, 0.3)', zIndex: 10 }}
                          >
                            <DeleteOutlined style={{ fontSize: 9 }} />
                          </button>
                        </div>
                      ) : (
                        firstFrame ? (
                          <UploadSelector
                            accept="image/*"
                            multiple={false}
                            onLocalSelect={(files) => {
                              if (files.length > 0) {
                                handleUpload(files[0], 'last');
                              }
                            }}
                            onHistorySelect={(items) => {
                              if (items.length > 0) {
                                const item = items[0];
                                const mediaRef: MediaReference = {
                                  name: item.fileName || '',
                                  type: 'image',
                                  url: item.resourceUrl || item.previewUrl || item.displayUrl || '',
                                  role: 'last_frame',
                                  label: '',
                                };
                                setLastFrame(mediaRef);
                                antdMessage.success('成功添加尾帧');
                              }
                            }}
                            onPortraitSelect={(assets) => {
                            if (assets.length > 0) {
                              const asset = assets[0];
                              const previewUrl = asset.previewUrl || asset.displayUrl || asset.videoCoverUrl || asset.providerUrl || '';
                              const mediaRef: MediaReference = {
                                name: asset.name || '尾帧图片',
                                type: 'image',
                                url: previewUrl,
                                role: 'last_frame',
                                label: '',
                                source: 'private_portrait_asset',
                                private_asset_id: asset.id,
                              };
                              setLastFrame(mediaRef);
                              antdMessage.success('成功添加尾帧');
                            }
                          }}
                            uploading={uploading}
                          >
                            <div
                              style={{ position: 'absolute', left: 10, right: 10, bottom: 10, height: 64, borderRadius: 8, border: '1px dashed rgba(139, 92, 246, 0.24)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', transition: 'all 0.25s ease', backgroundColor: 'rgba(139, 92, 246, 0.04)', flexDirection: 'column', gap: 4 }}
                              onMouseEnter={(e) => { e.currentTarget.style.borderColor = '#a78bfa'; e.currentTarget.style.backgroundColor = 'rgba(139, 92, 246, 0.08)'; }}
                              onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'rgba(139, 92, 246, 0.24)'; e.currentTarget.style.backgroundColor = 'rgba(139, 92, 246, 0.04)'; }}
                            >
                              <PlusOutlined style={{ fontSize: 18, color: '#8b5cf6' }} />
                              <span style={{ fontSize: 12, color: '#8b5cf6', fontWeight: 500 }}>上传尾帧</span>
                            </div>
                          </UploadSelector>
                        ) : (
                          <div
                            style={{ position: 'absolute', left: 10, right: 10, bottom: 10, height: 64, borderRadius: 8, border: '1px dashed rgba(226, 232, 240, 0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'not-allowed', backgroundColor: 'rgba(241, 245, 249, 0.5)', flexDirection: 'column', gap: 4 }}
                          >
                            <PlusOutlined style={{ fontSize: 18, color: '#cbd5e1' }} />
                            <span style={{ fontSize: 12, color: '#94a3b8', fontWeight: 500 }}>请先上传首帧</span>
                          </div>
                        )
                      )}
                    </div>
                  </div>) : (
                  <>

                    {/* 上传区域 - 图片堆叠展示，右下角圆形+按钮 */}
                    {!(mediaType === 'video' && referenceMode === 'first_last_frame') && (
                      <div
                        style={{
                          position: 'relative',
                          width: 64,
                          height: 72,
                          marginTop: '-10',
                        }}
                        onMouseEnter={openMediaStackTray}
                        onMouseLeave={closeMediaStackTray}
                      >
                        {/* 没有上传时的卡片样式 */}
                        {currentMedia.length === 0 && (
                          <UploadSelector
                            accept={mediaType === 'image' ? 'image/*' : 'image/*,video/*,audio/*'}
                            onLocalSelect={handleBatchUpload}
                            onHistorySelect={handleUploadResourceHistorySelected}
                            onPortraitLibrarySelect={(libraryType) => {
                              openPrivatePortraitPicker(libraryType);
                            }}
                            uploading={uploading}
                            tooltipTitle={mediaType === 'image'
                              ? `图片${currentMedia.filter(m => m.type === 'image').length}/${maxImageCount}`
                              : `图片${currentMedia.filter(m => m.type === 'image').length}/${maxImageCount}，
                              视频${currentMedia.filter(m => m.type === 'video').length}/${maxVideoCount}${maxAudio > 0 ? `，
                              音频${currentMedia.filter(m => m.type === 'audio').length}/${maxAudio}` : ''}`
                            }
                            maxImageCount={maxImageCount}
                            maxVideoCount={maxVideoCount}
                            usedImageCount={currentMedia.filter(m => m.type === 'image').length}
                            usedVideoCount={currentMedia.filter(m => m.type === 'video').length}
                            usedVideoDuration={currentMedia.filter(m => m.type === 'video').reduce((sum, m) => sum + (m.duration || 0), 0)}
                            maxVideoDuration={15}
                            maxAudioCount={maxAudio > 0 ? maxAudio : undefined}
                            usedAudioCount={currentMedia.filter(m => m.type === 'audio').length}
                            maxAudioDuration={15}
                            usedAudioDuration={currentMedia.filter(m => m.type === 'audio').reduce((sum, m) => sum + (m.duration || 0), 0)}
                            hideLimitHint={mediaType === 'image'}
                          >
                            <div
                              style={{
                                width: 54,
                                height: 74,
                                borderRadius: 7,
                                border: '1px solid rgba(231, 234, 240, 0.95)',
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                cursor: 'pointer',
                                transition: 'all 0.25s ease',
                                background: '#f4f4f4',
                                flexDirection: 'column',
                                gap: 5,
                                transform: 'rotate(-7deg)',
                                // boxShadow: '0 9px 20px rgba(47, 52, 64, 0.10), inset 0 1px 0 rgba(255,255,255,0.95)',
                              }}
                              onMouseEnter={(e) => {
                                e.currentTarget.style.borderColor = '#D7DDE7';
                                e.currentTarget.style.background = '#f4f4f4';
                                e.currentTarget.style.transform = 'rotate(0deg) translateY(-2px)';
                                // e.currentTarget.style.boxShadow = '0 14px 28px rgba(47, 52, 64, 0.15), inset 0 1px 0 rgba(255,255,255,0.98)';
                              }}
                              onMouseLeave={(e) => {
                                e.currentTarget.style.borderColor = 'rgba(231, 234, 240, 0.95)';
                                e.currentTarget.style.background = '#f4f4f4';
                                e.currentTarget.style.transform = 'rotate(-7deg)';
                                // e.currentTarget.style.boxShadow = '0 9px 20px rgba(47, 52, 64, 0.10), inset 0 1px 0 rgba(255,255,255,0.95)';
                              }}
                            >
                              {uploading ? (
                                <LoadingOutlined style={{ fontSize: 17, color: '#667085' }} />
                              ) : (
                                <>
                                  <PlusOutlined style={{ fontSize: 18, color: '#667085', lineHeight: 1 }} />
                                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 14px)', columnGap: 2, justifyContent: 'center', color: '#344054', fontSize: 12, fontWeight: 700, lineHeight: 1.05, letterSpacing: 0 }}>
                                    <span style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 }}><span>参</span><span>考</span></span>
                                    <span style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 }}><span>内</span><span>容</span></span>
                                  </div>
                                </>
                              )}
                            </div>
                          </UploadSelector>
                        )}
                        {/* {mediaType === 'video' && currentMedia.length === 0 && (
                          <Button
                            size="small"
                            onClick={() => setPrivateAssetPickerOpen(true)}
                            style={{ marginTop: 8, borderRadius: 8, color: '#8b5cf6', borderColor: '#ddd6fe', background: '#fff' }}
                          >
                            真人素材库
                          </Button>
                        )} */}

                        {/* 层叠附件展示 - 鼠标移入向右排列展开 */}
                        {currentMedia.length > 0 && (
                          <>
                            {currentMedia.map((media, idx) => {
                              const reversedIdx = Math.min(currentMedia.length, 3) - 1 - idx;
                              const offsetX = mediaStackHovered ? idx * 58 : (idx < 3 ? idx * 6 : 18);
                              const isVisible = !mediaStackHovered ? idx < 3 : true;
                              return (
                                <div
                                  key={`stack-${idx}`}
                                  style={{
                                    position: 'absolute',
                                    left: offsetX,
                                    bottom: 0,
                                    zIndex: idx + 1,
                                    transition: 'all 0.28s cubic-bezier(0.4, 0, 0.2, 1)',
                                    transform: mediaStackHovered ? `scale(1) rotate(0deg)` : `scale(${idx < 3 ? (1 - reversedIdx * 0.08) : 0}) rotate(${idx < 3 ? (-3 + idx * 1.5) : 0}deg)`,
                                    opacity: isVisible ? (mediaStackHovered ? 1 : (1 - reversedIdx * 0.15)) : 0,
                                    pointerEvents: isVisible ? 'auto' : 'none',
                                  }}
                                >
                                  <div style={{ position: 'relative', width: 52, height: 60 }}>
                                    {media.type === 'image' ? (
                                      <img
                                        src={buildPreviewUrl(media.url)}
                                        alt={media.name}
                                        onClick={() => {
                                          setAttachmentPreviewUrl(media.url);
                                          setAttachmentPreviewType('image');
                                          setAttachmentPreviewName(media.name);
                                          setAttachmentPreviewVisible(true);
                                        }}
                                        style={{ width: 52, height: 60, objectFit: 'cover', borderRadius: 10, cursor: 'pointer', border: '1px solid rgba(255,255,255,0.98)', boxShadow: '0 4px 12px rgba(31,41,55,0.15)' }}
                                      />
                                    ) : media.type === 'video' ? (
                                      <video
                                        src={buildPreviewUrl(media.url)}
                                        muted
                                        onClick={() => {
                                          setAttachmentPreviewUrl(media.url);
                                          setAttachmentPreviewType('video');
                                          setAttachmentPreviewName(media.name);
                                          setAttachmentPreviewVisible(true);
                                        }}
                                        style={{ width: 52, height: 60, objectFit: 'cover', borderRadius: 10, cursor: 'pointer', border: '1px solid rgba(255,255,255,0.98)', boxShadow: '0 4px 12px rgba(31,41,55,0.15)' }}
                                      />
                                    ) : (
                                      <div
                                        onClick={(e) => {
                                          e.stopPropagation();
                                          handleAudioPlay(media.url);
                                        }}
                                        style={{ width: 52, height: 60, objectFit: 'cover', borderRadius: 10, cursor: 'pointer', border: '1px solid rgba(255,255,255,0.98)', boxShadow: '0 4px 12px rgba(31,41,55,0.15)', background: 'linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
                                      >
                                        {playingAudioUrl === (buildPreviewUrl(media.url)) ? (
                                          <PauseOutlined style={{ fontSize: 20, color: '#fff' }} />
                                        ) : (
                                          <AudioOutlined style={{ fontSize: 20, color: '#fff' }} />
                                        )}
                                      </div>
                                    )}
                                    {/* 右上角删除按钮 */}
                                    <button
                                      onClick={() => handleRemoveMedia(idx)}
                                      style={{
                                        position: 'absolute',
                                        top: -6,
                                        right: -6,
                                        width: 20,
                                        height: 20,
                                        borderRadius: 50,
                                        background: '#1f2937',
                                        border: 'none',
                                        color: '#fff',
                                        cursor: 'pointer',
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        boxShadow: '0 2px 6px rgba(0,0,0,0.2)',
                                        zIndex: 10,
                                        transition: 'all 0.2s ease',
                                      }}
                                      onMouseEnter={(e) => {
                                        e.currentTarget.style.background = '#dc2626';
                                        e.currentTarget.style.transform = 'scale(1.1)';
                                      }}
                                      onMouseLeave={(e) => {
                                        e.currentTarget.style.background = '#1f2937';
                                        e.currentTarget.style.transform = 'scale(1)';
                                      }}
                                    >
                                      <DeleteOutlined style={{ fontSize: 10 }} />
                                    </button>
                                  </div>
                                </div>
                              );
                            })}
                          </>
                        )}

                        {/* 右下角圆形+上传按钮 */}
                        {currentMedia.length > 0 && (
                          <UploadSelector
                            accept={mediaType === 'image' ? 'image/*' : 'image/*,video/*,audio/*'}
                            onLocalSelect={handleBatchUpload}
                            onHistorySelect={handleUploadResourceHistorySelected}
                            onPortraitLibrarySelect={(libraryType) => {
                              openPrivatePortraitPicker(libraryType);
                            }}
                            uploading={uploading}
                            tooltipTitle={mediaType === 'image'
                              ? `图片${currentMedia.filter(m => m.type === 'image').length}/${maxImageCount}`
                              : `图片${currentMedia.filter(m => m.type === 'image').length}/${maxImageCount}，
                              视频${currentMedia.filter(m => m.type === 'video').length}/${maxVideoCount}${maxAudio > 0 ? `，
                              音频${currentMedia.filter(m => m.type === 'audio').length}/${maxAudio}` : ''}`
                            }
                            maxImageCount={maxImageCount}
                            maxVideoCount={maxVideoCount}
                            usedImageCount={currentMedia.filter(m => m.type === 'image').length}
                            usedVideoCount={currentMedia.filter(m => m.type === 'video').length}
                            usedVideoDuration={currentMedia.filter(m => m.type === 'video').reduce((sum, m) => sum + (m.duration || 0), 0)}
                            maxVideoDuration={15}
                            maxAudioCount={maxAudio > 0 ? maxAudio : undefined}
                            usedAudioCount={currentMedia.filter(m => m.type === 'audio').length}
                            maxAudioDuration={15}
                            usedAudioDuration={currentMedia.filter(m => m.type === 'audio').reduce((sum, m) => sum + (m.duration || 0), 0)}
                            hideLimitHint={mediaType === 'image'}
                          >
                            <div
                              style={{
                                position: 'absolute',
                                right: 0,
                                bottom: 0,
                                width: 28,
                                height: 28,
                                borderRadius: 50,
                                background: '#ffffff',
                                border: '1px solid rgba(231, 234, 240, 0.95)',
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                cursor: 'pointer',
                                transition: 'all 0.2s ease',
                                boxShadow: '0 2px 8px rgba(47, 52, 64, 0.08)',
                                zIndex: 100,
                              }}
                              onMouseEnter={(e) => {
                                e.currentTarget.style.borderColor = '#8b5cf6';
                                e.currentTarget.style.boxShadow = '0 4px 12px rgba(139, 92, 246, 0.2)';
                              }}
                              onMouseLeave={(e) => {
                                e.currentTarget.style.borderColor = 'rgba(231, 234, 240, 0.95)';
                                e.currentTarget.style.boxShadow = '0 2px 8px rgba(47, 52, 64, 0.08)';
                              }}
                            >
                              <PlusOutlined style={{ fontSize: 14, color: '#8b5cf6', lineHeight: 1 }} />
                            </div>
                          </UploadSelector>
                        )}
                        {/* {mediaType === 'video' && currentMedia.length > 0 && (
                          <Tooltip title="选择真人素材库">
                            <div
                              onClick={(e) => { e.stopPropagation(); setPrivateAssetPickerOpen(true); }}
                              style={{
                                position: 'absolute',
                                right: -32,
                                bottom: 0,
                                width: 28,
                                height: 28,
                                borderRadius: 50,
                                background: '#fff',
                                border: '1px solid #ddd6fe',
                                color: '#8b5cf6',
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center',
                                cursor: 'pointer',
                                fontSize: 12,
                                fontWeight: 800,
                                boxShadow: '0 2px 8px rgba(47, 52, 64, 0.08)',
                                zIndex: 100,
                              }}
                            >
                              真
                            </div>
                          </Tooltip>
                        )} */}
                      </div>
                    )}
                  </>
                )}
              </div>

              {/* 右侧输入区域 */}
              <div style={{ flex: 1, minWidth: 0 }}>
                {/* 输入框区域 */}
                <div style={{
                  display: 'flex',
                  flexDirection: 'column',
                  gap: 6,
                  padding: '0',
                  backgroundColor: 'transparent',
                  borderRadius: 0,
                  border: 'none',
                  boxShadow: 'none',
                  transition: 'all 0.2s ease',
                  position: 'relative',
                  minHeight: isFirstLastFrameComposer ? 92 : 74,
                }}>
                  {/* {!inputValue.trim() && (
                        <div style={{ display: 'flex', alignItems: 'center', gap: 10, minHeight: 22, paddingTop: 1 }}>
                          <span style={{ fontSize: 13, fontWeight: 800, color: '#475467', letterSpacing: 0.1, whiteSpace: 'nowrap' }}>{composerModeLabel}</span>
                          <span style={{ fontSize: 13, color: '#667085', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontWeight: 500 }}>{composerHelperText}</span>
                        </div>
                    )} */}
                  {/* 文本输入框 */}
                  <TextArea
                    ref={mentionInputRef}
                    value={inputValue}
                    onChange={handleInputChange}
                    onKeyDown={handleInputKeyDown}
                    onPaste={(e) => {
                      const items = e.clipboardData?.items;
                      if (!items) return;
                      const imageFiles: File[] = [];
                      for (let i = 0; i < items.length; i++) {
                        if (items[i].type.startsWith('image/')) {
                          const file = items[i].getAsFile();
                          if (file) imageFiles.push(file);
                        }
                      }
                      if (imageFiles.length > 0) {
                        e.preventDefault();
                        imageFiles.forEach(async (file) => {
                          await handleUpload(file);
                        });
                      }
                    }}
                    placeholder={composerPlaceholder}
                    autoSize={{ minRows: 3, maxRows: 6 }}
                    style={{
                      width: '100%',
                      borderRadius: 0,
                      border: 'none',
                      outline: 'none',
                      boxShadow: 'none',
                      fontSize: 14,
                      lineHeight: 1.72,
                      color: '#2f3440',
                      fontWeight: 500,
                      resize: 'none',
                      backgroundColor: 'transparent',
                      padding: 10,

                    }}
                    disabled={loading}
                  />

                  {/* @ 提及下拉列表 */}
                  {mentionVisible && currentMedia.length > 0 && referenceMode === 'universal' && (
                    <div
                      style={{
                        position: 'absolute',
                        bottom: '100%',
                        left: 10,
                        marginBottom: 8,
                        zIndex: 1000,
                        background: '#fff',
                        borderRadius: 16,
                        boxShadow: '0 18px 42px rgba(47, 52, 64, 0.12)',
                        border: '1px solid #E7EAF0',
                        padding: 8,
                        minWidth: 160,
                        maxHeight: 260,
                        overflowY: 'auto',
                      }}
                    >
                      {currentMedia.map((media, idx) => (
                        <div
                          key={idx}
                          onClick={() => insertMention(media.label)}
                          style={{
                            padding: '8px 12px',
                            borderRadius: 6,
                            cursor: 'pointer',
                            display: 'flex',
                            alignItems: 'center',
                            gap: 8,
                            fontSize: 13,
                            color: '#2f3440',
                            transition: 'all 0.15s',
                          }}
                          onMouseEnter={(e) => {
                            e.currentTarget.style.background = 'rgba(139, 92, 246, 0.08)';
                            e.currentTarget.style.color = '#8b5cf6';
                          }}
                          onMouseLeave={(e) => {
                            e.currentTarget.style.background = 'transparent';
                            e.currentTarget.style.color = '#2f3440';
                          }}
                        >
                          {media.type === 'image' ? (
                            <PictureOutlined style={{ fontSize: 14, color: '#8b5cf6' }} />
                          ) : (
                            <VideoCameraOutlined style={{ fontSize: 14, color: '#8b5cf6' }} />
                          )}
                          <span>{media.label}</span>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            </div>

            {/* 底部工具栏 */}
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 14, marginTop: 10, paddingTop: 13, borderTop: '1px solid rgba(231, 234, 240, 0.76)' }}>
              <Space size={8} wrap style={{ flex: 1, minWidth: 0 }}>
                {/* <span>
                  创作类型：
                </span> */}
                {/* 文件类型选择器 */}
                <div style={{ position: 'relative', display: 'inline-block' }}>
                  <button
                    onClick={() => {
                      setShowEngineModal(false);
                      setShowImageSettingsModal(false);
                      setShowVideoSettingsModal(false);
                      setReferenceModeDropdownVisible(false);
                      setShowMediaTypeModal(prev => !prev);
                    }}
                    className="image-settings-trigger"
                    style={{
                      minWidth: 118,
                      padding: '5px 12px',
                      height: 32,
                      borderRadius: 10,
                      border: '1px solid #E7EAF0',
                      backgroundColor: '#ffffff',
                      cursor: 'pointer',
                      display: 'inline-flex',
                      alignItems: 'center',
                      gap: 6,
                      transition: 'all 0.2s ease',
                      boxShadow: '0 1px 2px rgba(47, 52, 64, 0.025)',
                    }}
                    onMouseEnter={(e) => {
                      e.currentTarget.style.backgroundColor = '#FFFFFF';
                      e.currentTarget.style.borderColor = '#D7DDE7';
                      e.currentTarget.style.boxShadow = '0 2px 8px rgba(47, 52, 64, 0.06)';
                    }}
                    onMouseLeave={(e) => {
                      e.currentTarget.style.backgroundColor = '#ffffff';
                      e.currentTarget.style.borderColor = '#E7EAF0';
                      e.currentTarget.style.boxShadow = '0 1px 2px rgba(47, 52, 64, 0.03)';
                    }}
                  >
                    {mediaType === 'video' ? (
                      <VideoCameraOutlined style={{ fontSize: 14, color: '#8b5cf6' }} />
                    ) : (
                      <PictureOutlined style={{ fontSize: 14, color: '#8b5cf6' }} />
                    )}
                    <Text style={{
                      fontSize: 13,
                      fontWeight: 500,
                      color: '#2f3440',
                    }}>
                      {mediaType === 'video' ? '视频生成' : '图片生成'}
                    </Text>
                    <CaretDownOutlined style={{ fontSize: 10, color: '#8b5cf6', marginLeft: 'auto' }} />
                  </button>

                  {showMediaTypeModal && (
                    <div
                      className="image-settings-popover"
                      style={{
                        position: 'absolute',
                        bottom: 'calc(100% + 8px)',
                        left: 0,
                        width: 300,
                        backgroundColor: '#ffffff',
                        backdropFilter: 'blur(16px)',
                        borderRadius: 16,
                        boxShadow: '0 20px 48px rgba(47, 52, 64, 0.12)',
                        padding: 16,
                        border: '1px solid #E7EAF0',
                        zIndex: 9999,
                      }}
                      onClick={(e) => e.stopPropagation()}
                    >
                      <div style={{ marginBottom: 8 }}>
                        <Text style={{
                          display: 'block',
                          marginBottom: 8,
                          fontSize: 12,
                          fontWeight: 600,
                          color: '#475467',
                        }}>
                          创作类型
                        </Text>
                        <div style={{
                          display: 'flex',
                          flexDirection: 'column',
                          gap: 4,
                        }}>
                          {[
                            { value: 'video', label: '视频生成', icon: VideoCameraOutlined },
                            { value: 'image', label: '图片生成', icon: PictureOutlined },
                          ].map((item) => (
                            <button
                              key={item.value}
                              onClick={() => {
                                setMediaType(item.value);
                                setShowMediaTypeModal(false);
                                setCurrentMedia([]);
                                setInputValue('');
                              }}
                              style={{
                                flex: 1,
                                minHeight: 48,
                                borderRadius: 10,
                                border: mediaType === item.value
                                  ? '1px solid #8b5cf6'
                                  : '1px solid #E7EAF0',
                                backgroundColor: mediaType === item.value
                                  ? '#f5f3ff'
                                  : '#ffffff',
                                cursor: 'pointer',
                                display: 'flex',
                                alignItems: 'center',
                                padding: '8px 12px',
                                transition: 'all 0.2s',
                                textAlign: 'left',
                                gap: 8,
                              }}
                            >
                              <item.icon style={{ fontSize: 14, color: mediaType === item.value ? '#8b5cf6' : '#98a2b3' }} />
                              <span style={{
                                fontSize: 14,
                                fontWeight: mediaType === item.value ? 600 : 500,
                                color: mediaType === item.value ? '#8b5cf6' : '#475467',
                              }}>
                                {item.label}
                              </span>
                            </button>
                          ))}
                        </div>
                      </div>
                    </div>
                  )}
                </div>

                {/* 引擎选择器 */}
                <div style={{ position: 'relative', display: 'inline-block' }}>
                  <button
                    onClick={() => {
                      setShowMediaTypeModal(false);
                      setShowImageSettingsModal(false);
                      setShowVideoSettingsModal(false);
                      setReferenceModeDropdownVisible(false);
                      setShowEngineModal(prev => !prev);
                    }}
                    className="image-settings-trigger"
                    style={{
                      minWidth: 174,
                      padding: '5px 12px',
                      height: 32,
                      borderRadius: 10,
                      border: '1px solid #E7EAF0',
                      backgroundColor: '#ffffff',
                      cursor: 'pointer',
                      display: 'inline-flex',
                      alignItems: 'center',
                      gap: 6,
                      transition: 'all 0.2s ease',
                      boxShadow: '0 1px 2px rgba(47, 52, 64, 0.025)',
                    }}
                    onMouseEnter={(e) => {
                      e.currentTarget.style.backgroundColor = '#FFFFFF';
                      e.currentTarget.style.borderColor = '#D7DDE7';
                      e.currentTarget.style.boxShadow = '0 2px 8px rgba(47, 52, 64, 0.06)';
                    }}
                    onMouseLeave={(e) => {
                      e.currentTarget.style.backgroundColor = '#ffffff';
                      e.currentTarget.style.borderColor = '#E7EAF0';
                      e.currentTarget.style.boxShadow = '0 1px 2px rgba(47, 52, 64, 0.03)';
                    }}
                  >
                    <SettingOutlined style={{ fontSize: 14, color: '#8b5cf6' }} />
                    <Text style={{
                      fontSize: 13,
                      fontWeight: 500,
                      color: '#2f3440',
                    }}>
                      {mediaType === 'image' ? enginesData.image?.find((e: any) => e.id === countType)?.name : enginesData.video?.find((e: any) => e.id === countType)?.name || '选择引擎'}
                    </Text>
                    <CaretDownOutlined style={{ fontSize: 10, color: '#8b5cf6', marginLeft: 'auto' }} />
                  </button>

                  {showEngineModal && (
                    <div
                      className="image-settings-popover"
                      style={{
                        position: 'absolute',
                        bottom: 'calc(100% + 8px)',
                        left: 0,
                        width: 360,
                        backgroundColor: '#ffffff',
                        backdropFilter: 'blur(16px)',
                        borderRadius: 16,
                        boxShadow: '0 20px 48px rgba(47, 52, 64, 0.12)',
                        padding: 16,
                        border: '1px solid #E7EAF0',
                        zIndex: 9999,
                      }}
                      onClick={(e) => e.stopPropagation()}
                    >
                      {/* 选择引擎 */}
                      <div style={{ marginBottom: 8 }}>
                        <Text style={{
                          display: 'block',
                          marginBottom: 8,
                          fontSize: 12,
                          fontWeight: 600,
                          color: '#475467',
                        }}>
                          选择引擎
                        </Text>
                        <div style={{
                          display: 'flex',
                          flexDirection: 'column',
                          gap: 4,
                        }}>
                          {(mediaType === 'image' ? enginesData.image : enginesData.video)?.map((engine: any) => (
                            <button
                              key={engine.id}
                              onClick={() => {
                                setCountType(engine.id);
                                if (mediaType === 'video') {
                                  setEngineOptions({
                                    ratios: engine.supportedRatios || ['16:9', '4:3', '1:1', '3:4', '9:16', '21:9'],
                                    resolutions: engine.supportedResolutions || ['480p', '720p', '1080p'],
                                    durations: engine.supportedDurations || [5, 8, 10, 12, 15],
                                  });
                                  if (!engine.supportedRatios?.includes(videoAspectRatio)) {
                                    setVideoAspectRatio(engine.supportedRatios?.[0] || '16:9');
                                  }
                                  if (!engine.supportedResolutions?.includes(videoResolution)) {
                                    setVideoResolution(engine.supportedResolutions?.[0] || '720p');
                                  }
                                  if (!engine.supportedDurations?.includes(videoDuration)) {
                                    setVideoDuration(engine.supportedDurations?.[0] || 5);
                                  }
                                }
                                if (mediaType === 'image') {
                                  const supportedSizes = engine.supportedSizes || {};
                                  const resolutionLevels = Object.keys(supportedSizes).sort((a, b) => {
                                    const levelOrder = { '1K': 0, '2K': 1, '4K': 2 };
                                    return (levelOrder[a] || 0) - (levelOrder[b] || 0);
                                  });

                                  const primaryResolution = resolutionLevels[0] || '2K';
                                  const supportedResolutions = Object.keys(supportedSizes[primaryResolution] || {});

                                  const newRatioOptions = supportedResolutions.map((res: any) => ({
                                    value: res,
                                    label: res,
                                  }));
                                  setRatioOptions(newRatioOptions);
                                  setCurrentEngineSupportedSizes(supportedSizes);
                                  setResolutionOptions(resolutionLevels.map((level) => {
                                    const match = level.match(/(\d+)K/);
                                    const num = match ? parseInt(match[1]) : 1;
                                    const labels: Record<number, string> = { 1: '标清', 2: '高清', 4: '超清' };
                                    return {
                                      value: level,
                                      label: `${labels[num] || '高清'} ${level}`,
                                    };
                                  }));

                                  if (supportedSizes[primaryResolution] && supportedSizes[primaryResolution][supportedResolutions[0]]) {
                                    const defaultSize = supportedSizes[primaryResolution][supportedResolutions[0]];
                                    const [w, h] = defaultSize.split(/[×x]/);
                                    setWidth(Number(w));
                                    setHeight(Number(h));
                                    setSelectedRatio(supportedResolutions[0]);
                                    setSelectedResolution(primaryResolution);
                                  }
                                }
                                setShowEngineModal(false);
                              }}
                              style={{
                                flex: 1,
                                minHeight: 48,
                                borderRadius: 10,
                                border: countType === engine.id
                                  ? '1px solid #8b5cf6'
                                  : '1px solid #E7EAF0',
                                backgroundColor: countType === engine.id
                                  ? '#f5f3ff'
                                  : '#ffffff',
                                cursor: 'pointer',
                                display: 'flex',
                                flexDirection: 'column',
                                justifyContent: 'center',
                                alignItems: 'flex-start',
                                padding: '8px 12px',
                                transition: 'all 0.2s',
                                textAlign: 'left',
                              }}
                            >
                              <span style={{
                                fontSize: 14,
                                fontWeight: countType === engine.id ? 600 : 500,
                                color: countType === engine.id ? '#8b5cf6' : '#475467',
                                marginBottom: 2,
                              }}>
                                {engine.name}
                              </span>
                              <span style={{
                                fontSize: 11,
                                color: '#98a2b3',
                              }}>
                              </span>
                            </button>
                          ))}
                        </div>
                      </div>
                    </div>
                  )}
                </div>

                {/* 参考模式切换按钮 - 仅视频模式显示 */}
                {mediaType === 'video' && (supportsFirstLastFrame || supportsUniversalReference) && (
                  <div style={{ position: 'relative', display: 'inline-block' }}>
                    <button
                      onClick={() => {
                        setShowMediaTypeModal(false);
                        setShowEngineModal(false);
                        setShowImageSettingsModal(false);
                        setShowVideoSettingsModal(false);
                        setReferenceModeDropdownVisible(!referenceModeDropdownVisible);
                      }}
                      className="image-settings-trigger"
                      style={{
                        minWidth: 118,
                        padding: '6px 14px',
                        height: 32,
                        borderRadius: 10,
                        border: '1px solid #E7EAF0',
                        backgroundColor: '#ffffff',
                        cursor: 'pointer',
                        display: 'inline-flex',
                        alignItems: 'center',
                        gap: 6,
                        transition: 'all 0.2s ease',
                        boxShadow: '0 1px 2px rgba(47, 52, 64, 0.025)',
                      }}
                      onMouseEnter={(e) => {
                        e.currentTarget.style.backgroundColor = '#FFFFFF';
                        e.currentTarget.style.borderColor = '#D7DDE7';
                        e.currentTarget.style.boxShadow = '0 2px 8px rgba(47, 52, 64, 0.06)';
                      }}
                      onMouseLeave={(e) => {
                        e.currentTarget.style.backgroundColor = '#ffffff';
                        e.currentTarget.style.borderColor = '#E7EAF0';
                        e.currentTarget.style.boxShadow = '0 1px 2px rgba(47, 52, 64, 0.03)';
                      }}
                    >
                      <PictureOutlined style={{ fontSize: 14, color: '#8b5cf6' }} />
                      <Text style={{
                        fontSize: 13,
                        fontWeight: 500,
                        color: '#2f3440',
                      }}>
                        {referenceMode === 'universal' ? '全能参考' : '首尾帧'}
                      </Text>
                      <CaretDownOutlined style={{ fontSize: 10, color: '#8b5cf6', marginLeft: 'auto' }} />
                    </button>

                    {referenceModeDropdownVisible && (
                      <div
                        className="image-settings-popover"
                        style={{
                          position: 'absolute',
                          bottom: 'calc(100% + 8px)',
                          left: 0,
                          width: 300,
                          backgroundColor: '#ffffff',
                          backdropFilter: 'blur(16px)',
                          borderRadius: 16,
                          boxShadow: '0 20px 48px rgba(47, 52, 64, 0.12)',
                          padding: 16,
                          border: '1px solid #E7EAF0',
                          zIndex: 9999,
                        }}
                        onClick={(e) => e.stopPropagation()}
                      >
                        <div style={{ marginBottom: 8 }}>
                          <Text style={{
                            display: 'block',
                            marginBottom: 8,
                            fontSize: 12,
                            fontWeight: 600,
                            color: '#475467',
                          }}>
                            参考模式
                          </Text>
                          <div style={{
                            display: 'flex',
                            flexDirection: 'column',
                            gap: 4,
                          }}>
                            <button
                              onClick={() => {
                                handleReferenceModeChange('universal');
                                setReferenceModeDropdownVisible(false);
                              }}
                              disabled={!supportsUniversalReference}
                              style={{
                                flex: 1,
                                minHeight: 48,
                                borderRadius: 10,
                                border: referenceMode === 'universal'
                                  ? '1px solid #8b5cf6'
                                  : '1px solid #E7EAF0',
                                backgroundColor: referenceMode === 'universal'
                                  ? '#f5f3ff'
                                  : '#ffffff',
                                cursor: supportsUniversalReference ? 'pointer' : 'not-allowed',
                                display: 'flex',
                                alignItems: 'center',
                                padding: '8px 12px',
                                transition: 'all 0.2s',
                                textAlign: 'left',
                                gap: 8,
                                opacity: supportsUniversalReference ? 1 : 0.4,
                              }}
                            >
                              <PictureOutlined style={{ fontSize: 14, color: referenceMode === 'universal' ? '#8b5cf6' : '#98a2b3' }} />
                              <span style={{
                                fontSize: 14,
                                fontWeight: referenceMode === 'universal' ? 600 : 500,
                                color: referenceMode === 'universal' ? '#8b5cf6' : '#475467',
                              }}>
                                全能参考
                              </span>
                              {!supportsUniversalReference && (
                                <span style={{ fontSize: 10, color: '#98a2b3', marginLeft: 'auto' }}>不支持</span>
                              )}
                            </button>
                            <button
                              onClick={() => {
                                handleReferenceModeChange('first_last_frame');
                                setReferenceModeDropdownVisible(false);
                              }}
                              disabled={!supportsFirstLastFrame}
                              style={{
                                flex: 1,
                                minHeight: 48,
                                borderRadius: 10,
                                border: referenceMode === 'first_last_frame'
                                  ? '1px solid #8b5cf6'
                                  : '1px solid #E7EAF0',
                                backgroundColor: referenceMode === 'first_last_frame'
                                  ? '#f5f3ff'
                                  : '#ffffff',
                                cursor: supportsFirstLastFrame ? 'pointer' : 'not-allowed',
                                display: 'flex',
                                alignItems: 'center',
                                padding: '8px 12px',
                                transition: 'all 0.2s',
                                textAlign: 'left',
                                gap: 8,
                                opacity: supportsFirstLastFrame ? 1 : 0.4,
                              }}
                            >
                              <SwapOutlined style={{ fontSize: 14, color: referenceMode === 'first_last_frame' ? '#8b5cf6' : '#98a2b3' }} />
                              <span style={{
                                fontSize: 14,
                                fontWeight: referenceMode === 'first_last_frame' ? 600 : 500,
                                color: referenceMode === 'first_last_frame' ? '#8b5cf6' : '#475467',
                              }}>
                                首尾帧
                              </span>
                              {!supportsFirstLastFrame && (
                                <span style={{ fontSize: 10, color: '#98a2b3', marginLeft: 'auto' }}>不支持</span>
                              )}
                            </button>
                          </div>
                        </div>
                      </div>
                    )}
                  </div>
                )}

                {/* 图片设置按钮 */}
                {mediaType === 'image' && (
                  <div style={{ position: 'relative', display: 'inline-block' }}>
                    <button
                      onClick={() => {
                        setShowMediaTypeModal(false);
                        setShowEngineModal(false);
                        setShowVideoSettingsModal(false);
                        setReferenceModeDropdownVisible(false);
                        setShowImageSettingsModal(!showImageSettingsModal);
                      }}
                      className="image-settings-trigger"
                      style={{
                        minWidth: 156,
                        padding: '6px 14px',
                        height: 32,
                        borderRadius: 10,
                        border: '1px solid #E7EAF0',
                        backgroundColor: '#ffffff',
                        cursor: 'pointer',
                        display: 'inline-flex',
                        alignItems: 'center',
                        gap: 6,
                        transition: 'all 0.2s ease',
                        boxShadow: '0 1px 2px rgba(47, 52, 64, 0.025)',
                      }}
                      onMouseEnter={(e) => {
                        e.currentTarget.style.backgroundColor = '#FFFFFF';
                        e.currentTarget.style.borderColor = '#D7DDE7';
                        e.currentTarget.style.boxShadow = '0 2px 8px rgba(47, 52, 64, 0.06)';
                      }}
                      onMouseLeave={(e) => {
                        e.currentTarget.style.backgroundColor = '#ffffff';
                        e.currentTarget.style.borderColor = '#E7EAF0';
                        e.currentTarget.style.boxShadow = '0 1px 2px rgba(47, 52, 64, 0.03)';
                      }}
                    >
                      <LayoutOutlined style={{ fontSize: 14, color: '#8b5cf6' }} />
                      <Text style={{
                        fontSize: 13,
                        fontWeight: 500,
                        color: '#2f3440',
                      }}>
                        {selectedRatio === 'auto' ? '智能' : selectedRatio} · {selectedResolution == '2K' ? '2K高清' : '4K超清'} · {width}×{height}
                      </Text>
                      <CaretDownOutlined style={{ fontSize: 10, color: '#8b5cf6', marginLeft: 'auto' }} />
                    </button>

                    {showImageSettingsModal && (
                      <div
                        className="image-settings-popover"
                        style={{
                          position: 'absolute',
                          bottom: 'calc(100% + 8px)',
                          left: 0,
                          width: 480,
                          backgroundColor: '#ffffff',
                          backdropFilter: 'blur(16px)',
                          borderRadius: 14,
                          boxShadow: '0 18px 44px rgba(47, 52, 64, 0.12)',
                          padding: 16,
                          border: '1px solid #E7EAF0',
                          zIndex: 9999,
                        }}
                        onClick={(e) => e.stopPropagation()}
                      >
                        {/* 选择比例 */}
                        <div style={{ marginBottom: 16 }}>
                          <Text style={{
                            display: 'block',
                            marginBottom: 8,
                            fontSize: 12,
                            fontWeight: 500,
                            color: '#667085',
                          }}>
                            选择比例
                          </Text>
                          <div style={{
                            display: 'flex',
                            flexWrap: 'wrap',
                            gap: 4,
                          }}>
                            {ratioOptions.map((item: any) => (
                              <button
                                key={item.value}
                                onClick={() => {
                                  setSelectedRatio(item.value);
                                  calculateSizeFromRatione(item.label);
                                }}
                                style={{
                                  flex: '0 0 calc(11.11% - 4px)',
                                  minWidth: 44,
                                  height: 52,
                                  borderRadius: 6,
                                  border: selectedRatio === item.value
                                    ? '2px solid #8b5cf6'
                                    : '1px solid #E7EAF0',
                                  backgroundColor: selectedRatio === item.value
                                    ? '#f5f3ff'
                                    : '#FFFFFF',
                                  cursor: 'pointer',
                                  display: 'flex',
                                  flexDirection: 'column',
                                  justifyContent: 'center',
                                  alignItems: 'center',
                                  transition: 'all 0.2s',
                                }}
                              >
                                <div style={{
                                  width: (() => {
                                    const [w, h] = item.value === 'auto' ? [1, 1] : item.value.split(':').map(Number);
                                    const maxSize = 18;
                                    if (w >= h) return maxSize;
                                    return Math.round(maxSize * (w / h));
                                  })(),
                                  height: (() => {
                                    const [w, h] = item.value === 'auto' ? [1, 1] : item.value.split(':').map(Number);
                                    const maxSize = 18;
                                    if (h >= w) return maxSize;
                                    return Math.round(maxSize * (h / w));
                                  })(),
                                  border: `2px solid ${selectedRatio === item.value ? '#8b5cf6' : '#98a2b3'}`,
                                  borderRadius: 2,
                                  marginBottom: 2,
                                  display: 'flex',
                                  alignItems: 'center',
                                  justifyContent: 'center',
                                }}>
                                  {item.value === 'auto' && (
                                    <span style={{
                                      fontSize: 7,
                                      color: selectedRatio === item.value
                                        ? '#8b5cf6'
                                        : '#98a2b3',
                                    }}>
                                      智
                                    </span>
                                  )}
                                </div>
                                <span style={{
                                  fontSize: 9,
                                  color: selectedRatio === item.value
                                    ? '#8b5cf6'
                                    : '#667085',
                                  fontWeight: selectedRatio === item.value ? 600 : 400,
                                }}>
                                  {item.value}
                                </span>
                              </button>
                            ))}
                          </div>
                        </div>

                        {/* 选择分辨率 */}
                        <div style={{ marginBottom: 16 }}>
                          <Text style={{
                            display: 'block',
                            marginBottom: 8,
                            fontSize: 12,
                            fontWeight: 500,
                            color: '#667085',
                          }}>
                            选择分辨率
                          </Text>
                          <div style={{ display: 'flex', gap: 6 }}>
                            {resolutionOptions.map((item: any) => (
                              <button
                                key={item.value}
                                onClick={() => {
                                  setSelectedResolution(item.value);
                                  calculateSizeFromRatiotwo(item.value);
                                }}
                                style={{
                                  flex: 1,
                                  height: 42,
                                  borderRadius: 6,
                                  border: selectedResolution === item.value
                                    ? '2px solid #8b5cf6'
                                    : '1px solid #E7EAF0',
                                  backgroundColor: selectedResolution === item.value
                                    ? '#8b5cf6'
                                    : '#FFFFFF',
                                  cursor: 'pointer',
                                  display: 'flex',
                                  justifyContent: 'center',
                                  alignItems: 'center',
                                  transition: 'all 0.2s',
                                }}
                              >
                                <span style={{
                                  fontSize: 12,
                                  fontWeight: 600,
                                  color: selectedResolution === item.value
                                    ? '#fff'
                                    : '#475467',
                                }}>
                                  {item.value}
                                  {item.value === '4K' && (
                                    <span style={{ marginLeft: 2 }}>✨</span>
                                  )}
                                </span>
                              </button>
                            ))}
                          </div>
                        </div>

                        {/* 尺寸 */}
                        <div>
                          <Text style={{
                            display: 'block',
                            marginBottom: 8,
                            fontSize: 12,
                            fontWeight: 500,
                            color: '#667085',
                          }}>
                            尺寸
                          </Text>
                          <div style={{
                            display: 'flex',
                            alignItems: 'center',
                            gap: 6,
                          }}>
                            <div style={{
                              display: 'flex',
                              alignItems: 'center',
                              flex: 1,
                              maxWidth: 120,
                            }}>
                              <span style={{
                                color: '#98a2b3',
                                fontSize: 11,
                                marginRight: 4,
                              }}>
                                W
                              </span>
                              <Input
                                value={width}
                                onChange={(e) => setWidth(Number(e.target.value) || 0)}
                                style={{
                                  flex: 1,
                                  textAlign: 'center',
                                  borderRadius: 4,
                                  height: 34,
                                  border: '1px solid #E7EAF0',
                                  backgroundColor: '#FFFFFF',
                                  fontSize: 12,
                                  fontWeight: 600,
                                  color: '#2f3440',
                                }}
                              />
                            </div>

                            <button
                              onClick={handleSwap}
                              style={{
                                width: 24,
                                height: 24,
                                borderRadius: 4,
                                border: '1px solid #E7EAF0',
                                backgroundColor: '#fff',
                                cursor: 'pointer',
                                display: 'flex',
                                justifyContent: 'center',
                                alignItems: 'center',
                                color: '#8b5cf6',
                              }}
                            >
                              <SwapOutlined style={{ fontSize: 10 }} />
                            </button>

                            <div style={{
                              display: 'flex',
                              alignItems: 'center',
                              flex: 1,
                              maxWidth: 120,
                            }}>
                              <span style={{
                                color: '#98a2b3',
                                fontSize: 11,
                                marginRight: 4,
                              }}>
                                H
                              </span>
                              <Input
                                value={height}
                                onChange={(e) => setHeight(Number(e.target.value) || 0)}
                                style={{
                                  flex: 1,
                                  textAlign: 'center',
                                  borderRadius: 4,
                                  height: 34,
                                  border: '1px solid #E7EAF0',
                                  backgroundColor: '#FFFFFF',
                                  fontSize: 12,
                                  fontWeight: 600,
                                  color: '#2f3440',
                                }}
                              />
                            </div>

                            <span style={{ color: '#98a2b3', fontSize: 11 }}>
                              PX
                            </span>
                          </div>
                        </div>
                      </div>
                    )}
                  </div>
                )}

                {/* 视频参数设置 */}
                {mediaType === 'video' && (
                  <div style={{ position: 'relative', display: 'inline-block' }}>
                    <button
                      onClick={() => {
                        setShowMediaTypeModal(false);
                        setShowEngineModal(false);
                        setShowImageSettingsModal(false);
                        setReferenceModeDropdownVisible(false);
                        setShowVideoSettingsModal(!showVideoSettingsModal);
                      }}
                      className="image-settings-trigger"
                      style={{
                        minWidth: 156,
                        padding: '6px 14px',
                        height: 32,
                        borderRadius: 10,
                        border: '1px solid #E7EAF0',
                        backgroundColor: '#ffffff',
                        cursor: 'pointer',
                        display: 'inline-flex',
                        alignItems: 'center',
                        gap: 6,
                        transition: 'all 0.2s ease',
                        boxShadow: '0 1px 2px rgba(47, 52, 64, 0.025)',
                      }}
                      onMouseEnter={(e) => {
                        e.currentTarget.style.backgroundColor = '#FFFFFF';
                        e.currentTarget.style.borderColor = '#D7DDE7';
                        e.currentTarget.style.boxShadow = '0 2px 8px rgba(47, 52, 64, 0.06)';
                      }}
                      onMouseLeave={(e) => {
                        e.currentTarget.style.backgroundColor = '#ffffff';
                        e.currentTarget.style.borderColor = '#E7EAF0';
                        e.currentTarget.style.boxShadow = '0 1px 2px rgba(47, 52, 64, 0.03)';
                      }}
                    >
                      <LayoutOutlined style={{ fontSize: 14, color: '#2f3440' }} />
                      <span style={{ fontSize: 13, fontWeight: 600, color: '#2f3440' }}>{videoAspectRatio}</span>
                      <span style={{ width: 1, height: 14, background: '#E7EAF0' }} />
                      <span style={{ fontSize: 13, fontWeight: 600, color: '#2f3440' }}>{videoResolution?.toUpperCase?.() || videoResolution}</span>
                      <span style={{ width: 1, height: 14, background: '#E7EAF0' }} />
                      <span style={{ fontSize: 13, fontWeight: 600, color: '#2f3440' }}>{videoDuration}秒</span>
                      <CaretDownOutlined style={{ fontSize: 10, color: '#667085', marginLeft: 'auto' }} />
                    </button>

                    {showVideoSettingsModal && (
                      <div
                        className="image-settings-popover"
                        style={{
                          position: 'absolute',
                          bottom: 'calc(100% + 8px)',
                          left: 0,
                          width: 400,
                          backgroundColor: '#ffffff',
                          backdropFilter: 'blur(16px)',
                          borderRadius: 14,
                          boxShadow: '0 18px 44px rgba(47, 52, 64, 0.12)',
                          padding: 16,
                          border: '1px solid #E7EAF0',
                          zIndex: 9999,
                        }}
                        onClick={(e) => e.stopPropagation()}
                      >
                        {/* 选择比例 */}
                        <div style={{ marginBottom: 16 }}>
                          <Text style={{
                            display: 'block',
                            marginBottom: 8,
                            fontSize: 12,
                            fontWeight: 500,
                            color: '#667085',
                          }}>
                            选择比例
                          </Text>
                          <div style={{
                            display: 'flex',
                            flexWrap: 'wrap',
                            gap: 4,
                          }}>
                            {engineOptions.ratios.map((ratio) => (
                              <button
                                key={ratio}
                                onClick={() => setVideoAspectRatio(ratio)}
                                style={{
                                  flex: '0 0 calc(14.28% - 4px)',
                                  minWidth: 44,
                                  height: 52,
                                  borderRadius: 6,
                                  border: videoAspectRatio === ratio
                                    ? '2px solid #8b5cf6'
                                    : '1px solid #E7EAF0',
                                  backgroundColor: videoAspectRatio === ratio
                                    ? '#f5f3ff'
                                    : '#FFFFFF',
                                  cursor: 'pointer',
                                  display: 'flex',
                                  flexDirection: 'column',
                                  justifyContent: 'center',
                                  alignItems: 'center',
                                  transition: 'all 0.2s',
                                }}
                              >
                                <div style={{
                                  width: (() => {
                                    const [w, h] = ratio.split(':').map(Number);
                                    const maxSize = 18;
                                    if (w >= h) return maxSize;
                                    return Math.round(maxSize * (w / h));
                                  })(),
                                  height: (() => {
                                    const [w, h] = ratio.split(':').map(Number);
                                    const maxSize = 18;
                                    if (h >= w) return maxSize;
                                    return Math.round(maxSize * (h / w));
                                  })(),
                                  border: `2px solid ${videoAspectRatio === ratio ? '#8b5cf6' : '#98a2b3'}`,
                                  borderRadius: 2,
                                  marginBottom: 2,
                                }} />
                                <span style={{
                                  fontSize: 9,
                                  color: videoAspectRatio === ratio
                                    ? '#8b5cf6'
                                    : '#667085',
                                  fontWeight: videoAspectRatio === ratio ? 600 : 400,
                                }}>
                                  {ratio}
                                </span>
                              </button>
                            ))}
                          </div>
                        </div>

                        {/* 选择时长 */}
                        <div style={{ marginBottom: 16 }}>
                          <Text style={{
                            display: 'block',
                            marginBottom: 8,
                            fontSize: 12,
                            fontWeight: 500,
                            color: '#667085',
                          }}>
                            选择时长
                          </Text>
                          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                            <div style={{ flex: 1, position: 'relative', height: 24, display: 'flex', alignItems: 'center' }}>
                              {/* 背景轨道 */}
                              <div style={{
                                position: 'absolute',
                                top: '50%',
                                left: 0,
                                right: 0,
                                height: 6,
                                borderRadius: 3,
                                background: '#E7EAF0',
                                transform: 'translateY(-50%)',
                              }} />
                              {/* 已滑动部分 */}
                              <div style={{
                                position: 'absolute',
                                top: '50%',
                                left: 0,
                                height: 6,
                                borderRadius: 3,
                                background: '#8b5cf6',
                                width: `${((videoDuration - Math.min(...engineOptions.durations)) / (Math.max(...engineOptions.durations) - Math.min(...engineOptions.durations))) * 100}%`,
                                transform: 'translateY(-50%)',
                              }} />
                              {/* 滑块 */}
                              <input
                                type="range"
                                min={Math.min(...engineOptions.durations)}
                                max={Math.max(...engineOptions.durations)}
                                value={videoDuration}
                                onChange={(e) => setVideoDuration(Number(e.target.value))}
                                style={{
                                  position: 'relative',
                                  width: '100%',
                                  height: 24,
                                  borderRadius: 3,
                                  background: 'transparent',
                                  outline: 'none',
                                  appearance: 'none',
                                  cursor: 'pointer',
                                  zIndex: 1,
                                }}
                              />
                            </div>
                            <div style={{
                              display: 'flex',
                              alignItems: 'center',
                              gap: 4,
                              padding: '4px 12px',
                              backgroundColor: '#F6F7FA',
                              borderRadius: 6,
                            }}>
                              <span style={{ fontSize: 14, fontWeight: 600, color: '#667085' }}>
                                {videoDuration}
                              </span>
                              <span style={{ fontSize: 12, color: '#98a2b3' }}>秒</span>
                            </div>
                          </div>

                        </div>

                        {/* 选择分辨率 */}
                        <div>
                          <Text style={{
                            display: 'block',
                            marginBottom: 8,
                            fontSize: 12,
                            fontWeight: 500,
                            color: '#667085',
                          }}>
                            选择分辨率
                          </Text>
                          <div style={{ display: 'flex', gap: 6 }}>
                            {engineOptions.resolutions.map((resolution) => (
                              <button
                                key={resolution}
                                onClick={() => setVideoResolution(resolution)}
                                style={{
                                  flex: 1,
                                  height: 42,
                                  borderRadius: 6,
                                  border: videoResolution === resolution
                                    ? '2px solid #8b5cf6'
                                    : '1px solid #E7EAF0',
                                  backgroundColor: videoResolution === resolution
                                    ? '#8b5cf6'
                                    : '#FFFFFF',
                                  cursor: 'pointer',
                                  display: 'flex',
                                  justifyContent: 'center',
                                  alignItems: 'center',
                                  transition: 'all 0.2s',
                                }}
                              >
                                <span style={{
                                  fontSize: 12,
                                  fontWeight: 600,
                                  color: videoResolution === resolution
                                    ? '#fff'
                                    : '#475467',
                                }}>
                                  {resolution}
                                </span>
                              </button>
                            ))}
                          </div>
                        </div>
                      </div>
                    )}
                  </div>
                )}
              </Space>

              <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0 }}>
                {multiGenerationEnabled && (
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap', height: 34, padding: '0 8px 0 12px', borderRadius: 11, background: 'rgba(255, 255, 255, 0.92)', border: '1px solid rgba(231, 234, 240, 0.92)', boxShadow: '0 4px 12px rgba(47, 52, 64, 0.04)' }}>
                    <Text style={{ fontSize: 13, color: '#667085', fontWeight: 600 }}>生成数量：</Text>
                    <Select
                      value={generationCount}
                      onChange={(value) => setGenerationCount(Number(value || 1))}
                      disabled={effectiveMaxGenerationCount <= 1}
                      size="small"
                      variant="borderless"
                      style={{ width: 68 }}
                      options={Array.from({ length: effectiveMaxGenerationCount }, (_, index) => ({
                        value: index + 1,
                        label: `${index + 1}份`,
                      }))}
                    />
                  </div>
                )}
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: '#667085', whiteSpace: 'nowrap', height: 34, padding: '0 12px', borderRadius: 11, background: 'rgba(255, 255, 255, 0.92)', border: '1px solid rgba(231, 234, 240, 0.92)', boxShadow: '0 4px 12px rgba(47, 52, 64, 0.04)' }}>
                  <Text style={{ fontSize: 13, color: '#667085', fontWeight: 600 }}>预估积分：</Text>
                  <Text style={{ fontSize: 13, color: '#2f3440', fontWeight: 800 }}>{getEstimatedCredits()}</Text>
                </div>
                <Button
                  type="primary"
                  shape="circle"
                  icon={<ArrowUpOutlined />}
                  onClick={handleSend}
                  disabled={!composerCanSend}
                  loading={loading}
                  style={{
                    flexShrink: 0,
                    width: 36,
                    height: 36,
                    borderRadius: '50%',
                    background: composerCanSend
                      ? 'linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%)'
                      : '#E7EAF0',
                    color: '#ffffff',
                    opacity: composerCanSend ? 1 : 0.86,
                    boxShadow: composerCanSend ? '0 10px 24px rgba(139, 92, 246, 0.28)' : 'inset 0 0 0 1px rgba(139, 92, 246, 0.18)',
                    cursor: composerCanSend ? 'pointer' : 'not-allowed',
                    transition: 'all 0.2s ease',
                    border: 'none',
                  }}
                />
              </div>
            </div>
          </div>
        </Content>
      </Layout>

      {/* 自定义CSS动画 - 加载中闪烁效果 */}
      <style>{`

        .ai-create-page {
          --ai-accent: #8b5cf6;
          --ai-accent-soft: #f5f3ff;
          --ai-accent-mid: #a78bfa;
        }
        @keyframes blink {
          0%, 50% { opacity: 1; }
          51%, 100% { opacity: 0.3; }
        }
        textarea::placeholder {
          color: #98a2b3 !important;
          line-height: 1.72 !important;
          font-weight: 500 !important;
          white-space: normal !important;
        }
        .ai-create-scroll::-webkit-scrollbar {
          width: 8px;
        }
        .ai-create-scroll::-webkit-scrollbar-thumb {
          background: rgba(139, 92, 246, 0.32);
          border-radius: 999px;
        }
        .ai-create-scroll::-webkit-scrollbar-track {
          background: transparent;
        }
        .ai-composer-select .ant-select-selector {
          height: 32px !important;
          border-radius: 11px !important;
          border-color: #E7EAF0 !important;
          box-shadow: 0 1px 3px rgba(47, 52, 64, 0.035) !important;
          background: rgba(255,255,255,0.86) !important;
        }
        .ai-composer-select .ant-select-selection-item {
          display: flex !important;
          align-items: center !important;
          font-weight: 700 !important;
          color: #2f3440 !important;
        }
        .ant-select-dropdown {
          border-radius: 16px !important;
          box-shadow: 0 20px 48px rgba(47, 52, 64, 0.12) !important;
          border: 1px solid #E7EAF0 !important;
          padding: 8px !important;
        }
        .ant-select-dropdown .ant-select-item {
          border-radius: 10px !important;
          min-height: 36px !important;
          color: #2f3440 !important;
          font-weight: 600 !important;
        }
        .ant-select-dropdown .ant-select-item-option-active,
        .ant-select-dropdown .ant-select-item-option-selected {
          background: #f5f3ff !important;
          color: #8b5cf6 !important;
        }
        .image-settings-popover {
          animation: composerPopoverIn 0.16s ease-out;
        }
        @keyframes composerPopoverIn {
          from { opacity: 0; transform: translateY(6px) scale(0.98); }
          to { opacity: 1; transform: translateY(0) scale(1); }
        }
      `}</style>

      {/* 图片/视频预览弹窗 */}
      <Modal
        open={previewVisible}
        title={
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 4, height: 20, background: 'linear-gradient(180deg, #8b5cf6 0%, #ddd6fe 100%)', borderRadius: 2 }} />
            <span style={{ fontSize: 16, fontWeight: 700, color: '#8b5cf6', letterSpacing: 0.4 }}>
              预览
            </span>
          </div>
        }
        onCancel={handleClosePreview}
        width={800}
        footer={
          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12, padding: '16px 24px', background: 'rgba(255,255,255,0.6)', borderTop: '1px solid rgba(139, 92, 246, 0.08)' }}>
            <Button
              type="primary"
              icon={<DownloadOutlined />}
              onClick={handleDownload}
              style={{ borderRadius: 10, background: 'linear-gradient(135deg, #8b5cf6 0%, #ddd6fe 100%)', border: 'none', boxShadow: '0 8px 18px rgba(47, 52, 64, 0.15)' }}
              disabled={isMediaExpired(previewUrl)}
            >
              {isMediaExpired(previewUrl) ? '资源已过期' : '下载'}
            </Button>
          </div>
        }
        centered
        style={{ borderRadius: 16 }}
        styles={{
          body: {
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            minHeight: '400px',
          },
          header: { background: 'rgba(255,255,255,0.6)', backdropFilter: 'blur(10px)', borderBottom: '1px solid rgba(139, 92, 246, 0.08)', padding: '16px 24px' },
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }}>
          {isMediaExpired(previewUrl) ? (
            <div style={{ textAlign: 'center', padding: '40px' }}>
              <p style={{ fontSize: 16, color: '#A45B5B', marginBottom: 16 }}>图片/视频资源已过期，请刷新重新加载～</p>
            </div>
          ) : previewType === 'image' ? (
            // <div>{previewUrl}</div>

            <img
              src={`${previewUrl}`}
              alt="预览"
              style={{ width: '100%', maxHeight: '400px', objectFit: 'contain' }}
            />
          ) : (
            <video
              ref={videoRef}
              src={`${previewUrl}`}
              controls
              style={{ maxWidth: '100%', maxHeight: '400px' }}
            />
          )}
        </div>
      </Modal>

      {/* 附件预览弹窗（独立弹窗） */}
      <Modal
        open={attachmentPreviewVisible}
        title={
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 4, height: 20, background: 'linear-gradient(180deg, #8b5cf6 0%, #ddd6fe 100%)', borderRadius: 2 }} />
            <span style={{ fontSize: 16, fontWeight: 700, color: '#8b5cf6', letterSpacing: 0.4 }}>
              附件预览
            </span>
          </div>
        }
        onCancel={() => {
          // 关闭前停止视频播放
          if (attachmentPreviewVideoRef.current) {
            const v = attachmentPreviewVideoRef.current;
            v.pause();
            v.muted = true;
            v.currentTime = 0;
          }
          setAttachmentPreviewVisible(false);
        }}
        afterClose={() => {
          // Modal 完全关闭后再次确保视频被停止
          if (attachmentPreviewVideoRef.current) {
            const v = attachmentPreviewVideoRef.current;
            v.pause();
            v.muted = true;
          }
        }}
        width={800}
        footer={
          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12, padding: '16px 24px', background: 'rgba(255,255,255,0.6)', borderTop: '1px solid rgba(139, 92, 246, 0.08)' }}>
            <Button
              type="primary"
              icon={<DownloadOutlined />}
              onClick={() => {
                if (!attachmentPreviewUrl) return;
                const link = document.createElement('a');
                link.href = `${import.meta.env.VITE_API_BASE || "http://localhost:8000"}${attachmentPreviewUrl}&download=1`;
                link.download = attachmentPreviewName || (attachmentPreviewType === 'image' ? 'image.png' : 'video.mp4');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
              }}
              style={{ borderRadius: 10, background: 'linear-gradient(135deg, #8b5cf6 0%, #ddd6fe 100%)', border: 'none', boxShadow: '0 8px 18px rgba(47, 52, 64, 0.15)' }}
            >
              下载
            </Button>
          </div>
        }
        centered
        style={{ borderRadius: 16 }}
        styles={{
          body: {
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            minHeight: '400px',
          },
          header: { background: 'rgba(255,255,255,0.6)', backdropFilter: 'blur(10px)', borderBottom: '1px solid rgba(139, 92, 246, 0.08)', padding: '16px 24px' },
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }}>
          {attachmentPreviewType === 'image' ? (
            <img
              src={buildPreviewUrl(attachmentPreviewUrl)}
              alt="预览"
              style={{ width: '100%', maxHeight: '400px', objectFit: 'contain' }}
            />
          ) : (
            <video
              ref={attachmentPreviewVideoRef}
              src={buildPreviewUrl(attachmentPreviewUrl)}
              controls
              playsInline
              style={{ maxWidth: '100%', maxHeight: '400px' }}
            />
          )}
        </div>
      </Modal>
      <PrivatePortraitAssetPicker
        open={privateAssetPickerOpen}
        libraryType={privateAssetPickerLibraryType}
        onClose={() => setPrivateAssetPickerOpen(false)}
        onSelect={handlePrivatePortraitAssetsSelected}
        selectedIds={currentMedia.map((m) => m.private_asset_id).filter(Boolean) as string[]}
        maxCount={Math.max(1, maxImage + maxVideo)}
        maxImageCount={maxImageCount}
        maxVideoCount={maxVideoCount}
        usedImageCount={currentMedia.filter(m => m.type === 'image').length}
        usedVideoCount={currentMedia.filter(m => m.type === 'video').length}
        usedVideoDuration={currentMedia.filter(m => m.type === 'video').reduce((sum, m) => sum + (m.duration || 0), 0)}
        maxVideoDuration={15}
        accept={mediaType === 'image' ? 'image/*' : 'image/*,video/*'}
      />

    </Layout>
  );
};

export default AIChatPage;