<template>
  <Teleport to="body">
    <Transition name="modal">
      <div v-if="visible" class="modal-overlay" @click.self="close">
        <div class="shortcuts-modal">
          <!-- 头部 -->
          <div class="modal-header">
            <div class="header-title">
              <Keyboard :size="22" />
              <h3>键盘快捷键</h3>
            </div>
            <button class="close-btn" @click="close">
              <X :size="20" />
            </button>
          </div>

          <!-- 快捷键列表 -->
          <div class="shortcuts-content">
            <div
                v-for="group in shortcutGroups"
                :key="group.title"
                class="shortcut-group"
            >
              <h4 class="group-title">{{ group.title }}</h4>
              <div class="shortcuts-list">
                <div
                    v-for="shortcut in group.shortcuts"
                    :key="shortcut.description"
                    class="shortcut-item"
                >
                  <span class="shortcut-desc">{{ shortcut.description }}</span>
                  <div class="shortcut-keys">
                    <kbd v-for="key in shortcut.keys" :key="key">{{ key }}</kbd>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 底部 -->
          <div class="modal-footer">
            <span class="tip">按 <kbd>ESC</kbd> 或 <kbd>?</kbd> 关闭此窗口</span>
          </div>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useSettingsStore } from '@/stores/settings'
import { Keyboard, X } from '@/components/icons'

const settingsStore = useSettingsStore()
const { showShortcutsModal: visible } = storeToRefs(settingsStore)

const shortcutGroups = computed(() => [
  {
    title: '通用',
    shortcuts: [
      { description: '新建对话', keys: ['⌘', 'N'] },
      { description: '搜索对话', keys: ['⌘', 'K'] },
      { description: '切换侧边栏', keys: ['⌘', 'B'] },
      { description: '切换主题', keys: ['⌘', '⇧', 'D'] },
      { description: '显示快捷键', keys: ['⌘', '?'] },
    ],
  },
  {
    title: '对话',
    shortcuts: [
      { description: '发送消息', keys: ['⌘', '↵'] },
      { description: '换行', keys: ['⇧', '↵'] },
      { description: '聚焦输入框', keys: ['⌘', '/'] },
      { description: '停止生成', keys: ['ESC'] },
    ],
  },
  {
    title: '消息操作',
    shortcuts: [
      { description: '复制消息', keys: ['⌘', 'C'] },
      { description: '重新生成', keys: ['⌘', 'R'] },
    ],
  },
])

function close() {
  settingsStore.closeShortcutsModal()
}
</script>

<style lang="scss" scoped>
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}

.shortcuts-modal {
  width: 480px;
  max-height: 80vh;
  background: white;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .dark & {
    background: #1e1e2e;
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e2e8f0;

  .dark & {
    border-bottom-color: #2d2d3d;
  }
}

.header-title {
  display: flex;
  align-items: center;
  gap: 12px;

  svg {
    color: #3b82f6;
  }

  h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;

    .dark & {
      color: #f3f4f6;
    }
  }
}

.close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: #f3f4f6;
    color: #1f2937;

    .dark & {
      background: #374151;
      color: #f3f4f6;
    }
  }
}

.shortcuts-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}

.shortcut-group {
  &:not(:last-child) {
    margin-bottom: 24px;
  }
}

.group-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.shortcuts-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shortcut-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 10px;
  background: #f8fafc;

  .dark & {
    background: #2d2d3d;
  }
}

.shortcut-desc {
  font-size: 14px;
  color: #374151;

  .dark & {
    color: #e5e7eb;
  }
}

.shortcut-keys {
  display: flex;
  align-items: center;
  gap: 4px;

  kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

    .dark & {
      color: #e5e7eb;
      background: #1e1e2e;
      border-color: #4b5563;
    }
  }
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid #e2e8f0;
  text-align: center;

  .dark & {
    border-top-color: #2d2d3d;
  }
}

.tip {
  font-size: 13px;
  color: #9ca3af;

  kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 6px;
    margin: 0 2px;
    font-size: 11px;
    color: #6b7280;
    background: #f3f4f6;
    border-radius: 4px;

    .dark & {
      background: #374151;
      color: #9ca3af;
    }
  }
}

// 过渡动画
.modal-enter-active,
.modal-leave-active {
  transition: all 0.25s ease;

  .shortcuts-modal {
    transition: all 0.25s ease;
  }
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;

  .shortcuts-modal {
    transform: scale(0.9);
    opacity: 0;
  }
}
</style>