path: root/src/pages/IconsPage.tsx

import { useMemo, useState } from 'react'
import { Button } from '@astryxdesign/core/Button'
import { Center } from '@astryxdesign/core/Center'
import { ClickableCard } from '@astryxdesign/core/ClickableCard'
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 type { IconName } from '@astryxdesign/core/Icon'
import { Text } from '@astryxdesign/core/Text'
import { TextInput } from '@astryxdesign/core/TextInput'
import { useToast } from '@astryxdesign/core/Toast'
import { ToggleButton, ToggleButtonGroup } from '@astryxdesign/core/ToggleButton'
import { VStack } from '@astryxdesign/core/VStack'
import {
  ChevronLeft,
  ChevronRight,
  icons,
  Search,
  type LucideIcon,
} from 'lucide-react'
import { Page, PageHeader } from '../components/Page'

type IconSet = 'semantic' | 'lucide'

interface SemanticIcon {
  name: IconName
  label: string
}

const SEMANTIC_ICONS: SemanticIcon[] = [
  { name: 'close', label: '关闭' },
  { name: 'chevronDown', label: '向下展开' },
  { name: 'chevronLeft', label: '向左' },
  { name: 'chevronRight', label: '向右' },
  { name: 'chevronsLeft', label: '跳到开头' },
  { name: 'chevronsRight', label: '跳到末尾' },
  { name: 'check', label: '确认' },
  { name: 'success', label: '成功' },
  { name: 'error', label: '错误' },
  { name: 'warning', label: '警告' },
  { name: 'info', label: '信息' },
  { name: 'calendar', label: '日历' },
  { name: 'clock', label: '时间' },
  { name: 'externalLink', label: '外部链接' },
  { name: 'menu', label: '菜单' },
  { name: 'moreHorizontal', label: '更多' },
  { name: 'search', label: '搜索' },
  { name: 'upload', label: '上传' },
  { name: 'arrowUp', label: '向上' },
  { name: 'arrowDown', label: '向下' },
  { name: 'arrowsUpDown', label: '排序' },
  { name: 'funnel', label: '筛选' },
  { name: 'eyeSlash', label: '隐藏' },
  { name: 'viewColumns', label: '列设置' },
  { name: 'copy', label: '复制' },
  { name: 'checkDouble', label: '已复制' },
  { name: 'wrench', label: '设置' },
  { name: 'stop', label: '停止' },
  { name: 'microphone', label: '麦克风' },
]

interface LucideEntry {
  name: string
  Icon: LucideIcon
}

const LUCIDE_ICONS: LucideEntry[] = Object.entries(icons)
  .map(([name, Icon]) => ({ name, Icon }))
  .sort((a, b) => a.name.localeCompare(b.name))

const LUCIDE_PAGE_SIZE = 120

export function IconsPage() {
  const [activeSet, setActiveSet] = useState<IconSet>('semantic')
  const [query, setQuery] = useState('')
  const [page, setPage] = useState(1)
  const showToast = useToast()

  const changeSet = (value: string | null) => {
    setActiveSet(value === 'lucide' ? 'lucide' : 'semantic')
    setPage(1)
  }

  const changeQuery = (value: string) => {
    setQuery(value)
    setPage(1)
  }

  const copyUsage = async (code: string, name: string) => {
    try {
      if (!navigator.clipboard) throw new Error('Clipboard unavailable')
      await navigator.clipboard.writeText(code)
      showToast({ body: `已复制 ${name} 的用法`, type: 'info' })
    } catch {
      showToast({ body: '复制失败，请检查浏览器权限', type: 'error' })
    }
  }

  const normalizedQuery = query.trim().toLowerCase()

  const filteredSemantic = useMemo(
    () =>
      SEMANTIC_ICONS.filter(
        (icon) =>
          normalizedQuery.length === 0 ||
          icon.name.toLowerCase().includes(normalizedQuery) ||
          icon.label.includes(query.trim()),
      ),
    [normalizedQuery, query],
  )

  const filteredLucide = useMemo(
    () =>
      normalizedQuery.length === 0
        ? LUCIDE_ICONS
        : LUCIDE_ICONS.filter((icon) =>
            icon.name.toLowerCase().includes(normalizedQuery),
          ),
    [normalizedQuery],
  )

  const totalPages = Math.max(1, Math.ceil(filteredLucide.length / LUCIDE_PAGE_SIZE))
  const currentPage = Math.min(page, totalPages)
  const pageStart = (currentPage - 1) * LUCIDE_PAGE_SIZE
  const pageItems = filteredLucide.slice(
    pageStart,
    pageStart + LUCIDE_PAGE_SIZE,
  )

  const isSemantic = activeSet === 'semantic'
  const visibleCount = isSemantic ? filteredSemantic.length : filteredLucide.length

  return (
    <Page>
      <VStack gap={8}>
        <PageHeader
          eyebrow="图标资源"
          title="图标"
          description={`浏览 ${SEMANTIC_ICONS.length} 个 Astryx 语义图标和 ${LUCIDE_ICONS.length} 个 Lucide 图标。点击任意图标即可复制它的用法。`}
        />

        <Divider />

        <VStack gap={4}>
          <HStack gap={4} wrap="wrap" vAlign="end">
            <TextInput
              label="搜索图标"
              isLabelHidden
              placeholder="搜索图标名称"
              value={query}
              onChange={changeQuery}
              startIcon={Search}
              size="lg"
              width={360}
            />
            <ToggleButtonGroup
              label="选择图标集"
              value={activeSet}
              onChange={changeSet}
              size="sm">
              <ToggleButton
                label={`语义图标 ${SEMANTIC_ICONS.length}`}
                value="semantic"
              />
              <ToggleButton
                label={`Lucide ${LUCIDE_ICONS.length}`}
                value="lucide"
              />
            </ToggleButtonGroup>
          </HStack>
          <Text type="supporting" size="sm">
            {isSemantic
              ? '语义图标通过名称使用，会自动适配当前主题。'
              : 'Lucide 图标以组件形式传入 Icon，可与语义图标混用。'}
          </Text>
        </VStack>

        {visibleCount === 0 ? (
          <Center minHeight={220}>
            <VStack gap={2} hAlign="center">
              <Icon icon={Search} size="lg" color="secondary" />
              <Text type="label">没有找到匹配的图标。</Text>
              <Text type="supporting" color="secondary">
                试试更短的关键词。
              </Text>
            </VStack>
          </Center>
        ) : isSemantic ? (
          <>
            <Text type="supporting" size="sm">
              共 {filteredSemantic.length} 个语义图标
            </Text>
            <Grid columns={{ minWidth: 160, max: 4 }} gap={3}>
              {filteredSemantic.map((semanticIcon) => (
                <ClickableCard
                  key={semanticIcon.name}
                  padding={4}
                  onClick={() =>
                    void copyUsage(
                      `<Icon icon="${semanticIcon.name}" size="lg" />`,
                      semanticIcon.name,
                    )
                  }
                  label={`复制 ${semanticIcon.name} 图标用法`}>
                  <VStack gap={2} hAlign="center">
                    <Icon
                      icon={semanticIcon.name}
                      size="lg"
                      color="accent"
                    />
                    <Text
                      type="code"
                      size="sm"
                      display="block"
                      justify="center"
                      maxLines={1}>
                      {semanticIcon.name}
                    </Text>
                    <Text
                      type="supporting"
                      size="sm"
                      display="block"
                      justify="center">
                      {semanticIcon.label}
                    </Text>
                  </VStack>
                </ClickableCard>
              ))}
            </Grid>
          </>
        ) : (
          <>
            <HStack gap={2} vAlign="center" hAlign="between" wrap="wrap">
              <Text type="supporting" size="sm">
                显示 {pageStart + 1}–{Math.min(pageStart + LUCIDE_PAGE_SIZE, filteredLucide.length)} 个，共 {filteredLucide.length} 个图标
              </Text>
              <HStack gap={2} vAlign="center">
                <Button
                  label="上一页"
                  variant="secondary"
                  size="sm"
                  isDisabled={currentPage === 1}
                  onClick={() => setPage((value) => Math.max(1, value - 1))}
                  icon={<Icon icon={ChevronLeft} size="sm" />}
                />
                <Text type="supporting" size="sm">
                  第 {currentPage} / {totalPages} 页
                </Text>
                <Button
                  label="下一页"
                  variant="secondary"
                  size="sm"
                  isDisabled={currentPage === totalPages}
                  onClick={() =>
                    setPage((value) => Math.min(totalPages, value + 1))
                  }
                  endContent={<Icon icon={ChevronRight} size="sm" />}
                />
              </HStack>
            </HStack>

            <Grid columns={{ minWidth: 160, max: 5 }} gap={3}>
              {pageItems.map(({ name, Icon: LucideComponent }) => (
                <ClickableCard
                  key={name}
                  padding={3}
                  onClick={() =>
                    void copyUsage(
                      `import { ${name} } from 'lucide-react'\n\n<Icon icon={${name}} size="lg" />`,
                      name,
                    )
                  }
                  label={`复制 ${name} 图标用法`}>
                  <VStack gap={2} hAlign="center">
                    <Icon icon={LucideComponent} size="lg" color="primary" />
                    <Text
                      type="supporting"
                      size="xsm"
                      display="block"
                      justify="center"
                      maxLines={2}
                      wordBreak="break-all">
                      {name}
                    </Text>
                  </VStack>
                </ClickableCard>
              ))}
            </Grid>

            <HStack gap={2} vAlign="center" hAlign="between" wrap="wrap">
              <Text type="supporting" size="sm">
                点击图标复制 import 与 Icon 用法
              </Text>
              <HStack gap={2} vAlign="center">
                <Button
                  label="上一页"
                  variant="secondary"
                  size="sm"
                  isDisabled={currentPage === 1}
                  onClick={() => setPage((value) => Math.max(1, value - 1))}
                  icon={<Icon icon={ChevronLeft} size="sm" />}
                />
                <Text type="supporting" size="sm">
                  第 {currentPage} / {totalPages} 页
                </Text>
                <Button
                  label="下一页"
                  variant="secondary"
                  size="sm"
                  isDisabled={currentPage === totalPages}
                  onClick={() =>
                    setPage((value) => Math.min(totalPages, value + 1))
                  }
                  endContent={<Icon icon={ChevronRight} size="sm" />}
                />
              </HStack>
            </HStack>
          </>
        )}

        <Divider />

        <VStack gap={1}>
          <Heading level={2}>使用方式</Heading>
          <Text type="body" color="secondary" as="p">
            语义图标可以直接传入名称；Lucide 图标需要先导入组件，再交给 Icon 渲染。
          </Text>
        </VStack>
      </VStack>
    </Page>
  )
}