<template>
  <el-dialog
    v-model="visible"
    title="添加快捷入口"
    width="960px"
    append-to-body
    destroy-on-close
    class="quick-entry-dialog"
    @closed="emit('closed')">
    <p class="qed-desc">
      从下方选择常用菜单页，固定到总览快捷入口（总览最多 {{ maxCount }} 个，已固定 {{ pinnedCount }} 个）
    </p>

    <div v-if="!items.length" class="qed-empty">暂无可添加的菜单页</div>

    <div v-else class="qed-grid">
      <button
        v-for="item in items"
        :key="item.key"
        type="button"
        class="qed-chip"
        :class="{ 'is-pinned': isPinned(item.key), 'is-disabled': isDisabled(item.key) }"
        :title="chipTitle(item)"
        :disabled="isDisabled(item.key)"
        @click="onPick(item.key)">
        <span class="qed-chip-icon">
          <el-icon :size="22"><component :is="item.icon" /></el-icon>
        </span>
        <span class="qed-chip-label">{{ item.label }}</span>
        <span v-if="isPinned(item.key)" class="qed-chip-badge">已固定</span>
      </button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ElMessage } from 'element-plus'
import { MAX_QUICK_ENTRIES, type QuickEntryDef } from '@/config/quickEntries'

const props = defineProps<{
  modelValue: boolean
  items: QuickEntryDef[]
  pinnedKeys?: string[]
  canAdd?: boolean
  maxCount?: number
}>()

const emit = defineEmits<{
  'update:modelValue': [boolean]
  pick: [key: string]
  closed: []
}>()

const maxCount = computed(() => props.maxCount ?? MAX_QUICK_ENTRIES)
const pinnedSet = computed(() => new Set(props.pinnedKeys ?? []))
const pinnedCount = computed(() => pinnedSet.value.size)

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

function isPinned(key: string) {
  return pinnedSet.value.has(key)
}

function isDisabled(key: string) {
  return isPinned(key)
}

function chipTitle(item: QuickEntryDef) {
  if (isPinned(item.key)) return `${item.label}（已在快捷入口中）`
  if (props.canAdd === false) return `${item.label}（快捷入口已满，请先移除再添加）`
  return item.hint ?? item.label
}

function onPick(key: string) {
  if (isPinned(key)) return
  if (props.canAdd === false) {
    ElMessage.warning(`快捷入口已满（最多 ${maxCount.value} 个），请先移除已有项`)
    return
  }
  emit('pick', key)
  visible.value = false
}
</script>

<style scoped>
.qed-desc {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--qed-text-muted, rgba(45, 27, 105, 0.72));
  letter-spacing: 0.4px;
}
.qed-empty {
  padding: 32px 0;
  text-align: center;
  color: var(--qed-text-muted, rgba(45, 27, 105, 0.55));
  font-size: 13px;
}
.qed-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 14px 12px;
}
.qed-chip {
  appearance: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(var(--mg-accent-rgb), 0.35);
  border-radius: 14px;
  padding: 14px 8px 12px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--qed-text, #2d1b69);
  transition: all .22s cubic-bezier(.25, .8, .25, 1);
  position: relative;
}
.qed-chip:hover:not(:disabled) {
  border-color: rgba(var(--mg-accent-rgb), 0.85);
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(var(--mg-primary-rgb), 0.22);
}
.qed-chip.is-pinned,
.qed-chip.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
  background: rgba(45, 27, 105, 0.04);
}
.qed-chip-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(135deg,
    rgba(var(--mg-primary-hover-rgb), 0.55) 0%,
    rgba(var(--mg-primary-rgb), 0.42) 100%);
  border: 1px solid rgba(var(--mg-accent-rgb), 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow:
    0 6px 16px rgba(var(--mg-primary-rgb), 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}
.qed-chip-label {
  width: 100%;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  color: var(--qed-text, #2d1b69);
  letter-spacing: 0.6px;
  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.qed-chip-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(var(--mg-primary-rgb), 0.12);
  color: rgba(45, 27, 105, 0.72);
  letter-spacing: 0;
}
@media (max-width: 960px) {
  .qed-grid { grid-template-columns: repeat(4, 1fr); }
}
</style>

<style>
/* el-dialog teleport 到 body，需非 scoped；兼容 fame-lavender 白底弹窗 */
.quick-entry-dialog.el-dialog,
.quick-entry-dialog .el-dialog {
  --qed-text: #2d1b69;
  --qed-text-muted: rgba(45, 27, 105, 0.72);
  background: #fff !important;
  border: 1px solid rgba(var(--mg-accent-rgb), 0.28);
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(45, 27, 105, 0.18);
}
.quick-entry-dialog .el-dialog__header {
  border-bottom: 1px solid rgba(var(--mg-accent-rgb), 0.14);
  margin-right: 0;
  padding-bottom: 14px;
}
.quick-entry-dialog .el-dialog__title {
  color: #2d1b69 !important;
  font-weight: 600;
  letter-spacing: 1px;
}
.quick-entry-dialog .el-dialog__headerbtn .el-dialog__close {
  color: rgba(45, 27, 105, 0.55);
}
.quick-entry-dialog .el-dialog__body {
  color: #2d1b69;
  padding-top: 14px;
}
</style>
