import { useParams, Link } from 'react-router-dom'
import { AMB_STATUS_META } from '@/data/mock'
import { useCMS, getCMSAmb } from '@/services/cms'
import GlobalCTA from '@/components/Layout/GlobalCTA'

export default function AmbDetail() {
  const { status } = useParams()
  const { data: ambMeta } = useCMS(getCMSAmb, AMB_STATUS_META)
  const meta = ambMeta[status as string]

  if (!meta) {
    return (
      <div className="container section">
        <div className="placeholder">未找到状态：{status}</div>
        <Link to="/evolution" className="btn btn-secondary" style={{ marginTop: 16 }}>
          返回企业进化
        </Link>
      </div>
    )
  }

  return (
    <div>
      <div className="page-header">
        <div className="container">
          <div className="breadcrumb">
            <Link to="/" style={{ color: 'rgba(255,255,255,0.8)' }}>
              首页
            </Link>{' '}
            /{' '}
            <Link to="/evolution" style={{ color: 'rgba(255,255,255,0.8)' }}>
              企业进化
            </Link>{' '}
            / {meta.label}
          </div>
          <h1>{meta.label}</h1>
          <p>{meta.description}</p>
          <p style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)', marginTop: 8 }}>不绑定规模 · 支持跨维度不同状态</p>
        </div>
      </div>
      <section className="section">
        <div className="container">
          <div className="card">
            <h3>典型特征</h3>
            <ul style={{ paddingLeft: 18, lineHeight: 2, fontSize: 14 }}>
              {meta.traits.map(t => (
                <li key={t}>{t}</li>
              ))}
            </ul>
            <div className="placeholder" style={{ marginTop: 12 }}>
              【占位｜待业务确认】该状态的完整特征、风险、进化建议、案例映射待业务确认后灌入。
            </div>
          </div>
          <div style={{ marginTop: 16, display: 'flex', gap: 10 }}>
            <Link to="/evolution" className="btn btn-ghost">
              ← 返回企业进化
            </Link>
            <Link to="/contact" className="btn btn-primary">
              获取进化方案
            </Link>
          </div>
        </div>
      </section>
      <GlobalCTA />
    </div>
  )
}