import {
  DeleteOutlined,
  EditOutlined,
  FolderAddOutlined,
  FolderOutlined,
  PlusOutlined,
} from '@ant-design/icons'
import { Button, Empty, Popconfirm, Tooltip, Tree } from 'antd'
import type { DataNode } from 'antd/es/tree'
import type { FileCategory } from '../../api'
import { colors, fontSizes } from '../../tokens'

const ALL_FILES_KEY = '__all__'

interface FileCategoryTreeProps {
  categories: FileCategory[]
  selectedCategoryId: string | null
  onSelect: (categoryId: string | null) => void
  onCreate: (parentId?: string) => void
  onRename: (category: FileCategory) => void
  onDelete: (categoryId: string) => Promise<void>
}

export default function FileCategoryTree({
  categories,
  selectedCategoryId,
  onSelect,
  onCreate,
  onRename,
  onDelete,
}: FileCategoryTreeProps) {
  const mapCategory = (category: FileCategory): DataNode => ({
    key: category.id,
    title: (
      <div className="cat-tree-node">
        <FolderOutlined className="cat-tree-icon" />
        <span className="cat-tree-label" title={category.name}>{category.name}</span>
        <span className="cat-actions">
          <Tooltip title="新建子分类">
            <Button
              size="small"
              type="text"
              aria-label={`在${category.name}下新建分类`}
              icon={<PlusOutlined />}
              onClick={(event) => {
                event.stopPropagation()
                onCreate(category.id)
              }}
            />
          </Tooltip>
          <Tooltip title="重命名">
            <Button
              size="small"
              type="text"
              aria-label={`重命名${category.name}`}
              icon={<EditOutlined />}
              onClick={(event) => {
                event.stopPropagation()
                onRename(category)
              }}
            />
          </Tooltip>
          <Popconfirm
            title="删除此分类及其所有子分类和文件？"
            onConfirm={() => onDelete(category.id)}
          >
            <Tooltip title="删除">
              <Button
                size="small"
                type="text"
                danger
                aria-label={`删除${category.name}`}
                icon={<DeleteOutlined />}
                onClick={(event) => event.stopPropagation()}
              />
            </Tooltip>
          </Popconfirm>
        </span>
      </div>
    ),
    children: category.children.map(mapCategory),
  })

  const treeData: DataNode[] = [{
    key: ALL_FILES_KEY,
    title: (
      <div className="cat-tree-node cat-tree-node-all">
        <FolderOutlined className="cat-tree-icon" />
        <span className="cat-tree-label">全部文件</span>
      </div>
    ),
    children: categories.map(mapCategory),
  }]

  return (
    <aside className="files-category-panel">
      <div className="files-panel-header">
        <span style={{ fontSize: fontSizes.emphasis, fontWeight: 600, color: colors.text }}>
          文件分类
        </span>
        <Tooltip title="新建根分类">
          <Button
            size="small"
            type="text"
            aria-label="新建根分类"
            icon={<FolderAddOutlined />}
            onClick={() => onCreate()}
          />
        </Tooltip>
      </div>
      <div className="files-category-scroll">
        {categories.length === 0 ? (
          <Empty
            description="暂无分类，点击右上角新建"
            image={Empty.PRESENTED_IMAGE_SIMPLE}
            style={{ marginTop: 24 }}
          />
        ) : (
          <Tree
            defaultExpandAll
            treeData={treeData}
            selectedKeys={[selectedCategoryId ?? ALL_FILES_KEY]}
            onSelect={(keys) => {
              const key = keys[0]?.toString()
              onSelect(!key || key === ALL_FILES_KEY ? null : key)
            }}
          />
        )}
      </div>
    </aside>
  )
}
