/**
 * 知识库树形导航组件（交互层）
 *
 * 职责：
 * - 树的展开/收起/记忆状态
 * - 节点高亮 + 联动回调
 * - 「全部展开 / 全部收起」操作按钮
 *
 * 数据分组逻辑完全委托给后端 get_grouped_items（数据分组层），
 * 本组件只管交互，不感知分组的业务含义。
 *
 * 二级节点 key 格式（由后端控制）：
 * - 大类节点：                    "manuscript"
 * - 二级节点（新格式）：           "manuscript|author|左鑫"
 *                                 type|二级字段名|字段值
 * - 二级节点（出处，杂志文章）：  "military_report|source_detail|航空知识..."
 *
 * 回调给 KnowledgeBase：统一返回 { type, detail }
 * - 大类节点 → { type: "manuscript", detail: null }
 * - 作者二级节点 → { type: "manuscript", detail: "左鑫" }
 * - 出处二级节点 → { type: "military_report", detail: "航空知识..." }
 * （detail=author名 或 source_detail原文，与 displayedItems 过滤逻辑对齐）
 */

import { useState, useCallback } from 'react'
import { Tree, Button, Space } from 'antd'
import { CaretDownFilled, NodeIndexOutlined } from '@ant-design/icons'
import './KnowledgeTree.css'

const { TreeNode } = Tree

export default function KnowledgeTree({
  treeData,         // 来自 getGroupedItems() API 的原始树数据（含全部节点）
  onNodeSelect,      // 选中节点时回调，参数: { key, type, detail } | null（全部）
  selectedKey,       // 当前选中的 key（用于高亮）
}) {
  const [expandedKeys, setExpandedKeys] = useState(() => {
    // 默认全部展开
    if (!treeData || treeData.length === 0) return []
    const root = treeData[0]
    return [root.key, ...(root.children || []).map(c => c.key)]
  })

  // 全部展开
  const handleExpandAll = useCallback(() => {
    if (!treeData || treeData.length === 0) return
    const root = treeData[0]
    const allKeys = [root.key]
    for (const child of root.children || []) {
      allKeys.push(child.key)
      if (child.children) {
        for (const grandchild of child.children) {
          allKeys.push(grandchild.key)
        }
      }
    }
    setExpandedKeys(allKeys)
  }, [treeData])

  // 全部收起
  const handleCollapseAll = useCallback(() => {
    setExpandedKeys([])
  }, [])

  // 节点选择
  const handleSelect = useCallback((selectedKeys, info) => {
    if (selectedKeys.length === 0) {
      onNodeSelect(null)
      return
    }
    const key = selectedKeys[0]

    // 解析 key 格式：
    // "all"                                → 全部根节点
    // "manuscript"                         → 大类节点
    // "manuscript|author|左鑫"             → 二级节点（新格式：type|fieldName|fieldValue）
    // "military_report|source_detail|..."  → 二级节点（出处）
    if (key === 'all') {
      onNodeSelect(null)
      return
    }

    const parts = key.split('|')
    if (parts.length === 1) {
      // 大类节点
      onNodeSelect({ key, type: parts[0], detail: null })
    } else {
      // 二级节点：parts[0]=type, parts[1]=字段名(废弃不用), parts[2]=字段值
      // 统一以 parts[2] 作为 detail（作者名 或 出处名），与 displayedItems 过滤逻辑对齐
      onNodeSelect({ key, type: parts[0], detail: parts[2] })
    }
  }, [onNodeSelect])

  // 渲染节点
  const renderNode = (node, isRoot = false) => {
    return (
      <TreeNode
        key={node.key}
        title={
          <span className={`kt-node-title ${isRoot ? 'kt-node-root' : ''}`}>
            {node.label}
          </span>
        }
        icon={isRoot ? <NodeIndexOutlined /> : undefined}
      >
        {(node.children || []).map(child => renderNode(child, false))}
      </TreeNode>
    )
  }

  if (!treeData || treeData.length === 0) {
    return (
      <div className="kt-empty">
        暂无知识库条目
      </div>
    )
  }

  return (
    <div className="kt-container">
      <div className="kt-header">
        <Space size="small">
          <Button size="small" onClick={handleExpandAll}>
            全部展开
          </Button>
          <Button size="small" onClick={handleCollapseAll}>
            全部收起
          </Button>
        </Space>
      </div>
      <div className="kt-tree-wrapper">
        <Tree
          showIcon
          showLine={{ showLeafIcon: false }}
          expandedKeys={expandedKeys}
          selectedKeys={selectedKey ? [selectedKey] : []}
          onExpand={(keys) => setExpandedKeys(keys)}
          onSelect={handleSelect}
          blockNode
          switcherIcon={<CaretDownFilled />}
        >
          {treeData.map(node => renderNode(node, true))}
        </Tree>
      </div>
    </div>
  )
}