'use client'

import { useState, useEffect, useRef, useCallback } from 'react'
import { useSession } from 'next-auth/react'
import Image from 'next/image'
import {
  hasDragLeftDropZone,
  prepareFileDrag,
  validateImageFiles,
} from '@/components/upload/drag-drop-utils'

const AI_CHAT_MAX_IMAGES = 5
const AI_CHAT_MAX_IMAGE_BYTES = 10 * 1024 * 1024

// 添加动画样式
const shimmerStyle = `
  @keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  
  @keyframes breathe {
    0%, 100% { 
      filter: blur(15px) brightness(0.7); 
      transform: scale(1);
    }
    50% { 
      filter: blur(12px) brightness(0.8); 
      transform: scale(1.02);
    }
  }
`

// 图片加载占位符组件
const ImageLoadingPlaceholder = () => {
  return (
    <div className="relative w-full aspect-square rounded-2xl overflow-hidden bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800">
      {/* 动态模糊背景 */}
      <div className="absolute inset-0 animate-pulse">
        <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/40 dark:via-white/10 to-transparent animate-shimmer" 
             style={{
               backgroundSize: '200% 100%',
               animation: 'shimmer 2s infinite'
             }}
        />
      </div>
      
      {/* 中心图标 */}
      <div className="absolute inset-0 flex items-center justify-center">
        <div className="text-center">
          <div className="relative">
            {/* 旋转的光圈 */}
            <div className="w-16 h-16 border-4 border-gray-300 dark:border-gray-600 border-t-blue-500 rounded-full animate-spin" />
            {/* 中心图标 */}
            <div className="absolute inset-0 flex items-center justify-center">
              <svg className="w-8 h-8 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
              </svg>
            </div>
          </div>
          <p className="mt-4 text-sm font-medium text-gray-500 dark:text-gray-400">正在生成图片...</p>
          <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">AI正在为您创作中</p>
        </div>
      </div>
    </div>
  )
}

interface Message {
  id: string
  role: 'user' | 'assistant' | 'system'
  content: string
  images?: string[]
  timestamp: Date
  isGenerating?: boolean // 是否正在生成图片
  imageCount?: number // 预期生成的图片数量
  sourceImages?: string[] // 用户发送的原始图片（用于显示模糊占位符）
}

interface PendingImage {
  id: string
  file: File
  previewUrl: string
}

function readFileAsDataUrl(file: File): Promise<string> {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onerror = () => reject(new Error(`无法读取图片：${file.name}`))
    reader.onload = () => resolve(reader.result as string)
    reader.readAsDataURL(file)
  })
}

export default function AIChatWidget() {
  const { data: session } = useSession()
  const [isOpen, setIsOpen] = useState(false)
  const [messages, setMessages] = useState<Message[]>([])
  const [input, setInput] = useState('')
  const [sending, setSending] = useState(false)
  const [pendingImages, setPendingImages] = useState<PendingImage[]>([])
  const [imageError, setImageError] = useState('')
  const [isDragging, setIsDragging] = useState(false)
  const [windowDragging, setWindowDragging] = useState(false)
  const [position, setPosition] = useState({ x: 0, y: 0 })
  const [dragStart, setDragStart] = useState({ x: 0, y: 0 })
  const messagesEndRef = useRef<HTMLDivElement>(null)
  const fileInputRef = useRef<HTMLInputElement>(null)
  const containerRef = useRef<HTMLDivElement>(null)
  const dropZoneRef = useRef<HTMLDivElement>(null)
  const headerRef = useRef<HTMLDivElement>(null)
  const pendingImagesRef = useRef<PendingImage[]>([])

  // 窗口拖拽功能
  const handleMouseDown = (e: React.MouseEvent) => {
    if (e.button !== 0) return // 只响应左键
    setWindowDragging(true)
    setDragStart({
      x: e.clientX - position.x,
      y: e.clientY - position.y
    })
  }

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (!windowDragging) return
      setPosition({
        x: e.clientX - dragStart.x,
        y: e.clientY - dragStart.y
      })
    }

    const handleMouseUp = () => {
      setWindowDragging(false)
    }

    if (windowDragging) {
      document.addEventListener('mousemove', handleMouseMove)
      document.addEventListener('mouseup', handleMouseUp)
    }

    return () => {
      document.removeEventListener('mousemove', handleMouseMove)
      document.removeEventListener('mouseup', handleMouseUp)
    }
  }, [windowDragging, dragStart])

  // 点击外部关闭
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
        setIsOpen(false)
      }
    }

    if (isOpen) {
      document.addEventListener('mousedown', handleClickOutside)
    }
    return () => document.removeEventListener('mousedown', handleClickOutside)
  }, [isOpen])

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

  const replacePendingImages = useCallback((nextImages: PendingImage[]) => {
    pendingImagesRef.current = nextImages
    setPendingImages(nextImages)
  }, [])

  const addImageFiles = useCallback((selectedFiles: FileList | File[]) => {
    if (sending) {
      setImageError('消息正在发送，请等待完成后再添加图片')
      return
    }

    const { acceptedFiles, errors } = validateImageFiles(selectedFiles, {
      maxBytes: AI_CHAT_MAX_IMAGE_BYTES,
      maxCount: AI_CHAT_MAX_IMAGES,
      existingCount: pendingImagesRef.current.length,
    })

    if (acceptedFiles.length > 0) {
      const nextImages = [
        ...pendingImagesRef.current,
        ...acceptedFiles.map((file, index) => ({
          id: `${Date.now()}-${index}-${Math.random().toString(36).slice(2, 8)}`,
          file,
          previewUrl: URL.createObjectURL(file),
        })),
      ]
      replacePendingImages(nextImages)
    }

    setImageError(errors.join('；'))
  }, [replacePendingImages, sending])

  useEffect(() => {
    return () => {
      pendingImagesRef.current.forEach((image) => URL.revokeObjectURL(image.previewUrl))
    }
  }, [])

  // 处理粘贴图片
  useEffect(() => {
    const handlePaste = (e: ClipboardEvent) => {
      if (!isOpen || sending) return
      
      const items = e.clipboardData?.items
      if (!items) return

      const pastedFiles: File[] = []
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.indexOf('image') !== -1) {
          const file = items[i].getAsFile()
          if (file) {
            pastedFiles.push(file)
          }
        }
      }

      if (pastedFiles.length > 0) {
        e.preventDefault()
        addImageFiles(pastedFiles)
      }
    }
    
    if (isOpen) {
      document.addEventListener('paste', handlePaste)
    }
    return () => document.removeEventListener('paste', handlePaste)
  }, [addImageFiles, isOpen, sending])

  // 处理图片选择
  const handleImageSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    addImageFiles(e.target.files || [])
    e.currentTarget.value = ''
  }

  // 移除图片
  const removeImage = (index: number) => {
    if (sending) return
    const removedImage = pendingImagesRef.current[index]
    if (removedImage) {
      URL.revokeObjectURL(removedImage.previewUrl)
    }
    replacePendingImages(pendingImagesRef.current.filter((_, imageIndex) => imageIndex !== index))
    setImageError('')
  }

  // 处理拖拽上传
  const handleDragOver = (e: React.DragEvent) => {
    prepareFileDrag(e, sending)
    if (sending) return
    setIsDragging(true)
  }

  const handleDragLeave = (e: React.DragEvent) => {
    e.preventDefault()
    e.stopPropagation()
    if (hasDragLeftDropZone(e)) {
      setIsDragging(false)
    }
  }

  const handleDrop = (e: React.DragEvent) => {
    prepareFileDrag(e, sending)
    setIsDragging(false)
    if (sending) {
      setImageError('消息正在发送，请等待完成后再添加图片')
      return
    }
    addImageFiles(e.dataTransfer.files)
  }

  // 发送消息
  const handleSend = async () => {
    const selectedImages = pendingImagesRef.current
    if ((!input.trim() && selectedImages.length === 0) || sending || !session) return

    setSending(true)

    try {
      const currentImages = await Promise.all(
        selectedImages.map((image) => readFileAsDataUrl(image.file)),
      )
      const userMessage: Message = {
        id: Date.now().toString(),
        role: 'user',
        content: input.trim(),
        images: currentImages,
        timestamp: new Date()
      }

      setMessages(prev => [...prev, userMessage])
      setInput('')
      selectedImages.forEach((image) => URL.revokeObjectURL(image.previewUrl))
      replacePendingImages([])
      setImageError('')

      // 检测是否需要生成图片
      const shouldShowImagePlaceholder = currentImages.length > 0 || 
        userMessage.content.includes('生成') || 
        userMessage.content.includes('创建') ||
        userMessage.content.includes('画') ||
        userMessage.content.includes('图片') ||
        userMessage.content.includes('图')
      
      // 如果需要生成图片，在用户消息中添加指令
      let finalMessageContent = userMessage.content
      if (shouldShowImagePlaceholder && !userMessage.content.includes('4张') && !userMessage.content.includes('四张')) {
        finalMessageContent += '\n\n（请生成4张不同风格或角度的图片）'
      }
      
      // 构建消息内容
      let messageContent: any = []
      
      if (finalMessageContent) {
        messageContent.push({
          type: 'text',
          text: finalMessageContent
        })
      }

      // 添加图片
      currentImages.forEach(img => {
        messageContent.push({
          type: 'image_url',
          image_url: { url: img }
        })
      })

      // 构建对话历史（保留图片信息，支持上下文连续对话）
      const conversationHistory = messages
        .filter(msg => !msg.isGenerating) // 过滤掉正在生成的临时消息
        .map(msg => {
          if (msg.images && msg.images.length > 0) {
            const parts: any[] = []
            if (msg.content) {
              parts.push({ type: 'text', text: msg.content })
            }
            msg.images.forEach(img => {
              parts.push({ type: 'image_url', image_url: { url: img } })
            })
            return { role: msg.role, content: parts }
          }
          return { role: msg.role, content: msg.content }
        })
      
      conversationHistory.push({
        role: 'user',
        content: messageContent.length === 1 && messageContent[0].type === 'text' 
          ? messageContent[0].text 
          : messageContent
      })
      
      // 先添加一个加载中的占位消息
      const tempAiMessageId = (Date.now() + 1).toString()
      const tempAiMessage: Message = {
        id: tempAiMessageId,
        role: 'assistant',
        content: '',
        timestamp: new Date(),
        isGenerating: shouldShowImagePlaceholder,
        imageCount: shouldShowImagePlaceholder ? 4 : 0,
        sourceImages: currentImages.length > 0 ? currentImages : undefined // 保存用户发送的原图
      }
      
      setMessages(prev => [...prev, tempAiMessage])

      // 调用API
      const response = await fetch('/api/ai-chat', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          messages: conversationHistory
        })
      })

      if (!response.ok) {
        const { parseFetchError } = await import('@/lib/error-handler')
        const error = await parseFetchError(response)
        throw new Error(error.message)
      }

      const data = await response.json()
      
      // 解析AI响应
      let aiContent = ''
      let aiImages: string[] = []
      
      if (data.candidates && data.candidates.length > 0) {
        const candidate = data.candidates[0]
        if (candidate.content && candidate.content.parts) {
          for (const part of candidate.content.parts) {
            if (part.text) {
              // 检查是否包含图片
              const base64ImageMatch = part.text.match(/!\[image\]\(data:image\/([^;]+);base64,([^)]+)\)/)
              if (base64ImageMatch) {
                const mimeType = base64ImageMatch[1]
                const base64Data = base64ImageMatch[2]
                aiImages.push(`data:image/${mimeType};base64,${base64Data}`)
              }
              
              // 移除Markdown图片语法
              const cleanText = part.text
                .replace(/!\[image\]\(data:image\/[^;]+;base64,[^)]+\)/g, '')
                .replace(/!\[Image\]\([^)]+\)/g, '')
                .trim()
              if (cleanText) {
                aiContent += cleanText
              }
            } else if (part.inlineData && part.inlineData.data) {
              const mimeType = part.inlineData.mimeType || 'image/png'
              aiImages.push(`data:${mimeType};base64,${part.inlineData.data}`)
            }
          }
        }
      }

      // 更新临时占位消息为实际内容
      setMessages(prev => prev.map(msg => 
        msg.id === tempAiMessageId
          ? {
              ...msg,
              content: aiContent || '收到您的消息了',
              images: aiImages.length > 0 ? aiImages : undefined,
              isGenerating: false
            }
          : msg
      ))
    } catch (error) {
      console.error('发送失败:', error)
      const errorMessage: Message = {
        id: (Date.now() + 1).toString(),
        role: 'system',
        content: '发送失败，请重试',
        timestamp: new Date()
      }
      setMessages(prev => [...prev, errorMessage])
    } finally {
      setSending(false)
    }
  }

  if (!session) return null

  return (
    <div ref={containerRef} className="fixed bottom-6 right-6 z-50">
      {/* AI聊天窗口 - 苹果风格 */}
      {isOpen && (
        <>
          <style dangerouslySetInnerHTML={{ __html: shimmerStyle }} />
          <div 
            className="fixed w-[420px] h-[680px] bg-white dark:bg-gray-900 rounded-2xl overflow-hidden flex flex-col"
            style={{
              left: position.x ? `${position.x}px` : 'auto',
              top: position.y ? `${position.y}px` : 'auto',
              right: position.x ? 'auto' : '24px',
              bottom: position.y ? 'auto' : '96px',
              maxHeight: '80vh',
              boxShadow: '0 20px 60px -15px rgba(0, 0, 0, 0.3), 0 10px 20px -10px rgba(0, 0, 0, 0.2)'
            }}
          >
            {/* 头部 - 渐变风格 - 可拖拽 */}
            <div 
              ref={headerRef}
              onMouseDown={handleMouseDown}
              className="px-6 py-4 bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-between cursor-move select-none"
            >
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center ring-2 ring-white/30">
                  <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                  </svg>
                </div>
                <div>
                  <h3 className="font-semibold text-white">AI助手</h3>
                  <p className="text-xs text-white/80">智能对话 · 图片生成</p>
                </div>
              </div>
              <button
                onClick={() => setIsOpen(false)}
                className="text-white/80 hover:text-white hover:bg-white/20 backdrop-blur-sm rounded-full p-2 transition-all"
                aria-label="关闭"
              >
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>

          {/* 消息列表 */}
          <div 
            ref={dropZoneRef}
            className="flex-1 overflow-y-auto p-4 space-y-4 bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-950 relative"
            style={{ 
              scrollbarWidth: 'thin', 
              scrollbarColor: '#cbd5e1 transparent',
              backgroundImage: 'radial-gradient(circle at 1px 1px, rgb(209 213 219 / 0.3) 1px, transparent 0)',
              backgroundSize: '20px 20px'
            }}
            onDragOver={handleDragOver}
            onDragLeave={handleDragLeave}
            onDrop={handleDrop}
          >
            {/* 拖拽提示 */}
            {isDragging && (
              <div className="pointer-events-none absolute inset-0 bg-blue-500/20 dark:bg-blue-400/20 backdrop-blur-sm z-10 flex items-center justify-center border-2 border-dashed border-blue-500 dark:border-blue-400 m-2 rounded-lg">
                <div className="text-center">
                  <svg className="w-16 h-16 mx-auto text-blue-500 dark:text-blue-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                  </svg>
                  <p className="text-lg font-semibold text-blue-600 dark:text-blue-400">松开鼠标上传图片</p>
                  <p className="text-sm text-blue-500 dark:text-blue-300 mt-1">支持多张图片（最多5张）</p>
                </div>
              </div>
            )}
            
            {messages.length === 0 && !isDragging && (
              <div className="text-center mt-12">
                <div className="w-20 h-20 mx-auto mb-4 rounded-full bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center shadow-lg">
                  <svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
                  </svg>
                </div>
                <h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">👋 你好！我是AI助手</h3>
                <p className="text-sm text-gray-600 dark:text-gray-400 mb-1">可以发送文字或图片与我聊天</p>
                <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">支持图片编辑、内容生成等功能</p>
                <div className="inline-flex items-center gap-2 px-4 py-2 bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 rounded-full text-sm">
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                  </svg>
                  拖拽图片到此处快速上传
                </div>
              </div>
            )}
            
            {messages.map((msg) => (
              <div
                key={msg.id}
                className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'} animate-in fade-in slide-in-from-bottom-2 duration-300`}
              >
                <div className={`max-w-[85%] ${
                  msg.role === 'user' 
                    ? 'bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-lg' 
                    : msg.role === 'assistant'
                    ? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-white border border-gray-200 dark:border-gray-700 shadow-md'
                    : 'bg-yellow-50 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-200 border border-yellow-200 dark:border-yellow-800'
                } rounded-2xl px-4 py-3`}>
                  {msg.content && <div className="whitespace-pre-wrap text-sm">{msg.content}</div>}
                  
                  {/* 显示图片加载占位符 */}
                  {msg.isGenerating && (
                    <div className="mt-2">
                      {/* 如果有原图，显示原图的模糊占位符 */}
                      {msg.sourceImages && msg.sourceImages.length > 0 ? (
                        <div className={`grid gap-2 ${
                          msg.sourceImages.length === 1 ? 'grid-cols-1' :
                          msg.sourceImages.length === 2 ? 'grid-cols-2' :
                          'grid-cols-3'
                        }`}>
                          {msg.sourceImages.map((img, idx) => (
                            <div key={idx} className="relative rounded-2xl overflow-hidden animate-pulse">
                              <img 
                                src={img} 
                                alt={`Processing ${idx + 1}`}
                                className="w-full max-w-[200px] h-auto object-contain rounded-2xl transition-all duration-1000"
                                style={{ 
                                  filter: 'blur(15px) brightness(0.7)', 
                                  animation: 'breathe 2s ease-in-out infinite'
                                }}
                              />
                              <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-blue-500/10 to-purple-500/10">
                                <div className="bg-black/60 backdrop-blur-xl px-5 py-3 rounded-full shadow-2xl border border-white/10">
                                  <div className="flex items-center gap-3 text-white text-sm">
                                    <div className="relative">
                                      <div className="w-5 h-5 border-3 border-white/20 border-t-white rounded-full animate-spin" />
                                      <div className="absolute inset-0 w-5 h-5 border-3 border-transparent border-r-white/40 rounded-full animate-spin" style={{ animationDirection: 'reverse', animationDuration: '1.5s' }} />
                                    </div>
                                    <span className="font-medium">AI处理中...</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                          ))}
                        </div>
                      ) : (
                        /* 没有原图，显示4个空白占位符（生成任务） */
                        msg.imageCount && msg.imageCount > 0 && (
                          <div className="grid grid-cols-4 gap-2">
                            {Array.from({ length: msg.imageCount }).map((_, idx) => (
                              <div key={idx}>
                                <ImageLoadingPlaceholder />
                              </div>
                            ))}
                          </div>
                        )
                      )}
                    </div>
                  )}
                  
                  {/* 显示实际图片 - 添加淡入动画 */}
                  {!msg.isGenerating && msg.images && msg.images.length > 0 && (
                    <div className={`mt-2 grid gap-2 animate-in fade-in duration-500 ${
                      msg.images.length === 1 ? 'grid-cols-1' : 
                      msg.images.length === 2 ? 'grid-cols-2' :
                      msg.images.length === 3 ? 'grid-cols-3' :
                      'grid-cols-4'
                    }`}>
                      {msg.images.map((img, idx) => (
                        <div 
                          key={idx} 
                          className="relative group rounded-2xl overflow-hidden bg-gray-100 dark:bg-gray-700 animate-in fade-in slide-in-from-bottom-2"
                          style={{ animationDelay: `${idx * 100}ms`, animationDuration: '400ms' }}
                        >
                          <img 
                            src={img} 
                            alt={`Image ${idx + 1}`}
                            className={`w-full rounded-2xl cursor-pointer hover:opacity-90 transition-all hover:scale-[1.02] ${
                              msg.role === 'user' 
                                ? 'max-w-[200px] h-auto object-contain' // 用户发送的图片：限制最大宽度，保持比例
                                : 'aspect-square object-cover' // AI生成的图片：正方形显示
                            }`}
                            onClick={() => {
                              // 点击图片在新窗口打开
                              const win = window.open()
                              if (win) {
                                win.document.write(`<img src="${img}" style="max-width:100%;height:auto;" />`)
                              }
                            }}
                          />
                          {/* 下载按钮 */}
                          <button
                            onClick={(e) => {
                              e.stopPropagation()
                              const link = document.createElement('a')
                              link.href = img
                              link.download = `image-${Date.now()}-${idx + 1}.png`
                              link.click()
                            }}
                            className="absolute top-2 right-2 bg-black/60 hover:bg-black/80 backdrop-blur-sm text-white p-2 rounded-xl opacity-0 group-hover:opacity-100 transition-all shadow-lg"
                            title="下载图片"
                          >
                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
                              <path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                            </svg>
                          </button>
                        </div>
                      ))}
                    </div>
                  )}
                  <div className="text-xs opacity-60 mt-1">
                    {msg.timestamp.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}
                  </div>
                </div>
              </div>
            ))}
            <div ref={messagesEndRef} />
          </div>

          {/* 图片预览区 */}
          {pendingImages.length > 0 && (
            <div className="px-4 py-3 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
              <div className="flex gap-2 overflow-x-auto pb-1" style={{ scrollbarWidth: 'thin' }}>
                {pendingImages.map((image, idx) => (
                  <div key={image.id} className="relative flex-shrink-0 group">
                    <img 
                      src={image.previewUrl}
                      alt={`待发送图片 ${idx + 1}`}
                      className="w-16 h-16 object-cover rounded-lg border border-gray-200 dark:border-gray-700" 
                    />
                    <button
                      onClick={() => removeImage(idx)}
                      disabled={sending}
                      className="absolute -top-1 -right-1 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs hover:bg-red-600"
                      aria-label={`删除待发送图片 ${idx + 1}`}
                    >
                      ×
                    </button>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* 输入区 */}
          <div className="p-4 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
            <div className="flex items-end gap-3">
              <input
                type="file"
                ref={fileInputRef}
                onChange={handleImageSelect}
                accept="image/*"
                multiple
                className="hidden"
                disabled={sending}
              />
              {/* 上传按钮 */}
              <button
                onClick={() => fileInputRef.current?.click()}
                disabled={sending}
                className="p-2 text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors disabled:cursor-not-allowed disabled:opacity-50"
                title="上传图片"
                aria-label="上传图片"
              >
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
              </button>
              {/* 输入框 */}
              <textarea
                value={input}
                onChange={(e) => setInput(e.target.value)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault()
                    handleSend()
                  }
                }}
                placeholder="输入消息..."
                className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 dark:text-white rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none text-sm resize-none placeholder:text-gray-400 dark:placeholder:text-gray-500"
                rows={2}
                disabled={sending}
              />
              {/* 发送按钮 */}
              <button
                onClick={handleSend}
                disabled={(!input.trim() && pendingImages.length === 0) || sending}
                className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed font-medium text-sm h-[72px] flex items-center justify-center min-w-[70px]"
              >
                {sending ? (
                  <div className="flex items-center gap-2">
                    <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                    <span>发送中</span>
                  </div>
                ) : (
                  <div className="flex items-center gap-2">
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2.5}>
                      <path strokeLinecap="round" strokeLinejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                    </svg>
                    <span>发送</span>
                  </div>
                )}
              </button>
            </div>
            {imageError && (
              <p className="mt-2 text-sm text-red-600 dark:text-red-400" role="alert">
                {imageError}
              </p>
            )}
            <p className="text-xs text-gray-500 dark:text-gray-400 mt-2 text-center">
              支持上传、拖拽或粘贴图片 · 最多5张，单张不超过10MB
            </p>
          </div>
        </div>
        </>
      )}

      {/* 悬浮按钮 */}
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="w-14 h-14 rounded-full bg-blue-500 text-white shadow-lg hover:bg-blue-600 hover:shadow-xl transition-all flex items-center justify-center"
        aria-label="AI助手"
      >
        {isOpen ? (
          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        ) : (
          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
          </svg>
        )}
      </button>
    </div>
  )
}