<script setup lang="ts">
import { computed } from 'vue';
import type { WorkbenchModuleCategory, WorkbenchModuleMeta } from '../composables/use-workbench-modules';

interface Props {
  modelValue: boolean;
  hiddenMetas: WorkbenchModuleMeta[];
}
const props = defineProps<Props>();
const emit = defineEmits<{
  (e: 'update:modelValue', v: boolean): void;
  (e: 'add-module', key: WorkbenchModuleMeta['key']): void;
}>();

// 模块库展示分三段：个人（含动作 / 快照）/ 管理 / 工具
type LibraryGroupKey = 'personal' | 'manager' | 'tool';

const groupLabel: Record<LibraryGroupKey, string> = {
  personal: '个人',
  manager: '管理',
  tool: '工具'
};

const groupOf: Record<WorkbenchModuleCategory, LibraryGroupKey> = {
  personal: 'personal',
  action: 'personal',
  snapshot: 'personal',
  manager: 'manager',
  tool: 'tool'
};

const groups = computed<Array<{ key: LibraryGroupKey; label: string; items: WorkbenchModuleMeta[] }>>(() => {
  const buckets: Record<LibraryGroupKey, WorkbenchModuleMeta[]> = {
    personal: [],
    manager: [],
    tool: []
  };
  props.hiddenMetas.forEach(meta => {
    buckets[groupOf[meta.category]].push(meta);
  });
  return (['personal', 'manager', 'tool'] as LibraryGroupKey[])
    .filter(k => buckets[k].length > 0)
    .map(k => ({ key: k, label: groupLabel[k], items: buckets[k] }));
});
</script>

<template>
  <ElDrawer
    :model-value="modelValue"
    direction="rtl"
    size="320px"
    title="模块库"
    @update:model-value="emit('update:modelValue', $event)"
  >
    <template #default>
      <p class="hint">点击下方模块加入工作台（落到网格底部，可在编辑态拖动调整）。</p>
      <div v-if="hiddenMetas.length === 0" class="empty">所有模块都已显示</div>
      <div v-else class="library">
        <section v-for="group in groups" :key="group.key" class="library-group">
          <h4 class="library-group__title">{{ group.label }}</h4>
          <ul class="library-group__list">
            <li v-for="meta in group.items" :key="meta.key" class="library-item" @click="emit('add-module', meta.key)">
              <SvgIcon :icon="meta.icon" />
              <span class="library-item__name">{{ meta.displayName }}</span>
            </li>
          </ul>
        </section>
      </div>
    </template>
  </ElDrawer>
</template>

<style scoped>
.hint {
  color: var(--el-text-color-secondary);
  font-size: 13px;
  margin: 0 0 12px;
}
.library {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.library-group__title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--el-text-color-secondary);
  letter-spacing: 0.04em;
}
.library-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.library-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--el-fill-color-lighter);
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms;
}
.library-item:hover {
  background: var(--el-color-primary-light-9);
}
.library-item__name {
  flex: 1;
  font-weight: 500;
}
.empty {
  color: var(--el-text-color-placeholder);
  text-align: center;
  padding: 40px 0;
}
</style>
