import { Card, Col, List, Progress, Row, Statistic, Tag, Typography } from 'antd'
import { moduleList } from '@/features/discovery/systemInventory'
import { flattenMenus } from '@/lib/menu'
import { useAuthStore } from '@/store/auth'

export function DashboardPage() {
  const menus = useAuthStore((state) => state.menus)
  const user = useAuthStore((state) => state.user)

  const flatMenus = flattenMenus(menus)
  const implementedCount = moduleList.filter((item) => item.status === 'ready').length
  const partialCount = moduleList.filter((item) => item.status === 'partial').length
  const allowedModules = flatMenus.length
  const allEndpoints = moduleList.reduce((total, item) => total + item.endpoints.length, 0)

  return (
    <div className="page-stack">
      <Card className="glass-panel page-panel">
        <div className="hero-grid">
          <div>
            <Tag color="processing" style={{ marginBottom: 12 }}>
              React 管理后台重构中
            </Tag>
            <Typography.Title level={2} style={{ marginBottom: 12 }}>
              {user?.nickName || user?.userName || '管理员'}，欢迎回来
            </Typography.Title>
            <Typography.Paragraph className="text-muted" style={{ maxWidth: 720, marginBottom: 20 }}>
              新后台已经基于真实菜单树和后端接口协议接管路由结构。当前仪表盘会直接反映已有菜单权限、模块覆盖进度和需要继续迁移的能力。
            </Typography.Paragraph>
            <Row gutter={[16, 16]}>
              <Col span={12}>
                <Card bordered={false} style={{ background: 'var(--accent-soft)' }}>
                  <Statistic title="当前角色默认首页" value={user?.authority?.defaultRouter || 'dashboard'} />
                </Card>
              </Col>
              <Col span={12}>
                <Card bordered={false} style={{ background: 'var(--success-soft)' }}>
                  <Statistic title="可访问内部菜单" value={allowedModules} />
                </Card>
              </Col>
            </Row>
          </div>
          <Card bordered={false} style={{ background: 'rgba(16, 37, 66, 0.04)' }}>
            <Typography.Title level={4}>重构覆盖率</Typography.Title>
            <Progress
              percent={Math.round((implementedCount / moduleList.length) * 100)}
              strokeColor="#d16f3f"
            />
            <List
              size="small"
              style={{ marginTop: 16 }}
              dataSource={[
                `已接入模块 ${implementedCount} 个`,
                `待继续迁移 ${partialCount} 个`,
                `模块登记总数 ${moduleList.length} 个`,
                `清点出的接口触点 ${allEndpoints} 个`,
              ]}
              renderItem={(item) => <List.Item>{item}</List.Item>}
            />
          </Card>
        </div>
      </Card>
      <div className="metric-grid">
        <div className="metric-card">
          <Typography.Text className="text-muted">模块总数</Typography.Text>
          <Typography.Title level={2} style={{ margin: '8px 0 0' }}>
            {moduleList.length}
          </Typography.Title>
        </div>
        <div className="metric-card">
          <Typography.Text className="text-muted">已接入</Typography.Text>
          <Typography.Title level={2} style={{ margin: '8px 0 0' }}>
            {implementedCount}
          </Typography.Title>
        </div>
        <div className="metric-card">
          <Typography.Text className="text-muted">待继续</Typography.Text>
          <Typography.Title level={2} style={{ margin: '8px 0 0' }}>
            {partialCount}
          </Typography.Title>
        </div>
        <div className="metric-card">
          <Typography.Text className="text-muted">已登记接口触点</Typography.Text>
          <Typography.Title level={2} style={{ margin: '8px 0 0' }}>
            {allEndpoints}
          </Typography.Title>
        </div>
      </div>
      <Card className="glass-panel page-panel" title="模块清单">
        <div className="catalog-grid">
          {moduleList.map((item) => (
            <div className="catalog-card" key={item.name}>
              <div className="section-heading" style={{ marginBottom: 8 }}>
                <Typography.Title level={5} style={{ margin: 0 }}>
                  {item.title}
                </Typography.Title>
                <span className={`status-dot ${item.status}`}></span>
              </div>
              <Typography.Paragraph className="text-muted" style={{ minHeight: 66 }}>
                {item.summary}
              </Typography.Paragraph>
              <Tag>{item.group}</Tag>
              <Tag bordered={false}>{item.endpoints.length} 个接口触点</Tag>
            </div>
          ))}
        </div>
      </Card>
      <Card className="glass-panel page-panel" title="当前角色菜单">
        <List
          dataSource={flatMenus.filter((item) => !item.hidden)}
          renderItem={(item) => (
            <List.Item>
              <List.Item.Meta
                title={item.meta.title}
                description={`${item.name} · ${item.fullPath}`}
              />
            </List.Item>
          )}
        />
      </Card>
    </div>
  )
}
