import { useNavigate } from "react-router-dom"
import { isElectron, isApp, getParams } from "@/utils/tools"
import "./index.scss"
import { useEffect } from "react"
import { down, useMediaQuery } from "@/hooks"
import { useStore, observer } from "@/stores/utils"
import { Spin, message } from "antd"
import { CheckCircleFilled } from "@ant-design/icons"

/**
 * 首页 - 智能体清单
 * 负责渲染智能体卡片列表，并处理跳转到聊天页面。
 */
const Home = () => {
  const { token, apiUrl } = getParams()
  const navigate = useNavigate()
  const mobileOrTablet = useMediaQuery(down("md"))
  const { BotStore } = useStore()
  
  const { bots, loading, error, loadBots } = BotStore

  useEffect(() => {
    loadBots()
  }, [])

  useEffect(() => {
    if (error) {
      message.error(error)
    }
  }, [error])

  /**
   * 卡片点击事件：跳转至内容页，并携带智能体标识
   */
  const onBotClick = (bot: any) => {
    navigate(`/content?title=${bot.name}&botId=${bot.id}`)
  }
  if (loading) {
    return (
      <div className="flex_c h_full">
        <Spin size="large" />
        <div className="mt-16">加载智能体列表中...</div>
      </div>
    )
  }

  return (
    <div
      className={`home_wrap ${isApp || mobileOrTablet ? "layout_mobile" : ""}`}
      style={isApp ? { paddingTop: 0 } : {}}
    >
      <div className="content_box">
        <h1 className="title">
          智能体工作空间
          <span className="text-gradient">选择一个智能体开始对话</span>
        </h1>
        <div className="menu_wrap">
          {bots.map((bot) => (
            <div
              key={bot.id}
              className="menu_item"
              onClick={() => onBotClick(bot)}
            >
              <div className="menu_left">
                <div className="menu_item_title">
                  <span className="menu_item_title_text">{bot.name}</span>
                  <CheckCircleFilled className="verify_badge" />
                </div>
                <div className="menu_item_content" title={bot.description || "暂无描述"}>
                  {bot.description || "暂无描述"}
                </div>
                <div className="menu_meta">
                  <span className="menu_tag">智能体</span>
                </div>
              </div>
              <div className="menu_right">
                {bot.icon_url ? (
                  <img className="menu_avatar" src={bot.icon_url} alt={bot.name} />
                ) : (
                  <div className="menu_avatar placeholder">{bot.name.charAt(0)}</div>
                )}
              </div>
            </div>
          ))}
        </div>
        
        {/* 测试工具区域 */}
        <div className="test_tools_section">
          <h2 className="section_title">🧪 测试工具</h2>
          <div className="test_tools_grid">
            <div className="test_tool_item" onClick={() => navigate('/audio-test')}>
              <div className="test_tool_icon">🎙️</div>
              <div className="test_tool_info">
                <div className="test_tool_title">官方语音通话测试</div>
                <div className="test_tool_desc">基于 Coze 官方示例的语音通话功能测试</div>
              </div>
            </div>
          </div>
        </div>
        
        {bots.length === 0 && (
          <div className="empty_state">
            <p>当前工作空间暂无智能体</p>
          </div>
        )}
      </div>
    </div>
  )
}
export default observer(Home)
