<script setup lang="ts">
import { computed, ref } from 'vue';
import { useRouteStore } from '@/store/modules/route';
import { useWorkbenchStore } from '@/store/modules/workbench';
import { useRouterPush } from '@/hooks/common/router';
import WorkbenchModuleCard from './workbench-module-card.vue';
import WorkbenchShortcutPicker from './workbench-shortcut-picker.vue';

interface Props {
  editing?: boolean;
  collapsed?: boolean;
}

withDefaults(defineProps<Props>(), {
  editing: false,
  collapsed: false
});

defineEmits<{
  (e: 'hide'): void;
  (e: 'toggle-collapse'): void;
}>();

const routeStore = useRouteStore();
const workbench = useWorkbenchStore();
const { routerPushByKey } = useRouterPush();

interface FlatMenu {
  key: string;
  label: string;
  icon?: string;
}

function flatten(menus: typeof routeStore.menus): FlatMenu[] {
  const out: FlatMenu[] = [];
  function walk(list: typeof menus) {
    list.forEach((m: any) => {
      if (m.children && m.children.length) {
        walk(m.children);
      } else {
        out.push({
          key: m.key,
          label: m.label as string,
          icon: m.i18nKey || m.icon || ''
        });
      }
    });
  }
  walk(menus);
  return out;
}

const flatMenus = computed(() => flatten(routeStore.menus));
const selectedKeys = computed(() => workbench.layout.settings.shortcut?.menuKeys ?? []);
const selected = computed(() =>
  selectedKeys.value.map(k => flatMenus.value.find(m => m.key === k)).filter((x): x is FlatMenu => Boolean(x))
);

const pickerOpen = ref(false);

function openPicker() {
  pickerOpen.value = true;
}

function handleClick(key: string) {
  routerPushByKey(key as any);
}

function handleConfirm(keys: string[]) {
  workbench.updateModuleSettings('shortcut', { menuKeys: keys });
}
</script>

<template>
  <WorkbenchModuleCard
    title="快捷入口"
    icon="mdi:rocket-launch-outline"
    :badge-count="selected.length || undefined"
    :editing="editing"
    :collapsed="collapsed"
    has-settings
    @hide="$emit('hide')"
    @toggle-collapse="$emit('toggle-collapse')"
    @open-settings="openPicker"
  >
    <div v-if="selected.length === 0" class="shortcut-empty">
      <ElEmpty description="还未选择菜单" :image-size="60">
        <ElButton type="primary" size="small" @click="openPicker">+ 选择菜单</ElButton>
      </ElEmpty>
    </div>
    <div v-else class="shortcut-grid">
      <button v-for="item in selected" :key="item.key" class="shortcut-item" @click="handleClick(item.key)">
        <SvgIcon icon="mdi:link-variant" />
        <span>{{ item.label }}</span>
      </button>
    </div>

    <WorkbenchShortcutPicker v-model="pickerOpen" :initial-selected="selectedKeys" @confirm="handleConfirm" />
  </WorkbenchModuleCard>
</template>

<style scoped>
.shortcut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}

.shortcut-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border: 1px solid var(--el-border-color-lighter);
  background: var(--el-fill-color-lighter);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--el-text-color-primary);
  transition: all 120ms;
}

.shortcut-item:hover {
  border-color: var(--el-color-primary);
  color: var(--el-color-primary);
}

.shortcut-empty {
  padding: 20px 0;
}
</style>
