ai-portal/app/agents/[slug]/chat/page.tsx

'use client'

import { useState, useRef, useEffect } from 'react'
import { useParams, useRouter } from 'next/navigation'
import Link from 'next/link'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

interface Message {
  id: string
  role: 'user' | 'assistant'
  content: string
  timestamp: Date
}

interface Conversation {
  id: number
  title: string
  updatedAt: string
  messages: Message[]
}

interface Agent {
  id: string
  name: string
  slug: string
  icon: string | null
  category: {
    name: string
  } | null
  hotQuestions: string
  quickQuestions: string
}

export default function AgentChatPage() {
  const params = useParams()
  const router = useRouter()
  const slug = params.slug as string

  const [agent, setAgent] = useState<Agent | null>(null)
  const [loading, setLoading] = useState(true)

  const [messages, setMessages] = useState<Message[]>([])
  const [input, setInput] = useState('')
  const [sending, setSending] = useState(false)

  const [conversations, setConversations] = useState<Conversation[]>([])
  const [currentConversationId, setCurrentConversationId] = useState<number | null>(null)
  const [upstreamConversationId, setUpstreamConversationId] = useState<string>('')
  const [loadingConversations, setLoadingConversations] = useState(false)
  const [abortController, setAbortController] = useState<AbortController | null>(null)

  const messagesEndRef = useRef<HTMLDivElement>(null)
  const userIdRef = useRef<string>('user-' + Math.random().toString(36).slice(2, 10))

  const CHAT_API_URL = '/api/chat'

  useEffect(() => {
    fetch(`/api/agents/${slug}`)
      .then(res => {
        if (!res.ok) throw new Error('Not found')
        return res.json()
      })
      .then(data => setAgent(data))
      .catch(() => router.push('/404'))
      .finally(() => setLoading(false))
  }, [slug, router])

  useEffect(() => {
    if (agent) {
      loadConversations()
    }
  }, [agent])

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
  }, [messages])

  const loadConversations = async () => {
    if (!agent) return
    setLoadingConversations(true)
    try {
      const res = await fetch(`/api/conversations?agentId=${agent.id}`)
      const data = await res.json()
      setConversations(data)
    } catch (error) {
      console.error('Failed to load conversations:', error)
    } finally {
      setLoadingConversations(false)
    }
  }

  const loadConversation = async (conversationId: number) => {
    try {
      const res = await fetch(`/api/conversations/${conversationId}`)
      const data = await res.json()
      setCurrentConversationId(conversationId)
      setMessages(data.messages.map((msg: any) => ({
        id: msg.id.toString(),
        role: msg.role as 'user' | 'assistant',
        content: msg.content,
        timestamp: new Date(msg.timestamp),
      })))
    } catch (error) {
      console.error('Failed to load conversation:', error)
    }
  }

  const createNewConversation = async () => {
    if (!agent) return
    try {
      const res = await fetch('/api/conversations', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          agentId: agent.id,
          title: '新对话',
        }),
      })
      const newConversation = await res.json()
      setConversations(prev => [newConversation, ...prev])
      setCurrentConversationId(newConversation.id)
      setMessages([])
    } catch (error) {
      console.error('Failed to create conversation:', error)
    }
  }

  const deleteConversation = async (conversationId: number, e: React.MouseEvent) => {
    e.stopPropagation()
    if (!confirm('确定要删除这个对话吗？')) return
    try {
      await fetch(`/api/conversations/${conversationId}`, {
        method: 'DELETE',
      })
      setConversations(prev => prev.filter(c => c.id !== conversationId))
      if (currentConversationId === conversationId) {
        setCurrentConversationId(null)
        setMessages([])
      }
    } catch (error) {
      console.error('Failed to delete conversation:', error)
    }
  }

  const sendMessage = async () => {
    if (!input.trim() || !agent) return

    let conversationId = currentConversationId

    if (!conversationId) {
      try {
        const res = await fetch('/api/conversations', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            agentId: agent.id,
            title: input.slice(0, 20) || '新对话',
          }),
        })
        const newConversation = await res.json()
        conversationId = newConversation.id
        setCurrentConversationId(conversationId)
        setConversations(prev => [newConversation, ...prev])
      } catch (error) {
        console.error('Failed to create conversation:', error)
        return
      }
    }

    const userMessage: Message = {
      id: Date.now().toString(),
      role: 'user',
      content: input,
      timestamp: new Date(),
    }

    const currentInput = input

    setMessages(prev => [...prev, userMessage])
    setInput('')
    setSending(true)

    try {
      await fetch(`/api/conversations/${conversationId}/messages`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          role: 'user',
          content: currentInput,
        }),
      })

      const assistantMessageId = (Date.now() + 1).toString()

      setMessages(prev => [...prev, {
        id: assistantMessageId,
        role: 'assistant',
        content: '',
        timestamp: new Date(),
      }])

      const controller = new AbortController()
      setAbortController(controller)

      const response = await fetch(CHAT_API_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          agentId: agent.id,
          inputs: {},
          query: currentInput,
          response_mode: 'streaming',
          conversation_id: upstreamConversationId,
          user: userIdRef.current,
        }),
        signal: controller.signal,
      })

      if (!response.ok) {
        throw new Error('Chat request failed')
      }

      const reader = response.body!.getReader()
      const decoder = new TextDecoder()
      let buffer = ''
      let accumulatedContent = ''
      let finalConvId = upstreamConversationId

      while (true) {
        const { done, value } = await reader.read()
        if (done) break

        buffer += decoder.decode(value, { stream: true })
        const lines = buffer.split('\n')
        buffer = lines.pop() || ''

        for (const line of lines) {
          if (line.startsWith('data: ')) {
            try {
              const data = JSON.parse(line.slice(6))
              if (data.event === 'message' && data.answer) {
                accumulatedContent += data.answer
                setMessages(prev => prev.map(msg =>
                  msg.id === assistantMessageId
                    ? { ...msg, content: accumulatedContent }
                    : msg
                ))
              } else if (data.event === 'message_end') {
                finalConvId = data.conversation_id || finalConvId
              }
            } catch (e) {
              // skip invalid JSON
            }
          }
        }
      }

      setUpstreamConversationId(finalConvId)

      await fetch(`/api/conversations/${conversationId}/messages`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          role: 'assistant',
          content: accumulatedContent,
        }),
      })
    } catch (error) {
      const errorMessage: Message = {
        id: (Date.now() + 2).toString(),
        role: 'assistant',
        content: '抱歉，服务暂时不可用，请稍后再试。',
        timestamp: new Date(),
      }
      setMessages(prev => [...prev, errorMessage])
    } finally {
      setSending(false)
    }
  }

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

  const handleQuickQuestion = (question: string) => {
    setInput(question)
  }

  const hotQuestions = agent ? JSON.parse(agent.hotQuestions || '[]') : []
  const quickQuestions = agent ? JSON.parse(agent.quickQuestions || '[]') : []

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-gray-500">加载中...</div>
      </div>
    )
  }

  if (!agent) {
    return null
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* 导航栏 */}
      <nav className="bg-gradient-to-r from-blue-500 to-blue-600 text-white shadow-lg">
        <div className="max-w-screen-2xl mx-auto px-4 py-3">
          <div className="flex items-center justify-between">
            <Link href="/" className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
                <span className="text-white font-bold text-lg">AI</span>
              </div>
              <div>
                <h1 className="text-xl font-bold">冲浪智能体广场</h1>
                <p className="text-xs text-blue-100">24小时为您服务</p>
              </div>
            </Link>
            <div className="flex items-center gap-6">
              <Link href="/" className="text-white/80 hover:text-white transition">首页</Link>
              <Link href="/agents" className="text-white/80 hover:text-white transition">智能体广场</Link>
              <Link href="/news" className="text-white/80 hover:text-white transition">新闻动态</Link>
            </div>
          </div>
        </div>
      </nav>

      <main className="max-w-screen-2xl mx-auto px-6 py-6">
        <div className="flex gap-4 h-[calc(100vh-200px)]">
          {/* 左侧历史问答 */}
          <div className="w-1/6 bg-white rounded-2xl border border-gray-200 p-4 overflow-hidden flex flex-col">
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-2">
                <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center">
                  <i className="fas fa-history text-blue-600 text-sm"></i>
                </div>
                <h3 className="font-medium text-gray-900">历史问答</h3>
              </div>
              <button
                onClick={createNewConversation}
                className="text-blue-600 text-sm flex items-center gap-1 hover:text-blue-700 transition"
              >
                <i className="fas fa-plus-circle"></i>
                <span>新会话</span>
              </button>
            </div>
            <div className="flex-1 overflow-y-auto space-y-2">
              {loadingConversations ? (
                <div className="text-center text-gray-400 text-sm py-4">加载中...</div>
              ) : conversations.length === 0 ? (
                <div className="text-center text-gray-400 text-sm py-4">暂无对话历史</div>
              ) : (
                conversations.map((conv) => (
                  <div
                    key={conv.id}
                    onClick={() => loadConversation(conv.id)}
                    className={`p-3 rounded-lg cursor-pointer group relative ${
                      currentConversationId === conv.id
                        ? 'bg-blue-50 border border-blue-200'
                        : 'bg-white border border-gray-200 hover:bg-gray-50'
                    }`}
                  >
                    <p className="text-sm text-gray-900 font-medium truncate pr-6">{conv.title}</p>
                    <p className="text-xs text-gray-500 mt-1">
                      {new Date(conv.updatedAt).toLocaleString('zh-CN', {
                        month: 'numeric',
                        day: 'numeric',
                        hour: '2-digit',
                        minute: '2-digit',
                      })}
                    </p>
                    <button
                      onClick={(e) => deleteConversation(conv.id, e)}
                      className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity text-red-500 hover:text-red-700"
                      title="删除对话"
                    >
                      <i className="fas fa-trash-alt text-xs"></i>
                    </button>
                  </div>
                ))
              )}
            </div>
          </div>

          {/* 中间聊天区域 */}
          <div className="w-[60%] flex flex-col">
            <div className="flex flex-col h-full bg-white rounded-2xl shadow-lg overflow-hidden">
              {/* 聊天头部 */}
              <div className="bg-gradient-to-r from-blue-600 to-blue-700 text-white p-4 flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
                    <span className="text-white text-xl">{agent.icon || '🤖'}</span>
                  </div>
                  <div>
                    <h3 className="font-semibold">{agent.name}</h3>
                    <p className="text-xs text-blue-100">
                      {sending ? '正在回复...' : '24小时为您服务'}
                    </p>
                  </div>
                </div>
              </div>

              {/* 消息区域 */}
              <div className="flex-1 overflow-y-auto p-6 space-y-6 bg-gray-50">
                {messages.length === 0 && !sending && (
                  <div className="text-center text-gray-400 mt-8">
                    <i className="fas fa-comments text-4xl mb-4"></i>
                    <p>开始一个新的对话吧</p>
                  </div>
                )}
                {messages.map((message) => (
                  <div
                    key={message.id}
                    className={`flex gap-3 ${message.role === 'user' ? 'justify-end' : ''}`}
                  >
                    {message.role === 'assistant' && (
                      <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                        <i className="fas fa-robot text-blue-600"></i>
                      </div>
                    )}
                    <div className={`max-w-[80%]`}>
                      <div
                        className={`p-4 rounded-2xl shadow-sm ${
                          message.role === 'user'
                            ? 'bg-blue-600 text-white rounded-tr-none'
                            : 'bg-white border border-gray-200 rounded-tl-none'
                        }`}
                      >
                        {message.role === 'user' ? (
                          <p className="text-sm">{message.content}</p>
                        ) : (
                          <div className="text-sm prose prose-sm max-w-none">
                            <ReactMarkdown remarkPlugins={[remarkGfm]}>{message.content}</ReactMarkdown>
                          </div>
                        )}
                      </div>
                      <p className={`text-xs mt-1 ${message.role === 'user' ? 'text-right text-blue-400' : 'text-gray-400'}`}>
                        {message.timestamp.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}
                      </p>
                    </div>
                    {message.role === 'user' && (
                      <div className="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center flex-shrink-0">
                        <i className="fas fa-user text-gray-600"></i>
                      </div>
                    )}
                  </div>
                ))}
                {sending && (
                  <div className="flex gap-3">
                    <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
                      <i className="fas fa-robot text-blue-600"></i>
                    </div>
                    <div className="bg-white border border-gray-200 p-4 rounded-2xl rounded-tl-none shadow-sm">
                      <div className="flex gap-1">
                        <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" />
                        <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }} />
                        <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }} />
                      </div>
                    </div>
                  </div>
                )}
                <div ref={messagesEndRef} />
              </div>

              {/* 输入区域 */}
              <div className="border-t border-gray-200 p-4 bg-white">
                <div className="flex items-center gap-2">
                  <input
                    type="text"
                    value={input}
                    onChange={(e) => setInput(e.target.value)}
                    onKeyDown={handleKeyPress}
                    placeholder="请输入您的问题，例如：养老政策、健康咨询..."
                    className="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    disabled={sending}
                  />
                  <button
                    className="bg-gray-100 hover:bg-gray-200 px-3 py-2 border-t border-r border-b border-gray-300 transition"
                    disabled={sending}
                    title="语音输入"
                  >
                    <i className="fas fa-microphone text-gray-500"></i>
                  </button>
                  <button
                    className="bg-gray-100 hover:bg-gray-200 px-3 py-2 border-t border-r border-b border-gray-300 transition"
                    disabled={sending}
                    title="附件上传"
                  >
                    <i className="fas fa-paperclip text-gray-500"></i>
                  </button>
                  <button
                    onClick={sendMessage}
                    disabled={sending || !input.trim()}
                    className="bg-blue-600 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700 transition disabled:bg-blue-400 disabled:cursor-not-allowed"
                  >
                    <i className="fas fa-paper-plane"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>

          {/* 右侧服务区域 */}
          <div className="w-[23%] bg-white rounded-2xl border border-gray-200 p-4 overflow-y-auto">
            {/* 自助服务 */}
            <div className="bg-gray-50 rounded-lg p-4 mb-4">
              <h3 className="font-medium text-gray-900 mb-3 flex items-center gap-2">
                <i className="fas fa-cog text-blue-600"></i>
                自助服务
              </h3>
              <div className="grid grid-cols-3 gap-3">
                <div className="text-center p-3 border border-gray-200 rounded-lg hover:bg-blue-50 transition cursor-pointer">
                  <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-2">
                    <i className="fas fa-comments text-blue-600 text-xl"></i>
                  </div>
                  <p className="text-sm text-gray-700">留言板</p>
                </div>
                <div className="text-center p-3 border border-gray-200 rounded-lg hover:bg-blue-50 transition cursor-pointer">
                  <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-2">
                    <i className="fas fa-phone-alt text-blue-600 text-xl"></i>
                  </div>
                  <p className="text-sm text-gray-700">官方电话</p>
                </div>
                <div className="text-center p-3 border border-gray-200 rounded-lg hover:bg-blue-50 transition cursor-pointer">
                  <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-2">
                    <i className="fas fa-file-alt text-blue-600 text-xl"></i>
                  </div>
                  <p className="text-sm text-gray-700">政策资讯</p>
                </div>
              </div>
            </div>

            {/* 热点问题 */}
            <div className="bg-gray-50 rounded-lg p-4 mb-4">
              <div className="flex justify-between items-center mb-3">
                <h3 className="font-medium text-gray-900 flex items-center gap-2">
                  <i className="fas fa-fire text-red-500"></i>
                  热点问题
                </h3>
                <a href="#" className="text-xs text-blue-600 hover:text-blue-700 transition">
                  更多 <i className="fas fa-angle-right"></i>
                </a>
              </div>
              <ul className="space-y-2">
                {hotQuestions.map((question: string, index: number) => (
                  <li key={index}>
                    <button
                      onClick={() => handleQuickQuestion(question)}
                      className="text-sm text-gray-700 hover:text-blue-600 transition block py-1 text-left w-full"
                    >
                      • {question}
                    </button>
                  </li>
                ))}
              </ul>
            </div>

{/* 快捷提问 */}
<div className="bg-gray-50 rounded-lg p-4">
  <h3 className="font-medium text-gray-900 mb-3 flex items-center gap-2">
    <i className="fas fa-question-circle text-blue-600"></i>
    快捷提问
  </h3>
  <ul className="space-y-2">
    {quickQuestions.map((question: string, index: number) => (
      <li key={index}>
        <button
          onClick={() => handleQuickQuestion(question)}
          className="text-sm text-gray-700 hover:text-blue-600 transition block py-1 text-left"
        >
          • {question}
        </button>
      </li>
    ))}
  </ul>
</div>
          </div>
        </div>
      </main>
    </div>
  )
}