<template>
  <div v-if="isOpen" class="hotkey-settings-overlay" @click.self="close">
    <div class="hotkey-settings-dialog">
      <div class="dialog-header">
        <h2>⌨️ 设置快捷键</h2>
        <button class="close-button" @click="close">&times;</button>
      </div>

      <div class="dialog-body">
        <div class="form-group">
          <label>修饰键：</label>
          <select v-model="localConfig.modifiers" @change="handleConfigChange">
            <option value="Alt">Alt</option>
            <option value="Control">Control (Ctrl)</option>
            <option value="Shift">Shift</option>
            <option value="Alt,Control">Alt + Control</option>
            <option value="Alt,Shift">Alt + Shift</option>
            <option value="Control,Shift">Control + Shift</option>
          </select>
        </div>

        <div class="form-group">
          <label>主键：</label>
          <select v-model="localConfig.key" @change="handleConfigChange">
            <option v-for="key in availableKeys" :key="key" :value="key">{{ key }}</option>
          </select>
        </div>

        <div class="form-group">
          <label class="checkbox-label">
            <input type="checkbox" v-model="localConfig.isEnabled" @change="handleConfigChange" />
            <span>启用快捷键</span>
          </label>
        </div>

        <div class="preview">
          <strong>当前快捷键：</strong>
          <span class="hotkey-preview">{{ formatHotKey() }}</span>
        </div>
      </div>

      <div class="dialog-footer">
        <button class="btn btn-secondary" @click="resetToDefault">重置默认</button>
        <button class="btn btn-primary" @click="saveConfig">保存</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';

interface HotKeyConfig {
  modifiers: string;
  key: string;
  isEnabled: boolean;
}

const isOpen = ref(false);
const localConfig = reactive<HotKeyConfig>({
  modifiers: 'Alt',
  key: 'X',
  isEnabled: true
});

const availableKeys = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 
                       'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
                       '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];

onMounted(() => {
  window.addEventListener('openHotKeySettings', handleOpenSettings);
});

function handleOpenSettings(event: any) {
  const config = event.detail;
  localConfig.modifiers = config.modifiers;
  localConfig.key = config.key;
  localConfig.isEnabled = config.isEnabled;
  isOpen.value = true;
}

function close() {
  isOpen.value = false;
}

function formatHotKey(): string {
  if (!localConfig.isEnabled) return '未启用';
  const modifiers = localConfig.modifiers.split(',').map(m => m.trim()).join(' + ');
  return `${modifiers} + ${localConfig.key}`;
}

function handleConfigChange() {
  const event = new CustomEvent('hotKeyConfigChanged', {
    detail: {
      modifiers: localConfig.modifiers,
      key: localConfig.key,
      isEnabled: localConfig.isEnabled
    }
  });
  window.dispatchEvent(event);
}

function resetToDefault() {
  localConfig.modifiers = 'Alt';
  localConfig.key = 'X';
  localConfig.isEnabled = true;
  handleConfigChange();
}

function saveConfig() {
  const config = {
    modifiers: localConfig.modifiers,
    key: localConfig.key,
    isEnabled: localConfig.isEnabled
  };

  if ((window as any).chrome?.webview?.postMessage) {
    (window as any).chrome.webview.postMessage(`HOTKEY_CONFIG:${JSON.stringify(config)}`);
  }

  close();
}
</script>

<style scoped>
.hotkey-settings-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.hotkey-settings-dialog {
  background: white;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: 90%;
  max-width: 450px;
  overflow: hidden;
}

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

.dialog-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #111827;
}

.close-button {
  background: none;
  border: none;
  font-size: 28px;
  color: #6b7280;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background 0.2s;
}

.close-button:hover {
  background: #f3f4f6;
  color: #111827;
}

.dialog-body {
  padding: 24px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #374151;
  font-size: 14px;
}

.form-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  background: white;
  cursor: pointer;
  transition: border-color 0.2s;
}

.form-group select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  cursor: pointer;
  accent-color: #3b82f6;
}

.checkbox-label span {
  font-weight: 400;
}

.preview {
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  margin-top: 24px;
}

.preview strong {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hotkey-preview {
  font-size: 16px;
  font-weight: 600;
  color: #3b82f6;
  font-family: 'Consolas', 'Monaco', monospace;
}

.dialog-footer {
  display: flex;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}

.btn {
  flex: 1;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-primary {
  background: #3b82f6;
  color: white;
}

.btn-primary:hover {
  background: #2563eb;
}

.btn-secondary {
  background: white;
  color: #374151;
  border: 1px solid #d1d5db;
}

.btn-secondary:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}
</style>