<template>
  <a-drawer
    :open="visible"
    :title="skill?.name || '技能详情'"
    :width="560"
    @close="$emit('close')"
  >
    <template v-if="skill">
      <a-descriptions :column="1" bordered size="small">
        <a-descriptions-item label="名称">{{ skill.name }}</a-descriptions-item>
        <a-descriptions-item label="版本">{{ skill.version || '-' }}</a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-badge
            :status="skill.health_status === 'healthy' ? 'success' : 'warning'"
            :text="skill.health_status === 'healthy' ? '正常' : skill.health_status"
          />
        </a-descriptions-item>
        <a-descriptions-item label="描述">
          {{ skill.description || '暂无描述' }}
        </a-descriptions-item>
      </a-descriptions>

      <a-divider orientation="left">能力标签</a-divider>
      <div class="skill-detail__tags">
        <a-tag v-for="cap in skill.capabilities" :key="cap" color="blue">{{ cap }}</a-tag>
        <span v-if="skill.capabilities.length === 0" class="skill-detail__empty">暂无能力标签</span>
      </div>

      <a-divider orientation="left">依赖</a-divider>
      <div class="skill-detail__tags">
        <a-tag v-for="dep in skill.dependencies" :key="dep">{{ dep }}</a-tag>
        <span v-if="skill.dependencies.length === 0" class="skill-detail__empty">无依赖</span>
      </div>

      <a-divider orientation="left">配置</a-divider>
      <div v-if="Object.keys(skill.config).length > 0" class="skill-detail__config">
        <pre>{{ JSON.stringify(skill.config, null, 2) }}</pre>
      </div>
      <div v-else class="skill-detail__empty">暂无配置信息</div>

      <div class="skill-detail__actions">
        <a-button type="primary" :loading="isReloading" @click="handleReload">
          <template #icon><ReloadOutlined /></template>
          重新加载
        </a-button>
        <a-button @click="handleHealthCheck">
          <template #icon><HeartOutlined /></template>
          健康检查
        </a-button>
      </div>
    </template>
  </a-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import { ReloadOutlined, HeartOutlined } from '@ant-design/icons-vue'
import { useSkillsStore } from '@/stores/skills'
import type { ISkillDetail } from '@/api/skills'

defineProps<{
  visible: boolean
  skill: ISkillDetail | null
}>()

defineEmits<{
  close: []
}>()

const skillsStore = useSkillsStore()
const isReloading = ref(false)

async function handleReload(): Promise<void> {
  if (!skillsStore.selectedSkill) return
  isReloading.value = true
  try {
    await skillsStore.reloadSkill(skillsStore.selectedSkill.name)
    message.success('技能已重新加载')
  } catch {
    message.error('重新加载失败')
  } finally {
    isReloading.value = false
  }
}

async function handleHealthCheck(): Promise<void> {
  if (!skillsStore.selectedSkill) return
  const status = await skillsStore.checkHealth(skillsStore.selectedSkill.name)
  if (status === 'healthy') {
    message.success('技能状态正常')
  } else {
    message.error('技能状态异常')
  }
}
</script>

<style scoped>
.skill-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.skill-detail__empty {
  color: #999;
  font-size: 13px;
}

.skill-detail__config {
  background: #f5f5f5;
  border-radius: 6px;
  padding: 12px;
  overflow-x: auto;
}

.skill-detail__config pre {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.skill-detail__actions {
  margin-top: 24px;
  display: flex;
  gap: 12px;
}
</style>
