'use client'

import { toast } from 'sonner'
import copy from 'copy-to-clipboard'
import {
  Conversation,
  ConversationContent,
  ConversationEmptyState,
  ConversationScrollButton,
} from '@/components/ai-elements/conversation'
import { Message, MessageContent, MessageResponse, MessageAttachments, MessageAttachment } from '@/components/ai-elements/message'
import { Actions, Action } from '@/components/ai-elements/actions'
import {
  PromptInput,
  PromptInputTextarea,
  PromptInputToolbar,
  PromptInputTools,
  PromptInputSubmit,
  PromptInputAttachments,
  PromptInputAttachment,
  PromptInputActionMenu,
  PromptInputActionMenuTrigger,
  PromptInputActionMenuContent,
  PromptInputActionAddAttachments,
  PromptInputButton,
} from '@/components/ai-elements/prompt-input'
import {
  ModelSelector,
  ModelSelectorContent,
  ModelSelectorEmpty,
  ModelSelectorGroup,
  ModelSelectorInput,
  ModelSelectorItem,
  ModelSelectorList,
  ModelSelectorLogo,
  ModelSelectorName,
  ModelSelectorTrigger,
} from '@/components/ai-elements/model-selector'
import { MessageSquareIcon, BotIcon, CopyIcon, RefreshCcwIcon, CheckIcon, WrenchIcon } from 'lucide-react'
import { cn } from '@/lib/utils'
import { useChat } from '@ai-sdk/react'
import { DefaultChatTransport } from 'ai'
import { useState, useEffect } from 'react'
import { AGENT_TYPES, AVAILABLE_MODELS, getAgentTypeById, getModelById } from './agents-config'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/components/ui/command'
import { DialogDescription } from '@/components/ui/dialog'
import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
import { Reasoning, ReasoningContent, ReasoningTrigger } from '@/components/ai-elements/reasoning'
import { ScrollArea } from '@/components/ui/scroll-area'

export function DevAIChat() {
  // 智能体、模型和工具的状态管理
  const [selectedAgent, setSelectedAgent] = useState(AGENT_TYPES[0].id)
  const [selectedModel, setSelectedModel] = useState(AGENT_TYPES[0].defaultModel)
  const [selectedTools, setSelectedTools] = useState<string[]>(AGENT_TYPES[0].defaultTools)
  const [agentSelectorOpen, setAgentSelectorOpen] = useState(false)
  const [modelSelectorOpen, setModelSelectorOpen] = useState(false)
  const [toolSelectorOpen, setToolSelectorOpen] = useState(false)

  const { messages, status, sendMessage, regenerate } = useChat({
    transport: new DefaultChatTransport({
      api: '/api/dev/ai-chat',
    }),
  })

  // 获取当前选中的智能体配置
  const currentAgent = getAgentTypeById(selectedAgent)
  const currentModel = getModelById(selectedModel)

  // 当智能体切换时，自动选中默认的模型和工具
  useEffect(() => {
    const agent = getAgentTypeById(selectedAgent)
    if (agent) {
      setSelectedModel(agent.defaultModel)
      setSelectedTools(agent.defaultTools)
    }
  }, [selectedAgent])

  // 切换工具选择
  const toggleTool = (toolId: string) => {
    setSelectedTools(prev =>
      prev.includes(toolId)
        ? prev.filter(id => id !== toolId)
        : [...prev, toolId]
    )
  }

  // 复制文本到剪贴板
  const handleCopy = (text: string) => {
    const success = copy(text)
    if (success) {
      toast.success('已复制到剪贴板')
    } else {
      toast.error('复制失败')
    }
  }

  // 重新生成回复
  const handleRegenerate = () => {
    regenerate({
      body: {
        agent: selectedAgent,
        model: selectedModel,
        tools: selectedTools,
      },
    })
  }

  return (
    <div className="flex h-[98%] flex-col">
      {/* 消息列表区域 - 占据剩余空间 */}
      <ScrollArea className="h-full" >
        <Conversation className="flex-1 min-h-0">
          <ConversationContent>
            {messages.length === 0 ? (
              <ConversationEmptyState
                title="开始对话"
                description="与AI助手对话完成各种开发任务"
                icon={<MessageSquareIcon className="size-8" />}
              />
            ) : (
              messages.map((message, messageIndex) => {
                const isLastMessage = messageIndex === messages.length - 1
                const isAssistant = message.role === 'assistant'
                const messageText = message.parts
                  .filter(part => part.type === 'text')
                  .map(part => part.type === 'text' ? part.text : '')
                  .join('')

                return (
                  <div key={message.id} className="group">
                    <Message from={message.role}>
                      <MessageContent className='select-text'>
                        {/* 先渲染附件 */}
                        {message.parts.some(part => part.type === 'file') && (
                          <MessageAttachments>
                            {message.parts
                              .filter(part => part.type === 'file')
                              .map((part, i) => (
                                <MessageAttachment
                                  key={`${message.id}-file-${i}`}
                                  data={part}
                                />
                              ))}
                          </MessageAttachments>
                        )}
                        
                        {/* 然后渲染其他内容 */}
                        {message.parts.map((part, i) => {
                          switch (part.type) {
                            case 'text':
                              return (
                                <MessageResponse key={`${message.id}-${i}`}>
                                  {part.text}
                                </MessageResponse>
                              );
                            case 'reasoning':
                              return (
                                <Reasoning
                                  key={`${message.id}-${i}`}
                                  className="w-full"
                                  isStreaming={status === 'streaming' && i === message.parts.length - 1 && message.id === messages.at(-1)?.id}
                                >
                                  <ReasoningTrigger />
                                  <ReasoningContent>{part.text}</ReasoningContent>
                                </Reasoning>
                              );
                            case 'file':
                              // 文件已经在上面单独渲染了
                              return null;
                            default:
                              return null;
                          }
                        })}
                      </MessageContent>
                    </Message>
                    
                    {/* 操作按钮 - 悬停时显示 */}
                    <Actions className={cn(
                      "mt-2 opacity-0 group-hover:opacity-100 transition-opacity",
                      message.role === 'user' ? 'mr-1 justify-end' : 'ml-1'
                    )}>
                      {/* 复制按钮 - 所有消息都有 */}
                      <Action
                        tooltip="复制"
                        label="复制"
                        onClick={() => handleCopy(messageText)}
                      >
                        <CopyIcon className="size-4" />
                      </Action>

                      {/* 重新生成按钮 - 仅最后一条AI消息显示 */}
                      {isAssistant && isLastMessage && (
                        <Action
                          tooltip="重新生成"
                          label="重新生成"
                          onClick={handleRegenerate}
                          disabled={status === 'streaming'}
                        >
                          <RefreshCcwIcon className="size-4" />
                        </Action>
                      )}
                    </Actions>
                  </div>
                )
              })
            )}
          </ConversationContent>
          <ConversationScrollButton />
        </Conversation>
      </ScrollArea>

      {/* 输入框区域 - 固定在底部 */}
      <div className="border-t bg-background">
        <PromptInput
          accept="image/*"
          multiple
          maxFiles={5}
          maxFileSize={50 * 1024 * 1024} // 50MB
          onError={(error) => {
            if ('message' in error) {
              console.error('文件上传错误:', error.message)
              
              // 根据错误类型显示不同的提示
              switch (error.code) {
                case 'max_file_size':
                  toast.error('文件过大', {
                    description: '单个文件大小不能超过 10MB，请压缩后重试'
                  })
                  break
                case 'max_files':
                  toast.error('文件数量超限', {
                    description: '最多只能上传 5 个文件'
                  })
                  break
                case 'accept':
                  toast.error('文件类型不支持', {
                    description: '仅支持图片文件'
                  })
                  break
                default:
                  toast.error('文件上传失败', {
                    description: error.message
                  })
              }
            }
          }}
          onSubmit={async (message) => {
            sendMessage(
              {
                text: message.text || '',
                files: message.files,
              },
              {
                body: {
                  agent: selectedAgent,
                  model: selectedModel,
                  tools: selectedTools,
                },
              }
            )
          }}
          className="max-h-[50vh]"
        >
          {/* 附件预览区域 */}
          <PromptInputAttachments>
            {(attachment) => <PromptInputAttachment data={attachment} />}
          </PromptInputAttachments>

          {/* 文本输入框 */}
          <PromptInputTextarea 
            placeholder="输入消息或上传图片..." 
            className="min-h-[60px] max-h-[40vh] resize-none"
          />

          {/* 工具栏 */}
          <PromptInputToolbar>
            <PromptInputTools className='flex-wrap'>
              {/* 智能体选择器 */}
              <Popover open={agentSelectorOpen} onOpenChange={setAgentSelectorOpen}>
                <PopoverTrigger asChild>
                  <PromptInputButton>
                    <BotIcon className="size-4 text-muted-foreground" />
                    <span>{currentAgent?.name}</span>
                  </PromptInputButton>
                </PopoverTrigger>
                <PopoverContent className="w-[300px] p-0" align="start">
                  <Command>
                    <CommandList>
                      <CommandEmpty>未找到智能体</CommandEmpty>
                      <CommandGroup>
                        {AGENT_TYPES.map((agent) => (
                          <CommandItem
                            key={agent.id}
                            value={agent.id}
                            onSelect={() => {
                              setSelectedAgent(agent.id)
                              setAgentSelectorOpen(false)
                            }}
                          >
                            <div className="flex flex-1 flex-col">
                              <span className="font-medium text-sm">{agent.name}</span>
                              <span className="text-muted-foreground text-xs">{agent.description}</span>
                            </div>
                            {selectedAgent === agent.id && (
                              <CheckIcon className="ml-2 size-4" />
                            )}
                          </CommandItem>
                        ))}
                      </CommandGroup>
                    </CommandList>
                  </Command>
                </PopoverContent>
              </Popover>

              {/* 模型选择器 */}
              <ModelSelector open={modelSelectorOpen} onOpenChange={setModelSelectorOpen}>
                <ModelSelectorTrigger asChild>
                  <PromptInputButton>
                    <ModelSelectorLogo provider={currentModel?.logo || 'unknown'} />
                    <ModelSelectorName>{currentModel?.name}</ModelSelectorName>
                  </PromptInputButton>
                </ModelSelectorTrigger>
                <ModelSelectorContent title="选择模型">
                  <VisuallyHidden><DialogDescription>选择模型</DialogDescription></VisuallyHidden>
                  <ModelSelectorInput placeholder="搜索模型..." />
                  <ModelSelectorList>
                    <ModelSelectorEmpty>未找到模型</ModelSelectorEmpty>
                    <ModelSelectorGroup>
                      {AVAILABLE_MODELS.map((model) => (
                        <ModelSelectorItem
                          key={model.id}
                          value={model.id}
                          onSelect={() => {
                            setSelectedModel(model.id)
                            setModelSelectorOpen(false)
                          }}
                        >
                          <ModelSelectorLogo provider={model.logo} />
                          <ModelSelectorName>{model.name}</ModelSelectorName>
                          {selectedModel === model.id && (
                            <CheckIcon className="ml-auto size-4" />
                          )}
                        </ModelSelectorItem>
                      ))}
                    </ModelSelectorGroup>
                  </ModelSelectorList>
                </ModelSelectorContent>
              </ModelSelector>

              {/* 工具选择器 */}
              {currentAgent && currentAgent.availableTools.length > 0 && (
                <Popover open={toolSelectorOpen} onOpenChange={setToolSelectorOpen}>
                  <PopoverTrigger asChild>
                    <PromptInputButton>
                      <WrenchIcon className="size-3 text-muted-foreground" />
                      <span>{selectedTools.length} 个工具</span>
                    </PromptInputButton>
                  </PopoverTrigger>
                  <PopoverContent className="w-[350px] p-0" align="start">
                    <Command>
                      <CommandList>
                        <CommandEmpty>未找到工具</CommandEmpty>
                        <CommandGroup heading="可用工具">
                          {currentAgent.availableTools.map((tool) => (
                            <CommandItem
                              key={tool.id}
                              value={tool.id}
                              onSelect={() => toggleTool(tool.id)}
                            >
                              <div className="flex flex-1 flex-col">
                                <span className="font-medium text-sm">{tool.name}</span>
                                <span className="text-muted-foreground text-xs">{tool.description}</span>
                              </div>
                              {selectedTools.includes(tool.id) && (
                                <CheckIcon className="ml-2 size-4 text-primary" />
                              )}
                            </CommandItem>
                          ))}
                        </CommandGroup>
                      </CommandList>
                    </Command>
                  </PopoverContent>
                </Popover>
              )}
            </PromptInputTools>

            {/* 右侧按钮组 */}
            <div className="flex items-center gap-2">
              {/* 附件上传菜单 */}
              <PromptInputActionMenu>
                <PromptInputActionMenuTrigger />
                <PromptInputActionMenuContent>
                  <PromptInputActionAddAttachments label="添加图片" />
                </PromptInputActionMenuContent>
              </PromptInputActionMenu>

              {/* 发送按钮 */}
              <PromptInputSubmit status={status} />
            </div>
          </PromptInputToolbar>
        </PromptInput>
      </div>
    </div>
  )
}