import { useCallback, useEffect, useMemo, useRef } from 'react'
import { Zap, Cpu, MessageSquare, ArrowLeft, Bot, Clock } from 'lucide-react'
import { ChatContainer } from './components/Chat/ChatContainer'
import { TopicList } from './components/Sidebar/TopicList'
import { SessionInfo } from './components/Sidebar/SessionInfo'
import { SchedulerJobList } from './components/Sidebar/SchedulerJobList'
import { ToolPanel } from './components/Panel/ToolPanel'
import { ConnectionStatus } from './components/ConnectionStatus'
import { useWebSocket } from './hooks/useWebSocket'
import { useChat } from './hooks/useChat'
import type { ChatMessage, Command, Attachment, SchedulerJobSessionLookup } from './types/protocol'

const WS_URL = 'ws://127.0.0.1:19876/ws'

function App() {
  const lastAutoSwitchedTopicRef = useRef<string | null>(null)

  const {
    // 连接状态
    connectionId,
    isConnected,
    // Session 状态
    session,
    sessionId,
    chatId,
    // Topic 状态
    topics,
    selectedTopic,
    // 消息状态
    messages,
    isLoading,
    isReadOnly,
    // 子智能体视图
    subAgentView,
    // 定时任务
    schedulerJobs,
    sidebarTab,
    setSidebarTab,
    requestSchedulerJobList,
    schedulerView,
    enterSchedulerJobView,
    exitSchedulerJobView,
    // 方法
    handleMessage,
    handleCommand,
    handleServerMessage,
    selectTopic,
    createTopic,
    switchTopic,
    requestSessionList,
    requestTopicList,
    enterSubAgentView,
    exitSubAgentView,
  } = useChat()

  const { status, sendMessage } = useWebSocket({
    url: WS_URL,
    onMessage: handleServerMessage,
  })

  // 连接建立后自动加载 Session
  useEffect(() => {
    if (isConnected && status === 'connected') {
      // 1. 请求 Session 列表（会自动选择第一个）
      const sessionCmd = requestSessionList()
      handleCommand(sessionCmd)
      sendMessage({ type: 'command', payload: JSON.stringify(sessionCmd) })
    }
  }, [isConnected, status, handleCommand, sendMessage, requestSessionList])

  // Session 加载后自动加载 Topics
  useEffect(() => {
    if (sessionId && status === 'connected') {
      const topicCmd = requestTopicList()
      if (topicCmd) {
        handleCommand(topicCmd)
        sendMessage({ type: 'command', payload: JSON.stringify(topicCmd) })
      }
    }
  }, [sessionId, status, handleCommand, sendMessage, requestTopicList])

  // Topics 加载后，自动选择第一个并通知后端切换，以便加载历史消息
  useEffect(() => {
    if (topics.length === 0 || status !== 'connected') {
      return
    }

    const firstTopic = topics[0]
    if (lastAutoSwitchedTopicRef.current === firstTopic.id) {
      return
    }

    lastAutoSwitchedTopicRef.current = firstTopic.id
    selectTopic(firstTopic.id)
    const cmd = switchTopic(firstTopic.id)
    handleCommand(cmd)
    sendMessage({ type: 'command', payload: JSON.stringify(cmd) })
  }, [topics, status, selectTopic, switchTopic, handleCommand, sendMessage]);

  const handleSendMessage = useCallback(
    (content: string, attachments: Attachment[] = []) => {
      if (isReadOnly || !sessionId) {
        return
      }

      if (content.startsWith('/')) {
        const parts = content.slice(1).split(' ')
        const command = parts[0]
        const args = parts.slice(1)

        let cmd: Command
        switch (command) {
          case 'new':
            cmd = { type: 'create_session', title: args.join(' ') || undefined }
            break
          case 'list':
            cmd = { type: 'list_sessions', include_archived: args[0] === 'all' }
            break
          case 'use':
            if (args[0]) {
              cmd = { type: 'switch_topic', topic_id: args[0] }
            } else {
              alert('Usage: /use <topic_id>')
              return
            }
            break
          case 'save':
            cmd = { type: 'save_topic', filepath: args[0] || undefined, include_subagents: false }
            break
          default:
            alert(`Unknown command: /${command}`)
            return
        }

        handleCommand(cmd)
        sendMessage({ type: 'command', payload: JSON.stringify(cmd) })
      } else {
        handleMessage(content, attachments)
        sendMessage({
          type: 'message',
          content,
          attachments,
          chat_id: chatId,
        })
      }
    },
    [sendMessage, handleMessage, handleCommand, sessionId, chatId, isReadOnly]
  )

  const handleCreateTopic = useCallback(() => {
    if (isReadOnly || !sessionId) {
      return
    }

    const cmd = createTopic()
    handleCommand(cmd)
    sendMessage({ type: 'command', payload: JSON.stringify(cmd) })
  }, [sendMessage, handleCommand, createTopic, sessionId, isReadOnly])

  const handleSwitchTopic = useCallback(
    (topicId: string) => {
      selectTopic(topicId)
      const cmd = switchTopic(topicId)
      handleCommand(cmd)
      sendMessage({ type: 'command', payload: JSON.stringify(cmd) })
    },
    [sendMessage, handleCommand, switchTopic, selectTopic]
  )

  const handleNavigateToSubAgent = useCallback(
    (taskId: string, description: string) => {
      const cmd = enterSubAgentView(taskId, description)
      handleCommand(cmd)
      sendMessage({ type: 'command', payload: JSON.stringify(cmd) })
    },
    [enterSubAgentView, handleCommand, sendMessage]
  )

  const handleExitSubAgentView = useCallback(() => {
    exitSubAgentView()
  }, [exitSubAgentView])

  // 切换到定时任务 tab 时自动获取列表
  useEffect(() => {
    if (sidebarTab === 'scheduler' && status === 'connected') {
      const cmd = requestSchedulerJobList()
      handleCommand(cmd)
      sendMessage({ type: 'command', payload: JSON.stringify(cmd) })
    }
  }, [sidebarTab, status, handleCommand, sendMessage, requestSchedulerJobList])

  const handleRefreshSchedulerJobs = useCallback(() => {
    const cmd = requestSchedulerJobList()
    handleCommand(cmd)
    sendMessage({ type: 'command', payload: JSON.stringify(cmd) })
  }, [handleCommand, sendMessage, requestSchedulerJobList])

  const handleViewSchedulerJob = useCallback(
    (lookup: SchedulerJobSessionLookup, jobId: string, description: string) => {
      const cmd = enterSchedulerJobView(lookup, jobId, description)
      handleCommand(cmd)
      sendMessage({ type: 'command', payload: JSON.stringify(cmd) })
    },
    [enterSchedulerJobView, handleCommand, sendMessage]
  )

  const handleExitSchedulerJobView = useCallback(() => {
    exitSchedulerJobView()
  }, [exitSchedulerJobView])

  const chatMessages = useMemo(() => {
    const result: ChatMessage[] = []
    const toolCallIndex = new Map<string, number>()

    for (const msg of messages) {
      if (msg.type === 'tool_call') {
        toolCallIndex.set(msg.toolCallId || msg.id, result.length)
        result.push({
          ...msg,
          type: 'merged_tool',
          status: 'calling',
          callContent: msg.content,
          resultContent: '',
        })
      } else if (msg.type === 'tool_result') {
        const idx = toolCallIndex.get(msg.toolCallId || msg.id)
        if (idx !== undefined) {
          result[idx] = {
            ...result[idx],
            status: 'result',
            resultContent: msg.content,
            durationMs: msg.durationMs,
          }
        }
      } else if (msg.type === 'tool_pending') {
        const idx = toolCallIndex.get(msg.toolCallId || msg.id)
        if (idx !== undefined) {
          result[idx] = {
            ...result[idx],
            status: 'pending',
            resultContent: msg.content,
          }
        }
      } else {
        result.push(msg)
      }
    }

    return result
  }, [messages])
  const toolMessages = messages

  return (
    <div className="flex h-screen flex-col bg-[#0a0a0f] text-white overflow-hidden">
      {/* Header */}
      <header className="flex items-center justify-between border-b border-white/8 bg-[#12121a]/80 backdrop-blur-md px-6 py-4">
        <div className="flex items-center gap-4">
          <div className="flex items-center gap-2">
            <Zap className="h-6 w-6 text-[#00f0ff]" />
            <h1 className="text-xl font-bold tracking-tight">
              <span className="text-white">Pico</span>
              <span className="text-[#00f0ff] glow-text">Bot</span>
            </h1>
          </div>
          <div className="h-4 w-px bg-white/20" />
          <ConnectionStatus status={status} />
        </div>
        <div className="flex items-center gap-4 text-sm text-zinc-400">
          <div className="flex items-center gap-2">
            <Cpu className="h-4 w-4 text-[#00f0ff]" />
            <span>AI Ready</span>
          </div>
          {session && (
            <div className="flex items-center gap-2">
              <MessageSquare className="h-4 w-4 text-emerald-400" />
              <span className="font-mono text-xs">
                {session.title}
              </span>
            </div>
          )}
        </div>
      </header>

      {/* Main Content */}
      <div className="flex flex-1 overflow-hidden">
        {/* Left Sidebar */}
        <div className={`w-72 shrink-0 border-r border-white/8 bg-[#12121a]/50 flex flex-col ${subAgentView || schedulerView ? 'opacity-50 pointer-events-none' : ''}`}>
          <SessionInfo
            session={session}
            connectionId={connectionId}
          />
          <div className="border-b border-white/8" />

          {/* Tab 栏 */}
          <div className="flex border-b border-white/8">
            <button
              onClick={() => setSidebarTab('topics')}
              className={`flex-1 py-2.5 text-sm font-medium text-center transition-colors ${
                sidebarTab === 'topics'
                  ? 'text-[#00f0ff] border-b-2 border-[#00f0ff]'
                  : 'text-zinc-500 hover:text-zinc-300'
              }`}
            >
              话题
            </button>
            <button
              onClick={() => setSidebarTab('scheduler')}
              className={`flex-1 py-2.5 text-sm font-medium text-center transition-colors ${
                sidebarTab === 'scheduler'
                  ? 'text-[#00f0ff] border-b-2 border-[#00f0ff]'
                  : 'text-zinc-500 hover:text-zinc-300'
              }`}
            >
              定时任务
            </button>
          </div>

          <div className="flex-1 overflow-hidden">
            {sidebarTab === 'topics' ? (
              <TopicList
                sessionId={sessionId}
                sessionTitle={session?.title ?? ''}
                topics={topics}
                currentTopicId={selectedTopic}
                isReadOnly={isReadOnly}
                onCreateTopic={handleCreateTopic}
                onSwitchTopic={handleSwitchTopic}
              />
            ) : (
              <SchedulerJobList
                jobs={schedulerJobs}
                onRefresh={handleRefreshSchedulerJobs}
                onViewJob={handleViewSchedulerJob}
                sessionId={sessionId}
              />
            )}
          </div>
        </div>

        {/* Center - Chat */}
        <div className="flex-1 min-w-0 bg-[#0a0a0f] flex flex-col">
          {/* Scheduler job view back bar */}
          {schedulerView && (
            <div className="shrink-0 border-b border-white/8 bg-[#12121a]/80 px-4 py-2 flex items-center gap-4">
              <button
                onClick={handleExitSchedulerJobView}
                className="flex items-center gap-1.5 text-sm text-[#00f0ff] hover:text-[#00f0ff]/80 transition-colors"
              >
                <ArrowLeft className="h-4 w-4" />
                <span>返回定时任务列表</span>
              </button>
              <div className="h-4 w-px bg-white/20" />
              <div className="flex items-center gap-1.5 text-sm text-zinc-300">
                <Clock className="h-4 w-4 text-amber-400" />
                <span className="text-zinc-500">定时任务:</span>
                <span className="text-white font-medium font-mono text-xs truncate max-w-[250px]">{schedulerView.description}</span>
              </div>
              <div className="h-4 w-px bg-white/20" />
              <div className="flex items-center gap-1.5 text-sm">
                <span className="text-zinc-500">通道:</span>
                <span className="text-zinc-300">{schedulerView.channel}</span>
              </div>
            </div>
          )}
          {/* Sub-agent back bar */}
          {subAgentView && (
            <div className="shrink-0 border-b border-white/8 bg-[#12121a]/80 px-4 py-2 flex items-center gap-4">
              <button
                onClick={handleExitSubAgentView}
                className="flex items-center gap-1.5 text-sm text-[#00f0ff] hover:text-[#00f0ff]/80 transition-colors"
              >
                <ArrowLeft className="h-4 w-4" />
                <span>返回主会话</span>
              </button>
              <div className="h-4 w-px bg-white/20" />
              <div className="flex items-center gap-1.5 text-sm text-zinc-300">
                <Bot className="h-4 w-4 text-violet-400" />
                <span className="text-zinc-500">子智能体:</span>
                <span className="text-white font-medium">{subAgentView.description}</span>
              </div>
              <div className="h-4 w-px bg-white/20" />
              <div className="flex items-center gap-1.5 text-sm">
                <span className="text-zinc-500">类型:</span>
                <span className="text-zinc-300">{subAgentView.subagentType || '...'}</span>
              </div>
              <div className="h-4 w-px bg-white/20" />
              <div className="flex items-center gap-1.5 text-sm">
                <span className="text-zinc-500">状态:</span>
                <span className={`font-medium ${
                  subAgentView.status === 'completed' ? 'text-emerald-400' :
                  subAgentView.status === 'failed' ? 'text-red-400' :
                  subAgentView.status === 'timeout' ? 'text-amber-400' :
                  subAgentView.status === 'running' ? 'text-amber-400' :
                  'text-zinc-400'
                }`}>
                  {subAgentView.status === 'completed' ? '已完成' :
                   subAgentView.status === 'failed' ? '失败' :
                   subAgentView.status === 'timeout' ? '超时' :
                   subAgentView.status === 'running' ? '执行中' :
                   subAgentView.status === 'loading' ? '加载中...' :
                   subAgentView.status}
                </span>
              </div>
            </div>
          )}
          <div className="flex-1 min-h-0">
            <ChatContainer
              messages={chatMessages}
              isLoading={isLoading}
              isReadOnly={subAgentView || schedulerView ? true : isReadOnly}
              channelName={
                schedulerView ? `定时任务: ${schedulerView.description}` :
                subAgentView ? `子智能体: ${subAgentView.description}` :
                (session?.title ?? 'PicoBot')
              }
              onSendMessage={subAgentView || schedulerView ? () => {} : handleSendMessage}
              onNavigateToSubAgent={handleNavigateToSubAgent}
            />
          </div>
        </div>

        {/* Right Sidebar - Tool Panel */}
        <div className="w-80 shrink-0 border-l border-white/8 bg-[#12121a]/50">
          <ToolPanel messages={toolMessages} />
        </div>
      </div>
    </div>
  )
}

export default App