<template>
  <div class="edit-tool-rail">
    <el-scrollbar class="rail-scroll">
      <div v-for="(group, gi) in groups" :key="group.id" class="rail-group">
        <div class="rail-group-title">
          <span class="rail-group-bar" />
          <span class="rail-group-text">{{ group.title }}</span>
          <span class="rail-group-bar" />
        </div>
        <div class="rail-group-list">
          <el-tooltip
            v-for="t in group.tools"
            :key="t.id"
            :content="t.tip ?? t.label"
            placement="right"
            :show-after="280"
          >
            <button
              :class="['rail-btn', { 'rail-btn--active': isActive(t.id) }]"
              @click="onClick(t.id)"
            >
              <span class="rail-btn-glyph">{{ t.glyph }}</span>
              <span class="rail-btn-label">{{ t.label }}</span>
            </button>
          </el-tooltip>
        </div>
        <div v-if="gi < groups.length - 1" class="rail-divider" />
      </div>

      <div class="rail-group rail-group-ai">
        <div class="rail-group-title">
          <span class="rail-group-bar" />
          <span class="rail-group-text">AI</span>
          <span class="rail-group-bar" />
        </div>
        <button class="rail-btn rail-btn--ai" @click="emit('open-ai')">
          <span class="rail-btn-glyph">✦</span>
          <span class="rail-btn-label">AI 生图</span>
        </button>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import type { EditToolId } from '@/composables/useEditTool'

interface ToolDef { id: EditToolId; label: string; glyph: string; tip?: string }
interface ToolGroup { id: string; title: string; tools: ToolDef[] }

const props = defineProps<{
  activeTool: EditToolId
}>()

const emit = defineEmits<{
  (e: 'select-tool', id: EditToolId): void
  (e: 'open-ai'): void
}>()

const groups: ToolGroup[] = [
  {
    id: 'select',
    title: '选择',
    tools: [
      { id: 'select.single', label: '单选', glyph: '⌖', tip: '点击拾取单个对象' },
      { id: 'select.rect', label: '矩形框选', glyph: '▱' },
      { id: 'select.lasso', label: '套索圈选', glyph: '◯' },
      { id: 'select.byType.site', label: '仅站点', glyph: '·' },
      { id: 'select.byType.polyline', label: '仅折线', glyph: '╱', tip: '仅 UITrack（直线/折线）' },
      { id: 'select.byType.bezier', label: '仅贝塞尔', glyph: '∽', tip: '仅 UIBezierTrack' },
      { id: 'select.byType.arc', label: '仅弧形', glyph: '◜', tip: '仅 UICircularArcTrack' },
      { id: 'select.byType.decor', label: '仅装饰', glyph: '★' },
      { id: 'select.byType.currentLayer', label: '当前图层', glyph: '▤', tip: '保留当前图层对象' },
      { id: 'select.invert', label: '反选', glyph: '⇄' },
      { id: 'select.clear', label: '清空选中', glyph: '⊘' }
    ]
  },
  {
    id: 'draw',
    title: '绘制',
    tools: [
      { id: 'draw.site', label: '添加站点', glyph: '＋', tip: '点击工具后在画布单击放置' },
      { id: 'draw.sites.continuous', label: '连续站点', glyph: '⁂', tip: '切换工具或 Esc 退出' },
      { id: 'draw.track.polyline', label: '折线路径', glyph: '─', tip: '依序点击两端站点' },
      { id: 'draw.track.bezier', label: '贝塞尔路径', glyph: '∼', tip: '点两端站点 → 弹框输入中间控制点个数 → 连续点选每个控制点' },
      { id: 'draw.track.arc', label: '弧形路径', glyph: '◜', tip: '点两端站点 → 输入半径（≥ |AB|/2，等于即半圆）' },
      { id: 'draw.decor.line', label: '装饰线段', glyph: '╱' },
      { id: 'draw.decor.rect', label: '装饰矩形', glyph: '▭' },
      { id: 'draw.decor.circle', label: '装饰圆', glyph: '◯' },
      { id: 'draw.decor.text', label: '装饰文本', glyph: 'T' },
      { id: 'draw.image', label: '插入图片', glyph: '🖼' },
      { id: 'draw.model', label: '插入模型', glyph: '◎', tip: 'CycleGUI 3D 模型 (obj/glb/gltf)' }
    ]
  },
  {
    id: 'transform',
    title: '变换',
    tools: [
      { id: 'transform.move', label: '移动', glyph: '✥' },
      { id: 'transform.rotate', label: '旋转', glyph: '⟳' },
      { id: 'transform.scale', label: '缩放', glyph: '⤡' },
      { id: 'transform.copy', label: '复制', glyph: '📋', tip: 'Ctrl+C' },
      { id: 'transform.paste', label: '粘贴', glyph: '📥', tip: 'Ctrl+V' },
      { id: 'transform.delete', label: '删除', glyph: '🗑', tip: 'Delete' },
      { id: 'transform.copyFields', label: '复制字段', glyph: '⇉', tip: '多选时第 1 个为源，其余为目标' }
    ]
  },
  {
    id: 'align',
    title: '对齐',
    tools: [
      { id: 'align.left', label: '左对齐', glyph: '⫷' },
      { id: 'align.right', label: '右对齐', glyph: '⫸' },
      { id: 'align.top', label: '上对齐', glyph: '⫵' },
      { id: 'align.bottom', label: '下对齐', glyph: '⫶' },
      { id: 'align.centerH', label: '水平居中', glyph: '⇔' },
      { id: 'align.centerV', label: '垂直居中', glyph: '⇕' },
      { id: 'align.center', label: '整体居中', glyph: '⊕' },
      { id: 'align.distributeH', label: '水平等距', glyph: '⇿' },
      { id: 'align.distributeV', label: '垂直等距', glyph: '⇳' },
      { id: 'align.toFirst', label: '对齐到首', glyph: '⏮' },
      { id: 'align.toLast', label: '对齐到尾', glyph: '⏭' }
    ]
  },
  {
    id: 'batch',
    title: '批量生成',
    tools: [
      { id: 'batch.linearH', label: '横向间距', glyph: '⇢' },
      { id: 'batch.linearV', label: '纵向间距', glyph: '⇣' },
      { id: 'batch.matrix', label: '矩阵生成', glyph: '#' },
      { id: 'batch.alongPath', label: '沿路径采样', glyph: '⤳', tip: '先选 1+ 条路径，再点本工具' },
      { id: 'batch.circular', label: '环形阵列', glyph: '◌' }
    ]
  },
  {
    id: 'show',
    title: '显示',
    tools: [
      { id: 'show.controlPoints', label: '控制点', glyph: '⊙' },
      { id: 'show.controlHandles', label: '控制柄', glyph: '⊝' }
    ]
  }
]

function isActive(id: EditToolId) { return id === props.activeTool }
function onClick(id: EditToolId) { emit('select-tool', id) }
</script>

<style scoped>
.edit-tool-rail {
  height: 100%;
  width: 170px;
  background: linear-gradient(180deg, var(--me-chrome-1) 0%, var(--me-chrome-2) 100%);
  border-right: 1px solid var(--me-border);
  padding: 4px 0 12px;
  backdrop-filter: blur(10px);
  display: flex; flex-direction: column;
  box-shadow: inset -1px 0 0 var(--me-card-border, transparent);
}
.rail-scroll { height: 100%; }
.rail-group {
  display: flex; flex-direction: column;
  padding: 4px 8px 2px;
}
.rail-group-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--me-text-muted);
  text-transform: uppercase;
  margin: 4px 0 6px;
  font-weight: 600;
}
.rail-group-bar { flex: 1; height: 1px; background: rgba(var(--mg-primary-rgb), 0.18); }
.rail-group-list {
  display: flex; flex-direction: column;
  gap: 2px;
}
.rail-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--me-border) 50%, transparent 100%);
  margin: 6px 0 2px;
}
.rail-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  width: 100%;
  min-height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--me-surface);
  color: var(--me-text);
  display: flex; align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease, transform .12s ease;
}
.rail-btn:hover {
  background: var(--me-hover);
  color: var(--mg-primary);
}
.rail-btn:active {
  transform: scale(0.985);
}
.rail-btn.rail-btn--active {
  background: var(--mg-primary);
  color: #fff;
  box-shadow: 0 3px 10px var(--me-active-glow), inset 0 0 0 1px rgba(255,255,255,0.18);
}
.rail-btn-glyph {
  width: 20px;
  display: inline-flex; justify-content: center; align-items: center;
  font-size: 15px;
  line-height: 1;
  flex: none;
}
.rail-btn-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rail-group-ai {
  margin-top: 14px;
  padding-bottom: 10px;
  position: relative;
}
.rail-group-ai::before {
  content: '';
  position: absolute;
  left: 8px; right: 8px; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--mg-accent-rgb), 0.4) 50%, transparent 100%);
}
.rail-btn--ai {
  background: var(--mg-primary);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 10px var(--me-active-glow), inset 0 0 0 1px rgba(255,255,255,0.20);
}
.rail-btn--ai:hover {
  background: var(--mg-primary-hover);
  color: #fff;
  box-shadow: 0 4px 14px var(--me-active-glow), inset 0 0 0 1px rgba(255,255,255,0.30);
}
.rail-btn--ai .rail-btn-glyph {
  font-size: 16px;
  text-shadow: 0 0 8px rgba(var(--mg-accent-rgb), 0.55);
}
</style>
