import { CodeBlock } from '@astryxdesign/core/CodeBlock'
import { Divider } from '@astryxdesign/core/Divider'
import { Grid } from '@astryxdesign/core/Grid'
import { Heading } from '@astryxdesign/core/Heading'
import { Icon } from '@astryxdesign/core/Icon'
import { List, ListItem } from '@astryxdesign/core/List'
import { Text } from '@astryxdesign/core/Text'
import { VStack } from '@astryxdesign/core/VStack'
import {
  ArrowRight,
  Atom,
  Blocks,
  BookOpen,
  ExternalLink,
  Palette,
  Route,
  Shapes,
  Zap,
} from 'lucide-react'
import { Page, PageHeader } from '../components/Page'

const COMMANDS = `npm run dev       # 启动开发服务器
npm run build     # 类型检查并构建生产版本
npm run lint      # 运行 oxlint
npm run preview   # 预览生产构建

npm run astryx -- component Button   # 查看 Astryx 组件文档`

const PROJECT_TREE = `src/
  components/
    AppLayout.tsx    应用外壳、顶部导航、侧边导航
    Page.tsx         共用页面框架与页头
  pages/
    HomePage.tsx
    ComponentsPage.tsx
    AboutPage.tsx
    NotFoundPage.tsx
  theme/
    ThemeMode.tsx    明暗主题提供者
  astryx-themes.ts   生成的主题注册表
  router.tsx         React Router 路由表
  App.tsx            提供者与路由
  main.tsx           入口文件`

const STACK = [
  {
    name: 'React',
    version: '19.3',
    icon: Atom,
    description: '界面运行时与 Hooks',
  },
  {
    name: 'Vite',
    version: '8.3',
    icon: Zap,
    description: '开发服务器与生产构建工具',
  },
  {
    name: 'React Router',
    version: '7.18',
    icon: Route,
    description: '基于数据路由的客户端路由，可在 hash 与 history 模式间切换',
  },
  {
    name: 'Astryx',
    version: '0.7.2',
    icon: Palette,
    description: '设计系统、组件与 neutral 主题',
  },
]

export function AboutPage() {
  return (
    <Page>
      <VStack gap={8}>
        <PageHeader
          eyebrow="关于"
          title="是起点，不是框架。"
          description="项目把每一部分都保持得小而可见：一张路由表、一套布局、一个主题提供者，以及普通的 React 组件。你可以直接替换需要改的部分，而不用和隐藏的约定较劲。"
        />

        <Divider />

        <Grid columns={{ minWidth: 320, max: 2 }} gap={8}>
          <VStack gap={4}>
            <Heading level={2}>技术栈</Heading>
            <List hasDividers>
              {STACK.map(({ name, version, icon, description }) => (
                <ListItem
                  key={name}
                  label={name}
                  description={description}
                  startContent={
                    <Icon icon={icon} size="sm" color="secondary" />
                  }
                  endContent={
                    <Text type="supporting" size="sm">
                      {version}
                    </Text>
                  }
                />
              ))}
            </List>
          </VStack>

          <VStack gap={4}>
            <Heading level={2}>常用命令</Heading>
            <CodeBlock
              code={COMMANDS}
              language="bash"
              title="终端"
              size="sm"
              hasLanguageLabel={false}
              width="100%"
            />
            <Text type="supporting" size="sm">
              Vite 8 需要 Node 20.19+。
            </Text>
          </VStack>
        </Grid>

        <Divider />

        <VStack gap={4} maxWidth={920}>
          <Heading level={2}>项目结构</Heading>
          <Text type="body" color="secondary" as="p">
            在 <Text type="code">src/pages</Text> 下新建页面，然后在{' '}
            <Text type="code">src/router.tsx</Text> 中注册路由，并在{' '}
            <Text type="code">src/components/AppLayout.tsx</Text>{' '}
            中添加对应的导航项。
          </Text>
          <CodeBlock
            code={PROJECT_TREE}
            language="plaintext"
            title="项目结构"
            width="100%"
          />
        </VStack>

        <Divider />

        <VStack gap={4}>
          <Heading level={2}>继续探索</Heading>
          <List hasDividers>
            <ListItem
              label="组件"
              description="浏览全部 173 个组件的实时交互示例。"
              href="/components"
              startContent={<Icon icon={Blocks} size="sm" color="secondary" />}
              endContent={<Icon icon={ArrowRight} size="sm" color="secondary" />}
            />
            <ListItem
              label="图标"
              description="浏览 Astryx 语义图标和 Lucide 图标库。"
              href="/icons"
              startContent={<Icon icon={Shapes} size="sm" color="secondary" />}
              endContent={<Icon icon={ArrowRight} size="sm" color="secondary" />}
            />
            <ListItem
              label="Astryx 文档"
              description="组件接口、主题、布局指南和页面模板。"
              href="https://astryx.atmeta.com"
              target="_blank"
              startContent={<Icon icon={BookOpen} size="sm" color="secondary" />}
              endContent={
                <Icon icon={ExternalLink} size="sm" color="secondary" />
              }
            />
            <ListItem
              label="React Router 文档"
              description="路由、数据加载、动作和导航。"
              href="https://reactrouter.com"
              target="_blank"
              startContent={<Icon icon={Route} size="sm" color="secondary" />}
              endContent={
                <Icon icon={ExternalLink} size="sm" color="secondary" />
              }
            />
          </List>
        </VStack>

        <Divider />

        <VStack gap={2}>
          <Heading level={3}>主题</Heading>
          <Text type="body" color="secondary" as="p">
            自动生成的 <Text type="code">src/astryx-themes.ts</Text>{' '}
            文件注册了 neutral 主题。可以运行{' '}
            <Text type="code">npm run astryx -- theme add &lt;slug&gt;</Text>{' '}
            添加其他主题包，然后在{' '}
            <Text type="code">src/theme/ThemeMode.tsx</Text>{' '}
            中把它传给主题提供者。
          </Text>
          <Text type="supporting" size="sm">
            Astryx 自带预构建 CSS，因此这个应用不需要 StyleX、PostCSS 或 Babel
            插件。
          </Text>
        </VStack>
      </VStack>
    </Page>
  )
}