<script setup lang="ts">
import type { AgentSkillBinding } from '../types';

import { ArrowDown, ArrowUp, Delete, Plus } from '@element-plus/icons-vue';
import { ElButton, ElEmpty, ElTooltip } from 'element-plus';

defineProps<{
  bindings: AgentSkillBinding[];
}>();

const emit = defineEmits<{
  add: [];
  move: [skillId: number | string | undefined, offset: -1 | 1];
  remove: [skillId: number | string | undefined];
}>();

function scopeLabel(scope: unknown) {
  const normalized = String(scope || '').toUpperCase();
  if (normalized === 'ALL' || normalized === 'PUBLIC') return '全部';
  if (normalized === 'DEPARTMENT' || normalized === 'DEPT') return '部门';
  return '个人';
}

function resourceSummary(binding: AgentSkillBinding) {
  const summary = binding.resourceSummary || {};
  const textCount = Math.max(0, Number(summary.textResourceCount) || 0);
  const binaryCount = Math.max(0, Number(summary.binaryExcludedCount) || 0);
  const toolCount = Math.max(0, Number(summary.toolCount) || 0);
  return `${toolCount} 个工具 · ${textCount + binaryCount} 个资源`;
}
</script>

<template>
  <section class="agent-skill-inspector">
    <header class="agent-skill-inspector__header">
      <div>
        <h2>技能</h2>
        <p>已绑定 {{ bindings.length }} / 20</p>
      </div>
      <ElButton
        type="primary"
        :icon="Plus"
        :disabled="bindings.length >= 20"
        @click="emit('add')"
      >
        添加技能
      </ElButton>
    </header>

    <div v-if="bindings.length === 0" class="agent-skill-inspector__empty">
      <ElEmpty description="尚未绑定技能">
        <ElButton type="primary" :icon="Plus" @click="emit('add')">
          添加技能
        </ElButton>
      </ElEmpty>
    </div>

    <div v-else class="agent-skill-inspector__list">
      <article
        v-for="(binding, index) in bindings"
        :key="String(binding.skillId)"
        class="agent-skill-inspector__item"
      >
        <div class="agent-skill-inspector__item-heading">
          <div class="agent-skill-inspector__title-group">
            <strong>
              {{ binding.resourceSummary?.displayName || '技能' }}
            </strong>
            <span class="agent-skill-inspector__scope">
              {{ scopeLabel(binding.resourceSummary?.visibilityScope) }}
            </span>
            <span
              v-if="binding.resourceSummary?.hasUpdate"
              class="agent-skill-inspector__update"
              title="重新发布智能体后生效"
            >
              有更新
            </span>
          </div>
          <div class="agent-skill-inspector__actions">
            <ElTooltip content="上移" placement="top">
              <ElButton
                text
                :icon="ArrowUp"
                :disabled="index === 0"
                :aria-label="`上移 ${binding.resourceSummary?.displayName || '技能'}`"
                @click="emit('move', binding.skillId, -1)"
              />
            </ElTooltip>
            <ElTooltip content="下移" placement="top">
              <ElButton
                text
                :icon="ArrowDown"
                :disabled="index === bindings.length - 1"
                :aria-label="`下移 ${binding.resourceSummary?.displayName || '技能'}`"
                @click="emit('move', binding.skillId, 1)"
              />
            </ElTooltip>
            <ElTooltip content="移除" placement="top">
              <ElButton
                text
                type="danger"
                :icon="Delete"
                :aria-label="`移除 ${binding.resourceSummary?.displayName || '技能'}`"
                @click="emit('remove', binding.skillId)"
              />
            </ElTooltip>
          </div>
        </div>
        <p class="agent-skill-inspector__description">
          {{ binding.resourceSummary?.description || '暂无描述' }}
        </p>
        <div class="agent-skill-inspector__meta">
          <span>{{ resourceSummary(binding) }}</span>
          <span v-if="binding.resourceSummary?.binaryExcludedCount">
            {{ binding.resourceSummary.binaryExcludedCount }}
            个非文本资源不进入运行时
          </span>
        </div>
        <p
          v-if="binding.resourceSummary?.hasUpdate"
          class="agent-skill-inspector__update-note"
        >
          重新发布智能体后生效
        </p>
      </article>
    </div>

    <footer class="agent-skill-inspector__footer">最多绑定 20 个技能</footer>
  </section>
</template>

<style scoped>
.agent-skill-inspector {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.agent-skill-inspector__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid hsl(var(--line-subtle));
}

.agent-skill-inspector__header h2,
.agent-skill-inspector__header p,
.agent-skill-inspector__description,
.agent-skill-inspector__update-note {
  margin: 0;
}

.agent-skill-inspector__header h2 {
  font-size: 18px;
  font-weight: 650;
  line-height: 26px;
  color: hsl(var(--text-strong));
}

.agent-skill-inspector__header p,
.agent-skill-inspector__meta,
.agent-skill-inspector__footer {
  font-size: 12px;
  color: hsl(var(--text-muted));
}

.agent-skill-inspector__header p {
  margin-top: var(--space-1);
}

.agent-skill-inspector__list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
}

.agent-skill-inspector__item {
  padding: var(--space-3);
  background: hsl(var(--surface-subtle));
  border: 1px solid transparent;
  border-radius: var(--radius-toolbar);
  transition:
    background-color var(--motion-duration-base) var(--motion-ease-standard),
    border-color var(--motion-duration-base) var(--motion-ease-standard);
}

.agent-skill-inspector__item:hover,
.agent-skill-inspector__item:focus-within {
  background: hsl(var(--surface-panel));
  border-color: hsl(var(--line-subtle));
}

.agent-skill-inspector__item-heading,
.agent-skill-inspector__title-group,
.agent-skill-inspector__actions,
.agent-skill-inspector__meta {
  display: flex;
  align-items: center;
}

.agent-skill-inspector__item-heading {
  gap: var(--space-2);
  justify-content: space-between;
}

.agent-skill-inspector__title-group {
  min-width: 0;
  gap: var(--space-2);
}

.agent-skill-inspector__title-group strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  color: hsl(var(--text-strong));
  white-space: nowrap;
}

.agent-skill-inspector__scope,
.agent-skill-inspector__update {
  flex: 0 0 auto;
  padding: 1px 7px;
  font-size: 11px;
  line-height: 18px;
  border-radius: var(--radius-pill);
}

.agent-skill-inspector__scope {
  color: hsl(var(--nav-item-active-foreground));
  background: hsl(var(--nav-item-active));
}

.agent-skill-inspector__update {
  color: var(--el-color-warning);
  background: var(--el-color-warning-light-9);
}

.agent-skill-inspector__actions {
  flex: 0 0 auto;
}

.agent-skill-inspector__actions :deep(.el-button) {
  width: 32px;
  height: 32px;
  margin-left: 0;
}

.agent-skill-inspector__description {
  display: -webkit-box;
  margin-top: var(--space-2);
  overflow: hidden;
  -webkit-line-clamp: 2;
  font-size: 13px;
  line-height: 20px;
  color: var(--el-text-color-regular);
  -webkit-box-orient: vertical;
}

.agent-skill-inspector__meta {
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.agent-skill-inspector__update-note {
  margin-top: var(--space-2);
  font-size: 12px;
  color: var(--el-color-warning);
}

.agent-skill-inspector__empty {
  display: grid;
  flex: 1;
  min-height: 320px;
  place-items: center;
}

.agent-skill-inspector__footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid hsl(var(--line-subtle));
}
</style>
