<template>
  <div class="quick-keys" @contextmenu.prevent>
    <button class="quick-key ctrl-c" @click="send('ctrl_c')" @touchend.prevent="send('ctrl_c')">C-c</button>
    <button class="quick-key ctrl-z" @click="send('ctrl_z')" @touchend.prevent="send('ctrl_z')">C-z</button>
    <button class="quick-key ctrl-d" @click="send('ctrl_d')" @touchend.prevent="send('ctrl_d')">C-d</button>
    <button class="quick-key ctrl-l" @click="send('ctrl_l')" @touchend.prevent="send('ctrl_l')">C-l</button>
    <div class="sep"></div>
    <button class="quick-key" @click="send('esc')" @touchend.prevent="send('esc')">ESC</button>
    <button class="quick-key" :class="{ active: shiftPending }" @click="send('shift')" @touchend.prevent="send('shift')">SHF</button>
    <button class="quick-key" :class="{ active: ctrlPending }" @click="send('ctrl')" @touchend.prevent="send('ctrl')">CTL</button>
    <button class="quick-key" @click="send('tab')" @touchend.prevent="send('tab')">TAB</button>
    <div class="sep"></div>
    <button class="quick-key" @click="send('up')" @touchend.prevent="send('up')">↑</button>
    <button class="quick-key" @click="send('down')" @touchend.prevent="send('down')">↓</button>
    <button class="quick-key" @click="send('left')" @touchend.prevent="send('left')">←</button>
    <button class="quick-key" @click="send('right')" @touchend.prevent="send('right')">→</button>
    <div class="sep"></div>
    <button class="quick-key" @click="send('slash')" @touchend.prevent="send('slash')">/</button>
    <button class="quick-key" @click="send('minus')" @touchend.prevent="send('minus')">-</button>
    <button class="quick-key" @click="send('dot')" @touchend.prevent="send('dot')">.</button>
    <button class="quick-key" @click="send('hash')" @touchend.prevent="send('hash')">#</button>
    <button class="quick-key" @click="send('amp')" @touchend.prevent="send('amp')">&amp;</button>
    <button class="quick-key enter-key" @click="send('enter')" @touchend.prevent="send('enter')">↵</button>
  </div>
</template>

<script setup>
import { useQuickKeys } from "../composables/useQuickKeys";
const { shiftPending, ctrlPending, sendQuickKey } = useQuickKeys();
const send = sendQuickKey;
</script>

<style scoped>
.quick-keys {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  gap: 3px;
  padding: 4px 6px;
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  scrollbar-width: none;
  flex-shrink: 0;
}
.quick-keys::-webkit-scrollbar { display: none; }

.sep {
  width: 1px;
  background: var(--border);
  margin: 4px 2px;
  flex-shrink: 0;
  align-self: stretch;
}

.quick-key {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 40px;
  height: 32px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-2);
  font-size: 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.1s, color 0.1s;
}
.quick-key:hover, .quick-key:active { background: var(--bg-3); color: var(--text-1); }
.quick-key.active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

.quick-key.ctrl-c { color: var(--danger); border-color: rgba(248, 81, 73, 0.35); }
.quick-key.ctrl-c:hover { background: rgba(248, 81, 73, 0.12); }
.quick-key.ctrl-z { color: #e3b341; border-color: rgba(210, 153, 34, 0.35); }
.quick-key.ctrl-z:hover { background: rgba(210, 153, 34, 0.1); }
.quick-key.ctrl-d { color: var(--accent-blue); border-color: var(--border-blue); }
.quick-key.ctrl-d:hover { background: rgba(88, 166, 255, 0.1); }

.quick-key.enter-key {
  min-width: 48px;
  border-color: var(--border-blue);
  background: rgba(88, 166, 255, 0.08);
  color: var(--accent-blue);
}
.quick-key.enter-key:hover { background: rgba(88, 166, 255, 0.18); }

@media (max-width: 768px) {
  .quick-keys { padding: 5px 6px; gap: 4px; }
  .quick-key { min-width: 44px; height: 38px; font-size: 12px; border-radius: 6px; }
  .quick-key.enter-key { min-width: 52px; }
}
</style>
