import { useState } from 'react'
import { Tabs, TabList, Tab, TabPanel } from '@react-spectrum/s2/Tabs'
import { Accordion, AccordionItem, AccordionItemTitle, AccordionItemPanel } from '@react-spectrum/s2/Accordion'
import { Breadcrumbs, Breadcrumb } from '@react-spectrum/s2/Breadcrumbs'
import { TagGroup, Tag } from '@react-spectrum/s2/TagGroup'
import { Button } from '@react-spectrum/s2/Button'
import { Card, CardPreview, Content, Text, Footer } from '@react-spectrum/s2/Card'
import { TableView, TableHeader, Column, TableBody, Row, Cell, type Selection, type SortDescriptor } from '@react-spectrum/s2/TableView'
import { StatusLight } from '@react-spectrum/s2/StatusLight'
import EditIcon from '@react-spectrum/s2/icons/Edit'
import styles from './ui-kit.module.css'

const initialTags = ['设计', '开发', '文档']
const rows = [
  { id: 'buttons', name: '按钮', category: '基础操作', status: '已完成' },
  { id: 'navigation', name: '导航', category: '页面组织', status: '已完成' },
  { id: 'form', name: '表单', category: '数据输入', status: '示例' },
]

export default function NavigationData() {
  const [tags, setTags] = useState(initialTags)
  const [selection, setSelection] = useState<Selection>(new Set())
  const [sort, setSort] = useState<SortDescriptor>({ column: 'name', direction: 'ascending' })
  const sortedRows = [...rows].sort((a, b) => a.name.localeCompare(b.name, 'zh-CN') * (sort.direction === 'descending' ? -1 : 1))

  return (
    <>
      <section className={styles.section} aria-labelledby="kit-navigation">
        <h2 id="kit-navigation">导航与内容组织</h2>
        <Breadcrumbs><Breadcrumb href="/">Home</Breadcrumb><Breadcrumb>UI Kit</Breadcrumb></Breadcrumbs>
        <Tabs aria-label="组件内容示例" defaultSelectedKey="overview">
          <TabList aria-label="组件内容示例"><Tab id="overview">概览</Tab><Tab id="details">详情</Tab><Tab id="disabled" isDisabled>禁用</Tab></TabList>
          <TabPanel id="overview"><p className={styles.tabContent}>这是概览面板。点击“详情”切换内容。</p></TabPanel>
          <TabPanel id="details"><p className={styles.tabContent}>这是详情面板。也可以使用键盘方向键切换标签。</p></TabPanel>
        </Tabs>
        <Accordion allowsMultipleExpanded defaultExpandedKeys={['usage']}>
          <AccordionItem id="usage"><AccordionItemTitle>组件如何交互？</AccordionItemTitle><AccordionItemPanel>点击、聚焦或使用键盘体验组件的不同状态。</AccordionItemPanel></AccordionItem>
          <AccordionItem id="theme"><AccordionItemTitle>如何查看暗色效果？</AccordionItemTitle><AccordionItemPanel>使用顶栏右上角的设置按钮切换亮色和暗色模式。</AccordionItemPanel></AccordionItem>
        </Accordion>
      </section>

      <section className={styles.section} aria-labelledby="kit-tags">
        <h2 id="kit-tags">标签与卡片</h2>
        <TagGroup aria-label="可移除的示例标签" onRemove={(keys) => setTags((current) => current.filter((tag) => !keys.has(tag)))}>
          {tags.map((tag) => <Tag key={tag} id={tag}>{tag}</Tag>)}
        </TagGroup>
        {tags.length === 0 && <p className={styles.caption}>标签已清空。</p>}
        <div><Button variant="secondary" onPress={() => setTags(initialTags)}>恢复标签</Button></div>
        <div className={styles.cards}>
          <Card href="/form" aria-label="查看表单示例">
            <CardPreview><div className={styles.cardPreview}><EditIcon /></div></CardPreview>
            <Content><Text slot="title">表单组件</Text><Text slot="description">文本输入、选择、日期、颜色与文件控件。</Text></Content>
            <Footer><StatusLight variant="informative">点击查看表单页面</StatusLight></Footer>
          </Card>
          <Card variant="secondary" aria-label="组件展示卡片">
            <Content><Text slot="title">内容卡片</Text><Text slot="description">使用标题、描述和底部状态组织信息。</Text></Content>
            <Footer><StatusLight variant="positive">静态展示</StatusLight></Footer>
          </Card>
        </div>
      </section>

      <section className={styles.section} aria-labelledby="kit-table">
        <h2 id="kit-table">数据表格</h2>
        <p className={styles.caption}>支持多选，点击“名称”可切换排序。</p>
        <div className={styles.tableContainer}>
          <TableView aria-label="组件示例列表" UNSAFE_className={styles.table} selectionMode="multiple" selectedKeys={selection} onSelectionChange={setSelection} sortDescriptor={sort} onSortChange={setSort}>
            <TableHeader><Column id="name" isRowHeader allowsSorting>名称</Column><Column id="category">分类</Column><Column id="status">状态</Column></TableHeader>
            <TableBody items={sortedRows}>{(row) => <Row id={row.id}><Cell>{row.name}</Cell><Cell>{row.category}</Cell><Cell>{row.status}</Cell></Row>}</TableBody>
          </TableView>
        </div>
        <p role="status" className={styles.caption}>已选择 {selection === 'all' ? rows.length : selection.size} 项</p>
      </section>
    </>
  )
}