import React, { useState, useCallback, useRef, useEffect } from 'react';
import {
  MessageCircle,
  Send,
  Bot,
  User,
  AlertCircle,
  Sparkles,
  Clock,
  CheckCircle,
  XCircle,
  Copy,
  ExternalLink,
  Tag,
  Palette,
  Calendar,
  MapPin
} from 'lucide-react';
import { queryRagGrounding } from '../services/ragGroundingService';
import { RagGroundingQueryOptions } from '../types/ragGrounding';

/**
 * 聊天消息接口
 */
interface ChatMessage {
  id: string;
  type: 'user' | 'assistant';
  content: string;
  timestamp: Date;
  status?: 'sending' | 'sent' | 'error';
  metadata?: {
    responseTime?: number;
    modelUsed?: string;
    sources?: Array<{
      title: string;
      uri?: string;
      content?: any;
    }>;
  };
}

/**
 * 聊天界面组件属性
 */
interface ChatInterfaceProps {
  /** 会话ID，用于上下文保持 */
  sessionId?: string;
  /** 最大保留消息数量 */
  maxMessages?: number;
  /** 是否显示来源信息 */
  showSources?: boolean;
  /** 自定义样式类名 */
  className?: string;
  /** 占位符文本 */
  placeholder?: string;
}

/**
 * 聊天界面组件
 * 遵循 Tauri 开发规范和 ag-ui 设计标准
 * 支持上下文保留和最新3条记录限制
 */
export const ChatInterface: React.FC<ChatInterfaceProps> = ({
  sessionId = 'default-session',
  maxMessages = 3,
  showSources = true,
  className = '',
  placeholder = '描述您的穿搭需求，比如场合、风格、身材特点等...'
}) => {
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [input, setInput] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [expandedSources, setExpandedSources] = useState<Record<string, boolean>>({});
  const [showAnswers, setShowAnswers] = useState<Record<string, boolean>>({});
  const [selectedTags, setSelectedTags] = useState<string[]>([]);
  const [allTags, setAllTags] = useState<string[]>([]);
  const [isTagsExpanded, setIsTagsExpanded] = useState(false);
  const [showTagBubble, setShowTagBubble] = useState(false);
  const [bubbleTags, setBubbleTags] = useState<{categories: string[], environment: string[]}>({categories: [], environment: []});
  const [bubblePosition, setBubblePosition] = useState<{x: number, y: number}>({x: 0, y: 0});
  
  const inputRef = useRef<HTMLTextAreaElement>(null);
  const chatContainerRef = useRef<HTMLDivElement>(null);
  const messagesEndRef = useRef<HTMLDivElement>(null);

  // 自动滚动到底部
  const scrollToBottom = useCallback(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, []);

  // 当消息更新时自动滚动
  useEffect(() => {
    scrollToBottom();
  }, [messages, scrollToBottom]);

  // 解析图片内容数据
  const parseImageContent = useCallback((content: any) => {
    if (!content || typeof content !== 'object') return null;

    try {
      return {
        categories: content.categories || [],
        description: content.description || '',
        environment_tags: content.environment_tags || [],
        environment_color: content.environment_color_pattern?.rgb_hex || '#f0f0f0',
        models: content.models || [],
        releaseDate: content.releaseDate || '',
        runtime: content.runtime || ''
      };
    } catch (error) {
      console.error('解析图片内容失败:', error);
      return null;
    }
  }, []);

  // 渲染图片卡片
  const renderImageCard = useCallback((source: any, index: number) => {
    const imageData = parseImageContent(source.content);
    if (!imageData || !source.uri) return null;

    return (
      <div key={index} className="bg-white rounded-lg border border-gray-200 overflow-hidden shadow-sm hover:shadow-md transition-all duration-200 group">
        {/* 图片 */}
        <div className="relative aspect-square bg-gray-100">
          <img
            src={source.uri}
            alt={source.title || `图片 ${index + 1}`}
            className="w-full h-full object-cover transition-transform duration-200 group-hover:scale-105"
            loading="lazy"
            onLoad={(e) => {
              const target = e.target as HTMLImageElement;
              target.parentElement?.querySelector('.loading-placeholder')?.classList.add('hidden');
            }}
            onError={(e) => {
              const target = e.target as HTMLImageElement;
              target.style.display = 'none';
              target.parentElement?.querySelector('.error-placeholder')?.classList.remove('hidden');
              target.parentElement?.querySelector('.loading-placeholder')?.classList.add('hidden');
            }}
          />

          {/* 加载占位符 */}
          <div className="loading-placeholder absolute inset-0 bg-gray-100 flex items-center justify-center">
            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500"></div>
          </div>

          {/* 错误占位符 */}
          <div className="error-placeholder hidden absolute inset-0 bg-gray-100 flex items-center justify-center">
            <div className="text-center">
              <AlertCircle className="w-6 h-6 text-gray-400 mx-auto mb-1" />
              <span className="text-gray-400 text-xs">加载失败</span>
            </div>
          </div>

          {/* 运行时间标签 */}
          {imageData.runtime && (
            <div className="absolute top-2 right-2 bg-black bg-opacity-60 text-white text-xs px-2 py-1 rounded backdrop-blur-sm">
              <Clock className="w-3 h-3 inline mr-1" />
              {imageData.runtime}
            </div>
          )}

          {/* 悬停时显示的查看按钮 */}
          <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
            <button
              onClick={() => window.open(source.uri, '_blank')}
              className="opacity-0 group-hover:opacity-100 bg-white bg-opacity-90 hover:bg-opacity-100 text-gray-800 px-3 py-1 rounded-full text-xs font-medium transition-all duration-200 flex items-center gap-1"
            >
              <ExternalLink className="w-3 h-3" />
              查看原图
            </button>
          </div>
        </div>

        {/* 内容信息 */}
        <div className="p-3 space-y-2">
          {/* 描述 */}
          {imageData.description && (
            <p
              className="text-xs text-gray-700 leading-relaxed"
              style={{
                display: '-webkit-box',
                WebkitLineClamp: 2,
                WebkitBoxOrient: 'vertical',
                overflow: 'hidden'
              }}
              title={imageData.description}
            >
              {imageData.description}
            </p>
          )}

          {/* 分类标签 */}
          {imageData.categories.length > 0 && (
            <div className="flex flex-wrap gap-1">
              {imageData.categories.slice(0, 4).map((category: string, catIndex: number) => {
                const isSelected = selectedTags.includes(category);
                return (
                  <button
                    key={catIndex}
                    onClick={(e) => {
                      e.preventDefault();
                      e.stopPropagation();
                      toggleTag(category);
                    }}
                    className={`inline-flex items-center gap-1 px-2 py-1 text-xs rounded-full transition-all duration-200 border ${
                      isSelected
                        ? 'bg-pink-100 text-pink-700 border-pink-300 shadow-sm'
                        : 'bg-blue-50 text-blue-700 hover:bg-pink-100 hover:text-pink-700 border-blue-200 hover:border-pink-300'
                    }`}
                  >
                    <Tag className="w-2 h-2" />
                    {category}
                  </button>
                );
              })}
              {imageData.categories.length > 4 && (
                <button
                  onClick={(e) => {
                    e.stopPropagation();
                    showTagDetails(imageData, e);
                  }}
                  className="text-xs text-gray-500 hover:text-pink-600 hover:bg-pink-50 px-2 py-1 rounded-full transition-all duration-200 border border-gray-300 hover:border-pink-300"
                >
                  +{imageData.categories.length - 4}
                </button>
              )}
            </div>
          )}

          {/* 环境标签 */}
          {imageData.environment_tags.length > 0 && (
            <div className="flex flex-wrap gap-1">
              {imageData.environment_tags.slice(0, 3).map((tag: string, tagIndex: number) => {
                const isSelected = selectedTags.includes(tag);
                return (
                  <button
                    key={tagIndex}
                    onClick={(e) => {
                      e.preventDefault();
                      e.stopPropagation();
                      toggleTag(tag);
                    }}
                    className={`inline-flex items-center gap-1 px-2 py-1 text-xs rounded-full transition-all duration-200 border ${
                      isSelected
                        ? 'bg-pink-100 text-pink-700 border-pink-300 shadow-sm'
                        : 'bg-green-50 text-green-700 hover:bg-pink-100 hover:text-pink-700 border-green-200 hover:border-pink-300'
                    }`}
                  >
                    <MapPin className="w-2 h-2" />
                    {tag}
                  </button>
                );
              })}
            </div>
          )}

          {/* 底部信息栏 */}
          <div className="flex items-center justify-between text-xs text-gray-500 pt-2 border-t border-gray-100">
            {imageData.environment_color && (
              <div className="flex items-center gap-1">
                <Palette className="w-3 h-3" />
                <div
                  className="w-3 h-3 rounded-full border border-gray-300 shadow-sm"
                  style={{ backgroundColor: imageData.environment_color }}
                  title={`环境色彩: ${imageData.environment_color}`}
                />
              </div>
            )}

            {imageData.releaseDate && (
              <div className="flex items-center gap-1" title={`发布时间: ${imageData.releaseDate}`}>
                <Calendar className="w-3 h-3" />
                <span>{new Date(imageData.releaseDate).toLocaleDateString('zh-CN')}</span>
              </div>
            )}

            {/* 模特数量 */}
            {imageData.models.length > 0 && (
              <div className="flex items-center gap-1" title={`模特数量: ${imageData.models.length}`}>
                <User className="w-3 h-3" />
                <span>{imageData.models.length}</span>
              </div>
            )}
          </div>
        </div>
      </div>
    );
  }, [parseImageContent, selectedTags]);

  // 生成消息ID
  const generateMessageId = useCallback(() => {
    return `msg_${Date.now()}_${Math.random().toString(36).substring(2, 11)}`;
  }, []);

  // 限制消息数量，保留最新的消息
  const limitMessages = useCallback((newMessages: ChatMessage[]) => {
    if (newMessages.length <= maxMessages * 2) {
      return newMessages;
    }
    
    // 保留最新的 maxMessages 对话（用户+助手消息对）
    const pairs: ChatMessage[][] = [];
    let currentPair: ChatMessage[] = [];
    
    for (let i = newMessages.length - 1; i >= 0; i--) {
      const message = newMessages[i];
      if (message.type === 'assistant') {
        currentPair.unshift(message);
        if (currentPair.length === 2) {
          pairs.unshift([...currentPair]);
          currentPair = [];
        }
      } else if (message.type === 'user') {
        currentPair.unshift(message);
      }
    }
    
    // 如果有未完成的对话，也要保留
    if (currentPair.length > 0) {
      pairs.unshift(currentPair);
    }
    
    // 只保留最新的 maxMessages 对话
    const limitedPairs = pairs.slice(0, maxMessages);
    return limitedPairs.flat();
  }, [maxMessages]);

  // 发送消息
  const handleSendMessage = useCallback(async () => {
    if (!input.trim() || isLoading) return;

    const userMessage: ChatMessage = {
      id: generateMessageId(),
      type: 'user',
      content: input.trim(),
      timestamp: new Date(),
      status: 'sent'
    };

    const assistantMessage: ChatMessage = {
      id: generateMessageId(),
      type: 'assistant',
      content: '',
      timestamp: new Date(),
      status: 'sending'
    };

    // 添加用户消息和占位助手消息
    setMessages(prev => limitMessages([...prev, userMessage, assistantMessage]));
    setInput('');
    setIsLoading(true);
    setError(null);

    try {
      const options: RagGroundingQueryOptions = {
        sessionId,
        includeMetadata: showSources,
        timeout: 30000,
        includeHistory: true,
        maxHistoryMessages: 7
      };

      const result = await queryRagGrounding(userMessage.content, options);

      if (result.success && result.data) {
        // 在控制台打印详细的回复结果
        console.group('🤖 AI 回复结果');
        console.log('📝 用户问题:', userMessage.content);
        console.log('💬 AI 回答:', result.data.answer);
        console.log('⏱️ 响应时间:', result.data.response_time_ms + 'ms');
        console.log('🤖 使用模型:', result.data.model_used);
        console.log('📊 总耗时:', result.totalTime + 'ms');

        if (result.data.grounding_metadata?.sources && result.data.grounding_metadata.sources.length > 0) {
          console.log('📚 参考来源 (' + result.data.grounding_metadata.sources.length + ' 条):');
          result.data.grounding_metadata.sources.forEach((source, index) => {
            console.log(`  ${index + 1}. ${source.title}`);
            if (source.content) {
              console.log(`     内容: ${JSON.stringify(source.content, null, 2)}`);
            }
            if (source.uri) {
              console.log(`     链接: ${source.uri}`);
            }
          });
        }

        if (result.data.grounding_metadata?.search_queries && result.data.grounding_metadata.search_queries.length > 0) {
          console.log('🔍 搜索查询:', result.data.grounding_metadata.search_queries);
        }

        console.log('🕐 查询时间:', new Date().toLocaleString());
        console.groupEnd();

        // 更新助手消息
        setMessages(prev => prev.map(msg =>
          msg.id === assistantMessage.id
            ? {
                ...msg,
                content: result.data!.answer,
                status: 'sent',
                metadata: {
                  responseTime: result.data!.response_time_ms,
                  modelUsed: result.data!.model_used,
                  sources: result.data!.grounding_metadata?.sources
                }
              }
            : msg
        ));
      } else {
        throw new Error(result.error || '查询失败');
      }
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : '未知错误';
      setError(errorMessage);
      
      // 更新助手消息为错误状态
      setMessages(prev => prev.map(msg => 
        msg.id === assistantMessage.id 
          ? {
              ...msg,
              content: `抱歉，查询时出现错误：${errorMessage}`,
              status: 'error'
            }
          : msg
      ));
    } finally {
      setIsLoading(false);
    }
  }, [input, isLoading, sessionId, showSources, generateMessageId, limitMessages]);

  // 处理键盘事件
  const handleKeyPress = useCallback((e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSendMessage();
    }
  }, [handleSendMessage]);


  // 重试最后一条消息
  const handleRetry = useCallback(() => {
    if (messages.length >= 2) {
      const lastUserMessage = messages[messages.length - 2];
      if (lastUserMessage.type === 'user') {
        setInput(lastUserMessage.content);
        setMessages(prev => prev.slice(0, -2));
        if (inputRef.current) {
          inputRef.current.focus();
        }
      }
    }
  }, [messages]);

  // 切换图片展开状态
  const toggleSourcesExpanded = useCallback((messageId: string) => {
    setExpandedSources(prev => ({
      ...prev,
      [messageId]: !prev[messageId]
    }));
  }, []);

  // 切换AI回答显示状态
  const toggleAnswerVisibility = useCallback((messageId: string) => {
    setShowAnswers(prev => ({
      ...prev,
      [messageId]: !prev[messageId]
    }));
  }, []);

  // 提取所有图片的标签
  const extractAllTags = useCallback(() => {
    const tagSet = new Set<string>();

    messages.forEach(message => {
      if (message.type === 'assistant' && message.metadata?.sources) {
        message.metadata.sources.forEach(source => {
          const imageData = parseImageContent(source.content);
          if (imageData) {
            // 添加分类标签
            imageData.categories.forEach((tag: string) => tagSet.add(tag));
            // 添加环境标签
            imageData.environment_tags.forEach((tag: string) => tagSet.add(tag));
            // 添加模特相关标签
            imageData.models.forEach((model: any) => {
              if (model.products) {
                model.products.forEach((product: any) => {
                  if (product.category) {
                    product.category.forEach((cat: string) => tagSet.add(cat));
                  }
                });
              }
            });
          }
        });
      }
    });

    return Array.from(tagSet).sort();
  }, [messages, parseImageContent]);

  // 当消息更新时，更新标签列表
  useEffect(() => {
    const extractedTags = extractAllTags();
    // 合并提取的标签和已选择的标签，确保所有选中的标签都在列表中
    const combinedTags = [...new Set([...extractedTags, ...selectedTags])];
    setAllTags(combinedTags);
  }, [extractAllTags, selectedTags]);

  // 切换标签选择状态
  const toggleTag = useCallback((tag: string) => {
    setSelectedTags(prev => {
      const newTags = prev.includes(tag)
        ? prev.filter(t => t !== tag)
        : [...prev, tag];
      return newTags;
    });
  }, []);

  // 切换标签展开状态
  const toggleTagsExpanded = useCallback(() => {
    setIsTagsExpanded(prev => !prev);
  }, []);

  // 显示标签详情气泡
  const showTagDetails = useCallback((imageData: any, event: React.MouseEvent) => {
    const rect = event.currentTarget.getBoundingClientRect();
    setBubblePosition({
      x: rect.left + rect.width / 2,
      y: rect.top - 10
    });
    setBubbleTags({
      categories: imageData.categories || [],
      environment: imageData.environment_tags || []
    });
    setShowTagBubble(true);
  }, []);

  // 关闭标签气泡
  const closeTagBubble = useCallback(() => {
    setShowTagBubble(false);
  }, []);

  // 清空选中的标签
  const clearSelectedTags = useCallback(() => {
    setSelectedTags([]);
  }, []);

  // 根据选中的标签生成搜索文本
  const generateSearchFromTags = useCallback(() => {
    if (selectedTags.length === 0) return '';

    const tagGroups = {
      style: [] as string[],
      color: [] as string[],
      occasion: [] as string[],
      other: [] as string[]
    };

    selectedTags.forEach(tag => {
      if (tag.includes('色') || tag.includes('黑') || tag.includes('白') || tag.includes('红') || tag.includes('蓝') || tag.includes('粉') || tag.includes('绿') || tag.includes('黄') || tag.includes('紫') || tag.includes('橙')) {
        tagGroups.color.push(tag);
      } else if (tag.includes('职场') || tag.includes('约会') || tag.includes('度假') || tag.includes('休闲') || tag.includes('正式') || tag.includes('运动')) {
        tagGroups.occasion.push(tag);
      } else if (tag.includes('甜美') || tag.includes('优雅') || tag.includes('性感') || tag.includes('简约') || tag.includes('复古') || tag.includes('时尚')) {
        tagGroups.style.push(tag);
      } else {
        tagGroups.other.push(tag);
      }
    });

    let searchText = '我想要';
    if (tagGroups.style.length > 0) {
      searchText += `${tagGroups.style.join('、')}风格的`;
    }
    if (tagGroups.color.length > 0) {
      searchText += `${tagGroups.color.join('、')}`;
    }
    if (tagGroups.occasion.length > 0) {
      searchText += `适合${tagGroups.occasion.join('、')}的`;
    }
    if (tagGroups.other.length > 0) {
      searchText += `${tagGroups.other.join('、')}`;
    }
    searchText += '穿搭推荐';

    return searchText;
  }, [selectedTags]);

  // 复制消息内容到剪贴板
  const handleCopyMessage = useCallback(async (message: ChatMessage) => {
    try {
      await navigator.clipboard.writeText(message.content);
      console.log('✅ 已复制到剪贴板');
    } catch (err) {
      console.error('❌ 复制失败:', err);
    }
  }, []);



  return (
    <div className={`flex flex-col h-full bg-white rounded-xl shadow-lg border border-gray-200 ${className} relative`}>
      {/* 聊天消息区域 */}
      <div
        ref={chatContainerRef}
        className="flex-1 overflow-y-auto p-4 space-y-4 bg-gray-50 pb-32"
        style={{ marginBottom: allTags.length > 0 ? '200px' : '120px' }}
      >
        {messages.length === 0 ? (
          <div className="flex flex-col items-center justify-center h-full text-center">
            <div className="w-20 h-20 bg-gradient-to-br from-pink-100 to-purple-100 rounded-full flex items-center justify-center mb-6">
              <Sparkles className="w-10 h-10 text-pink-500" />
            </div>
            <p className="text-gray-600 max-w-lg mb-8 text-lg leading-relaxed">
              我是您的专属时尚顾问，基于丰富的女装穿搭知识库，为您提供个性化的搭配建议和时尚指导。
            </p>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-w-2xl">
              {[
                '夏日清新穿搭推荐',
                '职场女性如何搭配？',
                '约会穿什么显气质？',
                '小个子女生穿搭技巧',
                '秋冬外套怎么选？',
                '显瘦穿搭有什么秘诀？',
                '色彩搭配的基本原则',
                '配饰如何提升整体造型？'
              ].map((suggestion, index) => (
                <button
                  key={index}
                  onClick={() => setInput(suggestion)}
                  className="px-3 py-2 text-sm text-pink-600 bg-pink-50 hover:bg-pink-100 rounded-lg transition-all duration-200 hover:shadow-md hover:scale-105"
                >
                  {suggestion}
                </button>
              ))}
            </div>
          </div>
        ) : (
          <>
            {messages.map((message) => (
              <div
                key={message.id}
                className={`flex gap-3 ${message.type === 'user' ? 'justify-end' : 'justify-start'}`}
              >
                {message.type === 'assistant' && (
                  <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center flex-shrink-0">
                    <Bot className="w-4 h-4 text-white" />
                  </div>
                )}

                <div className={`max-w-[80%] ${message.type === 'user' ? 'order-1' : ''}`}>
                  {/* 用户消息或AI消息的文字回答（可选显示） */}
                  {(message.type === 'user' || message.status === 'sending' || showAnswers[message.id]) && (
                    <div
                      className={`px-4 py-3 rounded-2xl ${
                        message.type === 'user'
                          ? 'bg-pink-500 text-white'
                          : 'bg-white border border-gray-200 text-gray-900'
                      }`}
                    >
                      {message.status === 'sending' ? (
                        <div className="flex items-center gap-2">
                          <div className="animate-spin w-4 h-4 border-2 border-pink-300 border-t-pink-500 rounded-full"></div>
                          <span className="text-gray-600">正在为您搭配中...</span>
                        </div>
                      ) : (
                        <div className="whitespace-pre-wrap">{message.content}</div>
                      )}
                    </div>
                  )}

                  {/* AI消息的查看详情按钮（当文字回答隐藏且不在加载状态时显示） */}
                  {message.type === 'assistant' && message.status !== 'sending' && !showAnswers[message.id] && (
                    <div className="mb-3">
                      <button
                        onClick={() => toggleAnswerVisibility(message.id)}
                        className="inline-flex items-center gap-2 px-3 py-2 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 text-sm text-gray-600 hover:text-gray-800 transition-all duration-200"
                      >
                        <MessageCircle className="w-4 h-4" />
                        查看AI详细回答
                      </button>
                    </div>
                  )}

                  {/* AI消息的隐藏回答按钮（当文字回答显示且不在加载状态时显示） */}
                  {message.type === 'assistant' && message.status !== 'sending' && showAnswers[message.id] && (
                    <div className="mt-2">
                      <button
                        onClick={() => toggleAnswerVisibility(message.id)}
                        className="inline-flex items-center gap-2 px-3 py-1 bg-gray-100 hover:bg-gray-200 text-xs text-gray-600 hover:text-gray-800 rounded-full transition-all duration-200"
                      >
                        隐藏回答
                        <XCircle className="w-3 h-3" />
                      </button>
                    </div>
                  )}

                  {/* 消息状态和元数据 */}
                  <div className={`flex items-center gap-2 mt-1 text-xs ${
                    message.type === 'user' ? 'justify-end' : 'justify-start'
                  }`}>
                    <span className="text-gray-500">
                      {message.timestamp.toLocaleTimeString()}
                    </span>

                    {message.status === 'sent' && (
                      <CheckCircle className="w-3 h-3 text-green-500" />
                    )}
                    {message.status === 'error' && (
                      <XCircle className="w-3 h-3 text-red-500" />
                    )}

                    {message.metadata?.responseTime && (
                      <span className="text-gray-400">
                        <Clock className="w-3 h-3 inline mr-1" />
                        {message.metadata.responseTime}ms
                      </span>
                    )}

                    {/* 操作按钮 */}
                    <div className="flex items-center gap-1 ml-2">
                      <button
                        onClick={() => handleCopyMessage(message)}
                        className="p-1 text-gray-400 hover:text-pink-500 hover:bg-pink-50 rounded transition-colors duration-200"
                        title="复制消息"
                      >
                        <Copy className="w-3 h-3" />
                      </button>
                    </div>
                  </div>

                  {/* 来源信息 - 图片卡片展示 */}
                  {showSources && message.metadata?.sources && message.metadata.sources.length > 0 && (
                    <div className="mt-3 p-4 bg-gradient-to-br from-pink-50 to-purple-50 rounded-lg border border-pink-200">
                      <div className="flex items-center justify-between mb-4">
                        <div className="flex items-center gap-2">
                          <div className="w-2 h-2 bg-pink-500 rounded-full"></div>
                          <div className="text-base font-semibold text-gray-800">
                            时尚穿搭参考 ({message.metadata.sources.length} 张图片)
                          </div>
                        </div>
                        <div className="text-xs text-gray-500 bg-white px-2 py-1 rounded-full">
                          悬停查看原图
                        </div>
                      </div>

                      {/* 图片展示 - 响应式网格 */}
                      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
                        {(() => {
                          const isExpanded = expandedSources[message.id];
                          const defaultDisplayCount = 12; // 默认显示12张图片
                          const displaySources = isExpanded
                            ? message.metadata.sources
                            : message.metadata.sources.slice(0, defaultDisplayCount);

                          return displaySources.map((source, index) =>
                            <div key={`${index}-${selectedTags.length}-${selectedTags.join(',')}`}>
                              {renderImageCard(source, index)}
                            </div>
                          );
                        })()}
                      </div>

                      {/* 展开/收起按钮 */}
                      {message.metadata.sources.length > 12 && (
                        <div className="mt-3 text-center">
                          <button
                            onClick={() => toggleSourcesExpanded(message.id)}
                            className="inline-flex items-center gap-2 text-sm text-pink-600 hover:text-pink-800 bg-white hover:bg-pink-50 px-4 py-2 rounded-full border border-pink-200 hover:border-pink-300 transition-all duration-200 shadow-sm hover:shadow-md"
                          >
                            {expandedSources[message.id] ? (
                              <>
                                <span>收起图片</span>
                                <svg className="w-4 h-4 transform rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                                </svg>
                              </>
                            ) : (
                              <>
                                <span>查看全部 {message.metadata.sources.length} 张图片</span>
                                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                                </svg>
                              </>
                            )}
                          </button>
                        </div>
                      )}
                    </div>
                  )}
                </div>

                {message.type === 'user' && (
                  <div className="w-8 h-8 bg-gray-500 rounded-full flex items-center justify-center flex-shrink-0">
                    <User className="w-4 h-4 text-white" />
                  </div>
                )}
              </div>
            ))}
            <div ref={messagesEndRef} />
          </>
        )}
      </div>

      {/* 错误提示 */}
      {error && (
        <div className="mx-4 mb-2 p-3 bg-red-50 border border-red-200 rounded-lg flex items-center gap-2">
          <AlertCircle className="w-4 h-4 text-red-500 flex-shrink-0" />
          <span className="text-red-700 text-sm">{error}</span>
          <button
            onClick={handleRetry}
            className="ml-auto text-red-600 hover:text-red-800 text-sm font-medium"
          >
            重试
          </button>
        </div>
      )}

      {/* 固定底部输入区域 */}
      <div className="absolute bottom-0 left-0 right-0 bg-white border-t border-gray-200 rounded-b-xl">
        {/* 标签选择区域 */}
        {allTags.length > 0 && (
          <div className="border-b border-gray-100 bg-gradient-to-r from-pink-50 to-purple-50">
            {/* 标签头部 - 始终显示 */}
            <div className="px-4 py-3">
              <div className="flex items-center justify-between">
                {/* 左侧：标签标题和已选标签 */}
                <div className="flex items-center gap-2 flex-1 min-w-0">
                  <Tag className="w-4 h-4 text-pink-500 flex-shrink-0" />
                  <span className="text-sm font-medium text-gray-700 flex-shrink-0">
                    穿搭标签 ({selectedTags.length} 已选)
                  </span>

                  {/* 已选标签预览 */}
                  {selectedTags.length > 0 && (
                    <div className="flex items-center gap-1 ml-2 overflow-hidden">
                      {selectedTags.slice(0, 3).map((tag, index) => (
                        <span
                          key={index}
                          className="inline-block px-2 py-1 bg-pink-500 text-white text-xs rounded-full flex-shrink-0"
                        >
                          {tag}
                        </span>
                      ))}
                      {selectedTags.length > 3 && (
                        <span className="text-xs text-gray-500 flex-shrink-0">+{selectedTags.length - 3}</span>
                      )}
                    </div>
                  )}
                </div>

                {/* 右侧：操作按钮和展开按钮 */}
                <div className="flex items-center gap-2 flex-shrink-0">
                  {/* 操作按钮 */}
                  {selectedTags.length > 0 && (
                    <>
                      <button
                        onClick={() => setInput(generateSearchFromTags())}
                        className="text-xs text-pink-600 hover:text-pink-800 bg-white hover:bg-pink-50 px-3 py-1 rounded-full transition-all duration-200 shadow-sm hover:shadow-md border border-pink-200"
                      >
                        生成搜索
                      </button>
                      <button
                        onClick={clearSelectedTags}
                        className="text-xs text-gray-500 hover:text-gray-700 bg-white hover:bg-gray-100 px-3 py-1 rounded-full transition-all duration-200 shadow-sm border border-gray-200"
                      >
                        清空
                      </button>
                    </>
                  )}

                  {/* 展开/折叠按钮 */}
                  <button
                    onClick={toggleTagsExpanded}
                    className="flex items-center gap-1 hover:bg-white hover:bg-opacity-50 rounded-lg px-2 py-1 transition-all duration-200"
                  >
                    {!isTagsExpanded && (
                      <div className="bg-pink-500 text-white px-2 py-1 rounded-full text-xs font-medium shadow-md">
                        展开
                      </div>
                    )}
                    <svg
                      className={`w-4 h-4 text-pink-500 transition-transform duration-200 ${isTagsExpanded ? 'rotate-180' : ''}`}
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                    </svg>
                  </button>
                </div>
              </div>
            </div>

            {/* 标签内容 - 可折叠 */}
            {isTagsExpanded && (
              <div className="px-4 pb-4">
                {/* 标签列表 */}
                <div className="flex flex-wrap gap-2 max-h-32 overflow-y-auto">
                  {allTags.map((tag, index) => {
                    const isSelected = selectedTags.includes(tag);
                    return (
                      <button
                        key={index}
                        onClick={() => toggleTag(tag)}
                        className={`inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium transition-all duration-200 ${
                          isSelected
                            ? 'bg-pink-500 text-white shadow-md transform scale-105'
                            : 'bg-white text-gray-700 hover:bg-pink-100 hover:text-pink-700 hover:shadow-sm border border-gray-200'
                        }`}
                      >
                        <span>{tag}</span>
                        {isSelected && (
                          <CheckCircle className="w-3 h-3" />
                        )}
                      </button>
                    );
                  })}
                </div>
              </div>
            )}
          </div>
        )}

        {/* 输入区域 */}
        <div className="p-4">
        <div className="flex gap-3 items-start">
          <div className="flex-1 relative">
            <textarea
              ref={inputRef}
              value={input}
              onChange={(e) => setInput(e.target.value)}
              onKeyDown={handleKeyPress}
              placeholder={placeholder}
              disabled={isLoading}
              className="w-full px-4 py-3 border border-gray-300 rounded-xl resize-none focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
              rows={1}
              style={{
                minHeight: '48px',
                maxHeight: '120px',
                height: 'auto'
              }}
              onInput={(e) => {
                const target = e.target as HTMLTextAreaElement;
                target.style.height = 'auto';
                target.style.height = `${Math.min(target.scrollHeight, 120)}px`;
              }}
            />
          </div>

          <button
            onClick={handleSendMessage}
            disabled={!input.trim() || isLoading}
            className="px-4 bg-pink-500 text-white rounded-xl hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:ring-offset-2 disabled:bg-gray-300 disabled:cursor-not-allowed transition-all duration-200 flex items-center justify-center flex-shrink-0"
            style={{ height: '48px', minHeight: '48px' }}
          >
            {isLoading ? (
              <div className="animate-spin w-5 h-5 border-2 border-white border-t-transparent rounded-full"></div>
            ) : (
              <Send className="w-5 h-5" />
            )}
          </button>
        </div>

          <div className="mt-2 text-center text-xs text-gray-500">
            <span>按 Enter 发送，Shift + Enter 换行</span>
          </div>
        </div>
      </div>

      {/* 标签详情气泡卡片 */}
      {showTagBubble && (
        <>
          {/* 背景遮罩 */}
          <div
            className="fixed inset-0 z-40"
            onClick={closeTagBubble}
          />

          {/* 气泡卡片 */}
          <div
            className="fixed z-50 bg-white rounded-xl shadow-2xl border border-gray-200 max-w-sm w-80 transform -translate-x-1/2 -translate-y-full"
            style={{
              left: bubblePosition.x,
              top: bubblePosition.y,
            }}
          >
            {/* 气泡箭头 */}
            <div className="absolute top-full left-1/2 transform -translate-x-1/2">
              <div className="w-0 h-0 border-l-8 border-r-8 border-t-8 border-l-transparent border-r-transparent border-t-white"></div>
              <div className="absolute -top-1 left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-t-8 border-l-transparent border-r-transparent border-t-gray-200"></div>
            </div>

            {/* 卡片头部 */}
            <div className="flex items-center justify-between p-3 border-b border-gray-100 bg-gradient-to-r from-pink-50 to-purple-50 rounded-t-xl">
              <div className="flex items-center gap-2">
                <Tag className="w-4 h-4 text-pink-500" />
                <h3 className="text-sm font-semibold text-gray-800">标签详情</h3>
              </div>
              <button
                onClick={closeTagBubble}
                className="p-1 hover:bg-gray-100 rounded-full transition-colors duration-200"
              >
                <XCircle className="w-4 h-4 text-gray-500" />
              </button>
            </div>

            {/* 卡片内容 */}
            <div className="p-3 max-h-64 overflow-y-auto">
              {/* 分类标签 */}
              {bubbleTags.categories.length > 0 && (
                <div className="mb-3">
                  <h4 className="text-xs font-medium text-gray-700 mb-2 flex items-center gap-1">
                    <Tag className="w-3 h-3 text-blue-500" />
                    分类标签 ({bubbleTags.categories.length})
                  </h4>
                  <div className="flex flex-wrap gap-1">
                    {bubbleTags.categories.map((category, index) => {
                      const isSelected = selectedTags.includes(category);
                      return (
                        <button
                          key={index}
                          onClick={() => toggleTag(category)}
                          className={`inline-flex items-center gap-1 px-2 py-1 text-xs rounded-full transition-all duration-200 border ${
                            isSelected
                              ? 'bg-pink-500 text-white shadow-md border-pink-600'
                              : 'bg-blue-50 text-blue-700 hover:bg-pink-100 hover:text-pink-700 border-blue-200 hover:border-pink-300'
                          }`}
                        >
                          <Tag className="w-2 h-2" />
                          {category}
                        </button>
                      );
                    })}
                  </div>
                </div>
              )}

              {/* 环境标签 */}
              {bubbleTags.environment.length > 0 && (
                <div>
                  <h4 className="text-xs font-medium text-gray-700 mb-2 flex items-center gap-1">
                    <MapPin className="w-3 h-3 text-green-500" />
                    环境标签 ({bubbleTags.environment.length})
                  </h4>
                  <div className="flex flex-wrap gap-1">
                    {bubbleTags.environment.map((tag, index) => {
                      const isSelected = selectedTags.includes(tag);
                      return (
                        <button
                          key={index}
                          onClick={() => toggleTag(tag)}
                          className={`inline-flex items-center gap-1 px-2 py-1 text-xs rounded-full transition-all duration-200 border ${
                            isSelected
                              ? 'bg-pink-500 text-white shadow-md border-pink-600'
                              : 'bg-green-50 text-green-700 hover:bg-pink-100 hover:text-pink-700 border-green-200 hover:border-pink-300'
                          }`}
                        >
                          <MapPin className="w-2 h-2" />
                          {tag}
                        </button>
                      );
                    })}
                  </div>
                </div>
              )}

              {/* 空状态 */}
              {bubbleTags.categories.length === 0 && bubbleTags.environment.length === 0 && (
                <div className="text-center py-4 text-gray-500">
                  <Tag className="w-8 h-8 mx-auto mb-1 text-gray-300" />
                  <p className="text-xs">暂无标签信息</p>
                </div>
              )}
            </div>

            {/* 卡片底部 */}
            <div className="px-3 py-2 border-t border-gray-100 bg-gray-50 rounded-b-xl">
              <div className="flex items-center justify-between">
                <span className="text-xs text-gray-600">
                  已选 {selectedTags.length} 个
                </span>
                <button
                  onClick={closeTagBubble}
                  className="px-3 py-1 bg-pink-500 text-white rounded-md hover:bg-pink-600 transition-colors duration-200 text-xs"
                >
                  确定
                </button>
              </div>
            </div>
          </div>
        </>
      )}
    </div>
  );
};
