import { Card, List, Tag, Typography } from 'antd'
import { moduleCatalog } from './systemInventory'

const statusLabel = {
  ready: '已接入',
  partial: '待继续',
  planned: '待迁移',
}

type Props = {
  moduleName: string
}

export function ModuleLandingPage({ moduleName }: Props) {
  const moduleInfo = moduleCatalog[moduleName]

  if (!moduleInfo) {
    return (
      <div className="page-stack">
        <Card className="glass-panel page-panel">
          <Typography.Title level={3}>未登记模块</Typography.Title>
          <Typography.Paragraph className="text-muted">
            当前路由已经进入新后台，但模块注册表还没有补充它的功能描述。
          </Typography.Paragraph>
        </Card>
      </div>
    )
  }

  return (
    <div className="page-stack">
      <Card className="glass-panel page-panel">
        <div className="section-heading">
          <div>
            <Typography.Title level={2} style={{ marginBottom: 8 }}>
              {moduleInfo.title}
            </Typography.Title>
            <Typography.Paragraph className="text-muted" style={{ marginBottom: 0 }}>
              {moduleInfo.summary}
            </Typography.Paragraph>
          </div>
          <Tag color={moduleInfo.status === 'ready' ? 'green' : moduleInfo.status === 'partial' ? 'orange' : 'default'}>
            {statusLabel[moduleInfo.status]}
          </Tag>
        </div>
      </Card>
      <div className="hero-grid">
        <Card className="glass-panel page-panel" title="模块职责">
          <List
            dataSource={moduleInfo.features}
            renderItem={(item) => <List.Item>{item}</List.Item>}
          />
        </Card>
        <Card className="glass-panel page-panel" title="关联接口">
          <List
            size="small"
            dataSource={moduleInfo.endpoints}
            renderItem={(item) => (
              <List.Item>
                <code>{item}</code>
              </List.Item>
            )}
            locale={{ emptyText: '当前页面没有直接绑定接口。' }}
          />
        </Card>
      </div>
    </div>
  )
}
