import { useLocation, useNavigate } from 'react-router-dom'
import Layout from '@/components/Layout'

// 外部智能体(agent_pro source_type === 'external')的占位页面
//   my-recommended 接口会返回 source_type,external 类型的智能体
//   在此页面仅展示基础信息,不加载业务数据、不调用具体 API。
function ExternalMock() {
  const location = useLocation()
  const navigate = useNavigate()
  const state = location.state || {}
  const agent = state.agent || {}
  const name = agent.name || '外部智能体'
  const description = agent.desc || agent.description || '该智能体由外部系统提供,暂未对接具体业务。'
  const mode = agent.mode || ''
  const targetId = agent.id || ''

  return (
    <Layout>
      <div className="page-content">
        <div className="page-header">
          <button className="page-back-btn" onClick={() => navigate(-1)}>← 返回</button>
          <h1 className="page-title">{name}</h1>
          <div className="page-subtitle">外部智能体(占位预览)</div>
        </div>

        <div className="external-mock-card">
          <div className="external-mock-icon">🔌</div>
          <div className="external-mock-title">{name}</div>
          <div className="external-mock-desc">{description}</div>

          <div className="external-mock-meta">
            <div className="external-mock-meta-item">
              <span className="external-mock-meta-label">来源类型</span>
              <span className="external-mock-meta-value">external</span>
            </div>
            {mode && (
              <div className="external-mock-meta-item">
                <span className="external-mock-meta-label">运行模式</span>
                <span className="external-mock-meta-value">{mode}</span>
              </div>
            )}
            <div className="external-mock-meta-item">
              <span className="external-mock-meta-label">目标 ID</span>
              <span className="external-mock-meta-value external-mock-meta-mono">{targetId}</span>
            </div>
          </div>

          <div className="external-mock-tip">
            <span className="external-mock-tip-icon">💡</span>
            <span>该智能体由外部系统提供,当前为占位页面,尚未对接具体业务能力。</span>
          </div>

          <button className="external-mock-back" onClick={() => navigate('/plaza')}>
            返回广场
          </button>
        </div>
      </div>
    </Layout>
  )
}

export default ExternalMock
