<script setup>
import { ref, onMounted, computed } from 'vue'
import { NModal, NIcon, NSpin } from 'naive-ui'
import { CloseOutline } from '@vicons/ionicons5'
import { getAgentTemplates } from '../../api/agentTemplate'
import NodeThumbnail from './NodeThumbnail.vue'

const props = defineProps({
  show: { type: Boolean, default: false },
})
const emit = defineEmits(['update:show', 'select'])

const loading = ref(false)
const templates = ref([])

const visible = computed({
  get: () => props.show,
  set: v => emit('update:show', v),
})

onMounted(fetchTemplates)

async function fetchTemplates() {
  loading.value = true
  try {
    const { data } = await getAgentTemplates(true)
    templates.value = data || []
  } catch (e) {
    /* 全局拦截器已处理 */
  } finally {
    loading.value = false
  }
}

function onSelect(tpl) {
  emit('select', tpl)
  visible.value = false
}
</script>

<template>
  <n-modal
    :show="visible"
    @update:show="visible = $event"
    preset="card"
    style="max-width: 720px; width: 90vw"
    :bordered="false"
    :closable="false"
    :mask-closable="false"
  >
    <template #header>
      <div class="picker-header">
        <span class="picker-title">选择创建模式</span>
        <button class="icon-btn" @click="visible = false">
          <n-icon size="18"><CloseOutline /></n-icon>
        </button>
      </div>
    </template>

    <div class="picker-body" v-if="loading">
      <n-spin size="medium" />
    </div>

    <div class="picker-body" v-else-if="templates.length === 0">
      <div class="empty-state">暂无可用模板</div>
    </div>

    <div class="picker-grid" v-else>
      <button
        v-for="tpl in templates"
        :key="tpl.id"
        class="template-card"
        :class="{ disabled: !tpl.enabled }"
        :disabled="!tpl.enabled"
        @click="onSelect(tpl)"
      >
        <!-- 节点缩略图（保留位置关系 + 连线） -->
        <div class="card-thumbnail">
          <NodeThumbnail :graph-data="tpl.graphData" :height="72" />
        </div>

        <!-- 模板信息 -->
        <div class="card-info">
          <div class="card-name">
            <span v-if="tpl.icon" class="card-icon">{{ tpl.icon }}</span>
            <span>{{ tpl.name }}</span>
          </div>
          <p class="card-desc" v-if="tpl.description">{{ tpl.description }}</p>
        </div>
      </button>
    </div>
  </n-modal>
</template>

<style scoped>
.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
}
.picker-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
}
.icon-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
  transition: all var(--transition-fast);
}
.icon-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

.picker-body {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.empty-state {
  color: var(--text-muted);
  font-size: 14px;
}

.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  padding: 4px 0 8px;
}

.template-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all var(--transition-normal);
  text-align: left;
  font-family: inherit;
  /* 接近正方形：min-height 180px */
  min-height: 180px;
}
.template-card:hover:not(.disabled) {
  border-color: var(--border-color-hover);
  background: var(--bg-card-hover);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.template-card.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 缩略图：与 WorkflowList 完全一致的风格 */
.card-thumbnail {
  padding: 10px;
  background: rgba(15, 23, 42, 0.4);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(56, 189, 248, 0.08);
  min-height: 56px;
  display: flex;
  align-items: center;
}
.card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.card-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.card-icon {
  font-size: 16px;
}
.card-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
