/**
 * Skill 创建组件 - 统一流程
 *
 * **正确的创建流程**（遵循 skill-creator 标准）：
 * 1. 用户输入需求
 * 2. AI 使用 skill-creator 标准生成基础 SKILL.md
 * 3. 用户预览完整内容（可手动编辑）
 * 4. 可选择上传 references（文档/GitHub/PDF）
 * 5. 保存为完整 Skill（包含 SKILL.md + references/）
 *
 * **关键修复**：
 * - AI 生成和 References 上传是同一流程的不同步骤，而非分离的模式
 * - 预览内容完整显示，无高度限制
 * - 支持在编辑时随意增删 references
 */
import { useState, useRef, useEffect } from 'react'
import {
  Modal,
  Form,
  Input,
  Button,
  Space,
  Card,
  Alert,
  message,
  Typography,
  Tag,
  Upload,
  Divider,
  Steps,
  Tabs,
  Row,
  Col,
  List,
  Popconfirm
} from 'antd'
import {
  RobotOutlined,
  FileTextOutlined,
  UploadOutlined,
  LinkOutlined,
  GithubOutlined,
  PlusOutlined,
  DeleteOutlined,
  EditOutlined,
  SaveOutlined,
  ArrowLeftOutlined,
  EyeOutlined,
  InboxOutlined,
  CopyOutlined
} from '@ant-design/icons'
import { skillService } from '@/services'
import { taskService } from '@/services/taskService'
import TaskProgressTracker from '@/components/TaskProgressTracker'

const { TextArea } = Input
const { Text } = Typography
const { Step } = Steps
const { TabPane } = Tabs

interface SkillCreateProps {
  visible: boolean
  onClose: () => void
  onSuccess: () => void
  editingSkillId?: string  // 如果传入，表示编辑模式
}

interface ReferenceFile {
  id: string
  type: 'url' | 'github' | 'upload' | 'manual'
  filename: string
  url?: string
  content?: string
  size?: number
  uploadedAt: Date
}

interface GeneratedSkill {
  suggested_id: string
  suggested_name: string
  skill_content: string
  category: string
  suggested_tags: string[]
  explanation: string
}

type CreateStep = 'input' | 'generating' | 'preview' | 'references' | 'saving'

const SkillCreateComponent: React.FC<SkillCreateProps> = ({
  visible,
  onClose,
  onSuccess,
  editingSkillId
}) => {
  const [form] = Form.useForm()

  // 使用 ref 跟踪弹窗实际可见性（避免闭包问题）
  const dialogVisibleRef = useRef(visible)

  // 当 visible prop 变化时更新 ref
  useEffect(() => {
    dialogVisibleRef.current = visible
  }, [visible])

  // 步骤状态
  const [step, setStep] = useState<CreateStep>('input')
  const [aiDescription, setAiDescription] = useState('')
  const [generating, setGenerating] = useState(false)
  const [currentTaskId, setCurrentTaskId] = useState<string | null>(null)

  // 生成的Skill内容
  const [generatedSkill, setGeneratedSkill] = useState<GeneratedSkill | null>(null)
  const [editingContent, setEditingContent] = useState(false)
  const [saving, setSaving] = useState(false)

  // References管理
  const [references, setReferences] = useState<ReferenceFile[]>([])
  const [activeReferenceTab, setActiveReferenceTab] = useState<'url' | 'github' | 'upload' | 'manual'>('url')
  const [urlInput, setUrlInput] = useState('')
  const [githubInput, setGithubInput] = useState('')
  const [manualFileName, setManualFileName] = useState('')
  const [manualContent, setManualContent] = useState('')

  // 预览ID（用于保存）
  const [previewId, setPreviewId] = useState<string | null>(null)

  const contentPreviewRef = useRef<HTMLDivElement>(null)

  // LocalStorage key for saving task state
  const SKILL_TASK_STORAGE_KEY = 'skill_generation_task'

  // 重置表单
  const resetForm = () => {
    setStep('input')
    setAiDescription('')
    setGeneratedSkill(null)
    setEditingContent(false)
    setReferences([])
    setUrlInput('')
    setGithubInput('')
    setManualFileName('')
    setManualContent('')
    setPreviewId(null)
    // 不清除 currentTaskId，让用户可以继续跟踪任务
    form.resetFields()
  }

  // 加载编辑中的Skill
  useEffect(() => {
    if (editingSkillId && visible) {
      loadSkillForEdit(editingSkillId)
    } else if (visible) {
      // 检查是否有正在进行的任务
      const savedTask = localStorage.getItem(SKILL_TASK_STORAGE_KEY)
      if (savedTask) {
        try {
          const taskData = JSON.parse(savedTask)
          // 检查任务是否是最近的（10分钟内）
          const taskAge = Date.now() - taskData.timestamp
          if (taskAge < 10 * 60 * 1000 && taskData.taskId && taskData.description) {
            setCurrentTaskId(taskData.taskId)
            setAiDescription(taskData.description)
            setStep('generating')
            setGenerating(true)

            // 继续轮询任务
            const pollSavedTask = async () => {
              try {
                const result = await taskService.pollTask(taskData.taskId, (progress) => {
                  console.log('Task progress:', progress)
                })

                if (result.success && result.result) {
                  const skillData = result.result
                  setGeneratedSkill({
                    suggested_id: skillData.suggested_id,
                    suggested_name: skillData.suggested_name,
                    skill_content: skillData.skill_content,
                    category: skillData.category,
                    suggested_tags: skillData.suggested_tags,
                    explanation: skillData.explanation
                  })
                  form.setFieldsValue({ content: skillData.skill_content })
                  setStep('preview')
                  setGenerating(false)
                  setCurrentTaskId(null)
                  localStorage.removeItem(SKILL_TASK_STORAGE_KEY)
                  message.success('AI 生成成功！您可以预览和编辑内容')
                }
              } catch (error) {
                message.error(`AI 生成失败: ${(error as Error).message}`)
                setStep('input')
                setGenerating(false)
                setCurrentTaskId(null)
                localStorage.removeItem(SKILL_TASK_STORAGE_KEY)
              }
            }

            pollSavedTask()
            message.info('检测到正在进行的生成任务，正在继续...')
            return
          }
        } catch (error) {
          console.error('Failed to parse saved task:', error)
          localStorage.removeItem(SKILL_TASK_STORAGE_KEY)
        }
      }
      resetForm()
      setStep('input')
    }
  }, [visible, editingSkillId])

  const loadSkillForEdit = async (skillId: string) => {
    try {
      // 检查是否是虚拟的 task ID（正在生成中的 skill）
      // 这种 ID 以 "task-" 开头，不是真实的 skill，不应该加载
      if (skillId.startsWith('task-')) {
        console.log('[SkillCreate] Skipping load for virtual task ID:', skillId)
        message.info('该 Skill 正在生成中，请等待生成完成后再编辑')
        handleClose()
        return
      }

      const result = await skillService.getSkillWithReferences(skillId, true)
      if (result) {
        const { skill, references: refs } = result

        // 设置生成的内容
        setGeneratedSkill({
          suggested_id: skill.id,
          suggested_name: skill.name,
          skill_content: skill.behavior_guide,
          category: skill.category,
          suggested_tags: skill.tags || [],
          explanation: `正在编辑 Skill: ${skill.name}`
        })

        form.setFieldsValue({
          content: skill.behavior_guide
        })

        // 加载references
        if (refs) {
          const refFiles: ReferenceFile[] = Object.entries(refs).map(([filename, content], idx) => ({
            id: `ref-${idx}`,
            type: 'manual',
            filename,
            content: content as string,
            uploadedAt: new Date()
          }))
          setReferences(refFiles)
        }

        setStep('preview')
      }
    } catch (error) {
      message.error(`加载Skill失败: ${(error as Error).message}`)
      // 关闭弹窗，让父组件处理重定向
      handleClose()
    }
  }

  const handleClose = () => {
    // 如果有后台任务正在运行，可以关闭弹窗让任务继续在后台运行
    if (currentTaskId && generating) {
      message.info('任务将在后台继续运行，您可以稍后再来查看结果')
    }
    resetForm()
    onClose()
  }

  // ========== 步骤1: 输入需求 ==========
  const handleGenerate = async () => {
    if (!aiDescription.trim()) {
      message.warning('请描述你想要创建的 Skill')
      return
    }

    setGenerating(true)
    setStep('generating')

    try {
      // 创建异步任务
      const response = await taskService.generateSkill({
        description: aiDescription,
        temperature: 0.7
      })

      const taskId = response.taskId
      setCurrentTaskId(taskId)

      // 保存任务信息到 localStorage，以便关闭弹窗后恢复
      localStorage.setItem(SKILL_TASK_STORAGE_KEY, JSON.stringify({
        taskId,
        description: aiDescription,
        timestamp: Date.now()
      }))

      message.success('任务已创建，正在后台生成中...您可以关闭此弹窗，生成完成后会自动保存')

      // 启动后台轮询，但不阻塞 UI
      const pollTaskInBackground = async () => {
        try {
          const result = await taskService.pollTask(taskId, (progress) => {
            console.log('Task progress:', progress)
          })

          // 任务完成后，如果弹窗还开着，显示结果
          if (result.success && result.result) {
            const skillData = result.result
            console.log('Task completed, skill data:', skillData)

            // 清除 localStorage 中的任务信息
            localStorage.removeItem(SKILL_TASK_STORAGE_KEY)

            // 检查弹窗是否还打开（使用 ref 避免闭包问题）
            if (dialogVisibleRef.current) {
              // 弹窗打开：显示结果供用户查看
              // 注意：后端已经自动保存了，这里只是显示结果
              setGeneratedSkill({
                suggested_id: skillData.suggested_id,
                suggested_name: skillData.suggested_name,
                skill_content: skillData.skill_content,
                category: skillData.category,
                suggested_tags: skillData.suggested_tags,
                explanation: skillData.explanation
              })

              form.setFieldsValue({
                content: skillData.skill_content
              })

              setStep('preview')

              const savedInfo = skillData.auto_saved
                ? `${skillData.suggested_name} 已自动保存！(ID: ${skillData.saved_skill_id})`
                : `${skillData.suggested_name} 生成完成！`

              message.success(savedInfo)

              // 通知父组件刷新列表
              onSuccess()
            } else {
              // 弹窗已关闭：后端已经自动保存，只需通知用户
              console.log('Dialog closed, skill was auto-saved by backend')
              if (skillData.auto_saved) {
                message.success(`${skillData.suggested_name} 已自动保存到 skills 列表！`)
                // 通知父组件刷新列表
                onSuccess()
              } else if (skillData.save_error) {
                message.warning(`生成完成但自动保存失败: ${skillData.save_error}`)
              }
            }
          } else {
            throw new Error(result.error || '生成失败')
          }
        } catch (error) {
          message.error(`AI 生成失败: ${(error as Error).message}`)
          setStep('input')
          // 清除 localStorage 中的任务信息
          localStorage.removeItem(SKILL_TASK_STORAGE_KEY)
        } finally {
          setGenerating(false)
          setCurrentTaskId(null)
        }
      }

      // 启动后台轮询
      pollTaskInBackground()
    } catch (error) {
      message.error(`任务创建失败: ${(error as Error).message}`)
      setGenerating(false)
      setStep('input')
    }
  }

  // ========== 步骤2: 预览和编辑 ==========
  const handleStartEditing = () => {
    setEditingContent(true)
  }

  const handleCancelEdit = () => {
    if (generatedSkill) {
      form.setFieldsValue({ content: generatedSkill.skill_content })
    }
    setEditingContent(false)
  }

  const handleConfirmEdit = () => {
    const newContent = form.getFieldValue('content')
    if (newContent && generatedSkill) {
      setGeneratedSkill({
        ...generatedSkill,
        skill_content: newContent
      })
      message.success('内容已更新')
    }
    setEditingContent(false)
  }

  // 使用AI调整内容
  const [refineModalVisible, setRefineModalVisible] = useState(false)
  const [refinePrompt, setRefinePrompt] = useState('')

  const handleRefineWithAI = async () => {
    const currentContent = form.getFieldValue('content')
    if (!currentContent) {
      message.warning('没有可调整的内容')
      return
    }

    setRefinePrompt('')
    setRefineModalVisible(true)
  }

  const confirmRefineWithAI = async () => {
    if (!refinePrompt.trim()) {
      message.warning('请输入调整需求')
      return
    }

    const currentContent = form.getFieldValue('content')
    setRefineModalVisible(false)
    setGenerating(true)

    try {
      const result = await skillService.refineSkill(currentContent, refinePrompt, 0.7)

      if (result.success) {
        form.setFieldsValue({ content: result.refined_content })
        setGeneratedSkill(prev => prev ? { ...prev, skill_content: result.refined_content } : null)

        Modal.info({
          title: '调整完成',
          content: (
            <div>
              <p><strong>变更说明：</strong>{result.changes_summary}</p>
              <p>原始长度: {result.original_length} 字符</p>
              <p>新长度: {result.new_length} 字符</p>
            </div>
          )
        })
      }
    } catch (error) {
      message.error(`调整失败: ${(error as Error).message}`)
    } finally {
      setGenerating(false)
    }
  }

  // 复制内容到剪贴板
  const handleCopyContent = () => {
    const content = form.getFieldValue('content')
    if (content) {
      navigator.clipboard.writeText(content)
      message.success('已复制到剪贴板')
    }
  }

  // ========== 步骤3: References管理 ==========
  const handleAddUrlReference = async () => {
    if (!urlInput.trim()) {
      message.warning('请输入文档URL')
      return
    }

    try {
      const result = await skillService.fetchDoc(urlInput)
      if (result.success) {
        const ref: ReferenceFile = {
          id: `ref-${Date.now()}`,
          type: 'url',
          filename: result.title || 'untitled',
          url: urlInput,
          content: result.content,
          uploadedAt: new Date()
        }
        setReferences([...references, ref])
        setUrlInput('')
        message.success('文档获取成功')
      } else {
        message.error(`获取文档失败: ${result.error}`)
      }
    } catch (error) {
      message.error(`获取文档失败: ${(error as Error).message}`)
    }
  }

  const handleAddGithubReference = async () => {
    if (!githubInput.trim()) {
      message.warning('请输入GitHub仓库URL')
      return
    }

    // 解析GitHub URL
    const match = githubInput.match(/github\.com\/([^/]+)\/([^/]+)/)
    if (!match) {
      message.warning('GitHub URL格式不正确，应为: https://github.com/owner/repo')
      return
    }

    const repoUrl = `https://github.com/${match[1]}/${match[2]}`
    const docsPath = 'README.md' // 默认读取README

    try {
      const result = await skillService.fetchGithubDoc(repoUrl, docsPath)
      if (result.success) {
        const ref: ReferenceFile = {
          id: `ref-${Date.now()}`,
          type: 'github',
          filename: `${match[2]}-${docsPath}`,
          url: githubInput,
          content: result.content,
          uploadedAt: new Date()
        }
        setReferences([...references, ref])
        setGithubInput('')
        message.success('GitHub文档获取成功')
      } else {
        message.error(`获取GitHub文档失败: ${result.error}`)
      }
    } catch (error) {
      message.error(`获取GitHub文档失败: ${(error as Error).message}`)
    }
  }

  const handleAddManualReference = () => {
    if (!manualFileName.trim() || !manualContent.trim()) {
      message.warning('请输入文件名和内容')
      return
    }

    const ref: ReferenceFile = {
      id: `ref-${Date.now()}`,
      type: 'manual',
      filename: manualFileName.endsWith('.md') ? manualFileName : `${manualFileName}.md`,
      content: manualContent,
      uploadedAt: new Date()
    }

    setReferences([...references, ref])
    setManualFileName('')
    setManualContent('')
    message.success('参考文档添加成功')
  }

  const handleUploadFiles = (file: File) => {
    // 文件上传处理（TODO: 实际上传到服务器）
    const reader = new FileReader()
    reader.onload = (e) => {
      const ref: ReferenceFile = {
        id: `ref-${Date.now()}`,
        type: 'upload',
        filename: file.name,
        content: e.target?.result as string,
        size: file.size,
        uploadedAt: new Date()
      }
      setReferences([...references, ref])
    }
    reader.readAsText(file)
    return false // 阻止自动上传
  }

  const handleDeleteReference = (refId: string) => {
    setReferences(references.filter(r => r.id !== refId))
    message.success('参考文档已删除')
  }

  const handleViewReference = (ref: ReferenceFile) => {
    Modal.info({
      title: ref.filename,
      width: 900,
      content: (
        <div style={{
          maxHeight: '70vh',
          overflowY: 'auto',
          background: '#f5f5f5',
          padding: '16px',
          borderRadius: '4px',
          whiteSpace: 'pre-wrap',
          wordBreak: 'break-word',
          fontFamily: 'monospace',
          fontSize: '13px',
          lineHeight: '1.6'
        }}>
          {ref.content}
        </div>
      )
    })
  }

  // ========== 步骤4: 保存 ==========
  const handleSaveSkill = async () => {
    if (!generatedSkill) return

    setSaving(true)
    try {
      const skillContent = form.getFieldValue('content')

      // 构建references对象
      const referencesObj: Record<string, string> = {}
      references.forEach(ref => {
        referencesObj[ref.filename] = ref.content || ''
      })

      // 判断是新建还是编辑
      if (editingSkillId) {
        // 编辑模式：更新现有Skill
        await skillService.updateSkillWithReferences(
          editingSkillId,
          skillContent,
          referencesObj
        )
        message.success('Skill 更新成功！')
      } else {
        // 新建模式：创建新Skill
        // 如果没有previewId，先生成一个
        let currentPreviewId = previewId
        if (!currentPreviewId) {
          const previewResult = await skillService.previewSkill({
            skill_content: skillContent,
            skill_name: generatedSkill.suggested_name,
            category: generatedSkill.category,
            tags: generatedSkill.suggested_tags
          })
          currentPreviewId = previewResult.preview_id
          setPreviewId(currentPreviewId)
        }

        // 保存Skill
        await skillService.saveSkillFromPreview(
          currentPreviewId,
          generatedSkill.suggested_id,
          skillContent,
          referencesObj
        )
        message.success('Skill 创建成功！')
      }

      onSuccess()
      handleClose()
    } catch (error) {
      message.error(`保存失败: ${(error as Error).message}`)
    } finally {
      setSaving(false)
    }
  }

  // 计算步骤进度
  const getStepProgress = () => {
    switch (step) {
      case 'input': return 0
      case 'generating': return 1
      case 'preview': return 2
      case 'references': return 2
      case 'saving': return 3
      default: return 0
    }
  }

  return (
    <>
    <Modal
      title={
        <Space>
          <RobotOutlined />
          <span>{editingSkillId ? '编辑 Skill' : '创建 Skill'}</span>
        </Space>
      }
      open={visible}
      onCancel={handleClose}
      footer={null}
      width={1000}
      destroyOnHidden
    >
      <Space direction="vertical" style={{ width: '100%' }} size="large">

        {/* 步骤指示器 */}
        <Steps current={getStepProgress()} size="small">
          <Step title="输入需求" />
          <Step title="AI生成" />
          <Step title="预览编辑" />
          <Step title="添加References" />
          <Step title="完成" />
        </Steps>

        {/* ========== 步骤1: 输入需求 ========== */}
        {step === 'input' && (
          <Card>
            <Alert
              message="描述你想要的 Skill"
              description="AI 会根据你的描述，结合 skill-creator 标准，自动生成完整的 SKILL.md。之后你可以预览、编辑，并选择性地添加参考文档（references）。"
              type="info"
              showIcon
              style={{ marginBottom: '16px' }}
            />

            <Form layout="vertical">
              <Form.Item label="需求描述">
                <TextArea
                  value={aiDescription}
                  onChange={(e) => setAiDescription(e.target.value)}
                  placeholder="描述你想要创建的 Skill 功能和要求... 例如：我想创建一个古风对话创作的 Skill，让角色说话符合古代身份和性格"
                  rows={6}
                  showCount
                  maxLength={1000}
                />
              </Form.Item>

              <Button
                type="primary"
                size="large"
                block
                icon={<RobotOutlined />}
                disabled={!aiDescription.trim()}
                onClick={handleGenerate}
              >
                AI 生成 Skill
              </Button>
            </Form>
          </Card>
        )}

        {/* ========== 生成中 ========== */}
        {step === 'generating' && currentTaskId && (
          <Card title="AI 正在生成 Skill..." style={{ marginBottom: 16 }}>
            <Alert
              message="任务已在后台创建"
              description="您可以关闭此弹窗，任务将在后台继续运行。稍后重新打开创建弹窗即可查看生成结果。"
              type="info"
              showIcon
              closable
              style={{ marginBottom: 16 }}
            />
            <TaskProgressTracker
              taskId={currentTaskId}
              onComplete={() => {
                // 任务完成后的处理逻辑已经在 handleGenerate 中了
              }}
              onError={(error) => {
                message.error(`生成失败: ${error}`)
              }}
            />
            <div style={{ marginTop: 16, textAlign: 'center' }}>
              <Button onClick={handleClose}>
                后台运行并关闭
              </Button>
            </div>
          </Card>
        )}

        {/* ========== 步骤2&3: 预览和编辑 / 添加References ========== */}
        {(step === 'preview' || step === 'references') && generatedSkill && (
          <Space direction="vertical" style={{ width: '100%' }} size="large">

            {/* 基本信息卡片 */}
            <Alert
              message="生成成功"
              description={
                <Space direction="vertical" size="small">
                  <Text><strong>名称：</strong>{generatedSkill.suggested_name}</Text>
                  <Text><strong>分类：</strong><Tag color="blue">{generatedSkill.category}</Tag></Text>
                  <Text><strong>说明：</strong>{generatedSkill.explanation}</Text>
                  <Text><strong>References：</strong>{references.length} 个文件</Text>
                </Space>
              }
              type="success"
              showIcon
              action={
                <Button
                  size="small"
                  icon={<EditOutlined />}
                  onClick={() => setStep(step === 'preview' ? 'references' : 'preview')}
                >
                  {step === 'preview' ? '添加References' : '返回预览'}
                </Button>
              }
            />

            {/* 预览/编辑 SKILL.md */}
            {step === 'preview' && (
              <Card
                title="SKILL.md 内容"
                extra={
                  <Space>
                    {!editingContent && (
                      <>
                        <Button size="small" icon={<EditOutlined />} onClick={handleStartEditing}>
                          编辑
                        </Button>
                        <Button size="small" icon={<CopyOutlined />} onClick={handleCopyContent}>
                          复制
                        </Button>
                        <Button size="small" onClick={handleRefineWithAI}>
                          AI调整
                        </Button>
                      </>
                    )}
                    {editingContent && (
                      <>
                        <Button size="small" onClick={handleCancelEdit}>
                          取消
                        </Button>
                        <Button size="small" type="primary" onClick={handleConfirmEdit}>
                          确认
                        </Button>
                      </>
                    )}
                  </Space>
                }
              >
                <Form form={form} layout="vertical">
                  <Form.Item name="content">
                    {editingContent ? (
                      <TextArea
                        rows={25}
                        style={{
                          fontFamily: 'monospace',
                          fontSize: '13px',
                          lineHeight: '1.6'
                        }}
                      />
                    ) : (
                      <div
                        ref={contentPreviewRef}
                        style={{
                          background: '#f5f5f5',
                          padding: '16px',
                          borderRadius: '4px',
                          // 关键修复：移除高度限制，让内容完整显示
                          maxHeight: '70vh',
                          overflowY: 'auto',
                          whiteSpace: 'pre-wrap',
                          wordBreak: 'break-word',
                          fontFamily: 'monospace',
                          fontSize: '13px',
                          lineHeight: '1.6'
                        }}
                      >
                        {form.getFieldValue('content')}
                      </div>
                    )}
                  </Form.Item>
                </Form>

                {/* 标签显示 */}
                <Row gutter={16} style={{ marginTop: '16px' }}>
                  <Col span={12}>
                    <Text type="secondary">分类：</Text>
                    <Tag color="blue">{generatedSkill.category}</Tag>
                  </Col>
                  <Col span={12}>
                    <Text type="secondary">标签：</Text>
                    <Space size={[4, 4]} wrap>
                      {generatedSkill.suggested_tags.map((tag) => (
                        <Tag key={tag}>{tag}</Tag>
                      ))}
                    </Space>
                  </Col>
                </Row>
              </Card>
            )}

            {/* References管理 */}
            {step === 'references' && (
              <Card
                title={
                  <Space>
                    <FileTextOutlined />
                    <span>参考文档 (References)</span>
                    <Tag color="green">{references.length}</Tag>
                  </Space>
                }
                extra={
                  <Button
                    size="small"
                    icon={<ArrowLeftOutlined />}
                    onClick={() => setStep('preview')}
                  >
                    返回预览
                  </Button>
                }
              >
                <Space direction="vertical" style={{ width: '100%' }} size="large">

                  {/* 添加References的选项卡 */}
                  <Tabs activeKey={activeReferenceTab} onChange={(key) => setActiveReferenceTab(key as any)}>
                    {/* URL获取 */}
                    <TabPane tab="文档URL" key="url">
                      <Space direction="vertical" style={{ width: '100%' }}>
                        <Input
                          placeholder="输入文档URL（支持HTML/Markdown页面）"
                          prefix={<LinkOutlined />}
                          value={urlInput}
                          onChange={(e) => setUrlInput(e.target.value)}
                          onPressEnter={handleAddUrlReference}
                        />
                        <Button
                          type="primary"
                          icon={<PlusOutlined />}
                          onClick={handleAddUrlReference}
                          disabled={!urlInput.trim()}
                        >
                          获取文档
                        </Button>
                      </Space>
                    </TabPane>

                    {/* GitHub获取 */}
                    <TabPane tab="GitHub" key="github">
                      <Space direction="vertical" style={{ width: '100%' }}>
                        <Input
                          placeholder="GitHub仓库URL，如: https://github.com/owner/repo"
                          prefix={<GithubOutlined />}
                          value={githubInput}
                          onChange={(e) => setGithubInput(e.target.value)}
                        />
                        <Button
                          type="primary"
                          icon={<PlusOutlined />}
                          onClick={handleAddGithubReference}
                          disabled={!githubInput.trim()}
                        >
                          获取README
                        </Button>
                      </Space>
                    </TabPane>

                    {/* 文件上传 */}
                    <TabPane tab="上传文件" key="upload">
                      <Upload
                        accept=".md,.txt,.json,.yaml,.yml"
                        showUploadList={false}
                        beforeUpload={handleUploadFiles}
                      >
                        <Button icon={<UploadOutlined />}>选择文件</Button>
                      </Upload>
                      <Text type="secondary" style={{ marginLeft: '8px' }}>
                        支持 .md, .txt, .json, .yaml, .yml
                      </Text>
                    </TabPane>

                    {/* 手动输入 */}
                    <TabPane tab="手动输入" key="manual">
                      <Space direction="vertical" style={{ width: '100%' }}>
                        <Input
                          placeholder="文件名 (如: api-reference.md)"
                          value={manualFileName}
                          onChange={(e) => setManualFileName(e.target.value)}
                        />
                        <TextArea
                          placeholder="输入文档内容..."
                          rows={4}
                          value={manualContent}
                          onChange={(e) => setManualContent(e.target.value)}
                        />
                        <Button
                          type="primary"
                          icon={<PlusOutlined />}
                          onClick={handleAddManualReference}
                          disabled={!manualFileName.trim() || !manualContent.trim()}
                        >
                          添加
                        </Button>
                      </Space>
                    </TabPane>
                  </Tabs>

                  {/* References列表 */}
                  <Divider orientation="left">已添加的 References ({references.length})</Divider>

                  {references.length === 0 ? (
                    <div style={{ textAlign: 'center', padding: '40px', background: '#fafafa' }}>
                      <InboxOutlined style={{ fontSize: '48px', color: '#ccc' }} />
                      <div style={{ marginTop: '16px', color: '#999' }}>
                        暂无参考文档，可以选择性添加
                      </div>
                    </div>
                  ) : (
                    <List
                      dataSource={references}
                      renderItem={(ref) => (
                        <List.Item
                          actions={[
                            <Button
                              size="small"
                              type="link"
                              icon={<EyeOutlined />}
                              onClick={() => handleViewReference(ref)}
                            >
                              查看
                            </Button>,
                            <Popconfirm
                              title="确定删除这个参考文档吗？"
                              onConfirm={() => handleDeleteReference(ref.id)}
                              okText="确定"
                              cancelText="取消"
                            >
                              <Button size="small" type="link" danger icon={<DeleteOutlined />}>
                                删除
                              </Button>
                            </Popconfirm>
                          ]}
                        >
                          <List.Item.Meta
                            avatar={
                              ref.type === 'url' ? <LinkOutlined /> :
                              ref.type === 'github' ? <GithubOutlined /> :
                              ref.type === 'upload' ? <UploadOutlined /> :
                              <FileTextOutlined />
                            }
                            title={
                              <Space>
                                <span>{ref.filename}</span>
                                <Tag color={ref.type === 'url' ? 'blue' : ref.type === 'github' ? 'purple' : 'default'}>
                                  {ref.type}
                                </Tag>
                                {ref.size && <Text type="secondary">({(ref.size / 1024).toFixed(1)}KB)</Text>}
                              </Space>
                            }
                            description={
                              ref.url ? (
                                <Text copyable={{ text: ref.url }} style={{ fontSize: '12px' }}>
                                  {ref.url}
                                </Text>
                              ) : (
                                <Text type="secondary" style={{ fontSize: '12px' }}>
                                  {ref.content?.substring(0, 100)}...
                                </Text>
                              )
                            }
                          />
                        </List.Item>
                      )}
                    />
                  )}

                  {/* 说明 */}
                  <Alert
                    message="关于 References"
                    description="References 是可选的参考文档，会被存储在 Skill 的 references/ 目录中。按照 skill-creator 标准，这些文档应该在需要时被加载到上下文中，用于提供更详细的参考信息。"
                    type="info"
                    showIcon
                  />
                </Space>
              </Card>
            )}

            {/* 保存按钮区域 */}
            <Card>
              <Space style={{ width: '100%', justifyContent: 'space-between' }}>
                <Button onClick={handleClose}>
                  取消
                </Button>
                <Space>
                  {step === 'references' && (
                    <Button onClick={() => setStep('preview')}>
                      返回预览
                    </Button>
                  )}
                  <Button
                    type="primary"
                    size="large"
                    icon={<SaveOutlined />}
                    loading={saving}
                    onClick={handleSaveSkill}
                  >
                    保存 Skill
                  </Button>
                </Space>
              </Space>
            </Card>
          </Space>
        )}
      </Space>
    </Modal>

    {/* AI 调整弹窗 */}
    <Modal
      title="输入调整需求"
      open={refineModalVisible}
      onOk={confirmRefineWithAI}
      onCancel={() => setRefineModalVisible(false)}
      okText="开始调整"
      cancelText="取消"
    >
      <Space direction="vertical" style={{ width: '100%' }}>
        <TextArea
          rows={4}
          placeholder="例如：把内容改得更简洁、增加代码示例、优化描述..."
          value={refinePrompt}
          onChange={(e) => setRefinePrompt(e.target.value)}
        />
      </Space>
    </Modal>
  </>
  )
}

// 导出组件
const SkillCreate = SkillCreateComponent
export default SkillCreate