import { Button } from '@astryxdesign/core/Button'
import { Card } from '@astryxdesign/core/Card'
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 { HStack } from '@astryxdesign/core/HStack'
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,
  Check,
  ExternalLink,
  Layers,
  Moon,
  Palette,
  Route,
  Sparkles,
  Terminal,
  Zap,
} from 'lucide-react'
import { Page } from '../components/Page'

const STACK = [
  {
    name: 'Vite',
    version: '8.x',
    icon: Zap,
    description: '极速开发服务器、快速热更新，以及经过优化的生产构建。',
  },
  {
    name: 'React',
    version: '19.x',
    icon: Atom,
    description: '现代 Hooks 与全应用共享的组件模型。',
  },
  {
    name: 'React Router',
    version: '7.x',
    icon: Route,
    description: '嵌套路由、持续存在的应用外壳，以及类型安全的导航。',
  },
  {
    name: 'Astryx',
    version: '0.7',
    icon: Palette,
    description: '无障碍组件、设计令牌、主题与深色模式。',
  },
]

const QUICK_START = `npm install
npm run dev`

const BUILT_IN = [
  {
    label: '应用外壳',
    description:
      '顶部导航、可折叠侧边栏和移动端抽屉都已替你处理好。',
    icon: Layers,
  },
  {
    label: '客户端路由',
    description:
      '所有页面共用一套布局，可在根目录配置中切换 hash 与 history 路由。',
    icon: Route,
  },
  {
    label: '明暗主题',
    description:
      'Astryx neutral 主题可切换模式，并记住你的选择。',
    icon: Moon,
  },
  {
    label: '完整组件目录',
    description:
      '全部 173 个 Astryx 组件，按基础、表单和弹层分类。',
    icon: Sparkles,
  },
]

export function HomePage() {
  return (
    <Page>
      <VStack gap={10}>
        <VStack gap={5} maxWidth={860}>
          <Text type="label" color="accent">
            Vite + React + React Router + Astryx
          </Text>
          <VStack gap={3}>
            <Heading level={1} type="display-2" textWrap="balance">
              为你的下一个 React 应用，准备更好的起点。
            </Heading>
            <Text type="large" color="secondary" as="p" textWrap="pretty">
              Vite 让反馈循环保持飞快，React Router
              给应用真正的结构，Astryx 提供无障碍组件与主题。所有部分都已经连接好。
            </Text>
          </VStack>
          <HStack gap={3} wrap="wrap">
            <Button
              label="浏览组件"
              variant="primary"
              href="/components"
              endContent={<Icon icon={ArrowRight} size="sm" color="inherit" />}
            />
            <Button
              label="Astryx 文档"
              variant="secondary"
              href="https://astryx.atmeta.com"
              target="_blank"
              rel="noreferrer"
              endContent={
                <Icon icon={ExternalLink} size="sm" color="inherit" />
              }
            />
          </HStack>
        </VStack>

        <Divider />

        <VStack gap={5}>
          <VStack gap={2} maxWidth={680}>
            <Text type="label" color="accent">
              技术栈
            </Text>
            <Heading level={2}>四件工具，已经连接好。</Heading>
            <Text type="body" color="secondary" as="p">
              无需构建插件，也无需额外配置 CSS。Astryx
              直接提供预构建样式，项目里能看到的导入就是全部配置。
            </Text>
          </VStack>
          <Grid columns={{ minWidth: 230, max: 4 }} gap={6}>
            {STACK.map(({ name, version, icon, description }) => (
              <HStack key={name} gap={3} vAlign="start">
                <Icon icon={icon} size="md" color="accent" />
                <VStack gap={1}>
                  <HStack gap={2} vAlign="center" wrap="wrap">
                    <Text type="label">{name}</Text>
                    <Text type="supporting" size="sm">
                      {version}
                    </Text>
                  </HStack>
                  <Text type="supporting" size="sm" as="p">
                    {description}
                  </Text>
                </VStack>
              </HStack>
            ))}
          </Grid>
        </VStack>

        <Divider />

        <Grid columns={{ minWidth: 320, max: 2 }} gap={8}>
          <VStack gap={4}>
            <VStack gap={1}>
              <Heading level={2}>已经接好的能力</Heading>
              <Text type="body" color="secondary" as="p">
                一些方便替换、能随应用一起成长的小默认值。
              </Text>
            </VStack>
            <List hasDividers>
              {BUILT_IN.map(({ label, description, icon }) => (
                <ListItem
                  key={label}
                  label={label}
                  description={description}
                  startContent={
                    <Icon icon={icon} size="sm" color="secondary" />
                  }
                  endContent={
                    <Icon icon={Check} size="sm" color="success" />
                  }
                />
              ))}
            </List>
          </VStack>

          <Card padding={6} elevation="low">
            <VStack gap={4}>
              <VStack gap={1}>
                <Heading level={2}>快速开始</Heading>
                <Text type="body" color="secondary" as="p">
                  安装依赖、启动 Vite，然后编辑{' '}
                  <Text type="code">src/</Text> 下的任意文件。
                </Text>
              </VStack>
              <CodeBlock
                code={QUICK_START}
                language="bash"
                title="终端"
                hasLanguageLabel={false}
                width="100%"
              />
              <HStack gap={2} vAlign="center">
                <Icon icon={Terminal} size="sm" color="secondary" />
                <Text type="supporting" size="sm">
                  需要 Node 20.19+ 和 npm 10+。
                </Text>
              </HStack>
            </VStack>
          </Card>
        </Grid>

        <Divider />

        <HStack gap={2} vAlign="center">
          <Icon icon={Sparkles} size="sm" color="accent" />
          <Text type="supporting" size="sm">
            基于 Astryx v0.7.2 和 neutral 主题构建。可在
            src/astryx-themes.ts 中更改主题。
          </Text>
        </HStack>
      </VStack>
    </Page>
  )
}