import React, { useEffect, useRef, useState } from 'react'
import { AnimatePresence, motion } from 'framer-motion'
import { Button, Tooltip } from '@heroui/react'
import { useLocalStorageState, useToggle } from 'ahooks'
import { useLocation, useNavigate, useSearchParams } from 'react-router-dom'
import { LoginModal } from '../LoginModal'
import type { RootState } from '@/store'
import SendIcon from '@/assets/svg/send.svg?react'
import { type WithAuthProps, withAuth } from '@/auth/withAuth'
import { useAppDispatch, useAppSelector } from '@/store/hook'
import { clearCurrentToolId, setCurrentToolId } from '@/store/conversationSlice'
import { setIsAsking } from '@/store/chatSlice'
import { fetchToolList } from '@/api/home'
import { getUserRolesForApi, safeSessionStorageGetItem, safeSessionStorageRemoveItem, safeSessionStorageSetItem } from '@/lib/utils'
import { fetchSessionConversationId, fetchUserQaRecordPage } from '@/api/conversation'

interface ChatEditorProps {
  onChange?: (value: string) => void
  onFocus?: () => void
  onSubmit?: (value: string, toolId?: string) => void
  onToolClick?: (isToolBtn: boolean, toolId?: string, toolName?: string, shouldChangeStyle?: boolean, conversationId?: string, isLoading?: boolean) => void
  placeholders: string[]
  showContentTips?: boolean
  initialValue?: string
  hideTools?: boolean // 隐藏工具选择部分
}
// onToolClick
const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth, onChange, onFocus, onSubmit, onToolClick, placeholders, showContentTips = false, initialValue = '', hideTools = false }) => {
  // const dispatch = useAppDispatch()
  const [content, setContent] = useState(initialValue)
  const dispatch = useAppDispatch()
  const editorRef = useRef<HTMLDivElement>(null)
  const [currentPlaceholder, setCurrentPlaceholder] = useState(0)
  const intervalRef = useRef<NodeJS.Timeout | null>(null)
  const [isOpenLoginModal, isOpenLoginModalActions] = useToggle()
  const isAsking = useAppSelector((state: RootState) => state.chat.isAsking)
  const [toolList, setToolList] = useState<any[]>([])
  const [selectedToolId, setSelectedToolId] = useState<string | null>(null)
  const [_isToolBtnActive, setIsToolBtnActive] = useState<boolean>(true)
  const currentToolId = useAppSelector((state: RootState) => state.conversation.currentToolId)
  const [showToolQuestion, setShowToolQuestion] = useState<boolean>(false)
  const [sessionToolId, setSessionToolId] = useState<string | null>(null)
  const [searchParams, setSearchParams] = useSearchParams()
  const location = useLocation()
  const navigate = useNavigate()
  const toolIdFromUrl = searchParams.get('toolId')
  const fromCollect = location.state?.fromCollect

  /** 等待 token 就绪，确保登录接口返回后才继续 */
  const waitForToken = async (maxWaitTime = 3000): Promise<boolean> => {
    const startTime = Date.now()
    let initialToken = ''
    // 先获取初始 token 值
    try {
      const initialTokenStr = window.localStorage.getItem('__TOKEN__') || '""'
      initialToken = JSON.parse(initialTokenStr) || ''
    }
    catch {
      initialToken = ''
    }

    // 如果初始没有 token，等待 token 出现（从无到有，说明登录完成）
    if (!initialToken) {
      while (Date.now() - startTime < maxWaitTime) {
        const tokenStr = window.localStorage.getItem('__TOKEN__') || '""'
        let token = ''
        try {
          token = JSON.parse(tokenStr) || ''
        }
        catch {
          token = ''
        }
        if (token) {
          // token 从无到有，说明登录完成，再等待一小段时间确保写入完成
          await new Promise(resolve => setTimeout(resolve, 200))
          return true
        }
        // 等待 100ms 后再次检查
        await new Promise(resolve => setTimeout(resolve, 100))
      }
      return false
    }

    // 如果初始有 token，可能是旧 token 或新 token
    // 等待一小段时间，确保登录流程有足够时间完成（登录接口可能会更新 token）
    // 同时监听 token 变化
    let tokenChanged = false
    const checkTokenChange = () => {
      try {
        const currentTokenStr = window.localStorage.getItem('__TOKEN__') || '""'
        const currentToken = JSON.parse(currentTokenStr) || ''
        if (currentToken && currentToken !== initialToken) {
          tokenChanged = true
        }
      }
      catch {
        // 忽略解析错误
      }
    }

    // 监听 storage 事件（跨标签页）
    window.addEventListener('storage', checkTokenChange)
    // 轮询检查（同标签页）
    const interval = setInterval(checkTokenChange, 100)

    // 等待最多 1 秒，检测 token 是否变化
    const waitForChange = new Promise<void>((resolve) => {
      setTimeout(() => {
        window.removeEventListener('storage', checkTokenChange)
        clearInterval(interval)
        resolve()
      }, 1000)
    })
    await waitForChange

    // 如果 token 变化了，说明登录完成，再等待一小段时间确保写入完成
    if (tokenChanged) {
      await new Promise(resolve => setTimeout(resolve, 200))
      return true
    }

    // 如果 token 没有变化，可能是已经登录完成，但为了确保登录流程完成，再等待一小段时间
    await new Promise(resolve => setTimeout(resolve, 300))
    return true
  }

  // 获取工具列表
  const getToolList = async () => {
    try {
      console.log('[get_tool_list][ChatEditor] start', {
        pathname: location.pathname,
        search: location.search,
        hideTools,
      })
      const userRoles = getUserRolesForApi()
      const cacheKey = `toolList_${JSON.stringify(userRoles)}`
      const cached = safeSessionStorageGetItem(cacheKey)
      if (cached) {
        try {
          const { toolList: cachedToolList, timestamp } = JSON.parse(cached)
          if (Date.now() - Number(timestamp || 0) < 5 * 60 * 1000 && Array.isArray(cachedToolList) && cachedToolList.length > 0) {
            setToolList(cachedToolList)
            return
          }
        }
        catch {
          // 缓存解析失败则继续走接口
        }
      }
      // 等待 token 就绪后再调用接口
      await waitForToken()
      // 从路由中获取 userRoles 参数
      console.log('[get_tool_list][ChatEditor] request', { userRoles })

      // 调用真实 API 获取工具列表
      const res = await fetchToolList({ userRoles })
      console.log('[get_tool_list][ChatEditor] response', {
        success: Boolean(res),
        length: Array.isArray(res?.data) ? res.data.length : -1,
      })
      if (res?.data && Array.isArray(res.data) && res.data.length > 0) {
        setToolList(res.data)
        safeSessionStorageSetItem(cacheKey, JSON.stringify({ toolList: res.data, timestamp: Date.now() }))
        // 仅在“没有任何持久来源”时，才写入默认工具，避免覆盖已有的会话 toolId
        const storedToolId = safeSessionStorageGetItem('currentToolId')
        const hasAnyToolSource = Boolean(storedToolId || currentToolId || toolIdFromUrl)
        if (!hasAnyToolSource) {
          // 存入第0个工具信息到缓存
          const defaultTool = res.data[0]
          safeSessionStorageSetItem('currentToolId', defaultTool.toolId)
          safeSessionStorageSetItem('currentToolName', defaultTool.toolName)
        }
      }
    }
    catch (error) {
      console.error('获取工具列表失败:', error)
    }
  }

  // 根据 currentToolId 以及 sessionStorage 中的记录决定高亮逻辑
  useEffect(() => {
    console.log('[chat-toolid-log] ChatEditor currentToolId:', currentToolId, '| sessionToolId:', sessionToolId, '| fromCollect:', fromCollect)
    // 关键修复：首次进入/切换路由时，Redux 里的 toolId 可能先到，但 sessionToolId 还没同步。
    // 此时不应该“清空 Redux / 写空缓存”，而是用 Redux 回填 sessionStorage，避免出现“高亮有值但缓存为空”。
    if (currentToolId && !sessionToolId && !fromCollect) {
      setSelectedToolId(currentToolId)
      setIsToolBtnActive(false)
      // 用 Redux 回填缓存，确保后续接口/其他组件读取到一致的 toolId
      safeSessionStorageSetItem('currentToolId', String(currentToolId))
      if (toolList.length > 0) {
        const currentTool = toolList.find(tool => String(tool.toolId) === String(currentToolId))
        if (currentTool?.toolName) {
          safeSessionStorageSetItem('currentToolName', currentTool.toolName)
        }
      }
      setSessionToolId(String(currentToolId))
      return
    }

    if (!currentToolId && !sessionToolId && toolIdFromUrl) {
      const newSearchParams = new URLSearchParams(searchParams)
      newSearchParams.delete('toolId')
      setSearchParams(newSearchParams, { replace: true })
      setSelectedToolId(null)
      setIsToolBtnActive(true)
      // 默认高亮第0个工具：直接写入第0个工具的 toolId（与你的期望保持一致）
      if (toolList.length > 0) {
        const defaultTool = toolList[0]
        safeSessionStorageSetItem('currentToolId', String(defaultTool.toolId))
        safeSessionStorageSetItem('currentToolName', defaultTool.toolName)
        setSessionToolId(String(defaultTool.toolId))
        setSelectedToolId(String(defaultTool.toolId))
        setIsToolBtnActive(false)
      }
      return
    }

    // 只有当 sessionStorage 或 URL 中还能找到 toolId 时，才认为 Redux 中的 currentToolId 仍然有效
    const hasPersistentToolSource = Boolean(sessionToolId || toolIdFromUrl)

    if (currentToolId && hasPersistentToolSource) {
      setSelectedToolId(currentToolId)
      setIsToolBtnActive(false)
      // 存入当前选中工具信息到缓存
      if (toolList.length > 0) {
        const currentTool = toolList.find(tool => String(tool.toolId) === String(currentToolId))
        if (currentTool) {
          safeSessionStorageSetItem('currentToolId', currentTool.toolId)
          safeSessionStorageSetItem('currentToolName', currentTool.toolName)
        }
      }
      return
    }

    if (sessionToolId) {
      setSelectedToolId(sessionToolId)
      setIsToolBtnActive(false)
      return
    }

    // 如果 currentToolId 和 sessionToolId 都没有值，根据路由中的 toolId 来决定
    if (toolIdFromUrl) {
      setSelectedToolId(toolIdFromUrl)
      setIsToolBtnActive(false)
      // 存入当前选中工具信息到缓存
      if (toolList.length > 0) {
        const currentTool = toolList.find(tool => String(tool.toolId) === String(toolIdFromUrl))
        if (currentTool) {
          safeSessionStorageSetItem('currentToolId', currentTool.toolId)
          safeSessionStorageSetItem('currentToolName', currentTool.toolName)
        }
      }
    }
    else {
      setSelectedToolId(null)
      setIsToolBtnActive(true)
      // 默认高亮第0个工具：直接写入第0个工具的 toolId（与你的期望保持一致）
      if (toolList.length > 0) {
        const defaultTool = toolList[0]
        safeSessionStorageSetItem('currentToolId', String(defaultTool.toolId))
        safeSessionStorageSetItem('currentToolName', defaultTool.toolName)
        setSessionToolId(String(defaultTool.toolId))
        setSelectedToolId(String(defaultTool.toolId))
        setIsToolBtnActive(false)
      }
    }
  }, [currentToolId, sessionToolId, toolIdFromUrl, searchParams, setSearchParams, fromCollect, toolList])

  // 监听 sessionStorage 中的 currentToolId（历史点击时写入）来辅助高亮逻辑
  useEffect(() => {
    const syncSessionToolId = () => {
      const storedToolId = safeSessionStorageGetItem('currentToolId')
      // 如果 currentToolId 是空字符串，视为 null，确保制度活化能正确高亮
      setSessionToolId(storedToolId && storedToolId.trim() ? storedToolId : null)
      console.log('[chat-toolid-log] ChatEditor syncSessionToolId:', storedToolId && storedToolId.trim() ? storedToolId : null, '| line:242')
    }
    syncSessionToolId()
    window.addEventListener('storage', syncSessionToolId)

    // 监听强制重置为制度活化的事件（登录成功后触发）
    const handleForceReset = () => {
      // 强制同步 sessionStorage（此时应该已经被清除了）
      syncSessionToolId()
      // 确保 Redux 也被清除（如果还没有）
      if (currentToolId) {
        dispatch(clearCurrentToolId())
      }
      // 强制设置为制度活化
      setSelectedToolId(null)
      setIsToolBtnActive(true)
    }
    window.addEventListener('forceResetToGeneralMode', handleForceReset)

    return () => {
      window.removeEventListener('storage', syncSessionToolId)
      window.removeEventListener('forceResetToGeneralMode', handleForceReset)
    }
  }, [currentToolId, dispatch])

  // 当路由变化时，同步更新 sessionToolId（因为 storage 事件不会在同标签页触发）
  useEffect(() => {
    const storedToolId = safeSessionStorageGetItem('currentToolId')
    // 如果 currentToolId 是空字符串，视为 null，确保制度活化能正确高亮
    setSessionToolId(storedToolId && storedToolId.trim() ? storedToolId : null)
    console.log('[chat-toolid-log] ChatEditor location useEffect:', storedToolId && storedToolId.trim() ? storedToolId : null, '| line:272')
    // 当路由切换（如点击历史记录）时，同步最新的 sessionStorage，避免同标签页删除后状态不同步
  }, [toolIdFromUrl, location.pathname])

  const startAnimation = () => {
    intervalRef.current = setInterval(() => {
      setCurrentPlaceholder(prev => (prev + 1) % placeholders.length)
    }, 3000)
  }
  const handleVisibilityChange = () => {
    if (document.visibilityState !== 'visible' && intervalRef.current) {
      clearInterval(intervalRef.current) // Clear the interval when the tab is not visible
      intervalRef.current = null
    }
    else if (document.visibilityState === 'visible') {
      startAnimation() // Restart the interval when the tab becomes visible
    }
  }

  const handleInput = () => {
    if (editorRef.current) {
      const newContent = editorRef.current.textContent || ''
      setContent(newContent)
      onChange?.(newContent)
    }
  }

  const handleSubmit = () => {
    if (isAsking)
      return
    if (checkAuth()) {
      if (content.trim()) {
        // 提交时优先使用当前选中 toolId，其次使用缓存中的 currentToolId
        // 不在点击时/提交时使用第0个默认值兜底，避免覆盖用户真实选择
        const toolId = selectedToolId || safeSessionStorageGetItem('currentToolId') || undefined
        onSubmit?.(content.trim(), toolId)
        setContent('')
        if (editorRef.current) {
          editorRef.current.textContent = ''
        }
      }
    }
  }

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault()
      handleSubmit()
    }
    else if (e.key === 'Backspace' && !content) {
      e.preventDefault() // 防止删除最后一个字符后继续删除
    }
  }
  const handleCloseLoginModal = () => {
    isOpenLoginModalActions.setLeft()
  }
  const handlePaste = (event: React.ClipboardEvent<HTMLDivElement>) => {
    event.preventDefault()
    const text = event.clipboardData.getData('text/plain')
    document.execCommand('insertText', false, text)
  }

  // 处理默认工具按钮点击：先创建新会话
  const handleGeneralClick = async () => {
    if (!checkAuth())
      return
    // 获取默认工具信息
    const defaultTool = toolList.length > 0 ? toolList[0] : { toolId: '', toolName: '默认工具' }
    // 通知上层开始 loading
    onToolClick?.(true, String(defaultTool.toolId || ''), defaultTool.toolName, false, undefined, true)
    try {
      // 重置提交按钮状态
      dispatch(setIsAsking(false))
      // 你的期望：默认高亮第0个且写入缓存，因此这里不清空 toolId，而是把第0个当作“已选中”
      const defaultToolId = String(defaultTool.toolId || '')
      dispatch(setCurrentToolId(defaultToolId))
      // 立即更新本地状态，让 UI 立即响应
      setIsToolBtnActive(false)
      setSelectedToolId(defaultToolId)
      safeSessionStorageRemoveItem('showToolQuestion')
      // 存入默认高亮按钮信息到缓存
      if (toolList.length > 0) {
        safeSessionStorageSetItem('currentToolId', defaultToolId)
        safeSessionStorageSetItem('currentToolName', defaultTool.toolName)
        setSessionToolId(defaultToolId)
        console.log('[chat-toolid-log] ChatEditor defaultTool setSessionToolId:', defaultToolId, '| line:364')
      }
      setShowToolQuestion(false)
      // 先通知上层更新欢迎语（即便后续接口异常也能生效）
      onToolClick?.(true, defaultToolId, defaultTool.toolName, false)
      // 清空路由中的 toolId 参数
      if (toolIdFromUrl) {
        const newSearchParams = new URLSearchParams(searchParams)
        newSearchParams.delete('toolId')
        setSearchParams(newSearchParams, { replace: true })
      }

      // 先调用 fetchSessionConversationId 获取会话ID
      // 等待 token 就绪后再调用接口
      await waitForToken()
      const res = await fetchSessionConversationId({})
      if (res?.data?.conversationId) {
        const conversationId = res.data.conversationId
        // 获取到会话ID后，通知上层更新欢迎语并传递 conversationId
        onToolClick?.(true, defaultToolId, defaultTool.toolName, false, conversationId)
        // 在 navigate 之前设置标记，避免 Chat 组件的 useEffect 重复调用接口
        sessionStorage.setItem('toolHistoryLoading', conversationId)
        // 更新路由到新的会话ID
        navigate(`/chat/${conversationId}`, {
          replace: true,
          state: {
            toolId: defaultToolId,
            skipHistoryLoad: true, // 标记跳过历史记录加载，因为 ChatEditor 会处理
          },
        })
        // 使用获取到的会话ID调用历史会话
        await waitForToken()
        const qaRes = await fetchUserQaRecordPage(conversationId, defaultTool.toolId)
        console.log('qaRes chatEditor11111', qaRes)
        // 通过自定义事件将历史记录数据传递给父组件进行渲染
        window.dispatchEvent(new CustomEvent('toolHistoryLoaded', {
          detail: {
            conversationId,
            toolId: defaultToolId,
            toolName: defaultTool.toolName,
            qaRecords: qaRes?.data || [],
          },
        }))
        // 清除标记，避免影响后续路由切换
        sessionStorage.removeItem('toolHistoryLoading')
      }
    }
    catch (error) {
      console.error('获取会话ID或历史记录失败:', error)
      // 出错时也要清除标记
      sessionStorage.removeItem('toolHistoryLoading')
    }
    finally {
      // 通知上层结束 loading
      onToolClick?.(true, String(defaultTool.toolId || ''), defaultTool.toolName, false, undefined, false)
    }
  }

  // 处理工具按钮点击：先创建新会话，再切换工具
  const handleToolClick = async (tool: any) => {
    // 通知上层开始 loading
    onToolClick?.(false, tool.toolId, tool.toolName, true, undefined, true)
    try {
      // 重置提交按钮状态
      dispatch(setIsAsking(false))
      if (tool.toolName === '数据助手') {
        safeSessionStorageSetItem('showToolQuestion', 'true')
        setShowToolQuestion(true)
      }
      else {
        safeSessionStorageRemoveItem('showToolQuestion')
        setShowToolQuestion(false)
      }
      dispatch(setCurrentToolId(tool.toolId))
      setSelectedToolId(tool.toolId)
      setIsToolBtnActive(false)
      // 存入当前选中工具信息到缓存
      safeSessionStorageSetItem('currentToolId', tool.toolId)
      safeSessionStorageSetItem('currentToolName', tool.toolName)
      setSessionToolId(tool.toolId)
      console.log('[chat-toolid-log] ChatEditor tool click setSessionToolId:', tool.toolId, '| line:447')

      // 先调用 fetchSessionConversationId 获取会话ID
      // 等待 token 就绪后再调用接口
      await waitForToken()
      const res = await fetchSessionConversationId({})
      if (res?.data?.conversationId) {
        const conversationId = res.data.conversationId
        // 获取到会话ID后，通知上层更新欢迎语并传递 conversationId
        onToolClick?.(false, tool.toolId, tool.toolName, true, conversationId)
        // 在 navigate 之前设置标记，避免 Chat 组件的 useEffect 重复调用接口
        // 使用 sessionStorage 作为标记，因为 location.state 可能有时序问题
        sessionStorage.setItem('toolHistoryLoading', conversationId)
        // 更新路由到新的会话ID，并携带 toolId 参数
        navigate(`/chat/${conversationId}?toolId=${tool.toolId}`, {
          replace: true,
          state: {
            toolId: tool.toolId,
            skipHistoryLoad: true, // 标记跳过历史记录加载，因为 ChatEditor 会处理
          },
        })
        // 使用获取到的会话ID调用历史会话
        await waitForToken()
        const qaRes = await fetchUserQaRecordPage(conversationId, tool.toolId)
        console.log('qaRes chatEditor11111', qaRes)
        // 通过自定义事件将历史记录数据传递给父组件进行渲染
        window.dispatchEvent(new CustomEvent('toolHistoryLoaded', {
          detail: {
            conversationId,
            toolId: tool.toolId,
            toolName: tool.toolName,
            qaRecords: qaRes?.data || [],
          },
        }))
        // 提质增效模式下，延迟触发自动提问接口
        // 使用双重 requestAnimationFrame 确保 Chat 组件的 currentIdRef 已经更新
        if (String(tool.toolId) === '6712395743241') {
          console.log('[ChatEditor] 提质增效模式 - 准备延迟触发 autoSubmitQuestion', { conversationId, toolId: tool.toolId })
          requestAnimationFrame(() => {
            requestAnimationFrame(() => {
              console.log('[ChatEditor] 提质增效模式 - 触发 autoSubmitQuestion 事件', { conversationId, toolId: tool.toolId })
              window.dispatchEvent(new CustomEvent('autoSubmitQuestion', {
                detail: {
                  conversationId,
                  question: '',
                  toolId: tool.toolId,
                  recordType: 'B03',
                  busiType: '01',
                },
              }))
            })
          })
        }
        // 业务洞察模式：点击按钮后先开启主工作流（不展示用户问题）
        if (String(tool.toolId) === '6712395743242') {
          console.log('[ChatEditor] 业务洞察模式 - 准备触发 startBusinessInsight', { conversationId, toolId: tool.toolId })
          requestAnimationFrame(() => {
            requestAnimationFrame(() => {
              console.log('[ChatEditor] 业务洞察模式 - 触发 startBusinessInsight 事件', { conversationId, toolId: tool.toolId })
              window.dispatchEvent(new CustomEvent('startBusinessInsight', {
                detail: {
                  conversationId,
                  toolId: tool.toolId,
                },
              }))
            })
          })
        }
        // 清除标记，避免影响后续路由切换
        sessionStorage.removeItem('toolHistoryLoading')
      }
    }
    catch (error) {
      console.error('获取会话ID或历史记录失败:', error)
      // 出错时也要通知上层更新欢迎语（不传递 conversationId）
      onToolClick?.(false, tool.toolId, tool.toolName, true)
      // 出错时也要清除标记
      sessionStorage.removeItem('toolHistoryLoading')
    }
    finally {
      // 通知上层结束 loading
      onToolClick?.(false, tool.toolId, tool.toolName, true, undefined, false)
    }
  }

  useEffect(() => {
    startAnimation()
    document.addEventListener('visibilitychange', handleVisibilityChange)
    if (editorRef.current) {
      editorRef.current.style.height = 'auto'
      editorRef.current.style.height = `${editorRef.current.scrollHeight}px`
    }
    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current)
      }
      document.removeEventListener('visibilitychange', handleVisibilityChange)
    }
  }, [content])

  // 组件加载时和路由参数变化时获取工具列表
  useEffect(() => {
    if (!hideTools) {
      console.log('[get_tool_list][ChatEditor] useEffect trigger', {
        pathname: location.pathname,
        search: location.search,
        hideTools,
      })
      getToolList()
    }
  }, [location.pathname, location.search, hideTools])

  // 监听 sessionStorage 中的 showToolQuestion
  useEffect(() => {
    const checkShowToolQuestion = () => {
      const value = safeSessionStorageGetItem('showToolQuestion')
      setShowToolQuestion(value === 'true')
    }
    checkShowToolQuestion()
    // 监听 storage 事件以响应其他标签页的变化
    window.addEventListener('storage', checkShowToolQuestion)
    return () => {
      window.removeEventListener('storage', checkShowToolQuestion)
    }
  }, [])

  // 处理initialValue的变化
  useEffect(() => {
    if (initialValue && editorRef.current) {
      setContent(initialValue)
      editorRef.current.textContent = initialValue
      // 触发高度调整
      editorRef.current.style.height = 'auto'
      editorRef.current.style.height = `${editorRef.current.scrollHeight}px`
    }
  }, [initialValue])

  const [token] = useLocalStorageState<string | undefined>(
    '__TOKEN__',
    {
      defaultValue: '',
      listenStorageChange: true,
    },
  )

  return (
    <div
      className="flex items-end w-full h-auto relative mx-auto rounded-[24px] overflow-hidden transition duration-200 py-[8px] pl-[12px] pr-[12px] sm:py-[12px] sm:pl-[32px] sm:pr-[20px]"
      style={{
      background: '#FFFFFF',
      border: '1px solid #0a0a0a78',
      boxShadow: '0 8px 12px 0 rgba(235,235,235,0.30)',
      ...(!hideTools && toolList && toolList.length > 0 ? { height: '102px' } : {}),
    }}
    >
      <div
        ref={editorRef}
        contentEditable
        enterKeyHint="send"
        role="textbox"
        translate="no"
        className="w-full min-h-[40px] word-break-break-all max-h-[48px] p-2  rounded overflow-y-auto outline-none"
        onInput={handleInput}
        onFocus={onFocus}
        onKeyDown={handleKeyDown}
        onPaste={handlePaste}
        suppressContentEditableWarning
        data-placeholder={showToolQuestion ? '输入您想问的问题吧～' : '输入您想问的问题吧～'}
        style={{
          resize: 'none',
          maxHeight: '48px',
          wordBreak: 'break-all',
          ...(!hideTools && toolList && toolList.length > 0 ? { marginBottom: '40px' } : {}),
        }}
      >
      </div>
      <Tooltip isOpen={Boolean(token) && showContentTips && !isAsking && !content} color="foreground" content="请输入您的问题📖" placement="top-end">
        <Button className="ask-send" onPress={handleSubmit} radius="full" isDisabled={!content || isAsking} isIconOnly color="primary">
          <SendIcon />
        </Button>
      </Tooltip>
      <div className="absolute inset-0 flex items-center rounded-full pointer-events-none">
        <AnimatePresence mode="wait">
          {!content && (
            <motion.p
              initial={{
                y: 5,
                opacity: 0,
              }}
              key={`current-placeholder-${currentPlaceholder}`}
              animate={{
                y: 0,
                opacity: 1,
              }}
              exit={{
                y: -15,
                opacity: 0,
              }}
              transition={{
                duration: 0.3,
                ease: 'linear',
              }}
              className="dark:text-zinc-500 text-[14px] sm:text-[14px] font-normal text-[#3333334d] pl-4 sm:pl-12 text-left w-[calc(100%-2rem)] truncate"
            >
            </motion.p>
          )}
        </AnimatePresence>
      </div>
      {!hideTools && toolList && toolList.length > 0 && (
        <div className="absolute left-4 bottom-2 flex items-center gap-3 pointer-events-auto pl-[16px]">
          {toolList.map((tool: any, index: number) => {
            // 根据 selectedToolId 或路由中的 toolId 进行匹配，注意数据类型统一转换为字符串比较
            // 优先使用 selectedToolId（用户点击后的状态），其次使用 sessionStorage 中的 currentToolId（刷新时使用），再次使用路由中的 toolId（初始化时使用）
            const toolIdStr = String(tool.toolId)
            const isSelectedByState = selectedToolId && toolIdStr === String(selectedToolId)
            const isSelectedBySession = !selectedToolId && sessionToolId && toolIdStr === String(sessionToolId)
            // 高亮仅根据“真实选择状态”决定：点击后的 selectedToolId 或缓存 sessionToolId
            const isSelected = Boolean(isSelectedByState || isSelectedBySession)

            const baseBtnClass
              = 'w-auto h-[32px] px-3 rounded-full shadow-none text-[12px] flex items-center gap-2 transition-all duration-200 border'
            const selectedClass = isSelected
              ? ' bg-[#F3F7FF] border-[#AECBFF] text-[#165DFF]'
              : ' bg-[#FFFFFF] border-[#E6E8EB] text-[#111827]'
            const selectedVariant = isSelected ? 'solid' : 'bordered'
            const selectedColor = isSelected ? 'primary' : 'default'

            const handleButtonPress = async () => {
              // 你的期望：默认高亮第0个也要写入缓存，因此无论点击哪个按钮都写入该按钮的 toolId
              safeSessionStorageSetItem('currentToolId', toolIdStr)
              setSessionToolId(toolIdStr)
              setSelectedToolId(toolIdStr)
              setIsToolBtnActive(false)
              safeSessionStorageSetItem('currentToolName', tool.toolName || '')
              // 高亮状态直接返回，避免重复触发后续逻辑
              if (isSelected)
                return
              if (index === 0)
                await handleGeneralClick()
              else
                await handleToolClick(tool)
            }

            // 处理后端返回的 base64 图标
            const getToolIconSrc = () => {
              const icon = tool.toolIcon
              if (!icon)
                return ''
              // 已经是完整的 data URL 或 http 链接时直接返回
              if (icon.startsWith('data:') || icon.startsWith('http'))
                return icon
              // 否则拼接为 base64 图片格式
              return `data:image/png;base64,${icon}`
            }

            return (
              <Button
                key={tool.toolId || `tool-${index}`}
                className={`${baseBtnClass}${selectedClass}`}
                radius="full"
                variant={selectedVariant}
                color={selectedColor}
                onPress={handleButtonPress}
              >
                {tool.toolIcon && (
                  <img
                    src={getToolIconSrc()}
                    className="w-4 h-4 flex-shrink-0"
                  />
                )}
                {tool.toolName}
              </Button>
            )
          })}
        </div>
      )}
      <LoginModal onClose={handleCloseLoginModal} isOpen={isOpenLoginModal} />
    </div>
  )
}

export const ChatEditor = withAuth(ChatEditorBase)
