<template>
  <PermissionGuard widget-id="CadToolbar">
    <el-card shadow="never">
      <template #header><span>CAD 工具栏（cad.tool.run）</span></template>
      <el-tabs v-model="active">
        <el-tab-pane v-for="g in groups" :key="g.key" :name="g.key" :label="g.label">
          <el-row :gutter="12">
            <el-col v-for="t in g.tools" :key="t.id" :span="6" style="margin-bottom: 12px">
              <el-card shadow="hover" class="tool-card" @click="run(t)">
                <el-icon size="24" class="tool-icon"><Tools /></el-icon>
                <div class="tool-name">{{ t.label }}</div>
                <div class="tool-desc">{{ t.desc }}</div>
              </el-card>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </PermissionGuard>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Tools } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import PermissionGuard from '@/components/PermissionGuard.vue'

interface CadTool { id: string; label: string; desc: string }

const active = ref('Scene')

const groups: Array<{ key: string; label: string; tools: CadTool[] }> = [
  {
    key: 'Scene', label: '场景 (Scene)',
    tools: [
      { id: 'grid', label: '生成网格', desc: '按间距生成站点网格' },
      { id: 'mirror', label: '镜像', desc: '镜像复制选中对象' },
      { id: 'align', label: '对齐', desc: '横向/纵向对齐多选' },
      { id: 'distribute', label: '等距分布', desc: '在两端之间均匀分布站点' }
    ]
  },
  {
    key: 'Car', label: '车辆 (Car)',
    tools: [
      { id: 'spawn', label: '批量创建', desc: '从模板批量创建车辆' },
      { id: 'reset', label: '回原点', desc: '将选中车辆送回原点' }
    ]
  },
  {
    key: 'Project', label: '工程 (Project)',
    tools: [
      { id: 'validate', label: '工程校验', desc: '检查轨道连通性 / 重复站点' },
      { id: 'snapshot', label: '快照', desc: '输出 problems/simplelite-scene-*.json' }
    ]
  }
]

function run(t: CadTool) {
  ElMessage.info(`占位：执行 CAD 工具 [${t.id}] ${t.label}`)
}
</script>

<style scoped>
.tool-card { cursor: pointer; text-align: center; padding: 8px; }
.tool-name { font-weight: 600; margin-top: 6px; }
.tool-desc { color: var(--mg-text-dim); font-size: 12px; margin-top: 4px; }
.tool-icon {
  color: var(--mg-accent);
  filter: drop-shadow(0 0 8px rgba(var(--mg-accent-rgb), 0.55));
}
.tool-card:hover .tool-icon {
  color: var(--mg-text-light);
  filter: drop-shadow(0 0 14px rgba(var(--mg-primary-hover-rgb), 0.8));
}
</style>
