"use client";

import { useChat } from "@ai-sdk/react";
import { DefaultChatTransport } from "ai";
import { useEffect, useRef, useState, useCallback } from "react";
import useSWR from "swr";
import { Send, Loader2, ImagePlus, Paperclip, X, Sparkles, User, Bot, Plus, History, Share2, LayoutGrid, Maximize2, RefreshCw, Zap, Globe, Box, ArrowUp } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { toast } from "sonner";
import { useCanvasStore } from "@/store/canvas";
import { cn } from "@/lib/utils";
import { fetcher, fetchWithErrorHandlers, generateUUID } from "@/lib/utils";
import type { Attachment, ChatMessage } from "@/lib/types";
import { ImageParamsBar, type ImageGenerationParams } from "@/components/image-params-bar";

interface CanvasChatPanelProps {
  chatId: string;
  initialMessages?: ChatMessage[];
  onClose?: () => void;
  onOpenFileList?: () => void;
}

// 建议卡片数据 - 已移除
const SUGGESTIONS: { title: string; desc: string; image: string }[] = [];

// 从消息中提取图片 URL（只提取原始图片，避免重复）
function extractImageUrls(text: string): string[] {
  const urls: string[] = [];
  
  // 匹配 markdown 图片格式: ![thumb|||originalUrl|||size](thumbnailUrl)
  // 只提取原始图片 URL（第一个 ||| 和第二个 ||| 之间的 URL）
  const markdownRegex = /!\[(?:thumb)?\|\|\|([^|]+)\|\|\|[^\]]*\]\(([^)]+)\)/g;
  let match;
  let hasMarkdownImages = false;
  
  while ((match = markdownRegex.exec(text)) !== null) {
    if (match[1]) {
      urls.push(match[1]); // 原始图片 URL
      hasMarkdownImages = true;
    }
  }
  
  // 只有在没有 markdown 格式图片时，才匹配普通图片 URL
  // 这样可以避免重复匹配缩略图 URL
  if (!hasMarkdownImages) {
    const urlRegex = /https?:\/\/[^\s"'<>]+\.(?:jpg|jpeg|png|gif|webp)/gi;
    const urlMatches = text.match(urlRegex);
    if (urlMatches) {
      urls.push(...urlMatches.filter(url => !urls.includes(url)));
    }
  }
  
  return urls;
}

export function CanvasChatPanel({ chatId, initialMessages = [], onClose, onOpenFileList }: CanvasChatPanelProps) {
  const [input, setInput] = useState("");
  const [attachments, setAttachments] = useState<Attachment[]>([]);
  const [selectedModelId, setSelectedModelId] = useState<string>("");
  const messagesEndRef = useRef<HTMLDivElement>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  
  // 🆕 图片参数状态
  const [imageParams, setImageParams] = useState<ImageGenerationParams>({
    aspectRatio: "auto",
    imageSize: "2K",
    imageCount: 1,
  });

  // 🆕 保存图片参数到 localStorage
  const handleImageParamsChange = (params: ImageGenerationParams) => {
    setImageParams(params);
    try {
      localStorage.setItem("canvas-image-params", JSON.stringify(params));
    } catch (e) {
      console.error("Failed to save image params:", e);
    }
  };

  // 加载图片参数
  useEffect(() => {
    try {
      const saved = localStorage.getItem("canvas-image-params");
      if (saved) {
        const parsed = JSON.parse(saved);
        setImageParams(prev => ({ ...prev, ...parsed }));
      }
    } catch (e) {
      console.error("Failed to load image params:", e);
    }
  }, []);

  // Canvas store
  const addNode = useCanvasStore((state) => state.addNode);
  const nodes = useCanvasStore((state) => state.nodes);
  const selectedNodeIds = useCanvasStore((state) => state.selectedNodeIds);
  
  // 获取纯 UUID（去掉 canvas- 前缀）用于 API 调用
  const rawChatId = chatId.startsWith('canvas-') 
    ? chatId.replace('canvas-', '') 
    : chatId;
  
  // 从 API 加载历史消息
  const { data: historyData, isLoading: isLoadingHistory } = useSWR<{
    messages: ChatMessage[];
  }>(rawChatId ? `/api/messages?chatId=${rawChatId}` : null, fetcher);
  
  // 获取选中的图片节点
  const selectedImageNodes = nodes.filter(
    n => selectedNodeIds.includes(n.id) && n.type === 'image' && (n.data as any)?.src
  );
  
  // 当选中画布中的图片时，自动添加到附件
  useEffect(() => {
    if (selectedImageNodes.length > 0) {
      const newAttachments: Attachment[] = selectedImageNodes.map(node => {
        const data = node.data as any;
        return {
          url: data.src,
          name: data.prompt || '画布图片',
          contentType: 'image/jpeg',
        };
      });
      
      // 只添加还没在附件中的图片
      setAttachments(prev => {
        const existingUrls = new Set(prev.map(a => a.url));
        const toAdd = newAttachments.filter(a => !existingUrls.has(a.url));
        if (toAdd.length > 0) {
          return [...prev, ...toAdd];
        }
        return prev;
      });
    }
  }, [selectedImageNodes.length, selectedNodeIds]);
  
  // 获取模型列表
  const { data: modelsData } = useSWR<{
    models: Array<{
      id: string;
      modelId: string;
      displayName: string;
      providerType: string;
      supportsVision?: boolean;
      supportsImageGen?: boolean;
    }>;
  }>("/api/models", fetcher);

  // 获取网站设置（包含广告横幅配置）
  const { data: siteSettings } = useSWR<{
    bannerEnabled?: boolean;
    bannerText?: string;
    bannerLink?: string | null;
  }>("/api/site-settings", fetcher);
  
  // 过滤支持图片生成的模型
  const imageModels = modelsData?.models?.filter(m => m.supportsImageGen) || [];
  
  // 智能自动模型选项
  const SMART_AUTO_MODEL = {
    id: "auto",
    modelId: "auto",
    displayName: "智能自动",
    providerType: "auto",
    supportsImageGen: true,
  };
  
  // 所有可选模型（智能自动 + 生图模型）
  const allModels = [SMART_AUTO_MODEL, ...imageModels];
  
  // 默认选择智能自动模型
  useEffect(() => {
    if (!selectedModelId) {
      setSelectedModelId("auto"); // 默认使用智能自动模式
    }
  }, [selectedModelId]);
  
  const currentModelIdRef = useRef(selectedModelId);
  const imageParamsRef = useRef(imageParams);

  useEffect(() => {
    currentModelIdRef.current = selectedModelId;
  }, [selectedModelId]);

  useEffect(() => {
    imageParamsRef.current = imageParams;
  }, [imageParams]);

  // 合并 initialMessages 和历史消息
  const mergedInitialMessages = historyData?.messages?.length 
    ? historyData.messages 
    : initialMessages;
  
  const {
    messages,
    setMessages,
    sendMessage,
    status,
    stop,
  } = useChat<ChatMessage>({
    id: chatId,
    messages: mergedInitialMessages,
    experimental_throttle: 100,
    generateId: generateUUID,
    transport: new DefaultChatTransport({
      api: "/api/chat",
      fetch: fetchWithErrorHandlers,
      prepareSendMessagesRequest(request) {
        // 从 canvas-{uuid} 格式中提取纯 UUID，后端 schema 要求纯 UUID
        const rawId = request.id.startsWith('canvas-') 
          ? request.id.replace('canvas-', '') 
          : request.id;
        
        console.log("[CanvasChat] Preparing request:", {
          id: rawId,
          modelId: currentModelIdRef.current,
          imageParams: imageParamsRef.current,
          lastMessage: request.messages.at(-1),
        });
        return {
          body: {
            id: rawId,
            message: request.messages.at(-1),
            selectedChatModel: currentModelIdRef.current,
            selectedVisibilityType: "private",
            videoParams: undefined, // 必须传递，即使是 undefined
            imageParams: imageParamsRef.current || undefined, // 传递图片参数
            ...request.body,
          },
        };
      },
    }),
    onData: (dataPart: any) => {
      // 处理后端返回的自定义消息
      if (dataPart.type === "data-appendMessage") {
        try {
          const messageData = typeof dataPart.data === 'string' 
            ? JSON.parse(dataPart.data) 
            : dataPart.data;
          
          setMessages((prevMessages) => {
            if (prevMessages.some(m => m.id === messageData.id)) {
              return prevMessages;
            }
            
            const newMessage: any = {
              id: messageData.id,
              role: messageData.role,
              content: messageData.parts?.[0]?.text || "",
              createdAt: new Date(),
              parts: messageData.parts || [],
              attachments: [],
            };
            
            return [...prevMessages, newMessage];
          });
        } catch (e) {
          console.error("[CanvasChat] Failed to parse data-appendMessage:", e);
        }
      }
    },
    onError: (error) => {
      toast.error(error.message || "生成失败");
    },
  });
  
  // 当历史消息加载完成后，更新消息列表
  const hasLoadedHistory = useRef(false);
  useEffect(() => {
    if (historyData?.messages?.length && !hasLoadedHistory.current) {
      hasLoadedHistory.current = true;
      setMessages(historyData.messages);
      console.log('[CanvasChat] 已加载历史消息:', historyData.messages.length);
    }
  }, [historyData, setMessages]);

  // 监听消息变化，提取图片并添加到画布
  const processedMessageIds = useRef<Set<string>>(new Set());
  
  useEffect(() => {
    messages.forEach(message => {
      if (message.role === 'assistant' && !processedMessageIds.current.has(message.id)) {
        const content = message.parts?.map((p: any) => p.text || '').join('') || '';
        const imageUrls = extractImageUrls(content);
        
        if (imageUrls.length > 0) {
          processedMessageIds.current.add(message.id);
          
          // 为每张图片创建画布节点
          imageUrls.forEach((url, index) => {
            // 计算位置（避免重叠）
            const existingNodes = nodes.length;
            const x = 100 + ((existingNodes + index) % 4) * 320;
            const y = 100 + Math.floor((existingNodes + index) / 4) * 320;
            
            addNode({
              type: 'image',
              position: { x, y },
              size: { width: 300, height: 300 },
              data: {
                src: url,
                status: 'completed',
                prompt: '对话生成',
              },
              connections: [],
            });
          });
          
          if (imageUrls.length > 0) {
            toast.success(`已将 ${imageUrls.length} 张图片添加到画布`);
          }
        }
      }
    });
  }, [messages, addNode, nodes.length]);

  // 滚动到底部
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages]);

  // 标记是否已经为当前画布设置过标题（避免重复调用）
  const hasSetCanvasTitle = useRef(false);

  // 处理发送（图片已在上传时添加到画布，这里只发送消息）
  const handleSend = useCallback(async () => {
    if (!input.trim() && attachments.length === 0) return;
    if (!selectedModelId) {
      toast.error("请选择一个模型");
      return;
    }
    
    // 构建 parts 数组：文件在前，文本在后（与 multimodal-input 一致）
    const parts: any[] = [];
    
    // 添加文件部分（作为 file 类型的 part）
    attachments.forEach((a) => {
      parts.push({
        type: "file" as const,
        mediaType: a.contentType,
        name: a.name,
        url: a.url,
      });
    });
    
    // 添加文本部分
    const textContent = input.trim() || (attachments.length > 0 ? "请处理这张图片" : "");
    if (textContent) {
      parts.push({ type: "text" as const, text: textContent });
    }
    
    // 使用与 multimodal-input 相同的格式发送消息
    sendMessage({
      role: "user",
      parts: parts,
    });
    
    setInput("");
    setAttachments([]);
  }, [input, attachments, selectedModelId, sendMessage]);

  // 处理文件选择 - 上传后立即添加到画布
  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (!files) return;
    
    let firstImageUrl: string | null = null;
    
    for (const file of Array.from(files)) {
      if (!file.type.startsWith('image/')) {
        toast.error('请选择图片文件');
        continue;
      }
      
      if (file.size > 8 * 1024 * 1024) {
        toast.error('图片大小不能超过 8MB');
        continue;
      }
      
      // 上传文件
      try {
        const formData = new FormData();
        formData.append('file', file);
        
        const response = await fetch('/api/files/upload', {
          method: 'POST',
          body: formData,
        });
        
        if (!response.ok) {
          throw new Error('上传失败');
        }
        
        const data = await response.json();
        const imageUrl = data.url;
        
        // 记录第一张图片的 URL（用于自动命名和缩略图）
        if (!firstImageUrl) {
          firstImageUrl = imageUrl;
        }
        
        // 添加到附件列表
        setAttachments(prev => [...prev, {
          url: imageUrl,
          name: file.name,
          contentType: file.type,
        }]);
        
        // 立即将图片添加到画布
        const existingNodes = nodes.length;
        const x = 100 + (existingNodes % 4) * 320;
        const y = 100 + Math.floor(existingNodes / 4) * 320;
        
        addNode({
          type: 'image',
          position: { x, y },
          size: { width: 300, height: 300 },
          data: {
            src: imageUrl,
            status: 'completed',
            prompt: '用户上传',
          },
          connections: [],
        });
        
        toast.success('图片已添加到画布');
        
      } catch (error) {
        toast.error('图片上传失败');
      }
    }
    
    // 如果是第一次上传图片，自动识别并设置画布标题和缩略图
    console.log('[CanvasChat] 检查是否需要自动命名:', { 
      firstImageUrl: !!firstImageUrl, 
      hasSetCanvasTitle: hasSetCanvasTitle.current 
    });
    
    if (firstImageUrl && !hasSetCanvasTitle.current) {
      hasSetCanvasTitle.current = true;
      console.log('[CanvasChat] 开始调用 auto-title API...');
      
      // 异步调用 AI 识别图片主体并更新画布
      (async () => {
        try {
          // 调用 auto-title API 识别图片主体
          console.log('[CanvasChat] 发送 auto-title 请求:', firstImageUrl);
          const response = await fetch('/api/canvas/auto-title', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ imageUrl: firstImageUrl }),
          });
          
          console.log('[CanvasChat] auto-title 响应状态:', response.status);
          
          if (response.ok) {
            const data = await response.json();
            const title = data.title || '未命名画布';
            console.log('[CanvasChat] 识别到的标题:', title);
            
            // 提取纯 UUID（去掉 canvas- 前缀）
            const rawId = chatId.startsWith('canvas-') 
              ? chatId.replace('canvas-', '') 
              : chatId;
            
            console.log('[CanvasChat] 更新画布:', rawId);
            
            // 更新画布标题和缩略图
            const updateResponse = await fetch(`/api/canvas/${rawId}`, {
              method: 'PUT',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({
                title: title,
                thumbnail: firstImageUrl,
              }),
            });
            
            console.log('[CanvasChat] 画布更新响应:', updateResponse.status);
            
            if (updateResponse.ok) {
              console.log('[CanvasChat] 画布已自动命名为:', title);
              toast.success(`画布已命名为: ${title}`);
            } else {
              console.error('[CanvasChat] 画布更新失败');
            }
          } else {
            console.error('[CanvasChat] auto-title API 请求失败:', response.status);
          }
        } catch (error) {
          console.error('[CanvasChat] 自动命名失败:', error);
        }
      })();
    }
    
    e.target.value = '';
  };

  // 移除附件
  const removeAttachment = (index: number) => {
    setAttachments(prev => prev.filter((_, i) => i !== index));
  };

  const isLoading = status === 'streaming' || status === 'submitted';

  return (
    <div className="flex flex-col h-full bg-background/50 backdrop-blur-sm relative">
      {/* Header - Minimal with Icons */}
      <div className="absolute top-0 right-0 z-20 p-4 flex flex-col items-end gap-2">
        <div className="flex items-center gap-1">
          <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full hover:bg-muted">
            <Plus className="h-4 w-4" />
          </Button>
          <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full hover:bg-muted">
            <History className="h-4 w-4" />
          </Button>
          <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full hover:bg-muted">
            <Share2 className="h-4 w-4" />
          </Button>
          <Button 
            variant="ghost" 
            size="icon" 
            className="h-8 w-8 rounded-full hover:bg-muted"
            onClick={(e) => {
              e.preventDefault();
              e.stopPropagation();
              console.log('[CanvasChatPanel] File list button clicked');
              if (onOpenFileList) {
                onOpenFileList();
              }
            }}
            title="已生成文件列表"
          >
            <LayoutGrid className="h-4 w-4" />
          </Button>
          <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full hover:bg-muted">
            <Maximize2 className="h-4 w-4" />
          </Button>
        </div>
        
        {onClose && (
          <Button 
            variant="secondary" 
            size="sm" 
            onClick={onClose} 
            className="h-7 px-3 text-xs rounded-full bg-muted/80 backdrop-blur-sm hover:bg-muted shadow-sm"
          >
            收起
          </Button>
        )}
      </div>
      
      {/* 消息列表 */}
      <ScrollArea className="flex-1 p-4 pt-16">
        <div className="space-y-6">
          {messages.length === 0 && (
            <div className="flex flex-col h-full pt-4">
              {/* Greeting */}
              <div className="mb-8">
                <h1 className="text-2xl font-bold mb-2">Hi, 我是你的AI设计师</h1>
                <p className="text-muted-foreground">让我们开始今天的创作吧!</p>
              </div>

              {/* Suggestions - Removed */}
              
              {/* Refresh - Removed */}

              {/* Banner - 从系统设置中获取 */}
              {(siteSettings?.bannerEnabled ?? true) && (siteSettings?.bannerText || "升级会员, Nano Banana Pro 免费365天!") && (
                <div 
                  className={cn(
                    "bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-300 p-3 rounded-xl text-sm flex items-center justify-between",
                    siteSettings?.bannerLink && "cursor-pointer hover:bg-blue-100 dark:hover:bg-blue-900/30 transition-colors"
                  )}
                  onClick={() => {
                    if (siteSettings?.bannerLink) {
                      window.open(siteSettings.bannerLink, '_blank');
                    }
                  }}
                >
                  <div className="flex items-center gap-2">
                    <div className="p-1 bg-blue-100 dark:bg-blue-800 rounded">
                      <Box className="h-4 w-4" />
                    </div>
                    <span>{siteSettings?.bannerText || "升级会员, Nano Banana Pro 免费365天!"}</span>
                  </div>
                  <X className="h-4 w-4 cursor-pointer opacity-50 hover:opacity-100" onClick={(e) => e.stopPropagation()} />
                </div>
              )}
            </div>
          )}
          
          {messages.map((message) => (
            <div
              key={message.id}
              className={cn(
                "flex gap-3",
                message.role === 'user' ? "flex-row-reverse" : "flex-row"
              )}
            >
              {/* 头像 */}
              <Avatar className="h-8 w-8 shrink-0 border shadow-sm">
                {message.role === 'user' ? (
                  <>
                    <AvatarImage src="/placeholder-user.jpg" />
                    <AvatarFallback className="bg-primary text-primary-foreground">
                      <User className="h-4 w-4" />
                    </AvatarFallback>
                  </>
                ) : (
                  <>
                    <AvatarImage src="/placeholder-bot.jpg" />
                    <AvatarFallback className="bg-muted text-foreground">
                      <Bot className="h-4 w-4" />
                    </AvatarFallback>
                  </>
                )}
              </Avatar>

              {/* 消息气泡 */}
              <div className={cn(
                "flex flex-col gap-2 max-w-[85%]",
                message.role === 'user' ? "items-end" : "items-start"
              )}>
                <div
                  className={cn(
                    "text-sm px-4 py-2.5 shadow-sm",
                    message.role === 'user' 
                      ? "bg-primary text-primary-foreground rounded-2xl rounded-tr-sm" 
                      : "bg-card border text-card-foreground rounded-2xl rounded-tl-sm"
                  )}
                >
                  {/* 附件预览 */}
                  {(message as any).attachments && (message as any).attachments.length > 0 && (
                    <div className="flex flex-wrap gap-2 mb-2">
                      {(message as any).attachments.map((att: any, i: number) => (
                        <img
                          key={i}
                          src={att.url}
                          alt=""
                          className="h-16 w-16 object-cover rounded-lg border bg-background"
                        />
                      ))}
                    </div>
                  )}
                  
                  {/* 消息内容 */}
                  <div className="whitespace-pre-wrap break-words leading-relaxed">
                    {message.parts?.map((part: any, i: number) => {
                      if (part.type === 'text') {
                        // 提取并显示图片
                        const imageUrls = extractImageUrls(part.text || '');
                        const textWithoutImages = (part.text || '')
                          .replace(/!\[(?:thumb)?\|\|\|[^|]+\|\|\|[^\]]*\]\([^)]+\)/g, '')
                          .trim();
                        
                        return (
                          <div key={i}>
                            {textWithoutImages && <span>{textWithoutImages}</span>}
                            {imageUrls.length > 0 && (
                              <div className="flex flex-wrap gap-2 mt-3">
                                {imageUrls.map((url, idx) => (
                                  <div key={idx} className="relative group rounded-xl overflow-hidden border bg-background shadow-sm transition-all hover:shadow-md">
                                    <img
                                      src={url}
                                      alt=""
                                      className="max-w-full h-auto cursor-pointer hover:scale-105 transition-transform duration-300"
                                      style={{ maxHeight: '200px' }}
                                      onClick={() => window.open(url, '_blank')}
                                    />
                                  </div>
                                ))}
                              </div>
                            )}
                          </div>
                        );
                      }
                      return null;
                    })}
                  </div>
                </div>
              </div>
            </div>
          ))}
          
          {isLoading && (
            <div className="flex gap-3">
              <Avatar className="h-8 w-8 shrink-0 border shadow-sm">
                <AvatarFallback className="bg-muted text-foreground">
                  <Bot className="h-4 w-4" />
                </AvatarFallback>
              </Avatar>
              <div className="bg-card border text-card-foreground rounded-2xl rounded-tl-sm px-4 py-2.5 shadow-sm flex items-center gap-2">
                <Loader2 className="h-4 w-4 animate-spin text-primary" />
                <span className="text-sm text-muted-foreground">正在思考中...</span>
              </div>
            </div>
          )}
          
          <div ref={messagesEndRef} />
        </div>
      </ScrollArea>
      
      {/* 底部输入区域 - Redesigned */}
      <div className="p-4 bg-background/80 backdrop-blur-md border-t">
        {/* 附件预览 */}
        {attachments.length > 0 && (
          <div className="flex flex-wrap gap-2 mb-3">
            {attachments.map((att, index) => (
              <div key={index} className="relative group">
                <img
                  src={att.url}
                  alt=""
                  className="h-14 w-14 object-cover rounded-lg border shadow-sm"
                />
                <button
                  className="absolute -top-1.5 -right-1.5 bg-destructive text-destructive-foreground rounded-full p-0.5 opacity-0 group-hover:opacity-100 transition-all shadow-sm hover:scale-110"
                  onClick={() => removeAttachment(index)}
                >
                  <X className="h-3 w-3" />
                </button>
              </div>
            ))}
          </div>
        )}

        <div className="relative bg-card rounded-3xl border transition-all duration-200 focus-within:border-primary/50 focus-within:bg-background">
          <Textarea
            ref={textareaRef}
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                handleSend();
              }
            }}
            placeholder="请输入你的设计需求"
            className="min-h-[80px] max-h-[150px] w-full text-sm resize-none bg-transparent border-none focus-visible:ring-0 p-4 pb-12 placeholder:text-muted-foreground/50"
            disabled={isLoading}
          />
          
          {/* Bottom Toolbar */}
          <div className="absolute left-2 bottom-2 right-2 flex items-center justify-between">
            <div className="flex items-center gap-2">
              <input
                ref={fileInputRef}
                type="file"
                accept="image/*"
                multiple
                className="hidden"
                onChange={handleFileSelect}
              />
              <Button
                variant="ghost"
                size="icon"
                className="h-8 w-8 rounded-full hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
                onClick={() => fileInputRef.current?.click()}
                disabled={isLoading}
              >
                <Paperclip className="h-4 w-4" />
              </Button>
              
              {/* Agent Selector (Model) - 包含智能自动选项 */}
              <Select value={selectedModelId} onValueChange={setSelectedModelId}>
                <SelectTrigger className={cn(
                  "h-8 text-xs transition-colors rounded-full px-3 gap-1 w-auto",
                  selectedModelId === "auto" 
                    ? "bg-gradient-to-r from-purple-50 to-blue-50 text-purple-600 border-purple-100 hover:from-purple-100 hover:to-blue-100"
                    : "bg-blue-50 text-blue-600 border-blue-100 hover:bg-blue-100 hover:border-blue-200"
                )}>
                  {selectedModelId === "auto" ? (
                    <Zap className="h-3 w-3" />
                  ) : (
                    <Sparkles className="h-3 w-3" />
                  )}
                  <span className="truncate max-w-[80px]">
                    {allModels.find(m => m.id === selectedModelId)?.displayName || "智能自动"}
                  </span>
                </SelectTrigger>
                <SelectContent>
                  {/* 智能自动选项 */}
                  <SelectItem value="auto" className="text-xs">
                    <div className="flex items-center gap-2">
                      <Zap className="h-3 w-3 text-purple-500" />
                      <span>智能自动</span>
                      <span className="text-[10px] text-muted-foreground">先对话再生图</span>
                    </div>
                  </SelectItem>
                  {/* 分隔线 */}
                  {imageModels.length > 0 && (
                    <div className="my-1 border-t border-border" />
                  )}
                  {/* 生图模型列表 */}
                  {imageModels.map(model => (
                    <SelectItem key={model.id} value={model.id} className="text-xs">
                      <div className="flex items-center gap-2">
                        <Sparkles className="h-3 w-3 text-primary" />
                        {model.displayName}
                      </div>
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div className="flex items-center gap-2">
              {/* Image Params Bar - 智能自动模式时也显示，用于设置最终生图参数 */}
              <ImageParamsBar
                modelName={allModels.find(m => m.id === selectedModelId)?.displayName}
                initialParams={imageParams}
                onParamsChange={handleImageParamsChange}
                inline={true}
                providerType={allModels.find(m => m.id === selectedModelId)?.providerType}
              />

              <Button
                size="icon"
                className={cn(
                  "h-8 w-8 rounded-full transition-all duration-200",
                  input.trim() || attachments.length > 0 
                    ? "bg-black text-white hover:bg-black/90 dark:bg-white dark:text-black dark:hover:bg-white/90" 
                    : "bg-muted text-muted-foreground hover:bg-muted/80"
                )}
                onClick={handleSend}
                disabled={isLoading || (!input.trim() && attachments.length === 0)}
              >
                {isLoading ? (
                  <Loader2 className="h-4 w-4 animate-spin" />
                ) : (
                  <ArrowUp className="h-4 w-4" />
                )}
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}