/**
 * Skills 管理中心 - 列表页面
 */
import { useEffect, useState } from 'react'
import {
  Card,
  Table,
  Tag,
  Button,
  Space,
  Input,
  message,
  Tabs,
  Drawer,
  Modal,
  Form,
  Select,
  Badge,
  Divider,
  Tooltip,
  Switch,
  Empty,
  Spin,
  Alert,
  List,
  Popconfirm,
  Progress
} from 'antd'
import SkillCreate from '@/components/SkillCreate'
import {
  PlusOutlined,
  EyeOutlined,
  EditOutlined,
  PlayCircleOutlined,
  SearchOutlined,
  CopyOutlined,
  DeleteOutlined,
  AppstoreOutlined,
  CheckCircleOutlined,
  LockOutlined,
  RobotOutlined,
  EditFilled,
  ReloadOutlined,
  ClockCircleOutlined,
  FileTextOutlined
} from '@ant-design/icons'
import { useNavigate, useSearchParams, useLocation } from 'react-router-dom'
import { useSkillStore, Skill } from '@/stores/skillStore'
import { skillService, SkillDraft } from '@/services/skillService'
import { taskService } from '@/services/taskService'
import { uploadService } from '@/services/uploadService'
import { getTaskPollingService } from '@/services/taskPollingService'
import type { ColumnsType } from 'antd/es/table'
import dayjs from 'dayjs'

const { Search, TextArea } = Input
const { TabPane } = Tabs
const { Option } = Select

// Keep Input component available
const InputComponent = Input

// ============================================================================
// Skill References View 组件
// ============================================================================

interface SkillReferencesViewProps {
  skillId: string
}

const SkillReferencesView: React.FC<SkillReferencesViewProps> = ({ skillId }) => {
  const [files, setFiles] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [selectedFile, setSelectedFile] = useState<any | null>(null)
  const [fileContent, setFileContent] = useState<string>('')
  const [contentLoading, setContentLoading] = useState(false)
  const [previewVisible, setPreviewVisible] = useState(false)

  useEffect(() => {
    fetchReferences()
  }, [skillId])

  const fetchReferences = async () => {
    setLoading(true)
    try {
      const result = await uploadService.listReferenceFiles(skillId)
      setFiles(result.files || [])
    } catch (error) {
      console.error('Failed to fetch references:', error)
      message.error('加载 References 失败')
    } finally {
      setLoading(false)
    }
  }

  const handleViewFile = async (file: any) => {
    setSelectedFile(file)
    setContentLoading(true)
    setPreviewVisible(true)

    try {
      const result = await uploadService.getReferenceFileContent(skillId, file.name)
      if (result.success && result.content) {
        setFileContent(result.content)
      } else {
        message.error(result.message || '无法读取文件内容')
      }
    } catch (error) {
      console.error('Failed to fetch file content:', error)
      message.error('读取文件内容失败')
    } finally {
      setContentLoading(false)
    }
  }

  const handleDeleteFile = async (fileName: string) => {
    try {
      await uploadService.deleteReferenceFile(skillId, fileName)
      message.success('删除成功')
      fetchReferences()
    } catch (error) {
      console.error('Failed to delete file:', error)
      message.error('删除失败')
    }
  }

  const formatFileSize = (bytes: number) => {
    if (bytes < 1024) return bytes + ' B'
    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
    return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
  }

  if (loading) {
    return <Spin />
  }

  return (
    <Space direction="vertical" style={{ width: '100%' }} size="middle">
      {files.length === 0 ? (
        <Empty
          image={Empty.PRESENTED_IMAGE_SIMPLE}
          description="暂无 References 文件"
        />
      ) : (
        <List
          dataSource={files}
          renderItem={(file) => (
            <List.Item
              actions={[
                <Button
                  key="view"
                  size="small"
                  type="link"
                  icon={<EyeOutlined />}
                  onClick={() => handleViewFile(file)}
                >
                  查看
                </Button>,
                <Popconfirm
                  key="delete"
                  title="确认删除"
                  description="确定要删除这个文件吗？"
                  onConfirm={() => handleDeleteFile(file.name)}
                  okText="确定"
                  cancelText="取消"
                >
                  <Button size="small" type="link" danger icon={<DeleteOutlined />}>
                    删除
                  </Button>
                </Popconfirm>
              ]}
            >
              <List.Item.Meta
                avatar={<FileTextOutlined style={{ fontSize: '20px', color: '#1890ff' }} />}
                title={file.name}
                description={
                  <Space size="small">
                    <span>{formatFileSize(file.size)}</span>
                    {file.modified && (
                      <span style={{ color: '#999' }}>
                        修改于 {dayjs(file.modified).format('YYYY-MM-DD HH:mm')}
                      </span>
                    )}
                  </Space>
                }
              />
            </List.Item>
          )}
        />
      )}

      {/* 文件预览弹窗 */}
      <Modal
        title={
          <Space>
            <FileTextOutlined />
            <span>{selectedFile?.name}</span>
          </Space>
        }
        open={previewVisible}
        onCancel={() => {
          setPreviewVisible(false)
          setSelectedFile(null)
          setFileContent('')
        }}
        width={900}
        footer={[
          <Button key="close" onClick={() => setPreviewVisible(false)}>
            关闭
          </Button>,
          <Button
            key="copy"
            type="primary"
            icon={<CopyOutlined />}
            onClick={() => {
              navigator.clipboard.writeText(fileContent)
              message.success('已复制到剪贴板')
            }}
          >
            复制内容
          </Button>
        ]}
      >
        {contentLoading ? (
          <div style={{ textAlign: 'center', padding: '40px' }}>
            <Spin />
          </div>
        ) : (
          <pre style={{
            background: '#f5f5f5',
            padding: '16px',
            borderRadius: '4px',
            maxHeight: '60vh',
            overflowY: 'auto',
            whiteSpace: 'pre-wrap',
            wordBreak: 'break-word',
            fontFamily: 'monospace',
            fontSize: '13px',
            lineHeight: '1.6'
          }}>
            {fileContent}
          </pre>
        )}
      </Modal>
    </Space>
  )
}

// AI 创建模式
type CreateMode = 'ai' | 'manual' | 'template'

export const SkillManagement = () => {
  const navigate = useNavigate()
  const [searchParams] = useSearchParams()
  const location = useLocation()
  const { skills, builtinSkills, userSkills, loading, fetchSkills, testSkill } = useSkillStore()

  // List view states
  const [searchText, setSearchText] = useState('')
  const [activeTab] = useState('all')
  const [viewMode, setViewMode] = useState<'list' | 'grid'>('list')
  const [selectedCategories, setSelectedCategories] = useState<string[]>([])

  // Detail view states
  const [detailDrawerOpen, setDetailDrawerOpen] = useState(false)
  const [selectedSkill, setSelectedSkill] = useState<Skill | null>(null)

  // Test states
  const [testModalOpen, setTestModalOpen] = useState(false)
  const [testInput, setTestInput] = useState('')
  const [testResult, setTestResult] = useState('')
  const [testing, setTesting] = useState(false)

  // CRUD states
  const [editModalOpen, setEditModalOpen] = useState(false)
  const [createModalOpen, setCreateModalOpen] = useState(false)
  const [editingSkill, setEditingSkill] = useState<Skill | null>(null)
  const [form] = Form.useForm()
  const [submitting, setSubmitting] = useState(false)

  // AI 创建状态
  const [createMode, setCreateMode] = useState<CreateMode>('ai')
  const [aiIdea, setAiIdea] = useState('')
  const [aiCategory, setAiCategory] = useState<string | undefined>()
  const [generating, setGenerating] = useState(false)
  const [generatedDraft, setGeneratedDraft] = useState<SkillDraft | null>(null)

  // 技能生成任务状态
  const [skillGenerationTasks, setSkillGenerationTasks] = useState<any[]>([])
  const [optimizing, setOptimizing] = useState(false)
  const [optimizeRequirements, setOptimizeRequirements] = useState('')

  // 模板初始化状态
  const [templateSkillName, setTemplateSkillName] = useState('')
  const [templateOutputPath, setTemplateOutputPath] = useState('')
  const [initializing, setInitializing] = useState(false)
  const [initResult, setInitResult] = useState<string | null>(null)

  // 向导状态
  const [wizardVisible, setWizardVisible] = useState(false)
  // 跳转回退信息（从外部跳转过来时使用）
  const [redirectState, setRedirectState] = useState<{ path: string; activeTab?: string; reviewSubTab?: string } | null>(null)
  // References 数量缓存
  const [skillReferencesCount, setSkillReferencesCount] = useState<Record<string, number>>({})
  const [loadingReferences, setLoadingReferences] = useState<Record<string, boolean>>({})

  useEffect(() => {
    fetchSkills()

    // 使用全局轮询服务，避免多个页面重复轮询
    const pollingService = getTaskPollingService()

    // 订阅任务更新
    const unsubscribe = pollingService.subscribe({
      onTasksUpdate: (tasks) => {
        setSkillGenerationTasks(tasks)
      },
      onTaskCompleted: (task) => {
        // 任务完成时刷新技能列表
        console.log('[SkillManagement] Task completed:', task)
        fetchSkills()

        // 显示完成通知
        const skillName = task.result?.suggested_name || 'Skill'
        const savedSkillId = task.result?.saved_skill_id
        const autoSaved = task.result?.auto_saved

        if (autoSaved && savedSkillId) {
          message.success(`${skillName} 已自动保存！(ID: ${savedSkillId})`)
        } else if (task.result?.save_error) {
          message.warning(`${skillName} 生成完成但保存失败: ${task.result.save_error}`)
        } else {
          message.success(`${skillName} 生成完成！`)
        }
      }
    })

    return () => {
      unsubscribe()
    }
  }, [])

  // 处理URL参数和location.state - 支持通过URL参数打开编辑或创建
  useEffect(() => {
    // 从 location.state 读取 redirect 信息
    const state = location.state as any
    if (state?.redirect) {
      setRedirectState({
        path: state.redirect,
        activeTab: state.activeTab,
        reviewSubTab: state.reviewSubTab
      })
      // 清除 state 避免重复处理
      location.state = null
    }

    // 处理编辑参数 - 使用新的 SkillCreate 向导组件
    const editSkillId = searchParams.get('edit')
    if (editSkillId) {
      const skillToEdit = skills.find(s => s.id === editSkillId)
      if (skillToEdit) {
        setEditingSkill(skillToEdit)
        setWizardVisible(true)
        // 清除URL参数
        searchParams.delete('edit')
        navigate(`/skills?${searchParams.toString()}`, { replace: true })
        return
      } else {
        // Skill 不在本地列表中，尝试从服务器直接获取
        // 这允许编辑在 review 配置中引用但不在主列表中的技能
        const fetchSkillForEdit = async () => {
          try {
            const result = await skillService.getSkillWithReferences(editSkillId, false)
            if (result?.skill) {
              setEditingSkill(result.skill)
              setWizardVisible(true)
            } else {
              message.error(`Skill ID "${editSkillId}" 不存在`)
            }
          } catch (error) {
            console.error('Failed to fetch skill for edit:', error)
            message.error(`无法加载 Skill "${editSkillId}": ${(error as Error).message}`)
          } finally {
            // 清除URL参数
            searchParams.delete('edit')
            navigate(`/skills?${searchParams.toString()}`, { replace: true })
          }
        }
        fetchSkillForEdit()
        return
      }
    }

    // 处理创建参数 - 使用新的 SkillCreate 向导组件
    const shouldCreate = searchParams.get('create')
    if (shouldCreate === 'true') {
      // 确保重置 editingSkill，避免误用之前的编辑状态
      setEditingSkill(null)
      setWizardVisible(true)
      // 清除URL参数
      searchParams.delete('create')
      navigate(`/skills?${searchParams.toString()}`, { replace: true })
    }
  }, [skills, searchParams, navigate, location])

  // Get unique categories
  const categories = Array.from(new Set(skills.map(s => s.category)))

  // Filter skills
  const filteredSkills = skills.filter(skill => {
    const matchSearch =
      skill.name.toLowerCase().includes(searchText.toLowerCase()) ||
      skill.category.toLowerCase().includes(searchText.toLowerCase()) ||
      skill.id.toLowerCase().includes(searchText.toLowerCase())

    const matchTab =
      activeTab === 'all' ||
      (activeTab === 'builtin' && skill.type === 'builtin') ||
      (activeTab === 'user' && skill.type === 'user')

    const matchCategory = selectedCategories.length === 0 || selectedCategories.includes(skill.category)

    return matchSearch && matchTab && matchCategory
  })

  // 创建正在生成的任务的虚拟 skill 列表
  const generatingSkills = skillGenerationTasks.map((task: any) => ({
    id: `task-${task.id}`,
    name: task.params?.description?.substring(0, 30) + '...' || '正在生成 Skill',
    version: '0.1',
    type: 'user' as const,
    category: task.params?.category || '通用',
    behavior_guide: '',
    tags: ['生成中'],
    created_at: new Date(task.created_at).toISOString(),
    // 添加任务相关字段用于显示
    _isGenerating: true,
    _taskId: task.id,
    _taskStatus: task.status,
    _taskProgress: task.progress,
    _description: task.params?.description || ''
  }))

  // 合并正常 skills 和正在生成的 skills
  const allDisplaySkills = [...generatingSkills, ...filteredSkills]

  // 调试日志
  console.log('=== Rendering ===')
  console.log('skillGenerationTasks count:', skillGenerationTasks.length)
  console.log('generatingSkills count:', generatingSkills.length)
  console.log('filteredSkills count:', filteredSkills.length)
  console.log('allDisplaySkills count:', allDisplaySkills.length)

  // 加载单个 skill 的 references 数量
  const fetchSkillReferencesCount = async (skillId: string) => {
    try {
      setLoadingReferences(prev => ({ ...prev, [skillId]: true }))
      const result = await uploadService.listReferenceFiles(skillId)
      setSkillReferencesCount(prev => ({ ...prev, [skillId]: result.files.length }))
    } catch (error) {
      console.error(`Failed to fetch references for skill ${skillId}:`, error)
      setSkillReferencesCount(prev => ({ ...prev, [skillId]: 0 }))
    } finally {
      setLoadingReferences(prev => ({ ...prev, [skillId]: false }))
    }
  }

  // Handlers
  const handleView = (skill: Skill) => {
    setSelectedSkill(skill)
    setDetailDrawerOpen(true)
    // 加载 references 数量
    fetchSkillReferencesCount(skill.id)
  }

  const handleTest = (skill: Skill) => {
    setSelectedSkill(skill)
    setTestInput('')
    setTestResult('')
    setTestModalOpen(true)
  }

  const handleRunTest = async () => {
    if (!selectedSkill) return

    setTesting(true)
    setTestResult('')

    try {
      const result = await testSkill(selectedSkill.id, testInput || '请创作一段示例内容')
      setTestResult(result)
      message.success('测试成功！')
    } catch (error) {
      message.error(`测试失败: ${(error as Error).message}`)
    } finally {
      setTesting(false)
    }
  }

  const handleEdit = (skill: Skill) => {
    if (skill.type === 'builtin') {
      message.warning('内置 Skill 不允许编辑')
      return
    }
    // 使用新的 SkillCreate 组件进行编辑
    setEditingSkill(skill)
    setWizardVisible(true)
  }

  const handleCopy = (skill: Skill) => {
    form.setFieldsValue({
      id: `${skill.id}-copy-${Date.now()}`,
      name: `${skill.name} (副本)`,
      category: skill.category,
      behavior_guide: skill.behavior_guide,
      tags: skill.tags || []
    })
    setEditingSkill(null)
    setCreateModalOpen(true)
    message.info('已复制 Skill 内容，请修改后保存')
  }

  const handleDelete = async (skill: Skill) => {
    if (skill.type === 'builtin') {
      message.warning('内置 Skill 不允许删除')
      return
    }

    try {
      await skillService.deleteSkill(skill.id)
      message.success('删除成功')
      fetchSkills()
    } catch (error) {
      message.error(`删除失败: ${(error as Error).message}`)
    }
  }

  const handleCreate = () => {
    // 打开新的向导
    setWizardVisible(true)
  }

  // 从模板初始化 Skill（使用 skill-creator 的 init_skill.py 脚本）
  const handleInitFromTemplate = async () => {
    if (!templateSkillName.trim()) {
      message.warning('请输入 Skill 名称')
      return
    }

    // 验证格式：hyphen-case
    if (!/^[a-z0-9-]+$/.test(templateSkillName)) {
      message.warning('Skill 名称只能包含小写字母、数字和连字符 (hyphen-case)')
      return
    }

    setInitializing(true)
    setInitResult(null)
    try {
      const result = await skillService.initSkillTemplate(
        templateSkillName,
        templateOutputPath || undefined
      )

      if (result.success) {
        setInitResult(result.output || 'Skill 模板初始化成功！')
        message.success('Skill 模板初始化成功！')

        // 自动填充表单
        form.setFieldsValue({
          id: templateSkillName,
          name: templateSkillName.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' '),
          category: 'general',
          behavior_guide: `# ${form.getFieldValue('name') || templateSkillName}\n\n## Overview\n\n[TODO: Describe what this skill does]\n\n## Behavior Guide\n\n[TODO: Add behavior guide content]`,
          tags: []
        })
      }
    } catch (error) {
      message.error(`初始化失败: ${(error as Error).message}`)
    } finally {
      setInitializing(false)
    }
  }

  // AI 生成 Skill
  const handleGenerate = async () => {
    if (!aiIdea.trim()) {
      message.warning('请输入您的想法或需求')
      return
    }

    setGenerating(true)
    try {
      const draft = await skillService.generateSkill(aiIdea, aiCategory)
      setGeneratedDraft(draft)

      // 将生成的数据填充到表单
      form.setFieldsValue({
        id: draft.suggested_id,
        name: draft.suggested_name,
        category: draft.suggested_category,
        behavior_guide: draft.behavior_guide,
        tags: draft.suggested_tags
      })

      message.success('AI 生成成功！您可以继续编辑后保存')
    } catch (error) {
      message.error(`AI 生成失败: ${(error as Error).message}`)
    } finally {
      setGenerating(false)
    }
  }

  // AI 优化 Skill
  const handleOptimize = async () => {
    if (!generatedDraft && !editingSkill) {
      message.warning('请先生成或加载 Skill 内容')
      return
    }

    if (!optimizeRequirements.trim()) {
      message.warning('请输入优化需求')
      return
    }

    const currentContent = form.getFieldValue('behavior_guide')
    if (!currentContent) {
      message.warning('没有可优化的内容')
      return
    }

    setOptimizing(true)
    try {
      const skillId = form.getFieldValue('id') || 'temp'
      const result = await skillService.optimizeSkill(skillId, currentContent, optimizeRequirements)

      // 更新行为指导
      form.setFieldsValue({
        behavior_guide: result.behavior_guide
      })

      // 更新 generatedDraft
      if (generatedDraft) {
        setGeneratedDraft({
          ...generatedDraft,
          behavior_guide: result.behavior_guide
        })
      }

      message.success('优化成功！')

      // 显示改进说明
      if (result.improvements && result.improvements.length > 0) {
        Modal.info({
          title: '优化改进',
          content: (
            <ul>
              {result.improvements.map((item, index) => (
                <li key={index}>{item}</li>
              ))}
            </ul>
          ),
          width: 600
        })
      }
    } catch (error) {
      message.error(`优化失败: ${(error as Error).message}`)
    } finally {
      setOptimizing(false)
    }
  }

  // 重新生成
  const handleRegenerate = () => {
    setGeneratedDraft(null)
    handleGenerate()
  }

  const handleCreateSubmit = async () => {
    try {
      const values = await form.validateFields()
      setSubmitting(true)

      await skillService.createSkill({
        id: values.id,
        name: values.name,
        content: values.behavior_guide,
        category: values.category
      })

      message.success('创建成功')
      setCreateModalOpen(false)
      form.resetFields()
      fetchSkills()
    } catch (error) {
      message.error(`创建失败: ${(error as Error).message}`)
    } finally {
      setSubmitting(false)
    }
  }

  const handleEditSubmit = async () => {
    if (!editingSkill) return

    try {
      const values = await form.validateFields()
      setSubmitting(true)

      await skillService.updateSkill(editingSkill.id, {
        name: values.name,
        content: values.behavior_guide
      })

      message.success('更新成功')
      setEditModalOpen(false)
      setEditingSkill(null)
      form.resetFields()
      fetchSkills()
    } catch (error) {
      message.error(`更新失败: ${(error as Error).message}`)
    } finally {
      setSubmitting(false)
    }
  }

  const columns: ColumnsType<Skill> = [
    {
      title: 'Skill ID',
      dataIndex: 'id',
      key: 'id',
      width: 200,
      render: (id: string, record: Skill) => (
        <Space>
          <span style={{ fontFamily: 'monospace' }}>{id}</span>
          {record.type === 'builtin' && (
            <Tooltip title="内置 Skill">
              <LockOutlined style={{ color: '#1890ff' }} />
            </Tooltip>
          )}
        </Space>
      )
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      render: (name: string, record: any) => {
        const isGenerating = (record as any)._isGenerating
        const taskProgress = (record as any)._taskProgress

        return (
          <Space direction="vertical" size="small">
            <Space>
              <span>{name}</span>
              {record.type === 'builtin' && <Badge count="系统" style={{ backgroundColor: '#1890ff' }} />}
              {isGenerating && (
                <Badge
                  count="生成中"
                  style={{
                    backgroundColor: '#52c41a',
                    animation: 'pulse 2s infinite'
                  }}
                />
              )}
            </Space>
            {isGenerating && taskProgress && (
              <Progress
                percent={taskProgress.current || 0}
                size="small"
                status="active"
                strokeColor={{
                  '0%': '#108ee9',
                  '100%': '#87d068',
                }}
              />
            )}
          </Space>
        )
      }
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      width: 100,
      filters: [
        { text: '内置', value: 'builtin' },
        { text: '用户', value: 'user' }
      ],
      onFilter: (value, record) => record.type === value,
      render: (type: string) => (
        <Tag color={type === 'builtin' ? 'blue' : 'green'} icon={type === 'builtin' ? <LockOutlined /> : undefined}>
          {type === 'builtin' ? '内置' : '用户'}
        </Tag>
      )
    },
    {
      title: '分类',
      dataIndex: 'category',
      key: 'category',
      width: 120,
      filters: categories.map(cat => ({ text: cat, value: cat })),
      onFilter: (value, record) => record.category === value,
      render: (category: string) => <Tag>{category}</Tag>
    },
    {
      title: 'References',
      key: 'references',
      width: 100,
      render: (_, record: Skill) => {
        const count = skillReferencesCount[record.id] ?? 0
        const loading = loadingReferences[record.id]

        if (loading) {
          return <Spin size="small" />
        }

        return (
          <Tooltip title="点击查看详情中的 References 标签页">
            <Tag
              icon={<FileTextOutlined />}
              color={count > 0 ? 'blue' : 'default'}
              style={{ cursor: 'pointer' }}
              onClick={() => handleView(record)}
            >
              {count} 个文件
            </Tag>
          </Tooltip>
        )
      }
    },
    {
      title: '版本',
      dataIndex: 'version',
      key: 'version',
      width: 100,
    },
    {
      title: '标签',
      dataIndex: 'tags',
      key: 'tags',
      width: 150,
      render: (tags: string[]) => (
        <Space size={[4, 4]} wrap>
          {tags?.slice(0, 3).map(tag => (
            <Tag key={tag} size="small">{tag}</Tag>
          ))}
          {tags?.length > 3 && <Tag size="small">+{tags.length - 3}</Tag>}
        </Space>
      )
    },
    {
      title: '操作',
      key: 'actions',
      width: 280,
      fixed: 'right',
      render: (_, record) => (
        <Space size="small">
          <Tooltip title="查看详情">
            <Button type="link" size="small" icon={<EyeOutlined />} onClick={() => handleView(record)}>
              查看
            </Button>
          </Tooltip>
          <Tooltip title="测试 Skill">
            <Button type="link" size="small" icon={<PlayCircleOutlined />} onClick={() => handleTest(record)}>
              测试
            </Button>
          </Tooltip>
          {record.type === 'user' && (
            <>
              <Tooltip title="编辑">
                <Button type="link" size="small" icon={<EditOutlined />} onClick={() => handleEdit(record)}>
                  编辑
                </Button>
              </Tooltip>
              <Tooltip title="复制">
                <Button type="link" size="small" icon={<CopyOutlined />} onClick={() => handleCopy(record)}>
                  复制
                </Button>
              </Tooltip>
              <Popconfirm
                title="确认删除"
                description="确定要删除这个 Skill 吗？"
                onConfirm={() => handleDelete(record)}
                okText="确认"
                cancelText="取消"
              >
                <Tooltip title="删除">
                  <Button type="link" size="small" danger icon={<DeleteOutlined />}>
                    删除
                  </Button>
                </Tooltip>
              </Popconfirm>
            </>
          )}
          {record.type === 'builtin' && (
            <>
              <Tooltip title="复制内置 Skill">
                <Button type="link" size="small" icon={<CopyOutlined />} onClick={() => handleCopy(record)}>
                  复制
                </Button>
              </Tooltip>
              <Tooltip title="内置 Skill 不可编辑">
                <Button type="link" size="small" icon={<LockOutlined />} disabled>
                  编辑
                </Button>
              </Tooltip>
            </>
          )}
        </Space>
      )
    }
  ]

  return (
    <div style={{ padding: '24px' }}>
      <Card
        title={
          <Space>
            <AppstoreOutlined />
            <span>Skills 管理中心</span>
          </Space>
        }
        extra={
          <Space>
            <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={handleCreate}
            >
              创建 Skill
            </Button>
          </Space>
        }
      >
        {/* 技能生成任务状态 */}
        {skillGenerationTasks.length > 0 && (
          <Alert
            type="info"
            showIcon
            style={{ marginBottom: 16 }}
            action={
              <Button size="small" onClick={() => getTaskPollingService().refresh()}>
                刷新
              </Button>
            }
          >
            <Space>
              <ClockCircleOutlined />
              <span>当前有 {skillGenerationTasks.length} 个 Skill 正在生成中</span>
            </Space>
          </Alert>
        )}

        {/* 搜索和筛选 */}
        <div style={{ marginBottom: '16px' }}>
          <Space size="large" wrap>
            <Search
              placeholder="搜索 Skills (名称/ID/分类)..."
              allowClear
              style={{ width: 350 }}
              onChange={(e) => setSearchText(e.target.value)}
              prefix={<SearchOutlined />}
            />
            <Space>
              <span>分类:</span>
              <Select
                mode="multiple"
                placeholder="选择分类"
                style={{ width: 250 }}
                value={selectedCategories}
                onChange={setSelectedCategories}
                allowClear
              >
                {categories.map(cat => (
                  <Option key={cat} value={cat}>{cat}</Option>
                ))}
              </Select>
            </Space>
            <Space>
              <span>视图:</span>
              <Switch
                checked={viewMode === 'grid'}
                onChange={(checked) => setViewMode(checked ? 'grid' : 'list')}
                checkedChildren="网格"
                unCheckedChildren="列表"
              />
            </Space>
            <Divider type="vertical" />
            <Tag color="blue">内置: {builtinSkills.length}</Tag>
            <Tag color="green">用户: {userSkills.length}</Tag>
            <Tag>总计: {skills.length}</Tag>
          </Space>
        </div>

        {/* Skills 列表 */}
        <Table
          columns={columns}
          dataSource={allDisplaySkills}
          rowKey="id"
          loading={loading}
          pagination={{
            pageSize: 10,
            showSizeChanger: true,
            showTotal: (total) => `共 ${total} 个 Skills`
          }}
          scroll={{ x: 1200 }}
        />
      </Card>

      {/* Skill 详情抽屉 - 使用 Drawer 替代 Modal 避免重叠 */}
      <Drawer
        title={
          <Space>
            <EyeOutlined />
            <span>{selectedSkill?.name}</span>
            {selectedSkill?.type === 'builtin' && <Badge count="系统" style={{ backgroundColor: '#1890ff' }} />}
          </Space>
        }
        placement="right"
        width={720}
        open={detailDrawerOpen}
        onClose={() => setDetailDrawerOpen(false)}
        extra={
          <Space>
            <Button
              icon={<PlayCircleOutlined />}
              onClick={() => {
                setDetailDrawerOpen(false)
                handleTest(selectedSkill!)
              }}
            >
              测试
            </Button>
            {selectedSkill?.type === 'user' && (
              <Button
                type="primary"
                icon={<EditOutlined />}
                onClick={() => {
                  setDetailDrawerOpen(false)
                  handleEdit(selectedSkill!)
                }}
              >
                编辑
              </Button>
            )}
          </Space>
        }
      >
        {selectedSkill && (
          <Tabs defaultActiveKey="info">
            <TabPane tab="基础信息" key="info">
              <Space direction="vertical" style={{ width: '100%' }} size="middle">
                <Card size="small" title="基本信息">
                  <Space direction="vertical" style={{ width: '100%' }} size="small">
                    <div>
                      <strong>Skill ID:</strong>
                      <p style={{ fontFamily: 'monospace', color: '#666', marginTop: '4px' }}>{selectedSkill.id}</p>
                    </div>
                    <Divider style={{ margin: '8px 0' }} />
                    <div>
                      <strong>名称:</strong>
                      <p style={{ marginTop: '4px' }}>{selectedSkill.name}</p>
                    </div>
                    <div>
                      <strong>版本:</strong>
                      <Tag color="blue" style={{ marginLeft: '8px' }}>{selectedSkill.version}</Tag>
                    </div>
                    <div>
                      <strong>类型:</strong>
                      <Tag
                        color={selectedSkill.type === 'builtin' ? 'blue' : 'green'}
                        icon={selectedSkill.type === 'builtin' ? <LockOutlined /> : undefined}
                        style={{ marginLeft: '8px' }}
                      >
                        {selectedSkill.type === 'builtin' ? '内置 (只读)' : '用户 (可编辑)'}
                      </Tag>
                    </div>
                    <div>
                      <strong>分类:</strong>
                      <Tag style={{ marginLeft: '8px' }}>{selectedSkill.category}</Tag>
                    </div>
                    {selectedSkill.created_at && (
                      <div>
                        <strong>创建时间:</strong>
                        <p style={{ color: '#666', marginTop: '4px' }}>
                          {dayjs(selectedSkill.created_at).format('YYYY-MM-DD HH:mm:ss')}
                        </p>
                      </div>
                    )}
                  </Space>
                </Card>

                <Card size="small" title="标签">
                  <Space size={[8, 8]} wrap>
                    {selectedSkill.tags && selectedSkill.tags.length > 0 ? (
                      selectedSkill.tags.map(tag => <Tag key={tag}>{tag}</Tag>)
                    ) : (
                      <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无标签" />
                    )}
                  </Space>
                </Card>
              </Space>
            </TabPane>

            <TabPane tab="行为指导 (核心)" key="behavior">
              <Card
                size="small"
                title="核心行为指导"
                extra={
                  <Button
                    size="small"
                    icon={<CopyOutlined />}
                    onClick={() => {
                      navigator.clipboard.writeText(selectedSkill.behavior_guide)
                      message.success('已复制到剪贴板')
                    }}
                  >
                    复制
                  </Button>
                }
              >
                <pre style={{
                  background: '#f5f5f5',
                  padding: '16px',
                  borderRadius: '4px',
                  maxHeight: '70vh',
                  overflowY: 'auto',
                  whiteSpace: 'pre-wrap',
                  wordBreak: 'break-word',
                  fontFamily: 'monospace',
                  fontSize: '13px',
                  lineHeight: '1.6'
                }}>
                  {selectedSkill.behavior_guide}
                </pre>
              </Card>
            </TabPane>

            <TabPane
              tab={
                <Space>
                  <span>References</span>
                  <Badge count={skillReferencesCount[selectedSkill.id] ?? 0} style={{ backgroundColor: '#1890ff' }} />
                </Space>
              }
              key="references"
            >
              <SkillReferencesView skillId={selectedSkill.id} />
            </TabPane>

            <TabPane tab="配置" key="config">
              <Card size="small" title="配置参数">
                <pre style={{
                  background: '#f5f5f5',
                  padding: '16px',
                  borderRadius: '4px',
                  maxHeight: '70vh',
                  overflowY: 'auto'
                }}>
                  {JSON.stringify(selectedSkill, null, 2)}
                </pre>
              </Card>
            </TabPane>
          </Tabs>
        )}
      </Drawer>

      {/* Skill 测试弹窗 */}
      <Modal
        title={
          <Space>
            <PlayCircleOutlined />
            <span>测试 Skill: {selectedSkill?.name}</span>
          </Space>
        }
        open={testModalOpen}
        onCancel={() => {
          setTestModalOpen(false)
          setTestInput('')
          setTestResult('')
        }}
        width={800}
        footer={null}
        destroyOnHidden
      >
        {selectedSkill && (
          <Space direction="vertical" style={{ width: '100%' }} size="large">
            <div>
              <div style={{ marginBottom: '8px' }}>
                <strong>测试输入:</strong>
                <span style={{ color: '#999', marginLeft: '8px', fontSize: '12px' }}>
                  输入要发送给 Skill 的内容
                </span>
              </div>
              <TextArea
                rows={4}
                placeholder="输入测试内容... 例如：请写一段关于春天的诗歌"
                value={testInput}
                onChange={(e) => setTestInput(e.target.value)}
              />
            </div>

            <Button
              type="primary"
              size="large"
              loading={testing}
              onClick={handleRunTest}
              disabled={!testInput.trim()}
              block
              icon={<PlayCircleOutlined />}
            >
              {testing ? '测试中...' : '开始测试'}
            </Button>

            {testResult && (
              <Card
                title={
                  <Space>
                    <CheckCircleOutlined style={{ color: '#52c41a' }} />
                    <span>测试结果</span>
                  </Space>
                }
                size="small"
                extra={
                  <Button
                    size="small"
                    icon={<CopyOutlined />}
                    onClick={() => {
                      navigator.clipboard.writeText(testResult)
                      message.success('已复制到剪贴板')
                    }}
                  >
                    复制结果
                  </Button>
                }
              >
                <pre style={{
                  whiteSpace: 'pre-wrap',
                  background: '#f5f5f5',
                  padding: '12px',
                  borderRadius: '4px',
                  maxHeight: '60vh',
                  overflowY: 'auto',
                  fontSize: '13px',
                  lineHeight: '1.6'
                }}>
                  {testResult}
                </pre>
              </Card>
            )}

            {!testing && !testResult && (
              <Card size="small" style={{ background: '#fafafa' }}>
                <Space direction="vertical" size="small">
                  <p style={{ margin: 0, color: '#666' }}>
                    <strong>提示:</strong> 输入测试内容后点击"开始测试"按钮
                  </p>
                  <p style={{ margin: 0, color: '#999', fontSize: '12px' }}>
                    测试将使用 Skill 的行为指导来生成响应
                  </p>
                </Space>
              </Card>
            )}
          </Space>
        )}
      </Modal>

      {/* 创建 Skill 弹窗 - AI 辅助版本 */}
      <Modal
        title={
          <Space>
            <PlusOutlined />
            <span>创建新 Skill</span>
          </Space>
        }
        open={createModalOpen}
        onCancel={() => {
          setCreateModalOpen(false)
          form.resetFields()
          setGeneratedDraft(null)
          setAiIdea('')
          setAiCategory(undefined)
        }}
        width={900}
        footer={null}
        destroyOnHidden
      >
        <Tabs
          activeKey={createMode}
          onChange={(key) => setCreateMode(key as CreateMode)}
          type="card"
        >
          {/* AI 辅助创建 */}
          <TabPane
            tab={
              <Space>
                <RobotOutlined />
                <span>AI 辅助创建</span>
              </Space>
            }
            key="ai"
          >
            <Space direction="vertical" style={{ width: '100%' }} size="large">
              {/* AI 输入区域 */}
              <Card size="small" title="1. 描述您的想法">
                <Space direction="vertical" style={{ width: '100%' }} size="middle">
                  <div>
                    <div style={{ marginBottom: '8px' }}>
                      <strong>您的想法:</strong>
                      <span style={{ color: '#999', marginLeft: '8px', fontSize: '12px' }}>
                        描述您想要的 Skill 功能和用途
                      </span>
                    </div>
                    <TextArea
                      rows={3}
                      placeholder="例如: 我想要一个能写现代都市对话的 Skill，要求对话自然、口语化，适合年轻人的交流方式..."
                      value={aiIdea}
                      onChange={(e) => setAiIdea(e.target.value)}
                    />
                  </div>

                  <div>
                    <strong>可选分类:</strong>
                    <Select
                      placeholder="选择分类（可选）"
                      style={{ width: '100%', marginTop: '8px' }}
                      value={aiCategory}
                      onChange={setAiCategory}
                      allowClear
                    >
                      <Option value="writing">写作</Option>
                      <Option value="dialogue">对话</Option>
                      <Option value="analysis">分析</Option>
                      <Option value="translation">翻译</Option>
                      <Option value="general">通用</Option>
                    </Select>
                  </div>

                  <Space>
                    <Button
                      type="primary"
                      size="large"
                      icon={<RobotOutlined />}
                      loading={generating}
                      onClick={handleGenerate}
                      disabled={!aiIdea.trim()}
                    >
                      {generating ? 'AI 生成中...' : 'AI 生成 Skill'}
                    </Button>
                    {generatedDraft && (
                      <Button
                        icon={<ReloadOutlined />}
                        onClick={handleRegenerate}
                        disabled={generating}
                      >
                        重新生成
                      </Button>
                    )}
                  </Space>
                </Space>
              </Card>

              {/* 生成的结果 */}
              {generatedDraft && (
                <>
                  <Alert
                    message="AI 生成成功"
                    description="您可以继续编辑下面的内容，或使用优化功能进一步改进"
                    type="success"
                    showIcon
                    closable
                  />

                  <Card
                    size="small"
                    title="2. 编辑和优化"
                    extra={
                      <Space>
                        <Button
                          size="small"
                          icon={<EditFilled />}
                          onClick={() => {
                            Modal.info({
                              title: '优化 Skill',
                              content: (
                                <Space direction="vertical" style={{ width: '100%' }}>
                                  <div>
                                    <strong>优化需求:</strong>
                                    <TextArea
                                      rows={3}
                                      placeholder="描述您希望如何改进这个 Skill..."
                                      value={optimizeRequirements}
                                      onChange={(e) => setOptimizeRequirements(e.target.value)}
                                    />
                                  </div>
                                  <Button
                                    type="primary"
                                    loading={optimizing}
                                    onClick={() => {
                                      handleOptimize()
                                    }}
                                    block
                                  >
                                    开始优化
                                  </Button>
                                </Space>
                              ),
                              width: 600,
                              okText: '取消'
                            })
                          }}
                        >
                          优化
                        </Button>
                      </Space>
                    }
                  >
                    <Form
                      form={form}
                      layout="vertical"
                      initialValues={{
                        tags: [],
                        category: 'general'
                      }}
                    >
                      <Form.Item
                        label="Skill ID"
                        name="id"
                        rules={[
                          { required: true, message: '请输入 Skill ID' },
                          { pattern: /^[a-z0-9-]+$/, message: '只能包含小写字母、数字和连字符' }
                        ]}
                      >
                        <InputComponent placeholder="例如: my-custom-skill" prefix={<AppstoreOutlined />} />
                      </Form.Item>

                      <Form.Item
                        label="Skill 名称"
                        name="name"
                        rules={[{ required: true, message: '请输入 Skill 名称' }]}
                      >
                        <InputComponent placeholder="例如: 自定义创作助手" />
                      </Form.Item>

                      <Form.Item
                        label="分类"
                        name="category"
                        rules={[{ required: true, message: '请选择分类' }]}
                      >
                        <Select placeholder="选择分类">
                          <Option value="writing">写作</Option>
                          <Option value="dialogue">对话</Option>
                          <Option value="analysis">分析</Option>
                          <Option value="translation">翻译</Option>
                          <Option value="general">通用</Option>
                        </Select>
                      </Form.Item>

                      <Form.Item
                        label="行为指导 (核心)"
                        name="behavior_guide"
                        rules={[{ required: true, message: '请输入行为指导' }]}
                        extra="这是 AI 执行任务时遵循的核心指导原则"
                      >
                        <TextArea
                          rows={10}
                          placeholder="AI 生成的行为指导将显示在这里..."
                          style={{ fontFamily: 'monospace', fontSize: '13px' }}
                        />
                      </Form.Item>

                      <Form.Item
                        label="标签"
                        name="tags"
                      >
                        <Select mode="tags" placeholder="输入标签后按回车">
                        </Select>
                      </Form.Item>
                    </Form>
                  </Card>
                </>
              )}

              {/* 保存按钮 */}
              {generatedDraft && (
                <Card size="small">
                  <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
                    <Button onClick={() => setCreateModalOpen(false)}>
                      取消
                    </Button>
                    <Button
                      type="primary"
                      loading={submitting}
                      onClick={handleCreateSubmit}
                      size="large"
                    >
                      保存 Skill
                    </Button>
                  </Space>
                </Card>
              )}
            </Space>
          </TabPane>

          {/* 手动创建 */}
          <TabPane
            tab={
              <Space>
                <EditOutlined />
                <span>手动创建</span>
              </Space>
            }
            key="manual"
          >
            <Form
              form={form}
              layout="vertical"
              initialValues={{
                tags: [],
                category: 'general'
              }}
            >
              <Form.Item
                label="Skill ID"
                name="id"
                rules={[
                  { required: true, message: '请输入 Skill ID' },
                  { pattern: /^[a-z0-9-]+$/, message: '只能包含小写字母、数字和连字符' }
                ]}
              >
                <InputComponent placeholder="例如: my-custom-skill" prefix={<AppstoreOutlined />} />
              </Form.Item>

              <Form.Item
                label="Skill 名称"
                name="name"
                rules={[{ required: true, message: '请输入 Skill 名称' }]}
              >
                <InputComponent placeholder="例如: 自定义创作助手" />
              </Form.Item>

              <Form.Item
                label="分类"
                name="category"
                rules={[{ required: true, message: '请选择分类' }]}
              >
                <Select placeholder="选择分类">
                  <Option value="writing">写作</Option>
                  <Option value="dialogue">对话</Option>
                  <Option value="analysis">分析</Option>
                  <Option value="translation">翻译</Option>
                  <Option value="general">通用</Option>
                </Select>
              </Form.Item>

              <Form.Item
                label="行为指导 (核心)"
                name="behavior_guide"
                rules={[{ required: true, message: '请输入行为指导' }]}
                extra="这是 AI 执行任务时遵循的核心指导原则"
              >
                <TextArea
                  rows={8}
                  placeholder="输入详细的行为指导... 例如：你是一个专业的编剧助手，擅长创作古风对话..."
                />
              </Form.Item>

              <Form.Item
                label="标签"
                name="tags"
              >
                <Select mode="tags" placeholder="输入标签后按回车">
                </Select>
              </Form.Item>
            </Form>

            <Card size="small" style={{ marginTop: '16px' }}>
              <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
                <Button onClick={() => setCreateModalOpen(false)}>
                  取消
                </Button>
                <Button
                  type="primary"
                  loading={submitting}
                  onClick={handleCreateSubmit}
                  size="large"
                >
                  创建 Skill
                </Button>
              </Space>
            </Card>
          </TabPane>

          {/* 从模板创建 - 快速创建 Skill */}
          <TabPane
            tab={
              <Space>
                <AppstoreOutlined />
                <span>快速创建</span>
              </Space>
            }
            key="template"
          >
            <Space direction="vertical" style={{ width: '100%' }} size="large">
              <Card
                size="small"
                title="创建新 Skill"
              >
                <Space direction="vertical" style={{ width: '100%' }} size="middle">
                  <div>
                    <div style={{ marginBottom: '8px' }}>
                      <strong>Skill ID:</strong>
                      <span style={{ color: '#999', marginLeft: '8px', fontSize: '12px' }}>
                        小写字母和连字符，如: my-awesome-skill
                      </span>
                    </div>
                    <InputComponent
                      placeholder="例如: my-awesome-skill"
                      value={templateSkillName}
                      onChange={(e) => setTemplateSkillName(e.target.value)}
                      prefix={<AppstoreOutlined />}
                    />
                  </div>

                  <Button
                    type="primary"
                    size="large"
                    icon={<AppstoreOutlined />}
                    loading={initializing}
                    onClick={handleInitFromTemplate}
                    disabled={!templateSkillName.trim()}
                    block
                  >
                    {initializing ? '创建中...' : '创建 Skill'}
                  </Button>

                  {initResult && (
                    <Alert
                      message="Skill 创建成功！"
                      description="请在下方完善 Skill 的内容"
                      type="success"
                      showIcon
                      closable
                    />
                  )}
                </Space>
              </Card>

              {initResult && (
                <>
                  <Alert
                    message="请完善 Skill 内容"
                    description="模板已创建，现在请完善下面的 Skill 信息"
                    type="info"
                    showIcon
                  />

                  <Card size="small" title="完善 Skill 信息">
                    <Form
                      form={form}
                      layout="vertical"
                      initialValues={{
                        tags: [],
                        category: 'general'
                      }}
                    >
                      <Form.Item
                        label="Skill ID"
                        name="id"
                        rules={[
                          { required: true, message: '请输入 Skill ID' },
                          { pattern: /^[a-z0-9-]+$/, message: '只能包含小写字母、数字和连字符' }
                        ]}
                      >
                        <InputComponent disabled prefix={<AppstoreOutlined />} />
                      </Form.Item>

                      <Form.Item
                        label="Skill 名称"
                        name="name"
                        rules={[{ required: true, message: '请输入 Skill 名称' }]}
                      >
                        <InputComponent placeholder="例如: 自定义创作助手" />
                      </Form.Item>

                      <Form.Item
                        label="分类"
                        name="category"
                        rules={[{ required: true, message: '请选择分类' }]}
                      >
                        <Select placeholder="选择分类">
                          <Option value="writing">写作</Option>
                          <Option value="dialogue">对话</Option>
                          <Option value="analysis">分析</Option>
                          <Option value="translation">翻译</Option>
                          <Option value="general">通用</Option>
                        </Select>
                      </Form.Item>

                      <Form.Item
                        label="行为指导 (核心)"
                        name="behavior_guide"
                        rules={[{ required: true, message: '请输入行为指导' }]}
                        extra="这是 AI 执行任务时遵循的核心指导原则"
                      >
                        <TextArea
                          rows={10}
                          placeholder="输入详细的行为指导..."
                          style={{ fontFamily: 'monospace', fontSize: '13px' }}
                        />
                      </Form.Item>

                      <Form.Item
                        label="标签"
                        name="tags"
                      >
                        <Select mode="tags" placeholder="输入标签后按回车">
                        </Select>
                      </Form.Item>
                    </Form>
                  </Card>

                  <Card size="small">
                    <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
                      <Button onClick={() => setCreateModalOpen(false)}>
                        取消
                      </Button>
                      <Button
                        type="primary"
                        loading={submitting}
                        onClick={handleCreateSubmit}
                        size="large"
                      >
                        保存 Skill
                      </Button>
                    </Space>
                  </Card>
                </>
              )}
            </Space>
          </TabPane>
        </Tabs>
      </Modal>

      {/* 编辑 Skill 弹窗 */}
      <Modal
        title={
          <Space>
            <EditOutlined />
            <span>编辑 Skill: {editingSkill?.name}</span>
          </Space>
        }
        open={editModalOpen}
        onCancel={() => {
          setEditModalOpen(false)
          setEditingSkill(null)
          form.resetFields()
        }}
        width={700}
        footer={[
          <Button key="cancel" onClick={() => setEditModalOpen(false)}>
            取消
          </Button>,
          <Button
            key="submit"
            type="primary"
            loading={submitting}
            onClick={handleEditSubmit}
          >
            保存
          </Button>
        ]}
        destroyOnHidden
      >
        <Form
          form={form}
          layout="vertical"
        >
          <Form.Item
            label="Skill ID"
            name="id"
          >
            <InputComponent disabled prefix={<AppstoreOutlined />} />
          </Form.Item>

          <Form.Item
            label="Skill 名称"
            name="name"
            rules={[{ required: true, message: '请输入 Skill 名称' }]}
          >
            <InputComponent placeholder="例如: 自定义创作助手" />
          </Form.Item>

          <Form.Item
            label="分类"
            name="category"
          >
            <Select disabled>
              <Option value="writing">写作</Option>
              <Option value="dialogue">对话</Option>
              <Option value="analysis">分析</Option>
              <Option value="translation">翻译</Option>
              <Option value="general">通用</Option>
            </Select>
          </Form.Item>

          <Form.Item
            label="行为指导 (核心)"
            name="behavior_guide"
            rules={[{ required: true, message: '请输入行为指导' }]}
          >
            <TextArea
              rows={8}
              placeholder="输入详细的行为指导..."
            />
          </Form.Item>

          <Form.Item
            label="标签"
            name="tags"
          >
            <Select mode="tags" placeholder="输入标签后按回车">
            </Select>
          </Form.Item>
        </Form>
      </Modal>

      {/* Skill 创建 - AI 自动生成 */}
      <SkillCreate
        visible={wizardVisible}
        onClose={() => {
          setWizardVisible(false)
          setEditingSkill(null)
          // 如果有跳转回退信息，关闭时跳转回去
          if (redirectState) {
            navigate(redirectState.path, {
              state: { activeTab: redirectState.activeTab, reviewSubTab: redirectState.reviewSubTab }
            })
            setRedirectState(null)
          }
        }}
        onSuccess={() => {
          fetchSkills()
          // 全局轮询服务会自动更新任务列表，无需手动刷新
          // 不自动关闭，让用户查看创建结果后主动关闭
          // setWizardVisible(false)
          // setEditingSkill(null)
        }}
        editingSkillId={editingSkill?.id}
      />
    </div>
  )
}
